Posts Tagged ‘Web Design’

« Older Entries

Web Design 101: Tips on Colours

May 13th, 2013

In our last article, we talk about few tips on font and typography when designing your website. In this post, we will share some other tips on colours.

web design_colour

Colour Wheel

To start off, let’s discuss the importance of primary colour, secondary colour, and tertiary colour. These two terms give you the practical guidance to colour mixing and visual effects of specific colour combination. Primary colours refer to red, yellow, and blue and these three colours cannot be mixed by any combination of other colours. All other colours are derived from these three. Green, orange, and purple are the secondary colours which are formed by mixing the primary colours. Tertiary colours are yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green. These colours are formed by mixing a primary and a secondary colour. Below is an image of a colour wheel with the tertiary colours.

Example of Colour Wheel

Colour Scheme

Colour is an important aspect of your website because it can affect the entire mood, feel, etc. There are a few popular ways to create colour schemes. If you want to create a website with high contrast, vibrant and energetic look, you can choose complementary colours by choosing colours that are opposite from each other on the wheel. In contrary, if your goal is to create a harmonious website, you can choose an analogous colour scheme, which is comprised of colours that are next to each other on the colour wheel. For example, you can choose green, light green, and blue.

One important tip for you to consider is stick with 2-3 base colours for your website and also make use of tints, shades, and tones of these base colours. For more info about tints, shades, and tones, check out this website.

Colour Scheme Inspiration

kuler

Does this colour scheme look cool to you? Kuler.adobe.com is a website that features many colour schemes created by thousands of online web designers. Once you choose a scheme you like, you can even find the RGB and HEX colour so that you can fine tune it on different elements of your website such as top menu bar, vertical menu bar, font sizes and title, etc.

We hope you find the colour tips helpful. Feel free to share this blog post on your Facebook and Twitter. Stay tuned for more web design tips.

 

No comments »

Posted in Web Design

Tags:

Designing for Smartphones

September 21st, 2011

Many people expect websites to work on their mobile phones. With this said, mobile support is now a standard for any website.

But how do you make your website mobile compatible?

The simpliest way – test them on all mobile devices and solving any problems that you encounter.

Unfortunately, due to the many operating systems and browsers on the market for mobile devices, it’s unpractical to test your website on every mobile device out there – not everyone can afford to buy multiple mobile devices just for testing purposes.

Choose your test device

According to ZDNet, the Top 10 Smartphones of 2011 and the Top 10 Smartphones of 2010, uses more or less these operating systems: iOS, Android, webOS, Windows Phone 7, MeeGo and BlackBerry. While the operating system is the most important ingredient of a platform, browsers are also important. Every platform has its own default browser. So, if a certain platform should become more popular, its browser would gain a large market share and thus forcing web developers to pay attention to it.

Installing browsers

Once you have decided on your test device, install additional browsers you can download on the device. Two browsers are inevitable: Safari and Opera Mini.

Keep in mind, according to StatCounter, the Opera has dominated the market with almost 22%. The iPhone and Nokia comes in at close to 17% each, with the Android at 15.5% and BlackBerry at 14%. Compared with stats from two years ago, the iPhone Safari has fallen while the Android has risen by a few percentages.

Designing for mobile devices

The basic principles – Easy, Visual, Results, Fast

  1. Easy – navigation needs to be simple and straightforward.
  2. Visual – Buttons should be big and spaced reasonably far apart. All clickable areas should be made large enough to grab attention of the user and easy enough to click with their fingertips.
  3. Results – understand the specific goals of the mobile users and design your site to accomplish those goals as quickly and as efficiently as possible. Just remember, a mobile site needs to help customers go directly to the information or content they require.
  4. Fast – make sure content is light weight so that it loads as quickly as possible. Content load times that may be acceptable to a personal computer user on broadband may not be acceptable to a mobile user on a wireless network.

Good-to-know: Screen, Resolution and Browsers Capabilities

