Web Designer Blog

It’s said that you only get one chance to make a first impression. When it comes to your web design, that chance measures out to about 2.6 seconds, according to researchers. It takes about that long for an internet user’s eyes to go the specific area of a website that influences their first impression.

Image Credit: fotolia.com

Eye Tracking Study Results Where Users Focus Most

The results of a study conducted at Missouri University of Science and Technology revealed that internet users spend less than three seconds scanning a website before they focus on a particular section. Then they spend an average of 180 milliseconds (0.18 seconds) focusing on one particular section before making a decision about whether to move on.

If the website doesn’t load in two seconds or less, chances are very good that the internet user will not come back to your site. They will simply click away and move on to a different one.

If your website is on a shared hosting plan, your site’s loading speed may be effected if a co-owner experiences a large spike in traffic. Other sites may find that their loading speed is slower as a result. You don’t necessarily have to spend a lot of money to get a good hosting plan; it makes sense to compare sites and find the cheapest web hosting plan that will give you the features you need at the best price.

Read on »

Markup is a beautiful thing, and it certainly has changed over the years. What was effectively HTML1, has certainly progressed to an amazing semantic markup language, to which we can largely thank the W3C. And, what do ya know, the next thing to thank them for has come about – HTML5.

Unlike previous version of HTML, where the code was mostly a limited structure that was determined by how you made use of the class and ID elements, html5 really attempts to provide much more structure.

All of the layout can be created with semantic tags and elements that determine how you should structure, and, arguably more important, that help you structure each page. This produces code that is much more clean and readable than in previous versions of HTML, and really is something quite amazing. The new tags really require that you think about how you are structuring your page, which let’s be honest – in the end that is a great thing for us web designers and developers alike.

Before understanding the structure of HTML5, and how to create and code an example template to use for your projects you should be aware of how it came about. Be aware though that the current version of HTML5 has not reached a version that the W3C could call final as of yet, but their is quite a lot to learn about and start using in your code right now. Here is what the W3C has to say on this issue: Read on »

Facebook might not have all the glittery text and obnoxious backgrounds that MySpace has, but it still has its fair share of useless apps.

This is especially true if you have ever tried to search for creative Facebook apps or those that may be of interest to creative people.

If you have ever searched for such a thing, you have no doubt realized that there is an abundance of useless apps. This is the reason that I went through just about every app on Facebook to find the very few that were best suited for creative individuals, or had some sort of visual flair about them.

So here are 25 awesome Facebook applications that most designers will enjoy in their Facebook pages.

1. Addicted to Photoshop

This is a neat app brought to you by the master minds behind the “Sheezy” sites (Brusheezy, Flasheezy, etc).

“Photoshop Brush Junkies Rejoice! Get your daily fix of new Photoshop brushes and patterns from Brusheezy.com!”

Read on »

When people are surfing the web they will get very impatient when they cannot find what they want quickly. Navigating the web has to make sense to the surfer and right away, so if the web design is done with this in mind, the layout of an effective website will have similarities to all the others.

You need to use standard conventional links like buttons underlining the text and changing the color. It is not such a good idea to use clever names for the links. Simple is good. Keep in mind the type of people who are going to visit your website and have it designed to suit them.

The elements of navigation are very important so whether you are trying to inform a person about a service or product, or trying to sell them this service or product, the web design for your links can be the important factor to consider. Read on »

There are an extensive amount of roads you can take in web design, specifically in navigation. Here, we will talk about one specific navigation technique, tab-based navigation. If properly carried out, tabbed navigation can be very clean and organized within a web layout.

So what is tabbed navigation? Well, it is essentially a set of buttons most often set horizontally. Tabs generally follow numerous different styling guidelines. First, a tab set usually is attached to or slightly protrudes from a container, like in the example below. Also, notice how the open tab matches the background color of the container, and the other buttons are darker. This is another common styling guideline.

When you look at tabbed navigations, you will also notice many styling trends. First, many tabs will have rounded corners on buttons. This helps to create a clean look. Also helping to make a clean look is the use of separation between buttons. Most designs use space to separate buttons, but a bevel, single line, or background color contrast will also look nicely.

You will also see the use of hover effects, which is a common usability characteristic of the tabbed navigation. Gradients, radial and linear, help to achieve an impressve hover effect that brings dimension to the button that the user is selecting. Actually, you will notice that many tab buttons, selected or not, will use a slight gradient to add depth and demension to the button. This is a very simple detail often used to bring extra styling to many different user interface elements, such as buttons. The most important aspect in the design of tabbed navigation is that the active tab needs to be clear and obvious. This is what separates a tabbed navigation from an ordinary horizontal row of buttons or hyperlinks (thanks, Allen).
So, with all of that in mind, take a look at these excellent tabbed-navigations shown below. Look for the trends, and follow the link to further inspect the usability of the tabbed navigation and how it looks with the rest of the design.

City of Grace
A good example of tabs that work nice colors into a usable layout.

Revolution Drviving
Brilliant button backgrounds that aren’t over the top make these tabs really great.

Track My People
These buttons use gradients for depth, and a drop shodow to add demension to the tabs behind the selected one.

Jobs on the Wall
More brilliant styling, these tabs fit perfectly with the other elements on the site.

LittleLines
This is one of the better examples of styling in this showcase because of the gradients to add dimension to the buttons and strong borders.

Magpie
Doesn’t get much more simple than this, but still a good example.

The Invoice Machine
The navigation below uses a strong color difference, usable buttons, and borders to separate tabs from the rest of the design.

Inkd
Good styling and usable because of size and separation.

Successful, eye-catching and mainly user-friendly site navigation sometimes is key to whole web design, because users usually search for navigation at first, when they visit website. Also don’t shy to experiment – portfolio websites can stand out just by that, creating something beautiful and unusual. In our days there are times when whole websites slide over your eyes, possibilities are pretty limitless. Keeping in mind such parameters, I created a list with 10 innovative, beautiful, creative and eye-catching navigation menus for your inspiration in web development process.

1. Panic – Coda

Popular menu already, you may know about this one before.



2. Helmy-Bern

Excellent example of well implemented grunge website and JavaScript navigation



3. SkiAlpine

Simple yet well designed navigation dropdown menu.



4. TapTapTap

Exceptional navigation, you gonna love this one.



5. TheHoleInOurGospel




6. Apple

Whole website is one big beauty and MAC section has interesting sliding menu.



7. Creasenso

Beautiful rollover effects in navigation.



8. Branded07




9. Aperfolio




10. AteBits

Since web menu is the most significant element in site navigation, in most cases, simple, intuitive and conventional solutions are usually the best option. However, it doesn’t mean that they need to be boring. Web menus need to be simple enough for the user to understand, but also contain the elements necessary to guide the user through the website – with some creativity and good design thrown in.

Let’s take a look at 5 excellent web menu samples presented in this article, from which you can observe and get some ideas of developing further in your website projects. All these web menu examples have one thing in common: they are creative, good-looking, and perfectly fit to the style of their respective websites.

Read on »

Website color is vital component for web design. Many website designers are likely to choose black as main color from a marketing point of view. In order to get a certain harmony, the web elements usually apply the similar or the same color to match with web design, for example, black menu is used on the black website.

Black menu is color joker, it is widely used for the various website colors which ranges from light to dark, the classic color includes black&white, red&black; black menu conveys the sense of fashion, business, reliance; black menu is plain and high capacity to contain almost all URL links to reach the target page quickly. Black menu is absolutely the popular menu, let’s view the excellent black menus from the famous companies:

Adobe

Sony

Nero