CSS and Web Design Articles
Wait! 8 things to remember before designing your next site
Posted by admin, 1 Year, 6 Days, 14 Hours, 22 Minutes ago
Designing (or re-designing) a website can be a bit of a "hit or miss" task for many of us. Sometime we make a design which we think looks great... but soon get sick of or no-one else seems to like.
So, I have put together a list of the 8 most obvious and important things to keep in mind when doing a web site design. There are ofcourse, many more things to consider (please leave a comment if you think there is something glaringly missing) but I hope this list is at least a good start.
1. What is your main aim and who is your target audience?
The applies to every single site... ever made. Whether you are a freelance designer doing websites for clients OR a designer/developer who is making a website for yourself... you always need to identify the target audience and decide what is the single most important thing the audience should leave a site knowing.
Identifying the audience may be as simple as saying the target audience is "fellow web developers and designers" as is the case for styleignite.com. You may be able to get more specific and say 18-26 year old males (for a gaming website perhaps). As a result of identifying your target audience, you can make all other decisions based on what this audience theoretically should like. E.g. 18-26 y.o. males who are into gaming probably don't like pale blue, yellow or pink color schemes etc.
Once you know your target audience, you should identify the one thing which a visitor should take away from your site - this relates heavily to point 3 (the landing page design). You need to be able to concisely represent the biggest selling point or attractive feature for your product or service.
Using single words, short sentences or icons/bursts work fantastically.
2. What are your competitors sites doing right and wrong?
Identifying your competitors is always regarded as a high priority for any business. After all, if you are not adding any value to an existing product or service.. why would customers switch to your business? If you are providing your product cheaper then you know this needs to be represented clearly on your website and other promotional material.
Looking at competitors websites also gives you a chance to take a step back and put yourself in the shoes of your target audience. What do you like about the competitors website (navigation, clear information, professional feel)? What don't you like about the competitors website (impersonal feel, no search functionality, disjointed layout)? Many of these things are probably picked up subconsiously so you need to try to be as objective as possible when identifying areas of improvement.
3. The most important design - the landing page and KISS principle
All of your design decisions are reflected in your landing page (or home page). There are two schools of though when it comes to landing pages - keep is simple, stupid (KISS) OR give the audience what they need straight away.
Many marketers would say following the KISS principle gives you opportunity to explain the main features of the business without overloading the audience with paragraphs of information which they wont read. Following the KISS principle would result in website landing pages which give the audience a glimpse of the best bits of the business - SHOW YOUR BEST PARTS FIRST - with the option for the user to click on links or icons if they wish to view more information.
The second option is to cut right to the chase and give the user all they want straight-up. This usually results in a website with not too many sub-pages. There are only certain websites where this is suitable. One example would be for a website of a single product or service - so there is little need to hugely complex navigation.
The benefits of this is that the user gets the info they want straight away. After all, only a reduced percentage of visitors will click-through to a sub-page of your site.
The main disadvantage is the risk of info-overload and important information being lost on the user. There have been many studies showing people only skim paragraphs of text on the web (hey you are probably doing this right now.. so you need to accentuate the important bit of your paragraphs to make them stand-out)!
4. Color choice is critical
Colors can make or break a website. You need to keep a few things in mind:
* Use colors which your target audience will like. This is not always as obvious as my 18-26 y.o gamer example earlier. If there are no obvious color likes/dislikes for your target audience just make sure your color choices conform to the next few points!
* Don't use colors that clash. To avoid this, use a color palette such as those on ColorLovers.
* Test your color scheme by simulating color blindness and other eye conditions using one of the many online tools available.
* Make sure your color scheme represents your product/service well. For example, a fishing charter company will probably be best to use blues and whites.
5. Use hot-spots for the most appealing and/or attention-grabbing aspects
There are several articles like these which will help you understand how humans react when presented with a website. There is a distinctive pattern of eye-fixation when the landing page loads in front of us.
Our eyes are naturally drawn to elements such as bullet points, lists, icons and large typography. Typically this is also in the top section of the website so you need to make sure you put your most important "grabbing" information up there. As a user scrolls down, provide more information.
So quite simply, identify the hot-spots for your website layout you have chosen and put your most marketable headlines there (e.g. "Free to sign-up", "10-day free trial", "Voted best by PCMag.com").
6. What fonts are best?
There are the standard web fonts which should be used for large block of text - we cannot really get away from this fact. However, there are options available to designers to help make the design a bit more attractive than using boring Verdana or Arial everywhere.
* Image Headings - these are effective and accessible as long as you use appropriate alt-text. However, it is best not to overuse these.
* sIFR flash text replacement
7. Validate, test, fix... rinse and repeat
Testing should happen continuously throughout the design (as soon as you start coding in (x)html/css). At a bare minimum your should:
* Test in Firefox, IE6, IE7, Safari
* Resize the resolution from 800x600 to 1280x1024
* Install the web developer toolbar and ensure you always get the "green tick" of approval all the time!
Keep in mind that sometimes when you fix one thing to suit IE6.. it will break something else in IE7 or Firefox. Yes its annoying.. but you need to test, fix, test again to ensure there are no nasty surprises when it all goes live.
8. Don't be afraid or reluctant to redesign
Once you have finished your masterpiece of a website, you need to expect (and listen to) criticism. This is the only way you will improve as a web designer. You also need to be able to filter out criticism in terms of things which are just personal preferences (e.g. "I don't like that color") and therefore probably shouldn't be changed and other criticism which is highly important to the overall site (e.g. "where do I go to sign-up?").
So after a few months, you should have a good idea of any tweaks or major overhauls that need to be made. It may be as simple as moving a certain aspect of the website to a more visible and "promotable" area.
7 things (you might want) to avoid in web design!
Posted by admin, 1 Year, 1 Month, 3 Weeks, 11 Hours, 38 Minutes ago
Thuiven.com is a site I visit regularly. It always has some no-bull web design articles which are very useful, interesting and honest.
The latest post is definitely worth a read. Dor Dan explains the 7 most annoying things which web designers/programmers do. This includes pop-up windows, poor navigation and overused trends.
Click here for the full article
Analysis of Web 2.0 Design & Layout Trends – Part 1: Clean, Colorful and Horizontally Divided
Posted by admin, 1 Year, 1 Month, 3 Weeks, 3 Days, 1 Hour, 20 Minutes ago
One of the web 2.0 design and layout trends which I actually quite like is what I am going to call "clean and horizontally divided". Catchy name eh?
Every trend should have a poster-boy, and the poster-boy for this trend is *drum roll* shoeboxed.com!
So, hopefully from the above screenshot you can see what I am talking about when I say "horizontally divided". You can see there are several sections of the website which are all divided by different colors and layout. Each segment serves a specific purpose, with the amount of "real" information increasing as you move further down the page, and the amount of "marketing" information decreasing as you move down the page.
Before we analyze the elements of this trend, here are some more sites which are worth looking at to give you an idea of what this trend is about:
Wishlistr.com
Blogadda.com
ChurchPlantMedia.com
Corking Design
Dibusoft
Enrichment
BizMagic
NetNova
Studio3K
YikeSite
Oak Tree Creative
Revolver
OK, enough of that! Lets get to it!
Top Segment/Logo
Looking at all the above screenshots you will see that most of these sites follow a fairly similar trend for their logos and top segments.
The top-most segment tends to contain a darker background with a very simple text based logo:
The logos may also have a small amount of decorative extras, but nothing too over the top:
These top segments tend to contain very little elements other than the logo. This leads to a clean look where the user is not overloaded with information and navigation options at the top of the page.
Other Segments
The second segment tends to contain large typography and a bit of catch-phrase or selling point for the website.
Third and fourth segments tend to explain the website or product in more detail (e.g. feature-list, screenshots and focus points).
Colors
The color schemes on these websites vary. Gradients are used extensively but subtlety. Black and light blues feature heavily, with splashes of vibrant colors in large icons on the sites.
Let's take a look at the more vibrant of the color schemes:
Icons/Vector/Characters
Graphics play an important part in the overall look-and-feel of this trend. We have already mentioned the use of gradients, but in addition to this is vector cartoons and catchy icons.
Vector cartoon characters are visually appealing and help brand a website. They also make the user feel like the application/website is very easy to use:
Icons and badges also help add a splash of color to the site. They can also draw attention to the more marketable aspects of the product/application/service.
Navigation
A big theme of this trend is simple, effective and clean. In order to achieve the clean feel, simple navigation is a key. In the sites we have looked at, there is a maximum of seven menu items present on the home page. Some even have as little as three menu items (Home, Login, Sign up).
So there you have it - a complete analysis of the "clean, colorful and horizontally divided" web 2.0 trend. I hope you are able to use this as a tool to help your own creativity if you choose to design a site which fits into this trend.
I hope to do further analysis on other web 2.0 trends - it is rather time consuming though so let me know if this is useful.
Free RSS Icons
Posted by admin, 1 Year, 1 Month, 3 Weeks, 4 Days, 1 Hour, 5 Minutes ago
Here are some fantastic looking free RSS icons created by a wonderful designer - Nyssa!
These icons are totally free to use and unique.
Click here to see Nyssa's blog post
Ultimate Web 2.0 Gradients - FREE Download
Posted by admin, 1 Year, 1 Month, 3 Weeks, 6 Days, 11 Hours, 45 Minutes ago
The wonderful people at Desziner Folio have produced some great "web 2.0" style gradients which are free to use. They have put them all into one Photoshop Gradient file so all you have to do is drop it into your plugins folder and voila!
"Gradients are one of the most important aspects to be considered while designing a Web 2.0 Site. Even a simple button is of a gradient. So I decided to make some cool set of Gradients and put them together in an Adobe Photoshop Gradient file (.grd). These gradients are fully scalable, what i mean here is its not an image or so.. just create a shape and apply the gradient - As simple as that. You could create Logos, Backgrounds, Tabs, Buttons, Wallpapers, Toolbars and all sorts of stuff.
I hope v2.0 was helpful a lot. Now this current version includes almost all the possible gradient.
Feel free to use these cool set of gradients anywhere but please don't forget to share this too."
Click here to grab the file
