Great websites do not happen by accident, you have to consider web design best practices. A site is considered successful if it is useful, relevant, and well designed. As the Head of the UX department in a code-free web design platform, I spend a lot of time thinking about great design, website best practices and how it can be used to create great websites. While different web projects each have different needs, there are some design principles and best practices that are universal to all sites. In this article, we will take a look at 5 Design Tips to Revive Your Dead Website and some other great tips on redesign and what to avoid when designing a website.
Table of Contents:
- 5 Web Design Best Practices To Follow
- Ancient Website Design Practices That Beginners Should Avoid
- Things Web Designers Do That People Love
- Using Character Development for Better Website Design
- How to Properly Redesign a Website
- Beauty vs. Function On Redesigning
- How to Make the Best out of the Fold
5 Web Design Best Practices To Follow
This section will talk about best practices in web design, that everyone who is creating websites, be that for them or for their client’s, should definitely follow.
1. Think About Conversions
Design goes beyond just the aesthetics. Yes, you want a website to be visually attractive, but you must also bear in mind that a website is not a work of fine art. Customers do not come to a site to admire the visual appearance. They are there for some actionable reason – to find certain information or to accomplish a particular task.
A successful website is one that understands these needs; thus, its design should lead people to do exactly what they are there to do. With this in mind, you have to keep in mind that the conversion potential of the website is an integral element of the website’s design.
Conversion means people transition from being just a casual visitor to becoming a paying visitor, becoming a member of the site, subscribing to receive additional information from you in the future, or even just completing an inquiry form.
Every aspect of a site’s design plays a role in driving customers to their destination and converting them.
- Images – The images should be interesting, unique, and high quality
- Color – Is the color scheme attractive and eye-catching?
- Text – This includes the use for messaging as well as the descriptions, instructions, and labels
- Navigation – How smoothly can people navigate through your website?
These are just some of the elements that contribute to successful conversions. Basically, if something is part of a site’s design, it is a factor in customer conversions. Consider the two websites used as examples below and decide which one will get higher conversion.
So how do you know if your site has made the right design choices from the perspective of conversions? You don’t want to just make a decision and hope for the best. No, you need to test your design decisions and be able to make the necessary adjustments.
[ctt title=”Start testing and stop arguing. ~ Jon Correll, CEO ConversionVoodoo” tweet=”Start testing and stop arguing. ~ Jon Correll, CEO ConversionVoodoo” coverup=”851dM”]
A/B testing is a great way to compare the results between two variants of a design. For instance, you may have a large call-to-action button on your site’s homepage. You want to know which color, text, and even placement will be most effective for that button.
By running a test where some users see one option (A) and others see a different option (B), you can measure the results to see which configuration performs better and results in more customer conversions. You can then make changes and run additional experiments to try to find the best button option possible. That is the one that should make it in to your site’s final design!
2. Don’t Be Afraid of White Space
Another important property of a great website design is the effective use of white space. To non-designers, white space seems like the areas of the site where design has not been applied. For an expert web designer, however, each part of the space that they use around the images, written content, call-to-action buttons, and every other element of the site is deliberately designed. Prominent designer, Ellen Lupton, puts it best by saying:
“Design is as much an act of spacing as an act of marking.”
Too often, companies think of their homepage as if it was a newspaper. They strive to fill every available pixel with one kind of content after another, the same way someone laying out a newspaper would fill every inch with columns of copy. This aggressive use of space makes sense in terms of newspaper printing, but websites are not newspapers and people do not consume website content the same way they consume the printed page.
For website visitors, adequate spacing between elements on a page allows for a more enjoyable reading experience (more on that reading experience shortly). It also allows them time to focus on the individual pieces of a page without being overwhelmed by everything else around it. White space gives content time to shine without fighting for attention against all of its neighbors!
One very interesting way of using space is parallax scrolling. Parallax is an effect where the foreground images on a website move at a different speed than the background images giving that site a sense of depth and motion. This effect can be used very effectively as a storytelling device. Different page elements (images, text, etc.) can appear on screen at selected times as a user scrolls through the page. To make these elements have maximum impact as they appear, good use of timing and effective spacing is essential.
Many designers are intimidated by the technical demands of parallax scrolling because the website code needed to power that parallax scrolling can be daunting for non-developers. However, there are parallax scrolling plugins that are actually intuitive making it easier to add these effects, as well as the proper spacing between these animated elements, to your website – all without needing to write one line of code.
3. Typography, Typography, Typography
While awesome videos and stunning photographs may get much of the glory online, the reality is that the Web is predominantly text content. If there is one area of your website where some extra design attention can go a long way, it is with that site’s typography.
For years, websites were limited to only being able to use a handful of “web safe fonts,” such as:
- Times New Roman
- many more
These were fonts that were essentially guaranteed to be installed on your computer (since this is where a website reads its fonts from). In recent years, however, font selection for websites has taken a significant leap forward with the introduction of @font-face (pronounced “at font face”).
With this method, font files can be included along with other resources, like images, that a website needs to use to display properly. Instead of getting fonts from a user’s computer, a website can instead use these included font files allowing that site access to a staggering array of font choices used in that design!
While having access to more fonts is great, how you utilize them is still important. In fact, with a big number of possibilities available to web designers nowadays, strong typography skills are more critical than ever before. Moreover, having a plethora of fonts to choose from is awesome, but you still need to make the right choice for your particular project. Understanding what type of font (serif, sans-serif, slab-serif, display, etc.) is appropriate is the key.
Typography is not just about font selection, but also about the size and color you use for the message as well as the weight of the letters, the spacing around those letters and words, and so much more. Above all, it is about text content that is easy and enjoyable to read. Here’s a good example:
Design Can Change
Design Can Change is a good example in using the right elements mentioned in this article. The black and white font in various sizes gets the message clear inside a background of bright red with enough white space that leads you to read the short but powerful message.
Remember, a website is not just a pretty picture meant only to be admired. If your site has text (and which site doesn’t), then it is meant to be read! It may be a content writer’s job to say the right thing with your site’s messaging, but great typography will ensure that the message comes through loud and clear.
4. Add Less, Not More
One of my favorite design-related quotes comes from Antoine de Saint-Exupery:
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.
When designing websites, there is always the temptation to add “more stuff”. Clients request additional features to be added, they want more buttons squeezed into the navigation, or they make some other request to pile more into their new website.
Adding elements or content that is necessary for success is fine, but anyone who has even had these conversations can attest to the fact that everything being added is certainly not necessary. Too often, these additions add clutter to a design instead of clarity. Therefore, instead of contemplating what else you can add to your site, look at what you already have and determine what can be removed.
Take that aforementioned navigation bar, for example. If you have 10 links or tabs in that navigation, your visitors will take longer to determine which link is the one they need than if you only have 8 options. If you can whittle it down to 5 or 6 options, you are in even better shape!
Less is more in this case because the fewer options someone has, the quicker they can make a decision. With the impatience of most website visitors and the immediate access to content that they demand, the type of clarity achieved through the reduction of elements (in this case navigation links) can be hugely beneficial.
[ctt title=”Clarity trumps persuasion.~ Clint McGlaughlin, Director MECLABS” tweet=”Clarity trumps persuasion.~ Clint McGlaughlin, Director MECLABS” coverup=”14c59″]
Another example of the “less is more” principle is when you are trying to emphasize something on your site. Think about the typical homepage for a minute. Many companies use this page as a platform to promote every possible piece of content that their customers may need. They add so much content to that page trying to emphasize all of it by making things big, bright, and bold. What happens when everything is emphasized, however, is that nothing is emphasized.
When every element of a page is screaming for attention, the message and purpose of that page become lost in a cacophony of noise. By removing elements, those that remain will automatically have more focus. Instead of trying to add visual treatments to a specific part of the page to emphasize it by making it bigger or bolder, try taking away the stuff that surrounds it and use the principles of white space that we covered earlier in this article.
Once the remaining element has broken free from the clutter that surrounds it, it will, by default, be more emphasized because it can now shine without competing with other page elements. This website is a good example of this principle.
5. Have Fun…but Don’t Go Overboard
One of the goals you most likely have for your site and for your online presence is that you want to make an impression on your visitors. You want them to remember your business. One of the best ways to achieve this is by adding some “fun” to the experience. After all, a fun experience is one that people enjoy – and if people have an enjoyable experience, that is also often a memorable experience.
Now, your initial reaction may be that you cannot have a “fun” website, but let’s define what we mean by “fun” here. Fun doesn’t mean silly. A website can be both fun and professional at the same time by also adding a layer of delight to the experience. It means taking what is mundane and replace it with something memorable!
Take “The Dangers of Fracking” site, for example. This is a site that is about the dangers of hydraulic fracking – definitely not a topic that you would think is “fun”, yet it becomes engaging, engrossing, and memorable because of the use of illustration, animation, and a parallax-style storytelling effect. This is a perfect example of “fun” being used on a serious website to make the message and experience more powerful.
However, you must not forget that there is a line you must be aware of when adding “fun”. It is easy to go too far and get distracted from your primary goals for a site. When using this approach, it is important to know where that line is to avoid going overboard. Just remember, there is always room for fun and delight in a website experience, but it is your job as a designer to find where the line between “too much” and “just enough” is and to help bring your site to that point!
We actually have a lot of resources here on 1WD where you can learn more of these things as well as how to apply them on your site.
First is the recently created Web Design Guide, where you can learn these things in depth,our #EspressoMonday videos, where you can find golden nuggets of practical advice to become a better web design professional, and a lot more from our web design blog.
If your website is in need of a shot in the arm, then a healthy dose of design, including the 5 tips covered in this article, may be just what the doctor ordered. Talk to your web designer about your goals for the site and how design improvements can help you revive that dead website today!
Tomer Lerner is an award-winning designer and a UX Manager at Webydo – the code-free website design platform for professional designers – where he manages the UX development team to push beyond the limits of creativity.
We see now what we should think of and what to do when designing a website. Now let’s take a look at what w should avoid.
Ancient Website Design Practices That Beginners Should Avoid
This is intended for beginners in the field of web designing and web development. Here we are talking about old design practices that have died off several years ago, but up to now some are still being used. The goal is to discuss why these practices are bad and to instill in the minds of budding designers and developers that doing the right thing even if it’s hard to do and hard to learn will greatly pay off in the future. For professionals and experts in the field, we need your knowledge and opinion here!
When designing you should always think several steps ahead because the initial design can make or break everything. Always ask yourself the following:
- Will it be easy to maintain when it grows?
- Will it be easy to access?
- How about SEO?
- Will it be easy to update/make revision?
- What will it cost?
- How will the users react to it?
iFrame and Tables
For employers/clients out there, there will be designers/developers who will sacrifice future convenience for a little comfort at the present moment. Like doing things the wrong way (because you won’t notice the difference anyway) because it’s easier and faster to do. For goodness sake designers and developers, do the right thing from the start even if it’s harder to do and harder to learn.
Wait, what did I just talk about?
First, with tables. <table> was designed for tabular data, not for structuring websites. It’s for showing figures like in Microsoft Excel. Obligatory, it was once a fad to use tables to structure websites, but that was pre-CSS. If you made the reckless mistake of structuring a website using tables, I’m afraid if you do not correct it soon, it will be a snowball of problems in the future.
Problems how, exactly?
1. SEO – according to a friend of mine who’s into web development, although content inside a table is crawled by search engines it is still better to use <div> because it is crawled first. When it comes to crawlers, the first thing they see is the most important.
2. Code and Maintainability – wait, code is for coders, not for designers! Wrong. Even if you consider yourself a pure designer, you should still learn how to code. Especially learn the workings of HTML and CSS. Now, tables are very hard to maintain, especially when the website is a large one. Aside from the labyrinth-like nested code of tables, there is the issue of maintaining it properly. In cases where a large website, using tables, needs to be updated..it will be hard to pull data and restructure the website. That I promise you.
How about iFrames? iFrames are cool. You can load a single frame without affecting the other frames. It can also be used to..wait, what? iFrames are more ancient than tables (lol). Users will have trouble bookmarking an iFramed website because there are literally many pages in one page.
So, what should a budding designer and developer use?
For the love of Batman, use CSS and learn AJAX. <div> is much better, and was designed for this very purpose: easy to maintain. You want to load data easily without refreshing the whole page? Learn AJAX!
Even the slightest movement can be detected by your peripheral vision. Humans have evolved with very sensitive peripheral vision to avoid a predator’s attack. Over thousands of years, once we’ve all become conveniently secured from vicious animals, the almost-instant reflex is still with us, making slight movements outside our focus irritating.
This is also the reason why advertisements with animations should die, especially on blogs and news websites where people spend a great deal of time reading, with eyes focused on each line. A slight blink to the right will instantly remove a reader’s attention, although in due time people will learn to filter them out, it still bugs many people including me.
This brings us to marquee. They were once hot, at least for noobs, I even used to add one on every webpage during my freshman year in college. To beginners out there, NEVER! Sadly, I know a couple of high schools and colleges that teach their students to use marquee.
No, please, don’t use images for your navigation. Aside from sacrificing the website’s loading speed, you are also telling the whole world that you’re greatly outdated.
Let’s take bad practice to another level: different image on hover. Never. Even if your client says so, fight to the death for your right to practice what is proper.
If the website’s purpose does not require it to display images, it’s better to design using CSS. I’ve seen websites use background images that load like a turtle, what’s worse is that they’re full 1024×800 images.
Instead of using images for navigation, use text and CSS for effects.
Then there’s the question of what image format to use. I’m no expert when it comes to this so I’ll refer you to a post by Rachel Arandilla (one of 1stwebdesigner’s regular contributors) about Different Image Formats. It should give you a good idea of what image format to use for the web. Mostly, it’s PNG and GIF, with an exception of JPEG for high-quality photos. Still, visit and read the article for an in-depth explanation.
Music and Video
Specifically background music. A startled visitor will ask, “where is the boombox?!” and will just close the site, a 100% bounce.
I’m not a fan of name calling, but just this once I will name one website that auto-plays its video: Sidereel.com. Follow these easy steps: 1. select one TV show and click it, 2. wait for it…, 3. wait for it…, 4. did you hear it? It’s auto-play!
In any case, never auto-play anything. If you need to auto-play it, at least have the decency to start it on mute.
Too Much Pagination
Have you visited Cracked.com lately? Their articles are paginated, but that’s a good type of pagination since you’ll rarely see it exceed two. The problem with other websites is that they’re too concerned with page views that they tend to chop a 1000–word article into five or ten parts (seriously, I saw one news website do this)! Needless to say, I never visited the website again. This might not be the designer or developer’s fault, but internet entrepreneurs should be educated on how to deliver content well.
Hidden Text and Links
You have text in your navigation and content partly because of SEO, right? As mentioned in Part 1 by our readers, using images for navigation is okay, but how will search engines crawl them? Answer: “text-indent: -9999px” (it’s over 9000!), or hiding the text using CSS.
Now, this is something very controversial. In my search for free, and good, WordPress themes I stumbled upon this article by Siobhan which talks about hidden “spam” links on many free WordPress themes. These free themes are bad for SEO, Google has a policy about hidden text and links which states that intentionally hiding the text/link behind an object or out of the screen’s view may be cause for the removal of the site on Google’s search results page.
To demonstrate the evils of in-line styles and what damage they can do, here is James’ comment:
Again, this was pointed out in the previous part. Instead of using an external CSS, some insist on styling on the spot – which I am very guilty of! While the appearance will clearly be the same, this is still a bad practice because as the website grows, so does the styling for everything. While using an external master sheet may seem to be a daunting task for some, the ease of access to it is far superior than navigating through a series of HTML tags looking for the thing you need to change.
Again, stop in-line styling and create an external CSS. It’s also a good way to recycle codes, right?
Too many Social Media buttons
(website’s name is intentionally withheld for my safety; some are highlighted look below)
Competition is high, we understand, but having 10 social media buttons at the end of each article? Seriously? Today, people are content with Facebook, Twitter, Google+, and sharing via e-mail (share via e-mail?) so let’s keep it at that. No need to add seven or ten buttons because 1) it doesn’t look good because it seems like you’re hogging, and 2) it’s not pleasing to the eyes.
Splash Pages and Pop-ups
Well, it actually depends. If it’s an 800 x 600 advertisement I probably won’t visit again. Blocking the view is never a good practice, save for a limited-time campaign.
Also, I’m sure you’ve seen this “Share” button somewhere. I really hate this, and I’m sure many of you will feel the same. It pops out whenever the cursor is hovered over it and stays for a few seconds.
This will be my second time calling names. GooglePlusAnswers.com is a whole new level of splash/pop-up/irritating.
Why must I share or like or tweet or +1 your website or wait 30 seconds before you grant me access? Sadly, it does not stop there. If you don’t want to share, you’ll keep on seeing the same thing all over the website.
This lame stunt also happened during Facebook’s debut. “Like this to unlock content” my a–-!
Dark Background and Light Font Color
To demonstrate, click the image to open the website and read a line or two. After reading, open Google. It buuuurns!
Perhaps the greatest affront a designer can do to the world is…
…not striving to learn new techniques when the whole world is changing rapidly. As a designer, it is your duty to go with the flow, to commit necessary changes when the world demands it. Part of it is to educate those who are below you so that the spread of good practice will propagate. If there is enough reason to believe that your design is not doing any good, instead of waiting for it to work, why not find a different method to make things work?
So, what say you? I’m pretty sure I’ve missed quite a lot of bad practices, so fire them all below!
Your Turn to Share
These are very basic, and very old, practices that were once hot. A lot of has changed since these outdated methods were considered cool or good, but there are still people who are go down the wrong path. So, how do we prevent this from happening? By telling the world the correct practices. Now it’s your turn to share!
Ancient practice is ancient.
Now as we speak about best practices and things you shouldn’t do, we should definitely look at what people actually appreciate in design.
Things Web Designers Do That People Love
Web designers and web developers often wonder what kind of things they should do so that their audience will love them. In this section we will talk about those little things that create a big impact on people throughout the internet.
As an avid internet user myself, I usually remember a website (even if it has a very difficult domain name) that gave an impact to me. Like the way how every elements are laid out in harmony, the simplicity or complexity (in a good way), and many more.
A good web designer understands that visiting a new website may be confusing at first, because it’s a new layout and the new visitor will not automatically know where to find things. The same is true when you visit a new friend’s home, you don’t know initially where the john is or where to sit and relax.
A good web designer is a good host to his guests, that’s why they will need to guide the visitors’ eyes like they are giving a tutorial on how to use the website, only it is actually without telling them. It’s the mark of a good web designer to place elements where the visitors will expect them to be, or create an attention getter. For example, the Login and Register links are usually at the top right corner of the website, below it is the search function. An example of a good attention getter are Call-to-action buttons which tells the visitor/audience what the button is about.
I’ve recently discussed the difference between using a horizontal and vertical navigation for websites. That applies here, obviously, because there will be people who would prefer to have all navigation at the top, laid horizontally.
One particular website that I love is Net Tuts+. The color scheme is simple, there’s a lot of space to breathe and navigation is simple – all of the important things you need to use to navigate the site are at the top.
While it is perfectly normal to experiment and show the world your creation, it is not really a good thing especially if you are aiming for mainstream. Take for example websites with vertical navigation. There hare websites that hit the correct spot, but such a design is not really accepted widely.
A good web designer knows when to provide their audience new things, such as art-directed designs for blog posts. They also understand that, while unique is good, it will be bad to deviate too much from the accepted standards.
Key elements such as the navigation should be placed where the visitor will expect it to be.
This might be the hardest and most stressful part of designing, making sure that your design is not messed up on different browsers and machines. One problem about new designers is that they tend to not take notice of the fonts they use, if the other users have it or not, or if it runs on a Mac and others.
Since we all have our preference with internet browsers, it is the duty of web designers to make sure that their design appear correct on my Chrome, on your Firefox, and on old Nan’s IE6.
We need to address this question here: is it a requirement that websites should look the same for every browser?
Useful article for CSS/HTML effects for people worrying about cross-browser compatibility. And yes, you’ll see good ol’ IE.
Redesign for Comfort
A good web designer does not redesign a website to give its users great discomfort, they redesign a website to make it easier to use, even for new comers. This is where some big websites failed in the past, websites like Digg and the Gawker network suffered major losses in their users because of their redesign. Whether it’s because of the redesign not being good or the hive mind at work, it’s still a great stab on them.
I’m proud to include 1stwebdesigner here. I’m pretty sure that 99% of our loyal readers and frequent visitors liked the redesign. I was actually ecstatic to see this website change from the dark blue background and small thumbnails, and a little compact front page, to what you see now.
I think you all will agree that 1stwebdesigner today is much cleaner than before. I can’t tell if it’s a good thing for certain, but the removal of tabs just after the post made the front page easier to look at.
Going back, if there’s an oath that web designers should take when redesigning a website, it should mention that they need to make things comfortable for the users, not complex.
Any of you redesigned your website? Now is the perfect time to boast your redesign by posting image links on the comments, before and after. You can take a “before” snapshot using the Internet Archive.
Listens to Feedback
Once a website goes live what owners usually do is ask people what they think about the design and functionality. You can easily spot a great web designer and web developer when they actually listen to the people and apply necessary changes when the argument is valid. People love talking to web designers and developers especially when they get the feeling of “being on the same plane,” when they respond to the people. Again, 1stwebdesigner did this when the announcement (see page 1 of comments) was made about the new design. People came flocking in and gave Dainis their suggestions. One was the size (570px by 300px) of thumbnails for the Further Readings, now changed to 150×150.
In my previous article (Ancient Web Design Practices that Beginners Should Avoid) I mentioned that the worst thing a designer could do is to not learn new things and just settle for what they already know. That they need to follow suit as technology advances for the comfort of their users.
Things like learning CSS and jQuery can mean a lot to the users, especially when it’s functionality and usability we’re talking about. Take for example major commenting systems. Three years ago you will need to refresh the webpage to see if a new comment has been posted, now you don’t have to. The same goes for Twitter and Facebook, the ease of access is there, it’s a little thing that all of us love.
Another important factor to consider on your designs is negative space, often called white space. It is often overlooked because of the thought that every nook and cranny of the website should be filled with something. Wrong. The effective use of negative space gives a sense of relaxation to the visitors, erasing the feeling of being packed in a tight space. Negative space communicate
I’m pretty sure there’s still a lot of things out there that can make visitors/audience/users fall in love with your design, so why not share them here if you know one? I’m certain that other web designers and developers will find your tips useful!
We want to bring forward one thing that can really make your web design shine. This is character development in design. The personalisation of your design.
Using Character Development for Better Website Design
The ability to add true personality to the design of a website is the attribute that separates professionals from hobbyists. Since the aim of the majority of websites is to persuade a visitor into an action, and the best persuasion comes when there is a personal attachment, this is a vital ability for a lasting career. The use of this practice will transform a website into something more of a presentation, an informative journey of discovery. So why give visitors only one chapter of the journey to view? Is that fair to them, or better yet, their understanding of what you’re trying to get them to grow an attachment for?
What is Character Development
*Image Credit: Howard TJ
Character development is a technique used frequently by creatives of written arts (authors, poets, screenwriters, playwrights, etc.) to try to create a level of personal attachment to the character from the reader. This is done by writing a storyline that allows the character to grow and progress throughout the written work. An example of great character development would be something on the lines of a cult following formed around a supporting character.
Examples: Wolverine (X-Men), Snoopy (Charlie Brown), Captain Jack Sparrow (Pirates of the Caribbean), Homer Simpson (The Simpson), and Stewie Griffin (Family Guy)
Some might be wondering right now why are breakout supporting characters being depicted as great examples, as opposed to main characters. Well unlike the main characters, a true breakout supporting is a rarity. It takes a character with enough appeal to draw viewers/readers in, and then a plot line that allows for a personal attachment.
Now that we have briefly taken a look at what character development is, and what can result when it is properly applied conventionally, it’s time to get going with the reason why you’ve started this article in the first place. Let’s get into how to apply character development to your web design projects.
Setting the Personality
*Image Credit: Joel Mark Witt
Before going into any further, a personality type must be set for the website being designed. As mentioned in the introduction applying personality to a design is a fundamental skill of a professional designer. Okay, the purpose and benefits of setting up a personality for a design have been stated, so let’s get into how to create one. For those unfamiliar with doing this, don’t worry, it’s an easy to follow 4-step process.
Step 1: Look at the audience aiming to be persuaded. As any starting point for a design process, looking at the intended audience is where it all starts.
Step 2: Think of a personality the intended audience can relate to, and feels most comfortable with. People are simple creatures. Seeing someone similar to them creates a comfort level that allows them to be more open to what you’re trying to sell them.
Step 3: Determine a life story. The way a person talks, walks, decision-making, presents themselves, and views life is determined by how they grew up.
Step 4: Figure out the sales pitch. Once you’ve got the general idea of the person your visitors would relate to the most, think about how that person would make the best sale. After the best sales pitch is determined, go with that one.
After following this quick process, and of course adding some things in here and there, the person your design is being based on is set up. What’s left to do? Well, now leaves the focus turning into how to properly develop this person to the visitor throughout viewing the website.
The Life Stages We’ll Be Showing
Just like in the works this method is being derived from, there will be no telling of the entire life story. There is only a need to pull the more important sections. This will hopefully convey the full life story, in a shorter time frame. Here are the sections we’ll be looking at: Infancy, Adolescence, Adulthood, Seniority.
*Image Credit: Duncan H
Looking at a baby is fun because of all the possibilities that lay ahead for that little person. The possible good, the possible bad, the life struggles, and expectations. These things all lay in the future of any newborn, and its brings excitement to the onlookers of what could be. Isn’t that the type of feeling you want visitors to your website getting?
From the very first second someone lands on your website for the first time, that feeling of excitement must be established. To get this done, we are focusing on the homepage here. Why the homepage? Well, this is because this is the most influential page of your website at initial viewing. It is viewed in a similar way as a person would look at an infant. Now, let’s look at setting up a good one.
How to Set Up for the Infancy Stage
Your homepage has one aim, providing a summary of your website as a whole. There must be enough information to gain enough interest to begin the emotional attachment of a user. In addition, there can’t be so much at first so that they won’t want to explore to find out more. Here are a few tips to achieve this:
- Have sections going into brief detail of the most important pages in your site’s CTA, sales pitch.
- Try to lightly hint on a form of ideal navigation for them through the website. Ex: go to homepage, then about, then contact, etc.
- Ensure the bond is being established. This is the most vital to the success of a visitors further exploring. Look back at the personality decided upon earlier, and make sure that type of vibe is felt.
*Image Credit: Van Gal Linh
Does the phrase “The decisions made as a teenager will decide how the decades of life after play out,” ring any bells? Well yes, what is done as a teenager affects the outcome of the rest of someone’s life. That may not be the full story in life, but in web design this is a make or break stage. The adolescence stage is represented by the pages of the site where visitors learn more in detail. An example in a portfolio site will be the about, portfolio, service offering, and blog pages of your site.
How to Set Up Pages for the Adolescence Stage
At the infancy stage the visitor has gained some level of personal attachment, hopefully, because of the personality and potential growth of the imaginary person they feel beaming from the page. Once further exploration into the site is started, that is when the infancy stage progresses into the adolescence stage. This is where the visitor ultimately makes up their mind on whether or not they are going to fall for the pitch being aimed at them.
Build on the already set personality
It is quite noticeable when a certain tone is not present throughout a site, and it happens quite often. So instead of leaving it because you’ve decided that it was only going to be a light hook, and the information will be the sell, expand on it.
Connect pages in a planned order
There is a 99.9% chance that a visitor will pick which pages they want to look at. This ironically makes some of the time spent planning feel wasted. However, it isn’t. In every page there should be some hidden guides to your ideal page viewing path. It doesn’t need to be something along the lines of telling them the ideal next page of their viewing, but something subtle and meaningful in the copy area will do the trick.
Ex: A band’s website album listing page linking back to their bio page by suggesting it will help understand the album process. This gives visitors an opportunity to learn more about them, and likely get them to buy more material because by reading more about them they grow more of an attachment to them.
*Image Credit: Victor1558
Adulthood is considered to be the time where people are able the to take the life lessons learned in their youth, and turn them into a promising future. It is in this stage where people are assumed to get their act together and start pinpointing their life goals.
So the adulthood stage of your website is where things get serious. Here, the final CTA of your sales pitch needs to be fully in play and the website conversion is made. Now, let’s look into getting that clear CTA across to visitors.
How to Set Up for the Adulthood Stage
Get to the Point
Everyone can remember plenty of times of going to a website, feeling like its done a great job of convincing you to buy what they’re selling, and something goes wrong at the end. Essentially whatever went wrong cleared any positive affirmation, and replaced it with strong hesitation. This often happens because the focus isn’t there, which is ironic considering viewing other areas of the site was only a buildup to this page(s).
Things like this happen when the message at the end isn’t clear and to the point. Often people think they need to explain everything in detail, this very seldom will help. Too much text and you’ll lose those visitors.
Keep the Conversion Process Simple
As anyone with some UX expertise will tell you, simplicity is bliss. Any process that lasts longer than it should, is one that is missing out on opportunities. People don’t like to do things they think have too many aspects they view as a waste of time. It’s just how people are, and it makes perfect sense. Don’t make them go through pages of filling out fields, when in reality, only one page will do. This goes triple when concerning mobile.
How will you be using character development on your next web design project?
We are talking about all these things that should be done when designing but, what should you consider when you are redesigning a website. Let’s get into that too!
How to Properly Redesign a Website
Redesigning a website happens very often on the internet today. It can be thanks to the new technologies that appear one after another (and every one of us wants to stay in fashion) or because the rules change from month to month. Whatever the reason is, it is quite important to do it properly and to ensure the new design will bring you more advantages over your competitor than the old version.
The bigger and more important your webpage is, the higher the probability to fail when redesigning it is. Why? Because when you have to take hundreds of thousands or millions of users under consideration, it might be difficult to please all of them – quite frankly, it is impossible to do it. I personally experienced leaving a website I liked only because they changed the design – and I am aware of how the web works. If I left that webpage for good, I am wondering how many other users that don’t have anything to do with design did the same.
In order to increase the probability of your redesign being successful, I have created a list with some tips for you.
Make sure you need to redesign
When you already have users that come back to your site, most of them expect certain things; they know where the navigation is, where to search for content, where to find archives and so on. By redesigning you will most likely change those things.
Image by buritikid
If you are lucky enough and have a responsive community, you can even make a poll and ask them if they think the site needs to be redesigned. If you don’t have such a community, the decision will be up to you and will be more difficult to make unfortunately. Try to ask fellow designers about the particular website and see what they think about it.
Involve your users
The second step in a redesign process is to involve the community base. This can help your new website to look and suit your audience better, because you get feedback from them and use it to inform your designs.
A good tip would be to try and keep the main elements in the same place, or at least to ensure the functionality is similar. Moving the sidebar from left to right is confusing for the first time; the same with the navigation – if you had a dropdown menu before, either go with this type again or simplify the navigation. It’s important to always make sure the user doesn’t find the new website more difficult to navigate than before. Thus it’s necessary to avoid a total redesign. More important, involve the users in the process.
Image by Dominik Gwarek
Test the website
Testing the website doesn’t only happen behind the closed doors of an agency, but also with the users. Offer them the option of testing the new website – and make it visible. Afterwards, allow them to send you feedback through forms or a survey and always keep track of it. This is another way of involving the users and helps because, I am saying it again, the user is always the focus. You never redesign for yourself, but for them. Allowing them to test the new design before it’s done will also give you the opportunity to adjust it. Expect this to be a difficult process, because you will start with some ideas and will end up with a different site – but make sure your visitors will appreciate it and will come back afterwards.
Don’t change the layout right away
This is a strategy most of the social media sites use. Whenever they change the layout, they either allow you to stay with the old one for a predefined period, or change to the new one and give you the option to go back to the old style. Why do they do this? The answer is simple. Not everybody has the required time to get used to a new layout when the designer wants. Getting used to a new style takes time and if the user doesn’t want to spend that time right away, give him the right to do so.
Allow users to change to the new design (and specify it is still in beta) and give them an option to go back to the old one. Sure, don’t keep this forever, but look at Facebook. They only force everyone to update their layouts to the new ones after one or two months after they make them available for the first time.
Some of the users decided to go for the new “Timeline” of Facebook. I decided to keep the old layout because I liked it. Moreover, I didn’t even think of getting the timeline because Facebook wouldn’t allow me to go back to the previous style. Therefore my Facebook still keeps the old style. But as a matter of fact, Facebook will update my layout to the timeline very soon, when the old style will not be available anymore.
This is an interesting strategy and is very well implemented in social media. Therefore think of implementing it with your site’s redesign.
Allow feedback even after the process is done
You redesigned the website and now it’s on. Users can’t go back to the old one and there is nothing else to do other than accepting it as it is. Fair enough, but allow the users to give feedback.
There are lots of tools you can use for this on the internet and this way you will make sure that if something is wrong, users will point it out to you- this happens mostly if you have a responsive community supporting the website, but it is always worth trying.
If a lot of your users feel the same thing is wrong, make sure to fix it as soon as possible. This way they will feel like they’re a part of the community and, since their opinion is valued and taken into consideration, they will happily continue their stay there.
Make the reasons behind your decision clear
It is always smart to tell your users why you think it is important to redesign a website. Some of them have no idea of design changes, usability or new technologies and I am afraid they don’t even care – they just want to be able to use the website like they were accustomed to. Changing the design will not allow this for a period, until they get used to the new layout, therefore some of them might be against you customizing the style.
Thus, explain to the users why you think it is important to make changes. Use some basic theories and explain that being up to date with new technologies will allow the website to offer even more and will probably even make it load faster. When they hear about speed, most of them will be excited about the new design.
Make a guide for the new layout
If you make major changes to your website, then creating a photo, text or video tutorial about this would be great, interactive and helpful. I am sure the visitors now knowing what to do next will appreciate the tutorial which will allow them to adapt faster to the new design. This gives them the impression that you care about them – which again will make them come back to your page.
In case you already redesigned your webpage and it kind of failed, there are solutions for you too. This happens if you hear way too many complaints from your community and you don’t want to spend money on a new design again, but want to do something to improve the atmosphere for your users.
It’s about your mistakes
If this happened, then it is probably your mistake as a designer, because you either did something wrong during the development process or you failed or miscommunicated with the users. It is clear that if they are not happy with the new design, there is something wrong and it’s obviously something major that you’ll need to address.
This is the perfect moment to show how close you are to your community. It can be on Twitter, Facebook or even on the site, make sure people find out you want to fix your mistakes. Let them speak and let them tell you what was wrong, this way it will be easier for you too, when you will have to decide on the solution.
Use their feedback
When they send you feedback, make use of it as much as possible. Acknowledge some of the complaints and show the community you are involved and want to change everything for the best. This will, again, make your life easier, because all the feedback you get and discussions you stir with the community will end up with some conclusions, ideas and possibilities. It’s much easier to repair a mistake when you are backed up by your community, then when you are not.
Go back if you need to
There is no shame in acknowledging that your redesign has failed, therefore if the community strongly asks for it, you can go back to the old design. Sure, going back to the old design means you still have to use resources to redesign (that is where you started from in the first place), but at least until you prepare a new strategy the number of visitors will not decrease.
It is really important to keep the community happy and the way of doing it if you are in this situation is to allow them to go back to the old style. Don’t force this into them, it will definitely get confusing for the ones who thought well of the new layout. Just offer the option of choosing their own style. This will, for sure, solve the problem in the short-term and will allow you some time to prepare the new design better.
Always follow opinions
The most important thing whenever you launch a new design is to monitor carefully the community and their behavior. Google Analytics is the best tool you can use, because it is free and gives you an in-depth insight into how the users spend their time on your site. If the number of visitors decreases soon after the launch date, it might be because of the new layout.
This is the time when you have to start interacting more with the visitors and ask what is wrong. The bottom line is that many users would rather stay on a bad page if the designer is interested and involved with them, than staying on a very good page where the designer doesn’t really care. You have to show your community you care about them.
Another way of keeping track of the opinions is to closely follow social media posts. Most users actually prefer Twitter and Facebook when talking about these kinds of changes, so keep an eye out there too. This is another way to show your users the redesign is for their own good.
The conclusion is that redesigning your website is not as easy as it sounds. Not being able to involve your community in this important decision will most likely turn your project into a failure and will drive the users away. Thus it is smart to keep the community close and use their feedback and opinions – in the end, everything you do is for them – at least consider their opinions. This way you will be closer to success than if you do this the other way around.
The next and the last section of this article will be about the beauty versus function when you are redesigning a website. Should you sacrifice any of them? Let’s take a look at the answer.
Beauty vs. Function On Redesigning
The thought of producing the best possible design, either from scratch or redesigning something, gives jitters to the heart of many designers. Even professionals in the field can’t quite balance beauty and function.
We can see comments, also here on 1stwebdesigner, that are saying that most of today’s web designing is just like recycling old designs. That several years ago, when CSS was first introduced, people were really ecstatic to see “new” designs which were totally one-of-a-kind. With the rise of CMS like WordPress, Joomla, and others, there are already ready-made themes that, if I may say, are used by thousands of people. Nothing unique, nothing fancy.
It’s pretty hard to come by a design that equally serves both beauty and function. This applies to logo, website design, illustrations, posters, and almost anything that has lines, curves, colors, and is artwork.
Let’s agree that there are certain facets of designing that take longer than others. An example is website design, it takes a vast amount of time to produce the optimal result the client wants. There are designers who have really bad experiences dealing with clients because the purpose of the website does not jive with the design the client wants. In which case, the two need to strike a bargain.
Designing for Beauty
Looking at a website, logo, or a poster and telling yourself, “well, it could be better” should always be followed by thinking about the users. Are they already accustomed to the current design, that if a change is made they’ll hate it?
Designing to solely improve the beauty is quite tricky. Trickier than adding functionality or information because a redesign means a change of identity. Now we’ll focus on web design, but keep in mind that this applies to all things that can be designed. In web designing, why do people have to redesign? For two reasons: 1. the existing design sucks, and 2. a fresh look is needed.
Reason one is the most used reason for redesigning, and is somehow less tricky because people will see the improvement and most likely love the new design. Just keep in mind that you are redesigning for ease of access, to make things better than what they used to be.
Reason number two is the trickiest. Redesigning just to keep things fresh is not really a good practice. There is a 50-50 chance that if the previous design is loved by people and a sudden change is introduced, people might hate the change which could result in a drastic decline in readership, like what happened to Digg and the Gawker Network (fairly recent).
Designing for Function
Nothing fancy here, just straight to the point like most news websites. Actually, if you look at news websites you might get dizzy at first because everything appears to be scattered. These websites take quite some time to get accustomed to, but once you know the basic navigation, all is well. A perfect example is Reddit. Over three years ago, when I first arrived on the website, I said to myself, “man, this website’s design blows” but as I spent several minutes and hours there, when I’m already accustomed to things, I’d rather have it stay that way than to have fancy colors and logos and things. Why? Because the purpose is to read, share, and view different media from external sources.
Another perfect example are management systems and eCommerce websites like eBay. I think you already know where I’m headed, designing for function is more about serious business.
The problem with redesigning
The problem with redesigning usually isn’t actually about how hard the existing design is to manipulate, but the problem is “can it still be improved?” Yes, the problem is a question of whether redesigning will improve things.
In art, there is no such thing as a finished piece. Everything is abandoned. No art is finished and perfect. But when is the right time to pull out that brush and stroke the canvas once again? I’m afraid that’s a grey area even for most designers I know. Why redesign? It looks good and it already serves its purpose, doing more may confuse your audience with the sudden change.
As you may have experienced, people have the propensity to reject changes. But there is a way to introduce change without irking people, and that is by gradually changing things, not a full-blast update. Take for example Facebook. For several years the layout has changed incredibly, there were fiascos (like the recent chat box update) and there were several successes, all without alienating the existing users.
But I didn’t answer the question, “why redesign?” You redesign when a function is needed and it changes the layout of the entire design, but only redesign if it will complement the site well. As I have stated in my previous article, the purpose of redesigning is to make things easier for the users.
Why can’t it be both?
photo by: cobrasoft
Like people, artists and their masterpiece are unique creations. These artworks have their own personality, and that their “purpose” may or may not be positively taken by the audience. To the artist his/her creation might be a masterpiece, but is it for other people?
Take for example Digg’s redesign. It was big news a few years back because they lost a big fraction of their users because of the redesign which they thought would be good, but really isn’t for “old timer” Digg users. That is how severe the redesigning process can affect things if it isn’t done right.
One thing to remember
Designing can be two things: for beauty and for function. It’s like saying “beauty and brains,” only it doesn’t work that way. One thing you need to remember when faced with a design project is that you need to figure out what is really needed. Does the material need to call out to people more or is it for a specific function.
One thing to remember: never use the color blue just because it’s your favorite color.
The problem with users
Audience are fickle creatures. Most of the time it only takes one angry reader to cause a large avalanche of people to follow them. We’ve seen this happen on the internet many times now, even outside the field of designing, where someone convinces people that Company X’s service is not good, then the whole internet brigade of justice brings out their pitchforks (or are they internet mobs?).
What do you think?
Have you redesigned a website? What was your experience? We’d love to hear!
To end this article let’s take a look at how we can get the best our of the fold.
How to Make the Best out of the Fold
The fold, also known as the scroll, is the position on a web site where the browsers will begin to scroll down. Elements that can’t be seen without scrolling down are “below the fold” and some people believe that it is smart to keep the important information above the fold and don’t force the user to scroll down to view it.
The whole space below the fold is for less important information and, depending on the resolution of the screen, this can be at around 600 pixels down on a 1024 x 768 screen, 850 pixels down on a 1200 x 1024 screen and around 1030 pixels down on a big 1600 x 1200 screen.
The term of “above the fold” comes from the newspaper industry and is used today for both papers and websites. For example, most papers are delivered or displayed folded up, meaning that only the top half of the front page is visible at a first glance – therefore the most important information has to be placed above the fold. Advertisers also prefer the visible part of a newspaper or web page, therefore an advertiser will pay much less for an ad space in the footer than in the header. However, in this era of small mobile screens, many experts suggest that the term is vague and not very important anymore – some call it a myth, a rule that kills innovation, a false concept used by people who don’t know what they’re talking about and so on- so today we will take a look at some arguments and try to make our own decision.
Does the fold really exist?
Well yes, it seems it does, because many people know about it and it is taken into consideration by designers, both for online and offline work. There is a clear advantage of being visible on top of the page, no doubt about it. There is also an advantage of being visible at a quick glance. And it is also rather normal to pay more for an ad box there. There are books and design cases written about the fold, so there must be something to it.
What is interesting about the fold is the fact that users have lots of different screen sizes and the visible content is not the same on every computer. This makes the job harder for a designer or developer, because if an advertiser pays for a spot above the fold, this might be difficult to make for small screen sizes if the design does not allow for it.
So yes, the fold exists and it was a problem a few years ago (more about this right away), but I am wondering if we should still pay attention to it, in the conditions we have today, when small screen sizes – mobile devices, tablets – have taken over computers with big screens.
Where does the concept come from?
Well, if we take a look 16 years back, we can find research by Jakob Nielsen (source) which says that only 10% of his test participants scrolled during normal browsing. Sure, that was back in the beginning of the 90s, while in 1997 his new usability test showed that users learned to scroll, but it still reduces usability. In 2010 he did a follow-up and presented totally different data, such as people spending around 80% over the fold, while attention to content under the fold dramatically decreased.
We’ve heard about the fold from ClickTale as well, which published a study six years ago, finding out that 91% of the users have a scrollbar and only 75% of them scrolled. Only 22% of them scrolled to the bottom of the page, which explains why an advertising space in the footer is not so expensive compared to the space on top.
The same company followed up with a study one year later and showed results through eye tracking and mouse heatmaps analysis that made clear the following: the top and bottom content are in focus, while the attention dropped somewhere in between. This means the header and footer are the most important parts of a website, although the header was 17 times more likely to be seen by all visitors than the footer.
In the same year of 2007, a spectacular article by Milissa Tarquini (source) was released and revealed that people actually scroll down and not only view, but also interact with the bottom of a page, unlike what the other studies showed.
What about advertising?
The content is the most important part of a web site, but today there are examples of successful web pages with not a lot of it, but with lots of advertising. Money rules the world today so advertisers actions have to be considered in this controversy. As mentioned several times before, the prices for advertising space differs from site to site, but moreso from position to position.
has a very interesting point of view, based on different tests, which say that from over 22 million impressions analyzed, ads placed over the fold have a 44% higher click rate than those placed below. But as said before, this is very difficult to control because of the many different screen sizes – what’s high above your fold could be under the fold of your teacher’s screen.
A more in-depth analysis was made by Casal Media. Two billion impressions were followed (source) and this showed that ads placed over the fold are seven times more likely to be clicked, while MarketingSherpa’s study showed that ads below the fold were not even noticed by 75% of the visitors.
When talking about advertising in particular, the results are clear: what is placed over the fold is more visible and has a higher click rate than what is placed below – but really, didn’t you expect this? We didn’t need studies that cost, probably, tens of thousands of dollars to tell us that. We knew it anyway and the proof is that everybody knows the prices in advertising – or, at least, the approximate fees for every single section.
So there is a problem…
Well yes, after reading the first part of the article it seems there is – and I totally agree with this fact. Everybody ignoring this obvious issue “doesn’t know internet“, so to speak.
The problem comes from people in the business such as project managers, developers or even clients who don’t want to make critical mistakes on their web pages, like placing the advertising space somewhere not profitable or visible. Some of them go so far that they want everything important above the 600 pixel mark (they heard somewhere this is the common line of the fold) and this annoys designers and developers, because not only there is no default line, but it all depends on the screen and it is purely impossible to make it work on all the sizes and resolutions. Even though the width can be set to 100% and be flexible, the height is not as easy to manipulate. And even if we manage to, the problem would be the same, because the content will be extended horizontally instead of vertically and we will still have a fold, only a different type.
The place below the fold is not No Man’s Land, unlike what many business executives think. Usability tests show that there is nothing wrong with the content below the fold, because most of the sites have a scroll bar today and the user is educated to scroll down. Placing advertising there is no problem either. They still have a conversion rate, a click rate and you can still make money.
And if there is a problem, how do we solve it?
Well, there is no real perfect solution, so I will have to throw some ideas out there, but with some things to take into account. We can’t control how the user accesses and views our webpage, therefore we have to focus on improving the things we can control. Keep in mind that if you are not too interested in this subject, you don’t need to change anything in the way you design, but if you’ve already read this far, it’s very likely that you’re looking for some answers. So, here you go…
It is not very smart to lead the user into thinking the site finishes where the content box ends, like many designs do today by using a bottom border. Many users think the site ends right after the content and do not even see the footer anymore because of this – you want to avoid this.
It’s difficult to make a website work for more resolutions and designing for the majority is not a solution either. Even though the browser statistics show 1280 x 1024 and 1280 x 800 as the most popular displays, this is a total of less than 30% of the internet users. What about the rest? Try to use design techniques that are common to different displays at the same time (such as flexible width). You need to provide the same experience to all the users, regardless of their screen resolution.
Focus on content
As said before, the most important thing on a web page is still the content, therefore it’s the first element you should think about. People don’t look for advertising first, but for content that seems relevant to their interests at the moment. It they are interested in the content, they will have no problem scrolling down below the fold, so don’t worry about it too much if you know users come to your webpage for content. If you have a high return rate of visitors (check it with Google Analytics), they definitely come back for content, so you are on the right track – don’t worry about the fold. Just continue doing what you do and this problem will never be something you have to think about.
One of the few issues that might appear for you, however, is the fact that the scrollbars are decreasing as indicators. Apple’s new OS X Lion doesn’t feature a visible scrollbar by default, although you can make it visible by changing your options. This happens because of the mobile approach and Apple’s interface is already beginning to shift gears in this matter.
Think about what’s on top
“With great power comes great responsibility” is a well-known quote from a huge American writer. With the power you have as a designer, you have a great responsibility of designing things right. You need to spend a lot of time thinking about what is worthy enough of being on top. This takes a lot of time and research, but it will pay off in the end. Also, think of the advertising spaces you want to have and position them strategically.
In my opinion the beginning of the content has to always be over the fold. When you design, test on small screens and check if the beginning of the content is visible. Otherwise, go back in the code and make it visible. If the content (which is the most attractive element on a web page) is not visible, how do you expect to keep the attention of those 25% of the people in ClickTale’s research that do not scroll at all?
So yes, the fold exists even though many people deny it; and the fold is a problem as well, but only if you make it one. There are designers out there who don’t care about it and they still earn money and provide good results. But if you think of the fold too much, then I hope the tips above will help you get over it. It is really not that big of a deal if you don’t turn it into one.
What do you think about the fold? Have you ever encountered a client who cluttered the top of the site only because of the scroll? Is the fold bothering you and if it is, how do you avoid it?