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.
- 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.)
- 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.
- Make a list or spread sheet of content, separated by pages and site structure.
- Sketch a mobile version of this site. Focus on big ideas, blocks, content types. This is rough.
- What type of UX principles are going to be employed?
- How will this scale up to a tablet?
- How will this scale up to a full-size monitor?
- How might this scale up to a large monitor?
- How do UX principles scale?
- 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.