Friday, 24 May 2013

Latest 10 Web Design Trends for 2013

For starters, we’d like to say thank you for the amazing reception our free eBook Web design and Mobile Trends for 2013 has had since its launch last week, and especially to all those who made it possible by sharing their insightful opinions.
Today we’re doing a review of the end conclusions, where we will identify and analyze 10 of the key trends. This is just a brief overview of the conclusions you can read in the book. In fact, we have now released an updated version of the eBook in PDF format, which includes a few corrections and a new layout for an easier and more enjoyable reading experience.
  • What will be those key trends?

  • 1. CONTENT FIRST
  • 2. SIMPLICITY OF DESIGN INTERACTION AND CONTENT
  • 3. UX CENTERED DESIGN
  • 4. APP STYLE INTERFACES
  • 5. THE UNIFICATION OF DESKTOP AND MOBILE INTO A SINGLE VERSION
  • 6. SVG AND RESPONSIVE TECHNIQUES
  • 7. FLAT COLORS AND NO MORE SKEUOMORPHISM
  • 8. TECHNOLOGY AGNOSTIC
  • 9. EXPERIMENTATION AND INNOVATION IN DEVICE SENSORS AND INTERACTION
  • 10. THE INTERNET OF THINGS
It’s no easy task putting together a short summary of all the interviews, but as far as we’re concerned, there are a few memorable statements in the book which nicely encapsulate the conclusions we’ve come to:
Bruce Lawson:“If I go to a train website, I don't really want to see a picture of Richard Branson smiling at me, I don't want to read the Chief Exec's ambitions and life history. All I want to know is what time my train is and how much it is.”
Karen McGrane:“Mobile is not the Lite version. You don’t get to decide which device people use to visit your website. They do.”
Simon Foster:“I always keep it in mind that no matter how beautiful I make a website the average user only really wants to spend about 10 seconds on it.”
This project reveals the need to prioritize content and the user’s point of view. Almost all the participants expressed concerns about accessibility and application performance across the multiple devices that exist today and will only continue to increase in number. This wasn’t the case a few years ago, as Rachel Andrew points out:
“We were all saying ‘in a few year’s time we’re going to have massive screens and all this space and people are going to have really fast connections’ and what’s happened is we’ve all ended up on tiny little screens with crappy bandwidth.”
So years ago the tendencies would have been very different. We would have been focusing more on development of visual effects, animation etc...But the future is unknowable.
We have to reach our target users, wherever they live, whatever device or browser they use, and serve them our content in the most efficient way possible. Though this is what web standards evangelists have been shouting from the rooftops for years.
All the trends discussed here are interdependent and fundamentally defined by three principles: Content oriented, UX-centered and Simplicity, which make up the new paradigm we’ll need to work with when we come to face the deluge of devices that’s looming on the horizon.


  • 1. Content First


    Content-first will be the center of the galaxy. Content is the most talked-about term in the book. In the coming months we’ll see deep debate about how content should be presented to the user and whether or not we should adapt it to the device.
    In any case, this should be our main concern. We need to create efficient, searchable, accessible, multi-platform content and make sure it reaches the user via the best interactive experience possible.
  • 2. Simplicity of Design Interaction and Content


    Simplicity is the new paradigm. The process of simplification will be the only tool we have to make content accessible and readable on the greatest possible number of devices, with the best user experience. Content strategy, UX, Usability, Accessibility and Visual Design must all be guided by this new paradigm.
  • 3. UX Centered Design


    The user’s point of view and their experience of using the site and its content is what is ultimately important. All participants agree on simplification on a visual and interaction level. Traditional websites will continue to adopt mobile app UI patterns precisely because they offer a more simple and efficient user experience, which brings us to the next point, “App Style Interfaces”...
  • 4. App Style Interfaces


    Over the next few months we’re going to witness a process of transformation for most desktop websites, which will increasingly imitate the style and interfaces of mobile apps, unifying and simplifying content and design and at the same time facilitating the creation of responsive projects.
  • 5. The unification of desktop and mobile into a single version


    Responsive, Adaptative Content, Mobile First, Device Agnostic, Resolution Independent; all these terms are evolving towards a common destination which is the unification of desktop and mobile into a single version. But how to integrate apps and experiences through multiple devices?
    Our experts foresee an evolution in responsive. The trend until now has been to adapt content, but many voices now argue for unification.
  • 6. SVG and Responsive Techniques


    The search for multi-platform versions and cross-platform technologies will lead to responsive techniques such as SVG, webfonts, design with typography and icon fonts evolving and becoming more widespread, and on a visual level we’ll see trends like the ones coming up in the next point...
  • 7. Flat Colors and no more skeuomorphism


    The main visual trends identified by our participants were simplicity, minimalism, clear layouts, app-style interfaces, design focusing on typography, less decoration, less skeuomorphic interfaces, flat style, flat colors... This exact trend towards simplification in design and seemingly aesthetic matters, such as flat colors, responds to the need to create adaptative projects and serve images and scalable elements to retina displays with excellent performance on 3G connections, but also to mobiles with inferior provisions from the non-western market and to devices such as eReaders.
  • 8. Technology Agnostic


    Technology agnostic, of course, is the main idea.
    In web standards based applications, looking at the data graphic below we can see that the HTML/ CSS/ Javascript trio is the “primordial soup”. We then have lots of CSS in its various forms, custom filters, CSS Effects, 3D Transforms, Preprocessors and technologies such SVG or webfonts related to responsive techniques. It’s worth pointing out the growing interest in Javascript for web app development, but when it comes to effects, animation, filters etc., it will step aside to make way for the new capacities of CSS3.
    In server-side languages Ruby and Python and experimentation with Node.js are becoming more widespread. The multiplicity of frameworks and builders will be another constant.
    On the other hand we have the development of native apps for iOS and Android, where there’s nothing new either, just the intense and continual increase in demand and the desire to have more suitable cross-platform technologies, based on web standard technologies or otherwise. The spread of Android means demand for Android apps seems to be gaining in importance.
    Another thing that really stands out is the growing interest in WebGL, particularly among the big agencies. This technology is raising high expectations thanks to its performance and the potential it offers on an experimental level.
  • 9. Experimentation and innovation in device sensors and interaction


    It will be a time for getting the best out of mobile technology and creating new user experiences, exploring device sensors and experimenting widely with touch-enabled-interfaces, speech-based, etc.
  • 10. The internet of things


    Soon we’ll be able to communicate not only with our fridges and televisions, but even with devices with tiny LED screens, In-kitchen devices, In-car audio interfaces... Hundreds of totally different platforms will spring up. Without a doubt, interactive TV will have a leading role. How will we be able to evolve towards a rational unification of all this?
    As Aarron Walter says, we’ll see an “Ecosystem of connected services” and we’ll have to work hard on integrating services and user accounts.

    source:http://www.awwwards.com/10-web-design-trends-for-2013.html

