Consider Design While You Build

Step 1: Consider your users

Whatever you are setting out to build will be used by real people—a minimum of one (you) and a maximum of billions around the world! When you write the first few lines of code you should have an answer to the question - who is this website for? Is it just for you, your friend, a client, or a community of strangers? The answer will impact how you approach the design and development of the project. Just a note—if the answer is everyone, that can be ok but you’ve got your work cut out for you - that’s 10+ languages, support for disabilities, consideration of different needs across cultural norms in all 196 countries.

Exercise to get started:

Write some information on who you are making for. List out the following:

• Who they are (demographics, characteristics)
• Why they would use your site/app
• What you want them to take away from using it

Step 2: Consider the environment

When you build a website or app it may live on a server but it will be accessed and used in a ton of different environments. Sure you may build it on a Macbook and test it in Chrome, but rest assured someone will load your site on an outdated version of Internet Explorer, mirror it to their living room flatscreen TV, or pull it up on a terrible 3G network in the woods. It’s your job to anticipate these different environments your website will be in and design it in a way that can adapt.

Exercise to get started:

Jot down some environmental considerations you’d like to include in your project—starters below:

• Will your project respond to browser size (work on mobile and big screens)
• What browsers do you want to ensure your site works on? To make this decision think about who you said you are making this for.

Step 3: Wireframing

Wireframes are the blueprint for what you are going to build. Much like an architect lays out the full plans and building structure before any cement is laid, you will want to plan out how your website or app will be structured before you begin coding. If you’re working with other people or a client this step is a critical communication vehicle to make sure everyone agrees on the general functionality and structure of the project before investing hour and hours building it.

Exercise to get started:

Before you start wireframing you should have an understanding of who will use the website, a list that describes the core features of your website (user stories) and any environmental considerations you’ve decided to factor in. If you did the 5 minute exercises for steps 1 and 2 they should accomplish this.

Ok ready set.. Wireframe! Websites are comprised of content arranged in different ways. Get a piece of paper and a pencil. Think about the following core elements of your site—grid, navigation, heading, footer, and main content areas like a hero image or gallery. Start sketching out different ways of laying out each page. Below are a few steps you can take.

Draw the base grid on each page. If you are using something like bootstrap this has a predefined grid you can use. If you’ve decided to build a responsive site each full page you wireframe should also have a mobile version.

Add the main content in blocked out containers. Images, text, movies, etc whatever the content is add general containers in places that match the user needs and stories you defined earlier. Add all main buttons and other UI (user interface) elements such as icons, dropdowns, input fields.

Step 4: UI & Visual Design

Before reading any of this you may have heard or thought ‘design just makes things pretty’ So far we’ve only been talking about the design behind the scenes—no pretty involved. This step is about designing the details of how people see and use your website or app. Now you’ll get to make things beautiful using CSS.

Example: Style Guide

The best way of showing you the different elements of visual design involved in building a website is to look at a few examples of open source website style guides. These encompass the core UI & Visual Design elements and usually give explanations about how and why the elements should be used. https://ux.mailchimp.com/patterns Exercise to get started: Read this great Medium article by Erik Kennedy. It’s a good overview of UI design. https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda

Then do the following:

Find inspiration and creative direction from other sites. If it’s on a site, don’t forget you can find the fonts, colors, by looking at their code! Dribble amd SiteInspire are good places to start.

• Choose a typeface - if you need help, use google fonts.
• Choose a color theme - if you need help, use the adobe library

When you are setting padding and margin, add more white space than you think you should.

Step 5: Testing and Iterating

As a site or app is being built it’s important to test and validate before you ship it. This can be as simple as asking a friend to use an early prototype and give feedback, or going to a coffee shop and buying strangers coffee in exchange for 10 minutes of their time while you ask them to use your site and give feedback. This step is an important tie back to all previous steps. You can ask the following questions:

Exercise to get started:

Find a few people who are willing to test your project (ideally 5) This can be as simple as taking your laptop with a local build of your website and going to a coffee shop. Read this example of coffee shop testing. Then ask people a few questions, and ask them to start using your website. You don’t need a script of questions, at it’s simplest form this activity is about you watching real people interact with your site—at a minimum as them to think out loud so you know what parts of your site are confusing. After you do this review your notes and decide what you’d like to change based on the feedback - maybe a button placement, a content area, or general navigation.