29th
June 2010
By now you should have a good, if not considerable, handle on designing a site. Now you need to worry about your target audience, so let’s talk about building your User Interfaces (UI) and your User Experiences (UX) with the appropriate age groups in mind and how you tackle certain hurdles that tend to pop up from time to time.
Designing for the elderly and children may be different than designing your everyday site. Older users enjoy a less cluttered and simple-to-use design. You have to remember that most previous generations did not grow up with computers, like most of us have, or are just starting to use one. My father still asks me how to forward his emails, and just now realized that you can listen to music on the computer. However, with networks like Facebook, more of his generation are using the internet and learning how to explore or even create their own sites. It’s often mentioned of me by my parents, relatives, and friends, ‘ask Josh, he’ll know the answer’, but how do I exactly know? By a process of trial and error and how my own mind has been trained to process information that is given to me. And if I don’t know the answer? Information is only a search engine away.
Older users want to be shown step-by-step how to use something, keeping in mind here that repetition is key to success. No one really ever gets something on their first try, so make any process or special feature plain and simple to understand. If your are providing a service, then think about providing tutorials, either written detailed instructions or video. You can never go wrong with an instructional video. It’s sort of like show and tell 2.0. This would also be a great time to suggest tips and tricks or maybe more offers that branch out from the original one. Always include a link back to the tutorial or help, but don’t make this process mandatory.
You often hear people complaining about not being able to talk to an actual person. While, for most of my generation, the ease and use of email suits us fine, other users may need or want that person to person support over the phone. Don’t over complicate it by adding chat support, most of the time your user will just wind up confused, but do make yourself available in both an online form and phone format to bridge that gap.
A picture is worth a thousand words and, in this case maybe a thousand future headaches. Using pictures along with you details or instructions can help save both you and your user countless hours of frustration. Usually, when setting something up, we look for the fastest route there is to accomplishing our goal. Your use of color also goes a long way, and I cannot stress that fact enough. When my father sits down at his computer, he always turns the background to a soft blue color. For him, having all of his icons on his desktop over top of an image is too confusing and he has a hard time deciphering the icons. Simplicity will carry your design a long way. Include ‘alt’ tags to your links, most of your users will not click something at random unless they know what it is or what it is going to do first.
When your target audience tends to be younger, like children, as I said previously, your use of color is critical. Soft and bright, but not overpowering colors, create a fun, enjoyable experience. Most of the children’s site are made with the interactivity in mind first. It’s a primal urge to touch and interact with items and this is especially strong in children. For instance, you may include a small game with a rewards system in place; this gives the user a sense of accomplishment and encourages them to explore more of the site at the same time.
How are you planning on designing with your target audience in mind?
This post was written by Joshua Rapp of Rappsody Studios – designing with beauty and function. Want to write a guest post for BaseKit? Get in touch!
Photo from Flickr user Spigoo used under CC Attribution License
Read More
24th
June 2010
I’m sure every designer has their own design process but I thought I would share mine and invite you to share yours. My process varies slightly depending on the project but follows the roughly same path.
1. Information Gathering
First of all I gather the majority if not all of my content. If I’m working on a personal project then this step is a lot easier as I will write my own text and I’m not dependant on anybody else. However if I’m are working on a client project it can be quite difficult to get all of the content needed before I even begin thinking about the architecture and layout of the site. If getting the majority of the content from the client at the stage is proving difficult, and let’s face it sometimes it can be very tricky, then I try to get enough information so that I can at least determine how many pages I’ll need and plan navigation.
I’ll also ask clients who their competition is, what they like and dislike about their competitors websites, what they want their own website to achieve and who their target audience is. I find this helps me to get a basic understanding of what the client is looking for in terms of both aesthetics and features.
2. Research
Once I (hopefully) have all the content and information I need to get started I begin researching. The type of project I’m doing will determine the nature of my research. If I’m working on a client website I’ll look at the websites of their competitors or at websites who share the same type of audience. I’ll take into account things that they do well and things that they don’t do so well.
I find this research stage useful for a number of reasons. For example if I was designing a website for a company who sold second hand cars and found that the vast majority of car sales websites all shared a similar navigation system or layout I would try to not stray too far from this system in my design so as so not to confuse users and allow them to navigate the site in a way they are used to.
3. Planning
At this point I’ll already have a few rough ideas as to how I’m going to organise the content into pages and sub-pages and how I’ll want users to navigate my site. I do the majority of my planning on paper; I find it easier to get all my ideas out on paper quickly without worrying about it being neat. Depending on the size of the site, I’ll scribble out sitemaps or flow diagrams; basically anything that gives me a clear understanding of how content will be organised and how users will find that content.
4. Wireframing
Once my content is organised into pages I start wireframing. Again, I usually wireframe on paper before I touch my laptop. I prefer using squared paper as I nearly almost always design to a grid based layout. I sketch out multiple layout ideas for different pages; header, footer, navigation, text, content etc. None of my sketches are particularly neat, there is probably only me that can understand them at this stage!
Once I have a layout and structure that I am happy with, I begin putting the wireframes together in Photoshop. Since I work to a grid based system I usually open up my 960px grid template PSD and translate my sketches into accurate, measured blocks in Photoshop. This way I know roughly how my layout will look on screen, how much space I have to work with for different features, if the page is too congested or too bare, roughly what size images I can use and a host of other things depending on the layout and content. This way I know if my layout will work before I begin the task of designing the visual elements.
5.Colour Scheme
I usually have a few colour schemes in mind from previous steps. If the client I’m working for already has a coloured logo or is a brand with established colours then the colour scheme has pretty much already been decided for me and I’ll just have to decide the best use for these colours, whether that be for headings, links, background colours, buttons, icons etc. If I have a free reign when it comes to deciding colours then I’ll usually play around on Kuler or design a quick moodboard. Moodboards are a relatively new concept to me but I have found them to be useful on more than one occasion. There is a great article on Boagworld that introduced me to the idea of moodboards.
6. The Design
Now I start designing the visual layout based on my wireframes. Sometimes I work on paper first, other times I’ll jump straight into Photoshop. At times I’ll need to design my own icons and graphics, sometimes the client provides them and sometimes I’ll use some of the great work that other designers have made available for use – of course abiding to terms of use!
When it comes to designing web layouts in Photoshop I’m obsessed with labelling my layers and grouping elements together, I find it saves me a hell of a lot of time later on when I’m looking for a particular layer!
7. Building the Site
Obviously if I’m working on a client project then I get approval on the designs before I start building the site. However if it’s a personal project then I can jump straight in once I’m happy.
At this point I start breaking up my PSD layouts ready for the web and then start the process of coding the site by hand.
However if coding seems like too much hassle, you can always use the BaseKit Website Builder which will build your website for you directly from your Photoshop design.
So that’s a quick overview of my process when designing a website. Is your process similar or do you take a different approach?
This post was written by Lee Harding of Lee Harding Web Design – creating modern beautiful and usable websites. Want to write for the BaseKit Blog – get in touch!
Read More
23rd
June 2010
That was one hard competition to judge.
We were completely floored by the quality and creativity of our community (we knew you were good, but still…!)
but, alas, there could be only one winner.
So, the design adorning the new range of BaseKit t Shirts is provided by Mr Ryan Astle – Here it is!
Larger image available over on our Flickr
We’ll be running many more great competitions, so stay tuned for the next one!
Read More
18th
June 2010
We said the T Shirt Design Competition closed on the 21st.
It doesn’t.
You’ve got just a touch more time to get those designs in. – We’ll be announcing a winner here and on twitter at noon, London time on the 23rd of June.
We’re amazed at the quality of the designs, so we’re giving you just a tiny bit more time… Get those entries into shirts@basekit.com !
Read More
