Andrew playing the guitar

Andrew Kao

drewcodes@gmail.com

Designing a Site

Wireframes, Prototypes and Colors. Oh, my.


Check out my past designs here.


Designing can sometimes be scary. The “perfect design” should seem almost like it wasn’t even designed at all. Everything about its elements, such as the experience, colors, shapes, typography and appeal should feel balanced and just right.

In this entry, I want to discuss my design process that I use when developing a new concepts for clients. The design process is just one of four parts of my development process when I build websites entirely from scratch.

The design process includes:

  1. Wireframing UX
  2. Prototypes
  3. Branding
  4. Designing UI

Wireframing UX

Wireframing is a process used to design a website’s general layout or user experience (UX). In the early stages of creating a website, it’s best to figure out what kind of structure your site will have and where all the content will be laid out. Since colors, images and logos are usually undecided at this stage, most wireframes are either black and white or in greyscale.

The reason why this phase is called “user experience” is because the focus is on simplifying the user’s experience with interacting with your site. Having easily recognizable menus, content structure and mobile-friendly rendering of the page’s elements make up a great user experience. This is not to be confused with “user interface” which is primarily focused on the aesthetics of the site after the UX has been designed.

So how do you wireframe something?

Most designers use professional software such as Photoshop, Illustrator, Sketch or InDesign to create designs on their computers. These same software often includes file presets for wireframe designs in various device sizes such as a desktop, tablet or mobile device.

You can also just create a custom size canvas on your software and begin wireframing.

To wireframe, you simply start drawing out boxes on your canvas to represent different website elements such as navigation menus, text content, images and more. There seems to be a lot of variation in what these “boxes” look like, so you can simply Google some wireframes for a general idea of what designers use when creating their layouts. You can keep it simple. No decisions have to be made about colors or fonts. Just where everything should go on a site. Here’s an example from Wikipedia, below.

 

An example of a wireframe. Image courtesy of Wikipedia

 


Tip: I personally use Pixelmator (a Mac alternative to Photoshop) and InDesign to create my wireframes. There’s absolutely no right or wrong software to use. Use the software that you are most comfortable with.


 

Designing using Pixelmator on my MacBook.

 

In fact, I sometimes prefer to just hand draw my wireframes using a paper and pencil. It’s usually convenient for sketching out quick ideas while meeting with clients. It also helps resolve any website flow issues before you even code it!

You may have to do a few different wireframes for clients who are unfamiliar with the process and adjust the design until you’ve finalized the layout. From there, you’ll want to create a prototype!

 

Prototyping

Your client wants to play around with the design already! Coding the site will take hours or weeks to complete, so how do you get your client something to try?

Create a prototype!

Prototypes are nothing more than just some wireframes that are connected to each other using prototyping software that gives the impression of a working site or application.

To create a prototype, just get the images of your wireframes, upload them onto the software as a single project and begin linking them together using “hotspots”. Hotspots are just sections you select to interact with another wireframe.

For example, if a user clicks on a “send e-mail” button on one wireframe, the hotspot should link to another wireframe showing that an e-mail was sent. This gives the client a sense of what the layout’s functionalities are before you even code anything.

I personally use Invision when prototyping on my computer, however, I have also used Marvel on my smartphone to prototype hand drawn designs on the spot. Prototyping has saved me a lot of awkward conversations by just showing my clients exactly what I have envisioned in my mind.

 

Prototyping on Invision. Hotspots are in blue.

 

Prototyping is important. If you prototype your wireframe designs and test them, it will save you a ton of time figuring out flaws with the website’s flow, design and how users interact with it. It also creates an ideal visual for developers to code the site and minimizes confusion.

I used to be guilty of developing without a design, but it’s now part of my development process and I love it.

Branding

Branding is everything. Whether you’re an individual or a company, branding is what makes you and your site stand out.

So what is branding?

Branding is the collective idea of what you are trying to convey to your audience. It’s more than just a logo or some catchy name for a website. It’s about the “whole picture” of the website and what your website represents. Here are some examples of branding:

  • Who is your audience? How can you relate to them?
  • How you present yourself or the company. Are you sharing your philosophy?
  • Choices of colors. Are the colors for your website eliciting the right emotions from your audience?
  • The tone of your site, content and images.
  • Selection of fonts. Are they playful? Professional? Laid-back?

