Focussing first on the mobile views forced me to consider what is, and what isn’t, important. Every design will require a mobile view, and it’s typically the hardest one to design for, so for me it’s the logical place to start.
Important things must go at the top, less important things go below that. It’s that simple.
Once we’ve covered the basics, the fundamental must-haves of a design, on small screens then growing that design out with the reduced constraints of larger screens is a much simpler proposition. This is why I believe that designing mobile-first is always the smartest way to go.
In the next stage of my design process I jumped straight into code. Recreating my scrappy sketches in HTML and CSS allows me to begin linking the various views together with a clickable, responsive, wireframe and to map out the information architecture for the site; deciding how elements link together and the pathways by which a user can get from A to B. This project used one of my favourite tools, the static site generator Jekyll to rapidly create all the rquired views and then rapidly iterate through this stage of the design process.
It’s at this point that it begins to become clear how copy, and other content, might be used in our design. Including draft copy in design at the earliest point possible also means we can consider it in context.
Pushing a design to code at the earliest point possible allows us to create a a ‘live’, that is easy to share with the client and can be viewed on any device. Of course, the devices the client actually uses is always a great start point!
All these questions must be easily answered at this stage, and until they are there isn’t much point in taking the design any further.
to be continued…