Part 2: Grid Systems

Workshop – Sketches

As many as possible. You'd be surprised at how some of what you think are the worst ideas end up sparking something that makes the final design. What ever it is get it down on paper and record it and move on to something else.Sometimes it helps to time yourself. When doing these with clients I tend to keep them to 30s or a min each.

Take a look at the grid resources before you start. There are a ton of helpful grid websites, videos and books there to help you figure out how to best use a grid in your design.

Throw photos or scans of your sketches in the sketches folder and post a link to them in the Learn forum.

Workshop – Wireframes

Start building your project with HTML & CSS. For now stick to gray scale and Helvetica. This way you can focus on creating a great layout. That doesn't mean that you can't use those tones in background colors, lines or other graphical elements. If fact I would encourage that. Use those grays to help you focus on your hierarchy.

If you'd like to use the index.html and style.css that I have set up feel free. If you want to use Haml and Scss, go for it. If you want to use your own grid framework, go ahead. As long as it is in this repo it works for me.

One note: don't do any real programming. Stick to static content for now. I want you focused on design problems not programming ones

Take a look at the HTML & CSS resources before you start. There are a ton of helpful grid websites, videos and books there to help you build out your wireframes.

Once done you can use Github pages to easily host or you can put it someone else your prefer and again post to the forum for feedback