Friday, 17 May 2013

5 Simple Web Design Tips To Improve Site Conversions

Great web design is not about winning awards or having the most colorful website. Its about the experience your users encounter when they get to your site and achieve what you have set out for them to do.
If you are a small business owner most likely your site is to create new leads and sales.
Here are 5 simple tips that will help improve conversions:

1. Layout

Make your layout support your content; not the other way around.
You want the eye to flow from your main message and supporting attributes (testimonials, blog posts, videos, really neat things your company has achieved) right to your conversion points. Remember, your site is not there to showcase how great your company is but to achieve your business goal: sales or leads.
clip_image002
The example on the left shows your hard conversion point, title, and a picture above the fold.
The eye has enough room to follow a path to the next headline and its supporting point. There is no horizontal line "at the fold" breaking up the page; this lets the user know there is more content.
The other examples bombard with imagery, no text. Consequently there is no flow from one message to the other. The flow through the page is cut off with cluttered images and text. These layouts create a horizontal line "at the fold"; the user may not even know to scroll down to get to understand what your company does.

2. Colors

If you have strong colors in your logo pull them out and use them as highlights rather than the base of your site: just because your logo is black and red certainly does not mean your site should be.
  • use light backgrounds; it is extremely hard to read anything more than a headline on a dark colored background
  • use a single color for all your calls to action (This will help call them out)
  • be consistent with your color usage
Overwhelming colors = overwhelmed visitors.

3. Calls To Action

