Design Conventions

The design conventions for websites are simple, but they are effective. To follow these conventions, designers should ensure that their logos function as links to the home page; that clicking on a small image will display a larger version of that image; that all links lead to HTML documents unless they are clearly labeled as some other format (PDS, movie, etc.); that items are purchased by adding them to a virtual shopping cart and then taking them through a virtual checkout process. Website identity checks should always be accomplished through a system that relies on user names and passwords. These are just a few of the conventions. There are many others.

If a website does not follow these rules and conventions, visitors become annoyed, frustrated, and confused. People will leave a website in a heartbeat if it makes them work too hard to navigate it.

There are situations in which the common website design conventions may be ignored. One such situation is if a site is so unique that what it offers is worth the time to learn how to use it. When Google introduced its Gmail product, the first webmail service in the world that provided a gigabyte of storage space, an interface that utilizes Javascript to change whole pages without reloading them was included. This was a diversion from web conventions, but the site worked so well that it became popular in spite of its departure from conventional design. The site is now beginning to create new conventions of its own.

Quality Text Layout and Design

On the web today there are many web sites with a cluttered design. The amount of text that is gathered in one place is too big, therefore it’s more difficult to read and focus on text phrases.

If you separate coherent text in boxes, then you hekp the reader to read more easily. Make space between text boxes. Always use a text font size that is not smaller than 10. Organize the text with headings. Make headings with a bigger font size than the body text and you may use a different font.

It’s recommended that you use borders in black around the text.

It should be easy for the eye to focus from one group of text to another.

If you follow these guidelines, then you will be able to read faster and the eye will be less strained. You will be rewarded by spending more time on the text design and layout of your site.

Lars Nielsen is the creator of a web site with home businesses opportunities and valuable resources for Internet marketing. He has been involved with graphic design 12 years. He also has strong experience with web marketing.

About Consistency In Web Design

If objects with similar functions are grouped together, its function will be easily understood and remembered. When designing an interface, it is important that all similar tools used for navigation and accessing information should stay consistent. The webpage font, style, colour, layout, mouse over effects should also stay consistent. When the user clicks a link, he must recognize the connecting page is similar to the previous one, failing to do so will make the user confused and will prompt him to visit other websites.

If there are sound or animation used in navigation, the sound and animated effect should stay the same in all pages. For example, if an animation is turned on by clicking a flash button, it should be done the same way in the rest of the webpages.

One method of ensuring consistency is to use Cascading Style Sheets (CSS). By defining standard style properties in another document, it is possible to achieve the same look and feel to all your webpages that use the same style sheet. A style sheet, for example, can be used to make the text on every page 12 pt Verdana, all headings (h1) orange..etc. If the style of the site needs to be changed for any reason, only one document needs to be updated. Without style sheets, doing manual adjustments on every page is tedious and often result in errors and inconsistency.

Another way to promote site consistency is to use templates. A website template is a document that defines the structure of muliple pages in your site. For example, if the header and footer are standard across all pages in your site, they can be attached to the body of your document via an automated process, saving you time and typing errors. Many web editing softwares such as Dreamweaver offer templating function. Server-side technologies can also do the same job easily.

Ideal Web Design Firm

Plan Your Budget

Choosing a web design firm often comes down to money in the end. You may not be able to afford the very best firm in the industry, but that doesn’t mean you have to choose the worst either. Before searching for a web design firm, decide exactly how much you would like to spend and how much you can spend. Your plan should provide you with the ideal cost and with what you would be willing to pay if the perfect company’s services cost a little more.

Create a Timeline

How long do you have to put this site together? If you only have two weeks, then you need to find a company who can effectively deliver the product in two weeks. You may have to sacrifice features to finish so quickly, but you need a company who can deliver on time.

If you have months to put together a site, then choose the best company for the job. If you have the time to create a sensational site, and if you have the money to back it up, create the best site possible. Just know that if you say you have months and then change your mind, your design firm will not be able to finish everything immediately.

Determine Their Specialty

