Tips for Designing a Visually Appealing Site
9 May
First impressions are lasting impressions. Here are some tips on how to design a visually appealing site that’s easy on the eyes and leads the audience in the direction your client wants them to go.
Get Inspired
All great designs start with a little inspiration. I recommend visiting your merchant’s sites, competitor’s sites, and design galleries to get design ideas. The goal isn’t to “copy” what they’re doing, but rather to get ideas for your own unique design.
Step 1 – Make a list of your competitors sites. While you’re visiting their sites take out a pen and pad of paper (or word processor) and write down the design elements you like.
I recommend that you take extra effort to differentiate yourself from your competitors. This will not only set you apart in the customer’s mind, but will also keep you from getting in a tussle with your competitors.
Step 2 – Visit Design Galleries. After you’ve had a chance to review sites in your niche category I recommend going outside of your industry for inspiration. Web design galleries are always hotbeds of inspiration.
Here are a few design galleries I recommend:
Make sure you take notes when visiting website design galleries.
Collecting Your Inspiration
If you’re like me, you might like to have digital copies of designs that inspire you. Collecting notes on paper is low tech and an easy way to gather information, but you may find that it’s limiting when you have a lot of sites in your inspiration folder.
Here is a list of tools I use to capture design inspiration in digital format:
- Yahoo My Web – This tool allows you to store all of your bookmarks in one place. Besides being able to store all of your bookmarks online (in a secure place) you can save a copy of the current page. If the live site goes down or has a broken link you can use your archived copy of the page. As an added bonus you can add tags to your links to help you quickly locate and identify your bookmarks.
- Google Notebook – With this free browser add on you can clip web pages, text and images from web pages and store them securely online. You can access your notebook from anywhere (including your mobile phone).
- Microsoft OneNote – Microsoft’s note taking tool can be compared to Google Notebook, but also integrates with Office and has support for rich media (audio/video). This software comes bundled free with Office 2007. A stand alone license costs $99.
- Snag It – With TechSmith’s Snag it you can save screen captures from web pages (full screen), and other applications on your computer. The captures are saved in an image format, allowing you to annotate, crop and modify the image any way that you want.
In addition to these tools I use a number of Firefox browser plug-ins to capture colors, source code, and images. Here are the Firefox extensions I recommend for designers:
- Web Developer Toolbar – With this toolbar you can easily scrape and save images and source code from any website. It also has many helpful developer features that let you break a page apart in every imaginable way – which is extremely helpful when troubleshooting new designs.
- Firebug – Similar functionality to the Web Developer Toolbar, but has better tools for analyzing and troubleshooting CSS and Javascript.
- ColorZilla – This extension is like the eye drop tool in Photoshop. You can simply mouse over any area of the screen and get the color of the element.
- Screengrab – Similar to TechSmith’s Snag It tool
Resources for Inspiration
These sites are great for gleaning design ideas and I do not condone plagiarizing anything you find on these sites.
Design Templates (Complete Designs):
CSS Layout Templates (Wireframes):
Outsource Design Projects
- 99Designs.com (highly recommended)
- Get a Free Lancer
- E-Lance
Image Sites (Stock Photography)
Color Tools:
Free Fonts:
Professional Fonts:
Books:
- Principles of Beautiful Web Design
- The Usability Kit
- Don’t Make Me Think
- Save the Pixel
- The Design of Sites
Conclusion
Use these tips to set you in the right direction on your next design. These can help you become more creative than you have ever been, but remember it’s easy to copy what someone else has already done, but what sets you apart is your unique creative eye. So let your creativity come through after you get a design direction and you are sure to get repeat business and great word of mouth advertising from an ecstatic client.
If you know of any other great resources for inspiration out there let me know in the comments.
Please share this post: Twitter | Design Vote | Bump | Delicious | Digg | RSS
Awesome!! thanks a lot for sharing…
Not a problem. Glad you like the article. Checked out your site as well and you do great Photoshop work.
Hi Lucas,
I think you’ve done a great job of summing up the steps an individual needs to take in order to design a website that is visually appealing. The links to the resource websites are sure going to help out people who are in need of inspiration. Keep up the great work.
Mat.
Thanks Mat. These are just general guidelines to keep the design moving smoothly. Let your creativity run wild and follow the process and your client is sure to be happy every time.
Bookmarked
Thanks for the tipps
Glad it helped you out. Thanks for the bookmark.
I take screen shots and upload them to a Flickr gallery http://www.flickr.com/photos/sr-ps/sets/72157601004264496/. the big advantage is I can point clients to it.
That is a great way to save on bandwidth and a convenient place to keep all your screen shots where you know they will always be there. Great tip Steve.
Nice post Lucas I bookmarked it on Propeller http://www.propeller.com/story/2010/05/26/designing-a-visually-appealing-site-lucas-cobb-design/
.-= G13 Media´s last blog ..Web Site Design San Diego Seo =-.
Thanks for the bookmark G13.