Web Design for Developers

Overview

Design is important step when creating any product. In terms of designing for web, many users would prefer one website over another because they find the user interface or user experience better on one website when compared to others. For solo developers (such as myself) understanding basic web design principles could make or break the success of a web project. Creating a design and sharing it with teammates or clients could save a lot of time and money as many more people have a better understanding of good design rather than good code. Having the development of your web project being "design driven" can be more beneficial in throughout the duration of the project timeline.

We're going to introduce a modern web design overview that is targeted to web developers (mobile app developers could learn a thing or two from this as well). This article will discuss the web design process broken down into three major parts, the use of various design applications that'll assist you in designing your website, and handing off the design to developers. 

1. Wireframe

A wireframe is a sketch of a website that helps the designers and developers visualize the layout of various web components (text, pictures, etc). A wireframe can be done using a design application (more on this in the next section), a drawing pad, or a sheet of paper. Wireframing is drawing the layout of each page of your website. Instead of writing all the text and drawing pictures and icons, draw a box and make a note of what type of component each box represents.

Your web project should start with a wireframe. Many solo developers typically have an idea or proposal from a client and jump straight into development. It is encouraged to begin wireframing at the beginning as your design will guide the development. 

• Grab a sheet of paper and pencil.
• Start drawing a layout of each page in your website, not worrying about drawing pictures, icons, and font style. Draw boxes and make a note of what each box represents.
• Make small notes on the side of your paper (or on another page) for each button to remind yourself on what each button is supposed to do.



2. UI-Layout

A UI-Layout is designing your website using a design tool such as Adobe XD, Figma, or Sketch. Using your wireframe, you'll implement your design on your design application of choice, but using various guidelines and tools provided by your design application.

When starting your design file, make sure to create a canvas with the size of your target screen (1920x1080px for many desktop PCs and laptops) Many designers like to start with a canvas of 1980x1980px as this give them room to add more content throughout the webpage, mimicking what a user would see if they continue scrolling on a webpage. Next, create a layout grid with 12 columns and column width of 90px. Creating a layout grid will help developers during the development phase of the project as most UI frameworks (such as Bootstrap or Material UI) often work with a 12 column layout for their UI components. For us, designing using a 12 column grid layout will ease the design to development handoff. This will be a great starting point to establish the size of your viewport before your begin filling the screen with content. All of your components should fit within the grid.

Now, start building out your wireframe using various shapes and tools provided in your design application. You can begin filling in static content such as text (no icons or images just yet). As you continue to build your UI, you may start to notice some components may feel out of place and that is ok! This is the advantage of working on design first rather than development. Feel free to move some components and content around your design.

Adobe XD vs. Figma vs. Sketch

Choosing between the three most popular design applications is a matter of personal preference as they all accomplish the job of giving designers the tools they need to create beautiful designs and prototype them. Each of the three have free trial/free tier and paid tier options so go ahead and try each of them as I once did.

Pick Adobe XD if:

• Already pay for Adobe Creative Cloud
• Feel comfortable with other Adobe products
• Cross platform (compatible with Windows, macOS, mobile apps)

Pick Sketch if:

• Design with a Mac/Apple ecosystem only (sorry Windows users)
• Don't want to download another desktop application (web version is fully capable)
• Want to work with the long lasting industry standard for design tools

Pick Figma if:

• Like generous free-tier products
• Don't want to download another desktop application (web version is fully capable)
• Cross platform (Windows, macOS, mobile apps)

Personally, I chose Figma because of its generous free tier, I think it is perfect for small teams and/or solo developers. Here is a rundown on getting started with UI-layout:

• Choose a design application such as Adobe XD, Figma, or Sketch
• Start with a canvas of 1920x1080px
• Add a layout grid of 12 columns with a width of 80px
• Implement your wireframe, adding text (no icons or images)

3. Mockup
Creating your mockup is about bring your design to life. At this point, you should have a theme for your website. The theme would provide your color scheme for your navigation bar, logo, header text color and background color(s). 

Continue with your UI layout design file. You'll be adding all the static content such as images and icons in your design, adding color to various components and fine tuning each component to refine the user experience. 

Many designers often share their designs with friends, colleagues, and even followers on social media. If you have Twitter, Instagram, or LinkedIn, you can share your design on these platforms. Many of your followers would be glad to share their thoughts on your design. Often, many would reply with questions and comments that'll help you fine tune your design.

• Using your website's theme, add color to your design. Remember to not have clashing colors.
• Add all static content (icons and images)
• Refine until you reached a user friendly design. Share the design with others via social media to get feedback.
  

Developer Handoff

Each of the design applications (Adobe XD, Figma, Sketch) have features that'll allow the designer to inspect each component and view its details. For example, if you have some text written inside a text box, the designer can inspect the text box and pass along the width and height in pixels, as well as the x/y position of the component within the canvas. All of those values can be used by developers when they are coding the UI of the website using vanilla CSS or an UI framework.

Additionally, there are several extension available for three design applications that claim to convert your design to HTML. I suggest designers/developers to use these at their own risk as these extensions may create a lot of boilerplate code and will require a lot of time to refactor the code to inject some the logic (JavaScript).