Sketching Responsive Web Designs and Wireframes

It is a good (read: critical) practice to sketch your web designs before you start to code them up!

This allows you to make decisions such as:

• What is the most important content, and how should that be displayed to a user.
• How will I make this site accessible on a wide range of devices.
• What elements of the design will need to change between various devices.

There are many great sketch sheets that can be downloaded or used online. However, I encourage you to use the sheets from MightyMeta.

Remember: Mobile first, and build up.

Possible Process

Check out this link for a better responsive web design process.

1. Determine what the site is about?
   • What content needs to be present?
   • What content is most important?
   • What types of content will be present? (img’s, media, text, etc.)
2. What are the aesthetics for the owners of this site?
   • If this is your site, how do you want to be presented to the world?
   • If this is for a client, talk with them about their product, or data that is to be online. Discover how they think it should be presented while also considering good ‘design’ practice.
3. Make a list or spread sheet of content, separated by pages and site structure.
4. Sketch a mobile version of this site. Focus on big ideas, blocks, content types. This is rough.
5. What type of UX principles are going to be employed?
6. How will this scale up to a tablet?
7. How will this scale up to a full-size monitor?
8. How might this scale up to a large monitor?
9. How do UX principles scale?
10. What are the design characteristics of this site?
    • Font/s
    • Color palette
    • Shape type

Now, you can choose to go to your favorite design software (Photoshop, Sketch, etc) and make hi-fi designs mockups, or you can begin designing in the browser. There are arguments for and against both with regard to responsive web design.