Web design firms generally specialize in certain technologies, and you need to be able to determine whether their specialties will meet your needs. Always ask for three examples of their technology. Anyone can tell you that they can do something, but that doesn’t mean they have done it. You don’t want your web design firm to be learning how to bid on Google AdWords or figuring out Flash Video while trying to complete your site on time. Let them prove their expertise with specific examples from their portfolio.

Always Contact References

Look at a web design firm’s portfolio carefully. Ask for references and then contact them. Talking to past clients is the best way to discover exactly how a project turned out. Although the company may be able to provide you with testimonials, talking to another business owner will always provide you with a more detailed, honest description of the project’s success or failure.

Web Design Mistakes

  • Do not underline words unless they are a link. It is a design standard to underline links. If you underline other words on your web page that are not links, viewers will click them. When they don’t go anywhere, it will lead to confusion. Make it obvious what is a link and what isn’t.
  • Use a font without serifs. Serifs are the little lines at the end of letters that make them easier to read in print. On a computer screen, however, sans serif fonts like Arial and Verdana are actually easier to read and lead to greater comprehension of your message. For example, this is serif and this is sans serif.
  • Optimize your graphics for the web. If the file size of your pictures is too large, they will take too long to load and most users won’t stick around to see them. Pictures can be optimized with only slight changes in overall quality.
  • Put the navigation for your web pages on the top or left hand side. This is where most users automatically look to find them. Don’t stick it on the right just to be different. This is not where people’s eyes go to look for navigation. Be consistent with your navigation placement; it should be in the same spot on every page.
  • Don’t use more than three or four colors on your web page. Any more, and the user will be overwhelmed and not know where to look first. If your message is competing for attention with color, your site will not be as effective as it could be.

Revenge Ugly Website

A Burning Man’s Weird and Ugly Website

Burny and his best friend Nona have built a website to tell his life story to the world. Burny is afflicted with a mysterious chronic burning disease that causes parts of his body to ignite at random. Burn scars constellate his body. He walks with a limp. He is too mortified to be with people. Some even call him a freak. Then he discovers that the flames killing him little by little have miraculous healing powers. His life has never been the same again, especially after going online.

But now Burny and Nona feel that if a website is called weird and ugly; it probably looks a lot like their website.

It certainly feels that way when people say the website will have tremendous potential if they show a short animated feature about the story. It certainly feels that way when they receive e-mails asking in so many ways why the site is “sooo static.” And it certainly feels that way when they read this message from a returning site visitor: “Hey, no offense guys, but I think your old Flash website looks a lot better than this dead mind-numbing stuff.”

They Built It, They Came, and They Left Forever

It is an offshoot of an original fancy Flash website, their newbie attempt at being webbies. It was an absolute “techie beauty.” Cinematic intro. Scrolling text. An array of moving thingies. Even an animated page-turner. All this plus some Hollywood-style effects. It gave that peculiar feeling of watching a mystery movie.

But where’s the rest of the story? That was the question of most site visitors.

Burny and Nona intended to tell the Burny’s story in that website. Trouble is, the animated page-turner limited them to a maximum of sixteen pages – about 106 pages short of the site’s designed content.

Their first website became some kind of an unfinished visual treat that people would visit once or twice at the most, and then never again. Adding more animated effects served like a one time adrenaline boost for the site, that’s all. Requesting those who purchased the ebook to recommend it to others led some people to accuse them of spamming. They even tried using sophisticated linking software to increase its exposure to no avail. Webmasters would visit, but only a handful would link to it. Their website traffic seemed to trudge to a dreary drumbeat – one…two…bye. They built it and they came, and they left forever.

Connection is the Key

It took an unusual degree of humility for them to accept that the techie beauty they were so proud of did not actually work for them. After all, it revealed to them the extent to which people responded to the website’s story more than its looks.

They discovered that although head-turning imagery and special effects raise web design to a higher level, they will only work if they are built on a good concept. The cool stuff is in the content. When an idea translates into a compelling content with which audiences can relate, it causes them to hook up psychologically to the website. When it makes an emotional bond by showing people an idea or experience they’ve had, an idea or experience they’d like to have, or the information they’ve been looking for, real cool content stuff happens.