image
Make sure your calls to action sit in your visitor's path above the fold.
Make sure primary calls to action are larger and have a prominent position over your soft conversion points like a sign up newsletter buttons etc.
Just because everyone zigs, does not mean you have to zag. You still want to be consistent to what is out there on the web. Be aware of your demographic and what they are used to in terms of usability and style and always make sure your CTA is prominent and stands out.
Remember to test, test, test and find out what works for your site! You can use these free CSS button sites for testing:
  • cssbuttongenerator.com
  • CSS Tricks Button Maker
For more on effective Calls to Actions see 50 Effective and Creative Call to Action Buttons

4. Use Font Size To Indicate Importance

If all your text is the same size nothing seems important on the page and your message will get lost.
By creating a hierarchy you will have a visual flow from what is important to less.

Are You Reading This?

Now are you reading this?

Now this!

5. Stock Imagery

Ever seen this image? She not only sells condos but ALSO answers your phones!
clip_image010
Avoid common stock images. We know the girl selling condos in that billboard ad is definitely not the same answering your phones.
Stock images are okay if used properly. Otherwise they just seem cold and uninviting. Check out Stock Xchng for free stock photos that dont look like stock photos.
Pictures are great; just make sure that the pictures make sense for your business. You want potential consumers to see themselves in your brand so why not use them in your imagery?
By following these simple tips, you will be on your way to helping your potential customers easily find the information they need to make a more informed decision about your brand and the service/product you provide and increase your conversions.

Monday, 13 May 2013

6 Tips to Simplify Your Website’s Design

Sometimes I’ll just stare at a website for minutes on end, trying to figure out why it’s so confusing. Unfortunately, most websites we visit are far more complex than they need to be. I don’t mean complex in terms of functionality, but in terms of all the types of content you are confronted with on a single page. In addition to the basics—a logo, navigation menus, page title, the main content, and one or two calls to action—most web pages are simply overrun with advertisements, social media widgets, and lures to even more (supposedly related) content. Follow these tips to cut the clutter.
 
1. Reduce the bling. Upon first glance at a web page, visitors make a quick, subtle judgment that, I believe, goes something like this: “Look at all those fancy widgets. They must have a team of programmers working night and day on this thing! Woah, Bing ads. They’re connected, and rich!” These eyesores just encourage bad design to flourish on the web.
 
2. Purpose should be a guiding principle of web design. Suppose books were designed without purpose. Gone would be the days of settling in to a good story: When squeezed into a narrow column of text, that narrative would be drowned out by the noise of surrounding advertisements. Before you could dive into a tale, you’d be pulled away by the promise of another. “Who’s Pip’s secret sponsor? Oooh, A Tale of Two Cities sounds good. I wonder if I can get that on my Kindle…” No reader would ever finish a book.
 
3. Allow users to read. Currently, the big players on the web receive such a large volume of traffic that crowding their pages with as many opportunities to click makes statistical sense. When hundreds of thousands of users access a web page on a daily basis, it’s highly probable that a significant number of them will click a link (any link will do) that either continues their visit or sends them elsewhere via a paid advertisement. Either scenario is valuable to the site’s owner, but not the user. Instead, focus on making the viewer’s experience more satisfying.
 
4. Highlight quality and relevant information for viewers. Give new and top content proper placement to direct viewers’ attention to what they are looking for. This placement does not need to be image or widget heavy.
 
5. Satisfying web experiences rely upon focused attention, the kind you need in order to read and comprehend text. The more a page is divided by non-overlapping, attention-seeking magisteria, the less likely it is to win your attention for the long-term. While mass-media sites can profit from visitors that are mostly just passing through, smaller sites need to cultivate visitors who will stay a while by creating an environment conducive to their focused attention. Remember, most websites offer content to inform and inspire prospective customers of a product or service.
 
6. Effective web design and good business are not mutually exclusive, but that case must be made in light of what most web users are used to. If a bigger, more established competitor employs certain tactics that make sense given its large volume of traffic, the question of whether to adopt a similar approach should be answered on the basis of reasonable expectations. Few websites see explosive growth overnight, and those that do struggle to sustain it. If you’re the little guy, the smart thing to do is realize that the audience you’re after has already given some of its attention to the big guy. To win (and keep) their attention, you’re going to need to do things differently from your competitors, things that fall in line with the unique purpose of your website, which is where good web design starts.

Wednesday, 8 May 2013

Tips to design your website