Obviously, you can’t answer these questions for your clients. It’s something they need to provide you so you can spin off designs that fit their vibe.

I come from an e-commerce background where branding is vital to a product’s success. So when I ask clients to provide me some branding ideas, I specifically request that they send me a bunch of inspiration that represents either them or the idea of their website. Think of this as creating an “inspiration board” and draw from it.

I do not restrict their inspirations. In fact, I encourage everything from photos to music, memes, color swatches, CD covers and anything else that they feel is representational of their future website. I paint as a hobby, so I usually draw inspiration from listening to music while I paint. In the same way, I would play my client’s choice of music while I design to really drive the inspirations home!

 

An inspiration board.

 


Tip: You can create an inspiration board on your computer, on a real poster board or keep the collection of images, sounds and colors in a folder that you can review.


 

Designing UI’s

You’ve made it through 50% of the struggle, so now comes the fun (sometimes hard) part… Creating colored designs for your client. The technical term would be user interface.

A user interface is what the users are seeing on their screen when they are on your site and interacting with it. The UI created encompasses the aesthetics, typography, branding and color palette of the site’s brand or theme. The UX of a site could be absolutely perfect, but failure to design an eye-pleasing and pleasant interface for users can cause a drop in the number of visitors to your site.

Now that your client has agreed to your website layout, gave the thumbs up on the prototype and submitted the inspirations for branding the site, you must start churning out designs!

Getting started is usually hard when trying to imagine some visuals for an empty canvas. I usually open up my image software and start throwing random images and colors from the inspirations given and see what fits my flow as I build upon it. Stick to the wireframe structure! We didn’t waste all that time to just ignore it.

Colors

Inspirations also comes in many colors… so what colors do you use?

You’re going to need to create some color palettes. Select 3 to 5 colors to theme a design around and identify the main colors from the “sub-colors” for use on the site. It would also help to place the colors side-by-side so you can see how they contrast with each other.

There’s also a great resource that I love using for creating color palettes called COLOURlovers. What’s great about COLOURlovers is that you have access to an online tool to select the colors, create a palette and even get the exact hexidecimal code or RGB for each color right from their site. You can then save each color palette you’ve created and reference them during the colored design process.

 

COLOURpalette.com is your friend!

 

Create 2 or 3 additional color palettes so that you have some different choices when designing the colored designs in the next phase.

The first design won’t be perfect. It’s really to get your creative juices flowing and brainstorming new ideas as you fill the canvas with colors, images and placeholder text. Remember that you’re really looking to create 3 to 5 designs using the same wireframe as the layout and structure. Just continue flipping through variations of the same layout using different color palettes and images.

Fonts

This is also a great time to start exploring fonts. I personally try to explore fonts using Google Fonts as a starting point. Google Fonts, at least to me, provides real useable fonts that can be coded into the website without additional costs or purchases. There also a ton of other font websites as well, and I always encourage exploring 4 to 6 different fonts to incorporate into your designs.

 

Google Fonts are awesome.

 

Fonts are more than just pretty calligraphy to look at. They exude a vibe, a tone and feel to your website designs. Think about the tone of the inspirations from the previous branding step. What tone and textures do they create when you look at them? Use those feelings to select the right fonts for conveying those feelings back. Don’t select fonts because they look nice, because more often than not, they won’t fit with the feel of the design.

Organizing Your Designs

When creating designs in color, it’s important to keep your designs organized. I don’t mean to just keep them in the same folder or on the same hard drive. When you start designing shapes, colors, images and fonts, you will begin to amass a large number of elements in a single design document in your design application. It is vital that you group together your design’s elements and keep track of them as you design away at your ideas. You’ll want to remember the exact colors you selected, the size of the images you created and the exact fonts you used.

A simple method for organizing the design is just creating groups for each parent element of the design. Think of each grouping in terms of menus, sections, contact forms, etc. Label the groupings so they are semantic and easily identified. The last thing you want is 39 rectangles on a design with no grouping or label.

 

In the right-side menu, I have all my design elements grouped together.

 

For most designers, this grouping of elements is especially important before sending the final design to a developer to code. Developers will be hard at building and styling the website to the design they were given, so they don’t always have the time to figure out what colors you’ve selected or what fonts you used in the layout.

These groupings can then be exported to other designers and developers to share what was created and done to the design and its elements. This saves a lot of questions and allows the design process to move forward.

Once the design has been completed, it is now ready to be coded into a real website!