Posts tagged as:
WEB 2.0 templates
Why Design Matters
In addition we gave you 5 already functioning examples of the ideal Web 2.0 designed site and introduced our Web 2.0 templates and how this new product category features all of these characteristics and more.
Further we entreated you to consider the convenience and practicality of obtaining professional template customization.
So why should your small business website design matter? In this article Louise Meers uncovers a number of reasons why fundamentally sound design principles like contrast, repetition, alignment and proximity are so instrumental to retaining new business.
Article: Flashing before your eyes is a fluro green background teamed with red writing, white borders, a cutesy cursor graphic and the promise of ten free CD’s. No, it’s not Christmas. It’s bad design. Let’s face it, in the day and age where people are more likely to search for your business online than pick up the Yellow Pages - design matters. But why?
The consumer will judge you
Type “badly designed websites” into Google and you will understand immediately. There are pages and pages on this subject citing some very worthy examples. A badly designed website can say a lot to the consumer about your business. Potential customers or clients may think a badly structured website means a badly structured business.
An unprofessional design could prove exactly that - the consumer may think your business is unprofessional or untrustworthy, especially if your website doesn’t exhibit clear authenticity. Consumer judgement can cost you. Not only could your website be shamed for employing bad design, but you will inevitably lose business as well.
Bad design is bad for business
Websites with bad design will lose hits. Online businesses with bad design will lose customers. Ever logged on to a website which was hard to navigate or was bad on the eyes? Chances are you closed it, frustrated because you couldn’t find what you were looking for. Now imagine how many times that website would have been closed because no one had the patience to find badly placed information or that elusive home button.
Or it could have been that the website was just a huge visual turn-off. Whatever the reason, it will not reflect highly on your business. Today’s average person doesn’t have the time or the patience to decipher his or her way through a poor layout. Most likely they will take their business elsewhere.
So how do I know if it’s good?
Good website design is intuitive - it knows where the user wants to go and allows them to get there with ease. It has accessibility for all groups. It’s inoffensive both visually and in content. But most importantly, it doesn’t get in the way of you selling your product.
Graphic designer Robin Williams says contrast, repetition, alignment and proximity are crucial to any good design:
Contrast: website content needs to be distinct and shouldn’t just blend into the background. Professionals in the design industry are very aware and able in this area, creating websites for you that will meet your criteria, as well as that of your customers.
Repetition: like store design, where you place items is extremely important. For example, if your company logo is at the top of the page, it needs to be at the top on every page. Design professionals know exactly when and where to repeat important information on your website so that it will successfully promote your business.
Alignment: every element on the page should be there for a purpose. It can be tricky to figure out what information to include and how it should appear on your website. Again, this is where the professionals can really help.
Proximity: information that is similar should be grouped together, also like store design. This is good for organisation, and for business. Professionals can design a website for you that looks great and gets you those sales with cleverly placed text, graphics and links
Without the CRAP principle (bad acronym but good theory) and other design techniques that professionals incorporate into their work, a website will sink, not swim. There is a definite art to website design and getting contrast, repetition, alignment and proximity, as well as other essential design criteria, to all work harmoniously is no easy feat.
Okay, it does matter
Design matters because it’s going to positively promote your business and help you make those all-important sales. Don’t let your website end up on webpagesthatsuck.com and don’t let it drive potential customers and clients away. Leave it to the professionals who know exactly what is good for you and your business.
About the Author
Louise Meers is a guest writer and media advisor for Bergan Blue. She comes from a journalistic background while having a strong love for the web - a perfect combination for Bergan Blue, a small creative web development firm focused on bridging the gap between the online world of the web and the traditionally offline world of marketing.
{ 0 comments }
Fixed Width Vs Liquid Layouts
Intro: In the last article “Top 5 Design Principles Behind Web 2.0 Templates” I talked to you a little about Web 2.0 templates and how one of the characteristics of Web 2.0 are central layouts. In this article we discuss the pros and cons between liquid layouts vs fixed width commonly know as central layouts. The author Moe Tamani explains what both design layout really mean and examines the best approach for you to use on your website.
As every experienced web designer should know, there are two types of layout that you can choose from when designing web pages. One is the fixed width layout and the other is the liquid layout. The fixed width layout sets the width of the web page at a specific value, no matter how wide the viewer’s internet browser window is, whereas liquid layouts adjust their width depending on the width of the visitor’s browser window. The choice between these two layouts is not always an easy one and we will explore in depth the factors that will influence your final decision.
Fixed width layouts mean that you have a preset width which you will design the rest of your web page around. The main advantage of this approach is that it gives you greater direction and control over the eventual organization of your web page. Fixed width layouts are best used with print backgrounds, because these help maintain a consistent appearance even across different internet browsers and operating systems. In a liquid layout, however, the overall layout of your page is a percentage function of the size of the browser window being used to view it. They are useful for maximizing the use of space provided by any screen resolution or browser window size. Web designers who are tasked with conveying as much information as possible in a limited amount of space will often choose a liquid layout. It is important to both you and your web design company that you understand which layout would suit the needs of your client better.
Which layout you eventually choose will greatly affect the final look and feel of your web site, not to mention the functionality of the site. The ease with which visitor’s can scan through your site for relevant information and identify the content that they wish to find is largely dependant on your choice of layouts. It is thus absolutely essential that you understand the needs of your client and the kind of website that they want you to build in order to design a web site that reinforces the marketing strategies of your client. Your web design company is also likely to stress the importance of choosing the right layout when you take on any projects.
The Web Design Benefits and the Drawbacks The pros and cons of each layout type are listed below, so you will be able to make a better-informed decision regarding which type of layout you should use for a particular project.
Fixed Width Layout o Pros * Pages that you design look exactly the same when viewed using any internet browser or operating system. * Images and other non-textual objects will not overwhelm the textual content of the page, regardless of the size of the browser window or viewing monitor. * The scan length of your pages stays constant no matter how wide the viewer’s browser window is. o Cons * Viewers using smaller browser windows or monitors to view the site will probably have to scroll horizontally to see the entirety of the page. This tends to annoy online visitors. * A large amount of whitespace is usually generated when viewers use large browser windows to view the site, resulting in wastage of otherwise useful space. Also, more vertical scrolling may be required than should be necessary. * Font size changes can adversely affect the overall layout of the page. Large increases in font size can cause the layout of your page to become distorted, making it messy and unappealing.
Liquid Width Layouts o Pros * Layout adjusts its size to fit any browser window size. * All the available space in the browser window is utilized, enabling larger windows to display more information while not compromising the viewing experience using smaller window sizes. * You can achieve consistent relative widths, ensuring that your web page can accommodate your client’s varied design requirements such as font size changes. o Cons * Liquid layouts do not allow you to fix the width of the page and other elements on the page, making proper organization difficult in some situations. * Columns containing text may become either too wide or too narrow for comfortable viewing of the text. * Fixed width elements on the page may not be correctly displayed. Some browsers may attempt to correct for a lack of space for fixed width elements by increasing the width of the element, thus disrupting the order of the other elements in your layout.
Often, the best approach to use is to use both types of layout within the same web site or even within the same page. The type of layout you use may be dependent on which part of the site you are currently working on. A good example is fixing the width of the central column of the page so that text contained does not become distorted while allowing the layout for the rest of the page to be liquid, making viewing of side-bars and other elements more flexible. With practice and diligence, you will eventually learn the best combination of both layouts to use in any situation that you encounter.
About the Author
Moe Tamani is a SEO web design consultant Dallas Web Design.
{ 0 comments }
Top 5 Design Principles Behind Web 2.0 Templates
Many of the best examples of web 2.0 have some elements that make them, well, Web 2.0 style. Yet Web 2.0 is an oft-overlooked design style, and even more often misunderstood especially in terms of value and implementation. Making a site interactive and yet still comprehensive is not an easy thing to do.
Wikipedia describes Web 2.0 as “a second generation of web-based communities and hosted services such as social-networking sites, wikis, blogs, and folksonomies, which aim to facilitate creativity, collaboration, and sharing among users”. While this is an accurate description of the term, nothing says Web 2.0 more than central layout, big text, strong colors, round corners and an intuitive navigation.
Web 2.0 templates are a lesson in Web 2.0 style – it’s as simple as that! Their beauty comes from an intuitive use of layouts, rounded corners, bigger text and brighter color surfaces, which give them a polished Web 2.0 style.Centralized layouts: As apposed to jamming everything in one place (e.g. left-orientated scalable layouts), Web 2.0 templates centralized layouts bring simplicity into focus by positioning the content in the center of the page. It’s not overwhelming, there’s less information to process and the right allocation of large fonts and white space presents a better more amicable experience.
Example Template No. 16962
Navigation: The ease of navigation needn’t be compromised. The Web 2.0 template style of navigation is typically horizontal, utilizes large fonts and is always clear and concise.
Brighter color surfaces: The old Web 1.0 always felt a little drab, part of the reason for that was the almost total lack of color. Web 2.0 templates are typically characterized by color. The colors are bright, fluorescent like, cherry colors – blue, orange, lime-green and a myriad of rich surfaces and reflections harmoniously twined with white space to deliver an open and friendly feeling.
Bigger fonts: Another component of Web 2.0 templates are clear large fonts. Large font can help place the eye on the things you feel should stand out. Large fonts are perfectly acceptable on the web, as long as you employed them judiciously.
Rounded corners: Boxes with rounded corners aren’t anything new; the only difference with Web 2.0 is that they’re now standards-compliant. The trick is Web 2.0 templates use CSS to implement the illusion of curves, instead of the old fashion method that involved slicing the top and bottom of a rounded rectangle, a table with three rows and a lot of time on your hands.
Web 2.0 falls right into the category of design where many people think it’s easy, yet an understanding of layout and white space and, even more, an understanding of communication, is vital. All of the elements (centralized layouts, strong colors, round corners, big text) readily attributed to Web 2.0 templates are carefully crafted by professionals who are passionate about design. On that note, we entreat you to consider the convenience and practicality of obtaining professional customizations. The result is a unique product that works intuitively to help the user (your customer) find anything on the site.
{ 0 comments }