Branding your Business with best web design features- The website is the first image or reflection of your business in the online world.  Your website acts as an exclusive fastest medium to attract customers not only from your local area but from across the globe.  To give the global customers a good and effective impression of your business portfolio you should emphasize on branding your business while getting your website designed. Ask your web design company to create an attractive website template to include your business logo with a complementing tagline in all the website pages. Design an informative page detailing the best relevant information about your business history and who you are. Ask your web designing firm to add a bookmarking option on all the webpage to let the users add your website to their favorite list.

Opt for a User Friendly Navigation in the Website- A well structured website with fast speed and user friendly interface always has more potential to attract and engage customers than a website having more products to offer but a clumsy navigation to follow. Categories your products in groups, ask your web designer to create an innovative menu with simple easy to follow user friendly navigation. Make use of Back to Top / Back to Home Page / Back features wherever required while navigating the website.

Utilize optimized graphics on website: Get your web images optimized before you upload them on the website. Image optimization reduces the loading time and thus helps in faster loading of the website. Ask your website design company to create attractive thumbnails and insert alt text for your product images.

Content and Layout Presentation- The look and feel of your website and its content is the most important factor to get customers attracted towards your website. Always remember it's the website content only that can turn a prospect online customer to a real online buyer of your business product. Focus on presenting real, informative, valid, optimized and original content on your website. Avoid using Popup windows as they can only lead to customer disappointment.

Know your Customer- Design and include a customer feedback form in your website to get a feel of how your customer felt while navigating through your website. Opt for surveys and public polls from time to time to gather relevant customer information.

Link your Website- Emphasize on clear descriptive internal and external links on your website. Create a valid sitemap to include links to all the web pages of your website. Make sure all the external links are relevant and no frauds. Highlight all your links through different color scheme of course the scheme should match your website color scheme.

Create a 404 Page:  Get a valid 404 page with a back link to your home page created for your website. The 404 page tells the online audience about the removal of any webpage.

Follow SEO standards: Get your website optimized for major search engines. Create crisp, informative, relevant title and descriptions of all your web pages. Good and original content of your website with well defined natural linking strategy can lead you good ranks among the top search engines like Google, Bing and Yahoo.
source: www.articlesbase.com/web-design-articles/tips-to-design-your-website-6574315.html

Tuesday, 30 April 2013

5 Best Tips to Simplify Your Web Design

Simplicity rules! It makes a websites look sleek, reduce nagivation confusion and it helps achieving desired goals and results (I.e., more signups, subscribers and sales). But too often it seems elusive to simplify your website design. No matter how hard you try, you can’t make your work look like Apple’s. So what does a website designer really needs to do? Fret not, for there are 5 starting points to simplify your website design.
simplebits
A simple website design shouldn’t be a daunting all-or-nothing ordeal – you can simplify your design by taking small steps. Simple tasks like putting the focus only on the essential elements of your website, getting rid of the unnecessary, reducing the number of pages your site has, getting more content above the fold, and limiting the number of colors you use. You can always fine-tune and improve your simple design, but the important thing here is to get started.
Ready to start simplifying your website design? Awesome. Without further ado, here are 5 starting points to simplify your website design.

1. Focus Only On Essential Elements

Thesis
This first step probably seems forehead-slapping obvious: of course I should put the focus on the essential elements in my site, what am I, an idiot? But a surprising number of websites fail to achieve this and the result is a big mess of important and unimportant elements spewed onto a page. I’m as guilty of doing this in the past as anybody. It’s hard to be objective and prioritize what’s important or not, because everything seems essential. If you want your website design to be simpler, identify what needs to be focus, just like with any good visual design or piece of art. And that means putting the focus only on the essential elements.

Use the 80-20 rule

What 20% of what’s on a page gives 80% of the value and content that people go there for? It could be the copy, some social proof (review snippets, testimonials, media badges), and a signup form or call-to-action button, for example. That’s the 20% right there. On your website, as well as on each individual page, focus on displaying only the 20% of site elements that are delivering 80% of that usefulness.
This isn’t a technical step but a principle that you can use as your guide to simplify your website design constantly. The 80-20 rule will help simplify your website design by pushing you to trim your site elements down to the essentials. What’s really cool is that the 80-20 rule can also help increase your desired results that you hope to achieve on your website. For example, an increased conversion rate in visitors subscribing, signing up, or buying. How? You’re making it so there are less distractions and things for visitors to click on to leave the page.
As we all know, we’re always looking for an excuse not to purchase something at the final step, and any reason to navigate away is a good one. Reduce those reasons and click-away options with the 80-20 rule.
Chris Pearson, creator of the popular Thesis WordPress theme framework, says this is exactly what helped increase sales on his website.

