Let me first add my disclaimer: I am not a web designer! As a software developer/support person I frequently have to lend a hand on web design projects. I noticed that people seem to have forgotten the art of using wireframes in design. A web search reveals a host of tools but this tutorial will not use any of them -- just a few HTML pages and a PNG file called 'crosshatch.png. '

This tutorial is about several things:

1. How to work strategically rather than haphazardly
2. Architecture comes first, then detail
3. You need a gallery of inspiration

How to work strategically

If you immediately start writing HTML when you start a web project my guess is that you have virtually guaranteed a certain degree of rework. I would go into reasons for this but I want to keep this tutorial short. When starting a heavily visual project like this it makes sense to start with gallery of pictures of some kind. I recommend starting with printable wireframe pages from the Sketchize website to start and graduate to digital ones. You can also start with paper and scan or take pictures of your hand drawings, put them in GIMP, add a layer on top and go to town.

In our case I skipped that because I am re-implementing (borrowing/copying) from two designs I lifted from a nice book on typography titled Type in Use, Effective Typography for Electronic Publishing (circa 1992) by Alex White. But normally I would have started with the hand-drawn wireframes and then looked for bits and pieces of inspriation from design books, scrap books, other websites, nature, dreams, whatever.

This is an example of working strategically as opposed to working organically. Here we start with one big thing that we are going to refashion into smaller, different things. If we worked organically we would collect a bunch of things and try to put them together in different ways. The organic way creates stunning designs but takes longer and oftentimes lacks consistency which is why we are not using it here.

Architecture comes first, then detail

I took a generic flex-based wireframe from W3C and replaced all of the images with a generic crosshatch image. That was my base and is what we call using the 'kitchen-sink' approach. A base design like this as a starting point has some of everything in there just waiting to be replaced. The idea is that it is easier to remove bad stuff then to correctly add good stuff.

I'm going to turn that core wireframe into separate, different wireframes for the different pages but first I need to do some high-level organizational work. I need a project index page. This can include pretty much anything but it should have easy access to a gallery of images that you are basing your wireframes on and other important information like when this project is due, what it is called, etc.

You need this to prove that your design is going from abstract to detailed. You can use whatever tool you want so long as it accomplishes that task -- any page in the design should be mappable to higher level abstract templates. This guarantees that you do not copy designs from previous/other projects as-is; you know exactly where things are coming from, etc.

At this point I copied the core wireframe.html to two different wireframes called wireframe-joker.html and wireframe-divine.html. For this website every page must be a child of one of these wireframes. If I have content that will not work with either of these I have to create another wireframe. That wireframe's parent will be the core wireframe.html. We have the gallery of pictures at the bottom of the page because that core wireframe was chosen based on an intersection of the gallery's needs. Everything must come from somewhere.

The next steps were largely mechanical: I make modifications to the CSS in the wireframes and throw out images that I do not need. I replace those with DIVs, lorem ipsum text, whatever is needed. How to write HTML and CSS is beyond the scope of this post but you can learn a lot about flexbox and media queries from W3C. Go back to the project index and click on the links for the different wireframes (Wireframe #1 and Wireframe #2) to compare with the links next to them and gallery at equivalent at the bottom of the page.

You need a gallery of inspiration

This brings us to the draft pages, joker.html and divine.html. They are early drafts. They do not have any color schemes, real images, the font choices are cruddy, and the text is all lorem ipsum. But at this point my programmer-mind is screaming, 'put all of this stuff in version control!' The use of version control geared toward web-design folks is forthcoming but will not be in this article.

Instead be content with resizing the page elements and trying these out in different devices to make sure that they still look okay. If they don't you'll tweak the media queries, particularly the size of items or change the display to none. Only after you have done that should you continue to polish off the last elements like images, fonts, etc.

Let me quickly make a note about copying. If you feel bad about starting with a generic W3C (or other standard) template then feel free to make your own and base your entire design on that. However, the other aspects of this article remain in force. That is, your designs cannot spring from the ether. In fact, many people who claim 'divine inspiration' for designs are actually responding to promptings from their own subsconscious minds to copy something that impressed them (including art from other living, breathing individuals). This methodology is at least honest about these inspirations.

I am ending this here. The gallery at the bottom of the project index page is the target for your final stages. Keep modifying the design until it looks as close to that as you want to get.

/technical/downstream/tutorials/wireframing Permanent Link Project Sitemap Top