Screens on smartphones vary largely in both display size and resolution. Screen sizes range from 2 to 5 inches, with resolutions ranging from 240×320 to 640×960. The most common resolution is 480×800, which is higher than most desktop monitors.
Other good-to-knows:

  • Neither the iPhone nor the Palm Pre support Flash content.
  • Javascript and CSS support in mobile browsers is as good as it is in their desktop counterpart.
  • Most mobile devices have no cookie support.

Tips and tweaks

  1. You can tell the iPhone (MobileSafari) that your page is a certain size thus optimizing the viewport of your mobile website, add this code to the head of your HTML page:
    meta name=”viewport” content=”width=790”
  2. Single column layout work best. Remember, zooming in isn’t ideal because it adds an extra step and zooming in and out might not be as easy as said on all phones. Remove low priority content and present content with single column pages that use up the whole width of the screen.
  3. Take advantage of inbuilt functionality, such as making calls. Including your phone number on your “Contact Us” page allows users to automatically call that number when they tap on it.
  4. Touch screens can’t detect when a finger is getting close to touching it, so the concept of hovers or mouseovers does not apply.

No comments »

Posted in Internet, Web Design

Tags:

Redesigning your website and how to make the transition smoother?

September 15th, 2011

Whether you are redesigning your website because you are unhappy with the way it looks or function, or you need to improve search engine rankings and sales conversions, it is important to understand what it is you wish to accomplish during the redesign.

Other things to keep in mind when redesigning:

  1. People love consistency. For the consideration of your visitors, you might want to make sure your redesign is not so drastic that it is not recognizable to your regular visitors.
  2. Do not break your brand with your new design. Consistency is important, especially when talking about your business’ branding.
  3. Create a planning sitemap. Draw out every page on your website in a map format so that you can clearly see the interaction and navigation between pages.
  4. Avoid unnecessary bells and whistles. Keep your redesign simple.
  5. Don’t forget the small stuff: favicon, custom default gravatar, broken links, etc.

Useful Tools:

  1. Google Analytics – it’s always important to take a look at what’s working and what’s broken on your current website. With Google Analytics, you can see what pages are being viewed, how people are navigating your site and what browsers and screen resolutions are most popular.
  2. Theme Switch (for WordPress only) – If you are redesigning a WordPress site, Theme Switch is a plugin that you should consider using. It allows you to view a different theme then the rest of your visitors.
  3. Adobe Kuler – it offers a collection of color schemes that will help finding the perfect colors fast and easy, and best of all, all swatches are sortable and exportable right into Photoshop.
  4. Adobe Browser Lab – nothing will slow down a redesign more than spending hours browser testing. The Adobe Browser Lab allows you to test your site across all major browsers, including Internet Explorer, Chrome, FireFox and Safari.

When and how your launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. A big relaunch around the holidays or at the start of a big promotion can draw traffic and general interest. For example, Smashing Magazine timed its redesign to coincide with the introduction of the Smashing Network.
Ways to make the transition smoother:

  1. Try to keep vital elements of your website similar to their existing counterparts (ie. the main navigation and header)
  2. Provide users a blog post or news announcement discussing the change
  3. Set up a 301-Redirect (permanent redirect) for all pages and URLs on the old website. This will ensure that visitors who click on indexed search results are still taken to the relevant pages and it also eliminates 404-Error pages from showing up as a result of your redesign’s new URL structure.
  4. Make sure error pages contain helpful, updated information

No comments »

Posted in Internet, Scripting, Web Design, Wordpress

Tags:

Biggest Mistakes in Web Design

September 6th, 2011

1. Designing your website for your needs, not your customers.
Mistake: Many businesses believe that a website is about opening a new marketing channel, promoting a brand, or increasing sales and revenue.

Why:
Most people visit a website to solve one or more of these four problems:

  1. They want/need information
  2. They want/need to make a purchase
  3. They want/need to be entertained
  4. They want/need to be part of a community

It’s just that simple, all visitors care about is solving their problems.
So, when designing a website, remind yourself:

  1. The only reason my website exists is to solve my customers’ problems.
  2. What problems do my webpage solve?