2. Get Rid of All Unnecessary Elements

Tumblr
We’re continuing with the 80-20 rule here.
Now that you’ve identified the 20% of website elements that will get you 80% of your desired results, it’s time to get rid of all unnecessary elements. In other words, the 80% of website elements that will get you only 20% of results. It could be social media sharing widgets, sidebar elements, blog post meta details (date, time, author, number of comments, etc), or links in the footer (this is especially a huge culprit a lot of the times, particularly when the visitor is looking for the aforementioned excuse to navigate away from the page).

3. Reduce the Number of Pages

Squarespace
A large part of simplifying your website design is to simply have fewer places to explore and click around. You can do that by trimming the page count. Either get rid of unnecessary pages that deep down inside you know aren’t needed, or at the very least, fuse multiple pages into one. I mean, you don’t really need to separate "about the site" and "about me" pages.
Firstly, get in the mindset of the visitor – if you were to arrive on your website, what are the key things would you want to do? For instance find out what your stuff is about? Or contact you? Next, make sure that your pages facilitate what is necessary and nothing more. Don’t keep unnecessary pages on your website because you think you need to, or because other websites have them. When you reduce the number of pages on your website, not only it is easier for your visitors to focus on your content because there’s less places to click around, but your navigation menu is simpler too.
We’ve all been on websites with too many nav menu items. We don’t know where to start navigating because we get overwhelmed by the choices. And when we get overwhelmed by being presented with too many choices, we go with choosing nothing. By having as few nav menu items as possible, you make your website not only simpler but more inviting and friendlier to visitors.

4. Get More Content Above the Fold

MailChimp
Studies have shown that a majority of people spend most of their time above the fold on web pages (what shows up on the screen without scrolling down). So if you want to increase the effectiveness of your website, have the main content and call-to-action elements above the fold. You can do something as simple as shortening the header height if you have a logo and a navigation menu at the top of your website.
This involves nothing more than changing the header’s "height" value in your stylesheet (typically style.css or stylesheet.css). Also, see if a sign-up form or button is below the fold. Move that element higher up in the page so it’s the first thing a visitor sees. After all, that is your desired call-to-action of the visitor, so decrease the work needed to get to it (ie. scrolling).

5. Limit Your Color Scheme

37signals
It’s easy to get carried away with colors. Why settle on 2 or 3 colors when you can have 12 or 13? But in order to simplify your website design visually, you need to limit your color scheme. When in doubt, use fewer colors. It’ll vary based on your design of course, but try sticking with no more than 2 or 3 colors to start off. If you need more subtlety and texture to your visual design, use shades of the same color – light blue for the background and darker blue for header and menu items.
I’m as guilty as anyone with getting wild with colors in the past. I’ll add this color, then another, and another – and before I know it, it looks like a rainbow diarrhea all over my website. You can have your website constructively simplified, but if the colors distract the eyes when you look at it rather than complimenting the content, then all that effort was for naught. So use fewer colors with your website design instead.

source: http://www.hongkiat.com/blog/5-tips-to-simplify-your-web-design/
 

Thursday, 25 April 2013

20 Do’s and Don’ts of Effective Web Design

 20 Do’s and Don’ts of Effective Web Design

When you are creating a website (or hiring a web/blog designer to create one for you), there are specific items you need to be aware of. Things that normally wouldn’t cross your mind. For the average person who wants a website or blog for their business, they are after one very important thing – sales. Now, they may tell you that they want the big flashy logos, or the overdone textures/gradients, but it is the job of a well skilled web designer to steer their clients in the right direction.
Below are twenty do’s and don’ts of effective web design. Study, read, (re)read and print this page. It will help either make or break your website. And don’t hesitate to let us know of anything we might have left out, in the comments below. We love getting your opinions on things and discussing the articles with you – after all, you’re quite possibly the coolest people in the world.

DO: Keep your page structured

In the recent months we’ve seen an explosion of great grid layouts and css files. The most famous (in my opinion) being 960.gs and one of the cooler, more light weight grid systems being the 1kb grid. Following after the structure and balance of a great magazine/newspaper, these grid systems help lay out information in a structured and easy to follow format.
Example

