As a designer, you are likely surrounded by talent of all shapes and sizes, be it branding, marketing, or development. Over the course of your career, however, you may end up needing some of these other talents so as to provide a well-rounded deliverable.
Perhaps the most complimentary skillset to UX design is that of front-end development. If you are just entering the rewarding world of front-end development, you are in luck. You have made your choice to learn at a time when things could not be any more exciting.
Front-end development has come a long way in the last twenty years – pigs have actually learned to fly on the web. Soon enough, you will plummet down the rabbit hole of JavaScript wizardry and framework wars, but first, you will want to get your bearings and settle into what may become your new passion, as it has for so many designers that have come before you.
Like anything worth doing, front-end development is not easy, so if you were looking for an easy supplement to your career or skill set, I suggest you look elsewhere. If you are up for the challenge, however, let us get you started!
Some of these topics may be familiar to designers. Indeed several concepts overlap between UX design and front-end development. As such, you will likely notice the degree to which the two fields can work in harmony, as one.
1. Set up Your Work Environment
You can think of your work environment as an extension of your office. It is like a virtual desk that holds the assortment of tools which make it possible to get your code on.
Here are the absolute necessities for any newcomer.
Code Editor: Code editors, like Sublime Text, Brackets, and Notepad++ are akin to plain old paper notebooks. You can type anything you want, but you are going to have to make sense if you want something to come of it.
In theory, you could use a regular text editor, such as notepad (Windows) or TextEdit (OS X), but you will miss out on the features that make advanced editors so great. Features like code coloring, autocompletion and live previews can make coding easier and more interactive.
Framework: Frameworks are collections of code, components and styles that make it comparatively quick and easy to produce web apps. There are CSS frameworks like Bootstrap and Foundation, and there are JavaScript frameworks like AngularJS and React.
CSS frameworks are essentially libraries of predefined styles and web components such as navigation bars, footers, cards, typographic elements and grids. JavaScript frameworks are similar, except they cater to JavaScript-specific needs. More on CSS and JavaScript later.
ResetCSS: ResetCSS like the one provided by Eric Meyer, HTML5 Doctor and Yahoo! is a file containing a set of standardized CSS styles that are considered to be best practice and gives your page a consistent baseline for look and feel. Styles typically modified by ResetCSS are related to elements like line height, font and heading size, border spacing, list style, and the like.
CMS: Content Management Systems are suites of varying complexity that make it easy for webmasters to upload, modify, and manage the content / assets on their site. A CMS will make your life infinitely simpler as you grow the content on your site.
Popular CMS’s include: WordPress, Joomla, Drupal, Magento, and Shopify. The latter two are CMSs that are ideal for e-commerce sites. In fact you can read more about them in our usability comparison of Magento and Shopify.
FTP Client: File Transfer Protocols (FTPs) allow you to transfer files between your computer and your web server. As you explore the world of web development, you will undoubtedly need to transfer a whole host of files to the server, starting with your HTML, CSS, and JS files and ending with your pictures, music, or anything else you wish to provide visitors.
Some popular FTP clients are: CyberDuck, Filezilla, and Transmit.
Browser: This may seem like a duh moment, but your choice in browser can determine a lot about your finished product. For example, Mozilla has built an excellent development suite into their Firefox Developer Edition (FDE) browser.
Chrome, Firefox, and Edge come with similar (albeit less robust) tools baked in. Developer tools allow you to inspect code used on other sites, debug your own code, edit styles, test responsivity, and more.
2. Learn About These Theories
As a designer, you are likely an expert on the following three theories. This is more of a “refresher” section for those of you who may need some brushing up, or for those of you who may be new to the field.
Responsive Design: One of the hottest topics in web design and development is responsive web design (RWD), which refers to the practice of setting screen size “waypoints” that tell the page to default to a particular layout – one that is better suited for a given size. RWD rose to prominence in the wake of stagnating web design, rooted in fixed page layouts that did not respond to changes in browser width. The new practice allows for usability optimization beyond what can be achieved with a fixed design model.
Mobile First: Mobile first is a principle of modern web design and is closely related to responsive web design. “Mobile first” suggests that you ought to first design your page’s mobile layout, then design each subsequently larger format.
The theory is, by following a mobile first approach, you can make the experience for mobile users (who account for a very large number of total users) a little more friendly. Traditionally, websites would scale down on features and content as your screen size becomes smaller. However, as the number of mobile users has grown vastly over the years, this has become a major concern for designers around the world.
Read more about mobile first here.
MVP: Although they are more relevant in B2B than they are in personal projects, MVP (minimum viable product) builds are essential terminology. The idea behind the MVP is that you build only the features that are required, while avoiding features that could be saved for a second release.
As someone new to web development, I would recommend that you implement this strategy while you learn. By building the most barebones version of what you want, you will have a chance to explore core concepts and strategies without the distraction of complex features. As you become increasingly familiar with development, design language and other related principles, you will likely want to shy away from MVP builds and explore your newfound confidence.
3. Get Started With These Languages
Web development is rooted in three core languages which account for nearly everything that you see and use on the internet. When used alone, HTML, CSS, and JavaScript are close to useless. When used in conjunction with each other, however, the sky is the limit.
HTML: As a markup language, HTML is responsible for the flow and structure of the text on a webpage and provides a system for tagging that text for further enhancement using CSS.
CSS: Cascading Style Sheets are responsible for describing and defining the visual aspects of text tagged in HTML. With CSS, you can define colors, sizes, layout, animations and more.
JavaScript: This is currently among the most popular and fastest growing web languages around. JavaScript is used primarily to add interactivity to your web elements. However, the possibilities are virtually endless.
You can learn these languages by checking out online course like those offered at One Month, Coursera, Udemy, Lynda, and Code School, or by following one of the many guides available online.
Additionally, you can supplement your learning by using frameworks like Foundation, Bootstrap and Skeleton, which give you pre-built modules to play around with as you see fit.
4. Host Your Work
While in Development: As you write the code that makes up your web page, you will likely want to see it in action so that you can see what is working, what is not, and what could be executed better. While this could be done “live”, it is highly recommended to use a local server as it minimizes the risks involved. For an exhaustive explanation of why you should use a local server, check out this article.
This is typically done on a local server. A local server is a collection of software located right on your computer which allows you to view and interact with your web page as you would on the internet. For details on how to set up your own local server, check out this guide.
Post-Development: Once you are finished (or mostly finished) with your site, you will be ready to migrate it from your local server to a real one. This means paying for server space, buying a domain name and using your FTP client to transfer all relevant files to the server. Once this is done, anyone in the world will be able to go to your website and see your work.
Some popular hosting sites are: GoDaddy, BlueHost, InMotion, and HostGator. You can research available domain names here, and purchase them here. If you like trying shiny new things, check out Google Domains, which is currently in beta.
Conclusion: Have Fun, and be Prepared for Headaches!
It is no secret that web development is fun and rewarding. Look no further than the millions of people who code in their spare time, or the thousands of high-salary development jobs in Silicon Valley and across the country for validation. As you explore the vast world of web development, however, you will soon come to realize that it is not without its fair share of headaches. Do not give up! Soon enough, you will learn to love the challenges that await you. They keep you sharp, and you can think of them as puzzles.
Above all else, make your own decisions and let your own passions drive you. Do not follow anyone’s recipe for how a website ought to be coded and do not let any passionate developers force their tech stack or design language down your throat. There are plenty of examples across the web of people who have gone beyond the “rules” of web design. Check out Pharrell Williams’ website for example of what it means to shy away from standards and rules.
Remember: the web is a blank canvas built of blank fibers. Web development is as fundamental of a skillset as design in crafting the perfect web experience. Use this knowledge as you go forward in your career, and you are sure to achieve greatness.
Want to learn more?
Are you interested in the intersection between UX and UI Design? The online courses on UI Design Patterns for Successful Software and Design Thinking: The Beginner’s Guide can teach you skills you need. If you take a course, you will earn an industry-recognized course certificate to advance your career. On the other hand, if you want to brush up on the basics of UX and Usability, try the online course on User Experience (or another design topic). Good luck on your learning journey!
(Lead image source: FirmBee – Creative Commons)
