As a front end developer, without getting super complex or requiring a lot of money, there are three basic ways to go about designing a website:
- Start from scratch and architect and design everything yourself
- Work with a graphic designer from the get-go and implement his or her design mockup into your website
- Start from scratch and architect it yourself, then get help from a graphic designer on the look and feel
Whichever option you choose, the best way to convey something to your end-users is to tell them a story (See "Storytelling in Web Design"). To illustrate how simple telling a story can be take a look at this 2007 website concept:
Jason Santa Maria pointed out this site in in his 2008 presentation I attended. What I like about the website is that it demonstrates the simplicity of storytelling: the entire site is written on kitchen appliances! ...and at the same time engages the user and ultimately delivers a message to entice action. We want to do this: build a story.
Building the Story
To build our story we should first explore what it means to organize a websites information and function. As an Information Architect (IA), when I think about a websites layout I literally think about how these elements are "laid out" on a screen. I think in terms of the organization of information and function for an end-user's consumption. In this IA role, when speaking about layout I might say something like, "Wow! That's a great layout," or "I don't like the layout of this site, it's too confusing, maybe you should move this over there."
How does organizing information and function relate to "building the story"? Because these are the elements that tell the story. I like to think about it in terms of traditional mosaics. What is a mosaic if not a bunch of smaller things coming together to form a meaningful whole:
Mosaic is the art of creating images with an assemblage of small pieces of colored glass, stone, or other materials.
Individually, the components of a mosaic are meaningless, but together they form a pattern or an image. Take for example this Roman mosaic of Ulysses, from Carthage:
Is it a meaningless conglomeration of colored tiles, or does it tell a story?
A website layout is similar in that it is composed of different blocks of information that together convey a larger whole, a story composed of text, images, color, function, and more.
As front end developers we choose and arrange what blocks belong together, and through our code create a digital mosaic, a website, that ultimately is viewed and interpreted by our audience. As such we should think of what we create – it's meaning and purpose – as storytelling, and ourselves as narrators. It's not as far-fetched as it might sound when you consider that most websites are probably designed to [invite - entice - cause] the user to take a next step or action, i.e. turn the page in the story.
The unifying message behind this mosaic of information is the storyline or theme. Before content can be discovered, grouped, and placed in a layout, the narrator, in this case you, has to have the stories general theme in mind. For example, the storyline might be:
I'm a great Web site for finding a job...a job that is perfect for you, you should join me, if you do you will have access to tons of perfect jobs and your life will change for the better forever!
In this storyline example – with my Information Architect (IA) hat on – I immediately see several major blocks of information:
- What is the site in 10 words or less – possibly a hero image with a tagline
- How do I join – a sign-up section
- An area that describes the benefits of the site – maybe user testimonials
- The obvious table stakes to this story:
- A logo
- Legalese (Copyright, ToS, Privacy)
- Non-legal footer type info (Feedback, About, Contact, Site Map)
I'm already beginning to imagine how these blocks of information will be organized and coded into this website and used by the back end development team.
Write It Down!
Think of an overriding storyline for your website. Write it down. Refer to it often. It is your guide and the glue that will hold your website together. With this in mind you can organize your website into related blocks of information , like in the sample above,that each contribute to the story.
As a developer you will naturally imagine how these blocks of information will be conveyed and coded, just remember to keep the following tenant of The Front End Manifesto in mind:
Architect and design for the end user, not developers.
Where Do We Go from Here?
At the very basic level we have to learn how to ask the right questions to get to the heart of the story if we don't know the storyline already. Since I run a consultancy, in my world this is called a "Needs Assessment"– where me and my team interview our client and their stakeholders.
Next we figure out what the sites blocks of information are, and although I enter projects with a good idea of how it might be laid out, my predispositions, I always try to throw these out the window.
In the next article I describe a process that I follow to come up with information blocks called the index card exercise, and what I have found by following this process is that the end result is almost always completely different from what I first envisioned.
If you know your storyline, this is a good next step.
Want to know when the next article is published? Subscribe here. Thanks for reading!