DONT: Just place boxes everywhere

We’ve all seen these types of websites before – 20+ boxes, all different sizes, nothing lining up properly and not on piece that actually grabs your attention because you’ve just ran into a whirlwind of craziness. if you’re a web designer and you cannot properly place items in a structured environment, well, I would’t really call yourself a web designer.

DO: Focus on what’s important

Are you building a website for a business that sells one specific product? If so, make sure that’s the focus of the home page. Allow yourself space on the inner pages to place calls to action for that specific item. If you’re building a blog that gives out freebies or writes tutorials, make sure they’re getting the proper amount of focus and attention. Websites like WOO Themes do a great job and putting forward what their main focus is – wordpress themes.
Example

DONT: Place irrelevant ads across your page

If you’re going to try and make money from your website/blog, do yourself a favor and lay off the excessive advertisements. If your page loads and has 70% ads and only 30% content, odds are high that people will leave and never come back. Making your ads the #1 priority is a bad idea. Try blending them in and making sure they don’t take away from the content.

DO: Choose the right color scheme

Knowing what your readers emotions are will help you in choosing the proper color scheme. You won’t want a bright and ‘loud’ color scheme if your website is in the meditation niche. You’ll notice that most punk rock bands have CMYK color schemes (pink, yellow, black and blue), while a doctor/medical website will generally stick with a lighter, more ‘open’ color scheme
Example

DONT: Overdo it with 20 different colors

Having every color that is inside the 64 set of crayons on your screen will not only look bad, but it will annoy your readers and drive them away. Your colors should blend well together, not clash. If you’re not good at picking color schemes, I’d suggest a site like Colour Lovers which has user generated color schemes posted. Find the right color scheme (at most, 5 colors) and see how much better your designs turn out.

DO: Make it easy to scan your pages

People will not spend 5 minutes trying to figure out what your website is about and what it has to offer. The best way to ensure you’re getting the right information out to your reader is to make the page easy to scan. Use proper H tags (similar to how this post is using h3 tags) to focus on the important items. You can also use pull quotes, block quotes and images.
Example

DONT: Write one paragraph per page that is 1,000+ words long

If there’s one thing that stops me from subscribing to a blog is that the posts are literally 1,000+ words and have no paragraph breaks. This, and they normally don’t even have blog words or any indication that there’s anything important inside their content. Break your content up and make it easier to read – please, and thank you.

DO: Keep it simple stupid

It’s a proven fact that sign up forms with more than 3 items (usually – name, email & one other item) will have a significantly lower sign up rate than the easier forms. People HATE doing things for too long – so don’t over complicate things. Make things as easy as possible for your readers by pretending a 4 year old will be viewing it. It definitely helps get things out in the open where they need to be.
Example

DONT: Go on and on (and on) about nothing

Rambling, excessive LOL’s, too many smiley faces and random dribble will drop attention spans of your visitors. You want them to stay – act like it. If you have a personal blog where you write about your life, thats one thing, but to randomly post about what you ate, or where you went yesterday on your business website will definitely drive people away.

DO: Focus on killer copywriting

Words matter. Keep them short, sweet and to the point. If you have trouble writing copy that attracts the readers attention to where you need it to go, hire someone. Copy is just as important as the design of your website. Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate.
Example

DONT: Stuff your pages full of keywords

Google isn’t stupid. Neither are your readers. If your page has the main keyword for your site stuffed into each paragraph 30-40 times, it will not only read very poorly, but you’ll be penalized. Writing should flow naturally and should only mention your keywords where they fit.

DO: Set your navigation up properly

If you’ve got a sign up page on your website, maybe you’ll have your main navigation in a blue color, while the sign up button is in a green color. Regardless, you’ll want to make your navigation easy to spot and easy to use.
Example

DONT: Make your readers search to find something

Your readers shouldn’t spend 30-40 seconds trying to find a contact or about page. They also shouldn’t have to click through three pages just to get to a sign up form. Get the important things out in the open. For the items that aren’t required to have a strong focus on your website, you might want to invest in a search box – I HATE when websites don’t have a search box. Web design 101 maybe?

DO: Optimize your load times