The website connects to the audience.

In this case, the premise of Burny’s story connected to the audience. And it turned out that they wanted more.

You never really appreciate a story until you enter the door of a character’s head and walk around in it. But Burny’s original website was a beautiful door that opened up to nothing!

About Designing Web Pages

Set the theme

In addition, you are setting the tone/theme of your site with this first page. . . what visitors will expect to see carried out on every page within the site. This is also true of the navigation system you use.

Organize the pages

You want to use contrast to guide the eye around your pages. And, to be effective, the contrast must be bold. Also, any good web page design must have a focal point. Something on the page must be the dominant eye catcher. If everything has the same level of importance, then nothing is important. Group items and information that belongs together using white space so that the eye knows they are together.

Alignment

The alignment of elements on the page – both vertically and horizontally – is also very important. Choose one alignment and stick with it. That doesn’t mean you have to align everything similarly, it means things should be aligned the same on the page.

Webpage content

A webpage should not overwhelm the visitor with unnecessary animations, flash novelties or music. All these things can detract from the content of your page. If you want to present these things, do it on another page where you can isolate the full affect from other elements of the website or use them sparingly. Use white space to lead the eye around the page.

Rules of thumb

In order for visitors to understand your site you need to follow a few more rules of thumb:

  • Explain everything clearly and briefly
  • Make sure you present information in a logical order
  • Use plain languageMain sectionsIt is best to keep your main website sections to no more than five – seven divisions. As the visitor moves farther into your website you can begin to add more pages and detail. A website can be compared to a triangle. The index page forms the tip of the pyramid followed by the main sections, subsections and pages of increased content. Let your visitors decide where they want to go, starting with brief introductions and leading into more detail as they proceed through the site.

 

Making Web Design Picture

  • Keep the Design Attractive but Minimal:

Simplicity is the key. You need to deliver your message to the masses which includes the people from different demographics with different mindset and preferences. So, you need a design that fulfills the aesthetic and informative demands of the target audience.

Descriptive websites trouble the visitors as they face difficulty in finding their desired content. Today, people adore the sites with minimum, but all-important information. Everything from colors selection, to contrasts, fonts, data fill forms, call-to-action buttons and pop-up windows (better to avoid) should stay minimal for improved user experience.

Parallax design is still trending. But as far as SEO is concerned, businesses with customized templates and single-page layouts can magnet more traffic and potential leads.

eCommerce sites are now coming with personalized content management systems that offer remarkable support to the site users; be it admin, vendors, and buyers. It also results in better user experience which, in turn, helps the marketers with the search engine optimization process.

Don’t forget to add search bar at the prominent place on homepage even if it’s not your eCommerce site. Often, I get irritated when I need to search something on a website. this usually happens in case of websites offering services such as IT consulting firms. Search bars don’t involve much efforts in design and development but brings ease in the user’s life because he instantly gets the desired results for whatever he looks for on the website.

  • One-Page, Multi-Grids Template:

Running a small startup or want to promote your brick and mortar store online? Parallax web design is the solution. But, it’s not enough for even a medium-sized eCommerce business. In that case, you need to deliver outstanding user experience.

Minimal UX/UI design not only helps in delivering the flawless user experience but also act as a game booster for search engine optimization. Reason? It makes the web layout more logical and comprehensible with impressive visual quality. Moreover, every single website design element is readily determined by both the visitors and search engine crawlers.

As you tend to keep the navigation clear and easygoing, you can grab more people’s attention. It is an open fact that site visitors tend to leave it if they don’t find their desired information within a few seconds of their arrival. So, always place your business messages and essential products or services on the homepage.

Don’t overstuff the homepage. The website menu is the first thing most of the people check as they visit any website. Just like the navigational wheel in the ship, this menu directs the user to different pages with relevant information they are seeking for. Keep it prominent by placing it above the fold on main web page.

Always use additional buttons with short, clear call-to-action on them. For instance, if you want to direct the site visitor to another page for more information then ‘Read More’ or ‘Explore Here’ is the right button. The most generic and frequently used button is ‘Click Here’ that direct the users to the relevant page.

  • Give Substantial Value to Responsiveness:

