GUEST BLOGGER: Cristian Easterly, Applications Instructor
When designing a website, one of the most important things to keep in mind is, “Is this site easy to use?” There are a few ways to make sure your site will be easy to use for your target audience. First, you need to know your target audience. Who will be using your site? What will they be looking for? Is that thing they are looking for easy to find?
The next thing you want to think about is your color scheme. Are the colors too bright? Too dull? Do I have too many colors? There are a lot of ways to choose the color scheme for your site and a lot of helpful websites out there to help with this problem too. I know personally, I have spent hours finding the right color scheme for some of my sites. It can be a frustrating situation.
Even after you choose the right colors, you need the right font, layout, and navigation. The list goes on and on, but one thing you can do to make this all come together is keep things consistent. What does that mean? Don’t confuse your audience with a different layout, color scheme, and font choice for each page. They will find it hard to navigate through your site and they will leave.
When you start to design a website, the first step in the process (after brainstorming) is to create wireframes. You can do this on paper (graphing paper is best), or you can use a pixel based program on your computer. For this example, we will be using Adobe Photoshop CS5 to create a wireframe that stays consistent on each page.
Remember, your wireframe does not need color or pictures yet. The only thing you are doing here is planning out where all of your site elements will be. Here is an example of a wireframe for a website design:
You will notice that it is the most basic idea of what my site will look like. I used greyscale shapes and text to show where everything will be once I get to the designing phase. I put in photo placeholders so I can have an idea of what the final design will look like. I also added my navigation bar with my button placeholders. As a designer, you will start to see the final product as you move from this phase to the next. You will start to pick colors and font choices after each wireframe is designed. It is one step that will save you a lot of time.
As far as consistency goes, you will want to make sure most of these elements follow you from page to page. If this is my home page (the first page users will come to), then this will set the tone for the rest of the site. Users will get comfortable here and expect the same things to be on the next page they come to. The only things you will swap out are pictures and text (content).
The things that are circled in red should stay the same on every page. The user will get lost without these elements.
The first thing that is circled is my website title and logo. You want to remind the user where they are and show off that logo you spent hours working on. This is an easy way to keep your site design looking consistent. Again, it will make the user feel comfortable.
The next thing that is circled is the navigation. You never want to change the navigation. NEVER. If you move the navigation around on each page, the user will almost always get lost, get frustrated, and get out. This is another comfort issue that some designers forget. The user needs to know how to move from page to page. Even if the content changes, the navigation will always be there to help them out. Think of it like a tour guide for your website.
When designing a website, you can easily overwhelm yourself when you start thinking about all of the things you have ahead of you. Step one: breathe. Step two: think about your target audience. Step three: brainstorm and start wireframing those ideas out. Once you have the wireframes made, keep consistency in mind and start designing. Change the colors, add pictures and logos. Having the wireframe will keep you from losing your consistent design and keep you from losing users on your site.
Start creating your wireframes in Photoshop! View upcoming classes from New Horizons here.