Do you have a process for developing a website? Buildings, cars and websites all require steps to build a website. Without a systematic process, you wouldn’t be able to consistently build houses, cars or websites. At WordCamp Seattle 2014, Morten Rand-Hendriksen, gave a talk on Web Design is a Process. He focused on first 3 of a 5 part process: Prepare, Plan and Build.

Here are my notes from the presentation:

Prepare

• Set up version control; use Git, Mercurial or Subversion
• Establish code and style guides: see @mdo’s Code Guide and Google’s Web Fundamentals

Content Strategy

• Ask questions about the content: Why does it matter? Why should it be on the website? Who is the target audience?
• Complete a website content audit. Create a list to know where all of the content is.
• Create a sitemap of your website
• Create a template map to match the WordPress hierarchy. Identify the templates that you are going to need to use.
• Develop a wireframe for mobile only without any design elements. Use paper to create your wireframes.
• Ask real people if your design works

Build the Site

• Build the site with a blank starter theme and add the content
• Add accessibility in before adding design elements
• Add design elements in the browser. Use modular or atom design.

Summary

Website development is constantly changing. Morten provides different ideas on how to design a website. He suggested matching the WordPress templates with templates that you are going to use. This will save you time when you build your theme. Morten’s suggestions can help you to speed up the design and development time, so you can finish project faster and get paid sooner.

What changes are you going to make to your design process?

Are you a developer who wants better looking designs? Have a great idea but don’t think you can design? Design is more than making things look pretty. Your idea should work well first. Design is about problem solving and asking the right questions.

“In science, the hardest part isn’t finding the right answer, but finding the right question.” #samewithdesign

— Luke Wroblewski (@lukew) May 20, 2014

Use these tips for bootstrapping your designs. You can make your designs more than just pretty.

Limit your options

When you can choose any color, font, graphic or photo that you like, it can be overwhelming. You ended up with designs that looking so distracting and gaudy that no one will use it. To create better looking designs, you need to limit your options. By limiting the number of colors, fonts and graphics, you can focus on how the website works instead of looks. To help you limit your options, Robert Williams describes a 3 Step Hack for Startups Bootstrapping Their Design.

Design is about function

What is a good design? Most people define good design as something that looks pretty. Design isn’t about being pretty. It is about how something works. When choosing between working well and looking pretty, you should choose working well. If you want to create better designs, you need to remember that design is communication, you need to prioritize and organize your website and maximize (leave the right stuff out).

Keep your user’s best interests in mind

When you design for a client or your boss, it can be hard to remember who you are actually creating a website for. You need to remember that people will be using the website, not only the client. How do you design with your user’s best interest in mind? By following a set of design principles that help guide your creativity and problem-solving, but don’t limit it. The Android User Experience Team developed these design principles to help them focus on their user’s best interests. They divided these principles into three goals: Enchant Me, Simplify My Life and Make Me Amazing.

As a developer, you want to build things that help people get things done and make their lives better. When you create a new design, remember to limit your options, design is about function and keep your users in mind. If you apply these tips, you can make something that not only works well but looks good doing it.

What kind of tips do you use make your designs be more than pretty?