When I design web pages, I usually start with an idea or concept I want to explore. Here are a few examples of things I have wanted to play with:
When I have an idea, I usually take a note or two then, when I have time, go to a HTML editor and start building. I love designing in the browser. Other times, a design starts with a sketch by hand. This sketch can be as simple as a few boxes if I am designing a layout. The goal is to get something down on paper that I can use as a reference.
Yesterday I was thinking about what a minimal home page would look like with two columns. I drew out these designs on an (almost too small!) piece of note paper:
I knew I wanted to have a grid with four boxes, with two boxes in each column. I thought each box could have its own colour banner at the top. I wanted the grid to be narrow. And maybe there could be a sidebar too, I thought. When I got to the browser, I found that I liked the grid idea but I didn’t need the coloured banners; black, white, and blue were enough for me to play around with.
I ended up with a page that used two columns and CSS grid to make some elements – my introduction and a list of links to other pages – span both columns. Here is one of the designs:
The page has a two-column layout. The top row spans both columns. The middle row has two items that each span one column: a selfie and a list of my most recent blog posts. The bottom row spans both columns. My blog mascot is also on the page, in the top right corner.
You can see the design in my playground
Not all my ideas ended up in the final design: I didn’t use a pixel art background or coloured banners for each box. But that’s okay! I found a direction I liked through experimenting in the browser; I still want to go back and think about a colourful theme that uses pixel art, though.
I am thinking a lot about minimal designs right now. My notebook was another exploration in this direction, except using more colour.
By drawing out the main concept – a site with two columns and several boxes – I had both a reminder of the idea and also a point of reference that I could use in my design.