eCommerce is all about digital business solutions. Your website design should also complement your digital needs out of which the most significant one is capturing the attention of mobile users. Here, website responsiveness takes a considerable lead on all other factors.

Search engine crawlers will not index your website if it is not responsive across all digital platforms – browsers and mobile devices.

Survival, in today’s fast-paced digital millennium’ is for the fastest. The quick loading of a website (2-3 seconds) means the user will instantly get the desired information. Hence, he tends to stay longer on your site that means your site’s bounce rate will not reach the alarming situation. Greater the bounce rate, the poor will be the site’s ranking in the search engines.

Responsive websites usually have decreased bounce rates – visitors are more likely to stay at your web pages for an extended period. Google’s mobile-first-index makes essential for the websites to speed up their loading span – like a flashback. Now, you will ask for the reasoning.

It’s mandatory because, now, the search engine crawlers also index the websites through their mobile versions. And, in case, your site isn’t mobile-friendly crawlers will not index it, and therefore, you have to forget about top rankings in the search engines.

Website Design Goofs

#1. An incredibly long download time. We are all impatient when surfing the Internet. There are still many computer users without high speed connections, so avoid the following factors that contribute to slowness:

  • Flash Intros — I love Flash. It is an amazing program that helps a designer/developer do exciting movies and animations. The main problem, however, is that many of the intros don’t enhance the experience and take so long to open, the visitor has clicked away.
  • Graphics that are large and/or not optimized — I also love graphics. The problem is that designers resize the graphic after it is placed on a webpage. This means the visitor has to wait for the large graphic to load and then be resized. Resize graphics before adding to the page and also optimize for quick loading by lowering the resolution (quality).
  • Bloated code — Several authoring software programs produce more code that is necessary. FrontPage 2003 is better than the earlier versions, but my authoring program of choice for clean, non-bloated and web compliant code is Macromedia’s Dreamweaver.

#2. Lack of clarity — Visiting a website, we expect to find our way around easily, to realize the purpose of the website, to know what the site has to offer, and how to find it. For the sake of clarity, avoid the following:

  • Mystery meat — Vincent Flanders and Dean Peters in their Web Pages that Suck books compare websites that are confusing — you don’t know what they are about or where they are going — to mystery meat. Be obvious — most users are not into guessing what it’s all about.
  • Difficult navigation — It is another mystery when finding a page or the information you want. If visitors must click more than three times to find what they are looking for, they will click away. Solutions are providing a search feature or a straightforward site map made up of obvious text links.
  • Hidden or incomplete contact information — It is frustrating if there isn’t a clear way to contact the company or owner of the website. Personally, I don’t advise having only one contact page. I prefer to include the information or at least a link to the e-mail address on every page of the site. It is also my bias that the full address and phone number be posted for credibility.

 

Web Design Boost Sales

Avoid Slow Loading Web Pages

The amount of time that your site takes to download is critical. If it takes too long to download, you’ll lose potential customers who can’t be bothered to wait.

There are things you can do to speed up how long your site takes to download. Images and media are the worst culprits when it comes to slowing down your loading time. I advise you to avoid using any kind of multimedia on your web site and if you want to use images, try and keep them small and to a minimum.

You should also define height and width in all tables and graphics as this aids download time.

Make It Easy For People To Find Their Way Around Your Site

Your site’s navigation should be as simple and as straight-forward as possible so that people can find what they’re looking for easily. Don’t lose sales because people can’t find what they want.

Put a link to your homepage on each page on your web site. This will help visitors who didn’t enter your web site via your homepage to find their way around.

You can simplify your navigation by making every page accessible via two links from your homepage and no more than three links from any other page.

Make It Easy For Visitors To Contact You

Place your email address, or at least a “Contact us” link, clearly on every page. If people have to hunt around to find your contact details, chances are they’ll get fed up and leave your site without buying anything.

Make Your Sales Copy Easy To Read

Chunks of text are off putting and are therefore unlikely to get read. This means that if your well-worded sales pitch is written in long unbroken paragraphs, it will go un-noticed.