If there’s one recurring theme in this entire article it is the fact that visitors are impatient. You need to build your website with optimal speeds and allow your page to load in around 1-2 seconds. You can do this by making sure your css files are compressed, using the google hosted javascript files and ensure your page is coded and designed with optimal speeds in mind.
Example

DONT: Make everything on your page an image

Text on a website is there to be exactly what it is -text. There is no need to make the text blocks of your site jpg images. Also, making your website background 1MB or more in size will also cause your page to load very slow. I’ve seen websites also use 2 different javascript libraries and load 10+ plugin scripts for them in the headers and their websites took around 20 seconds to fully load.

DO: Choose the right fonts and sizes

I’ve only recently got into typography and have realized that it is a highly important aspect of web design. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font.
Example

DONT: Have 5 different fonts in 10 different sizes

Picture this: Page titles are in times new roman, content for those pages are in Arial, navigation links are in comic sans and the sidebar is in impact (yes, that impact). How ugly does that look? Now, remember that vision the next time you want to build a website with 5 different fonts.

DO: Make your page visually appealing

The world may tell you that people don’t judge a book by its cover, but thats a lie. The first thing people see is the web design you’re branded with. That first impression better be a good one. Utilize textures/gradients that give your website depth and draw attention to the beauty of your design. I would strive to ensure each of your website designs are accepted to galleries like css mania.
Example

DONT: Throw a bunch of crap together and think you’ll do well

Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year olds myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it. If you’re a professional, act like it and make sure your designs are up to par.
source: http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design 

Thursday, 18 April 2013

Best Tips for Effective Web Design

Here are some essential web design tips that every web site should follow. Design your web site by following these tips and I guarantee that visitors will have a great first impression of your site.
  1. Fast Loading web site designs - This is the number 1 tip that every web designer should follow. You might design a web site that looks fantastic but few people are going to see it if it takes a long time to load. Your designs should be optimized for the web and should not take more than 15 seconds to load. Remember, you might have a great design but very few people are going to see it if it takes a long time to load. Click here to for 10 tips to fast-loading web pages.

  2. Clear Navigation - Once a visitor has come to your site you need to make them go through your site. To do this you need to have clear navigation. Make sure all your important links are at prominent places. Preferably right on top - that's usually where a visitor first looks. Make use of menus on the right and the left. Try to link to as many pages of your site. Let your information be accessible from all parts of the site. You never know what a visitor may be interested in. Try to also use the footer for your important links. Click here for navigation tips.

  3. All Resolutions - Today, there are computers with all kinds of resolution. They range from 640 x 480 to 1024 x 768 and go even higher. Your job is to design your site for all these resolutions. The best way to do this is to design your site in terms of percentage and not pixels. Click here to learn how to design websites for all screen resolutions.

  4. Browser Compatibility - Make sure your site is browser compatible. Your web site should look good in Netscape as well as in Internet Explorer. Don't stop designing your site as soon as you find that it looks great on IE. Usually Netscape gives some problems, especially when you try doing complicated HTML designs. But don't give up too soon, usually with patience these problems can be easily fixed.

  5. Readable and professional looking fonts - Don't ask me how many times I've clicked out of a site just because the font is in Comic Sans and the color is a bright pink or green. Just by looking at the font you feel that the site is not a professional site. Don't use Comic Sans and other fancy fonts that may not be available on most computers. If the font you use is not available in a visitors computer the web site will use the default font of your computer which is much worse. So try to keep to common and professional web fonts. The fonts that I always stick to are Arial and Verdana.

  6. Minimize the use of images - I believe that sometimes simple designs are the most effective for the web. Keep your site simple but neat. Don't clutter your page with big, bulky images that take ages to load. Instead use tables creatively and design eye - catching icons that will draw a visitor's attention to a particular section of your site. Tip - Visitors are usually more interested in content than in design.

  7. Use of white space - Try not to clutter up your page with too many images, backgrounds and colorful fonts. Again use the Keep It Simple principle by minimizing the use of graphics and using a lot of white space. White space gives a sense of spaciousness and overall neatness to a site. Notice the white space in our site.

  8. Check for broken links - Always check for broken links within a site before uploading it to your web server. In Dreamweaver you can check for broken links by right clicking on any file in the Site Files Window and then clicking on Check links - Entire Site. If you don't have this facility you need to upload your site and then check it using online tools like Net Mechanic.
source: http://www.entheosweb.com/website_design/webdesign_tips.asp