The beginning stages of a new web project can often be daunting, especially if there are areas of uncertainty that lie ahead. Believe it or not, this a blessing in disguise! Obstacles in the way of achieving your end result challenge you to be better at what you do. Let’s face it, our jobs would be boring if they were easy! I’m going to show you how to deal with venturing into uncharted territory.
USER REQUIREMENTS
I’m going to briefly touch on user requirements, agreeing an approach with the client should be your first step before a single wireframe sketch or pixel is produced. How do we know what to design or build if we don’t ask what the client wants in the first place? Imagine somebody handing you a pile of bricks and asking you to build them a home. The client leaves for a few months to let you begin building. Three months later, you feel you have built a good two storey house with 5 bedrooms and a garage, but the client returns to say “I was expecting an indoor swimming pool on the 3rd storey and 12 bedrooms”. The client wanted a mansion when all you built was a house. It is always important to outline and agree what you and the client want to achieve at the very beginning. At the very least, it gives you a foundation on which to build your ideas.
COMPETITIVE ANALYSIS
This is part of the requirements stage of a project, it’s healthy to see how the competition accomplishes something similar to what you are looking to achieve. In addition this could also provide inspiration. Going back to the previous analogy about building a house, imagine that the builder is a caveman this time around. He has a set of bricks and all the necessary equipment to build a house but how would he know how to build a house if he has never seen one before? We learn from others, in a competitive analysis we can compare how other websites look and/or function. It’s a good idea to review a few websites in a table, identify the best components and imagine what you would do differently to make it better.
IDEA GENERATION
This is one of my favourite parts of a project, this is where you let your creativity flourish. I find the best way to get your creative juices flowing is to sit down with your project team (if you have one) with an A3 sheet of paper and create a mind map. The process of mind mapping forces you to think of words relating to other words in the form of a spider diagram (see picture).
This process can help you make decisions relating to design and functionality. Say we started work on an email application, I would write the word “Email” in the middle, then branch off from that with words like, “Mail”, “Mailbox”, “Stamp”, “Post It”, and so on. Before you know it we have some design ideas, the logo could feature a stamp, or the stamp could be a piece of functionality. In the email application itself the “stamp” could be a small avatar that is attached to the email message before it is sent, you could then have a “stamp” collection of user avatars that have sent you messages. Mind mapping could lead to ideas that set your project apart from the competition.
SOURCES FOR INSPIRATION
I find real-life situations provide me with the most inspiration, particularly when it comes to functionality in a project. Last week I was working on a project that had a page containing a form that needed completion before proceeding with the rest of the site. I wanted to make the process of using the form more straightforward. My light bulb moment came to me at the end of a car journey one night when I stopped the car, turned off the engine and pulled the key out of the ignition – and there it was! The interior light came on automatically for me and thus cutting out the process of having to switch it on because it was dark! I went right back to the page I was building and had the form appear in a modal window on page load, cutting out steps in the process for the user.
Here are a few websites I occasionally visit for inspiration:
www.deviantart.com
Not only is it a great source of design inspiration, many artists provide free to use icons and stock images for design projects.
www.smashingmagazine.com
Smashing Magazine cover the current trends in web design and usability. It is also a great resource for everything from icons to the latest jQuery techniques.
www.bestwebgallerycom
A great way to explore other professionals work, it is important to remember however that there is a difference between plagiarism and inspiration.
GETTING STARTED!
This is just the beginning, you still have a web project to build! After looking back at your user requirements and any additional functionality you may need, you will be able to put together a technological approach. I use Project Deploy (http://projectdeploy.org/) to get started, it’s a handy website that will compile a website folder structure and add jQuery files to suit your project needs. You should have a look at the 960 Grid System (http://960.gs/) and Adelle Charles’ Grid Based Design Toolbox post (http://www.fuelyourcreativity.com/grid-based-design-toolbox/) for designing and building to a grid based layout.
Now you have the foundations to make a solid start on building a new web project and a few sources of inspiration when you get stuck. Good luck and happy building!
Here's one of those 'less talk, more listen' posts. You don't get many from me! I want to know a bit about your websites and your approach and attitude towards their purpose. Is your site(s) designed to make money, inform and educate,publicise a product/service/person or is the purpose unclear - perhaps it's just for fun. For each case, how do you achieve your goals?