2. Visitors can’t figure out the purpose of your website in less than five seconds.
Mistake: After five seconds on your website, visitors are still wondering are you trying to sell something, what is your website about, etc.

Why:
Visitors are not going to stay around, dig around and find out. If your name or tag line does not tell them what your website is about, they will simply leave and go on to the next website.

3. Visitors can’t read the text on your website.
Mistake: Many web designers like to use light type on a white background.

Why:
Unfortunately, because you know your content so you can read it even if you can’t really see it. But, without proper contrast, visitors can’t see the text and if they can’t read it, they will leave.

Tools that can help you:

  1. Graybit.com – the best way to evaluate a website’s contracts is to examine the website in grayscale. Graybit.com will convert your websites to grayscale, so you can ask yourself: Can you read the text?
  2. Check My Colors – an easy-to-use contrast-analysis tool that will provide a thorough analysis of the website’s color combinations. It checks for contrast ratio, brightness difference and color difference.
  3. Color Scheme Designer – Not only can this tool help you choose a proper color palette, it can also simulate how people with colorblindness will interpret your color scheme.
  4. Coblis-Color Blindness Simulator – allows you to uplod an image and view it as if you had different types of colorblindness.

4. Too much material on one page.
Mistake: You don’t know where to put most of the material so you’ve crammed them all on to one page.

Why:
With so much content vying for attention, it is difficult for the eyes to find the focal point. People get confused and they leave (and most likely find another site that is less confusing). A long web page also means you have failed to organize your website properly.

No comments »

Posted in Before You Install, Internet, Web Design

Tags:

2011 Design Trends for Small Businesses

November 24th, 2010

It is very often difficult for small businesses to keep up with the latest design trends because of the cost involved with redesign and the ever-changing interests of their customers (ie. the increasing popularity of mobile devices). But there are a few web design trends from 2010 and leading into 2011 that small business website owners could consider.

1. Keep Flash to a minimal

More and more website designers and developers are staying away from Flash-only solutions for video, animation and navigation. The primary reason – Flash is not accessible on most mobile devices. As a customer, there is nothing worse than visiting a website from a mobile phone only to find that I am unable to access contact information or list of products/services because the content was built in Flash. If you must use Flash, use it sparingly and provide a non-Flash version of the content for your mobile users.

2. Rich Typography

Typography is an important component of any web design and in the past year, thanks to services like Fonts.com Web Fonts, Google Web Fonts and TypeKit, you can use web fonts on your website with very little effort free or very nominal costs.

3. Mobile-Optimized Websites

Is your website small-screen friendly? Having a mobile optimized website means not only will your website load faster over cellular data connections, but that the content is formatted to be viewed on smaller screens. If your potential customers read your website on mobile devices, you want to be sure that your site is displayed correctly for them.

4. HTML5 and CSS3

HTML5 is the most recent revision of the programming code used to build websites. CSS3 is the most recent version for stylesheets. These new versions allow coding to replace Flash, custom graphics and other third-party plugins.

5. Magazine Layouts

Old fashioned column layouts are being replaced with magazine layouts. This also includes web pages with easy navigation, interesting articles, large images, and lots of sub-headlines. You will also see less text on web pages and more succinct messages. You want to give your message in just a few clear words. If you are using WordPress, you will find many magazine-style themes available for download. For ideas: 20 of the Best Free Magazine WordPress Themes

6. Social Media Icons

Social media icons, ie. Twitter, Facebook and Digg, will continue in popularity – the social media landscape is still growing rapidly. To see the various icon sets available: 33 Beautiful Social Media Icon Sets for Designers and Bloggers

7. Lighter Colors

For most businesses, white, beige, tan and grey will be the dominant colors. Text will be dark grey on a white background and accent colors will be brought in through the use of large and vibrant images or graphics.

No comments »

Posted in CSS, Internet, Scripting, Web Design, Wordpress

Tags: