Posts Tagged ‘web design tips’

Trend Spotlight: Scrolling Websites and Parallax Design

October 28th, 2013

If the Mid-Autumn Blahs (translation: gray skies, rain, and a diminishing justification for ice cream) are getting you down, you might be needing something to perk up for spirits. We know just the thing… a web design revamp! In this article, we’ll take a closer look at one of the growing web design trends of the season: a scrolling website.

What is a Scrolling Website?

A scrolling website is one where visitors can simply scroll down (or across, depending on the design) to reach each section of your site and see new content. Rather than having to load a new page, the motion is continuous, and users will see the images move incrementally.

Take a look at an example of a scrolling website here:

Oakley: Fear and Loathing in Australia

oakley

Many scrolling websites use a parallax scrolling technique. These designs are dynamic because the background image of the website moves slower than the foreground elements. A great example of a parallax design is here:

SOS Global

sos_global

PROS:

Guide Your Visitors

A scrolling website can help you take your user through the entire story of your site – you guide their experience and the order of how they view your content.

Unique

At least for now, a scrolling website is not yet the norm. Your site will stand out as cutting edge and on-trend. While it’s not the norm; however, scrolling is becoming a more popular navigation technique. Because scrolling is becoming more common with social media giants such as Facebook and Pinterest, the idea is not too far-fetched for users to grasp.

Visual Impact

A scrolling website is a great way to capture attention, especially if your website is visually driven. The fluid motion of one page seeming to transition to the next can give your users a more relaxed and interesting user experience.

CONS:

A scrolling technique can create a stunning site to impress your clients, associates, and hip friends. But before you jump on the bandwagon, consider if the “pros” outweigh the “cons.”

Effects on SEO

Be aware that many scrolling websites have an entire site on one page. However, this could cause trouble for SEO, for a number of reasons. There are many debates in the cyber world on this topic, but one of the most prevalent concerns is that Google Spiders do not know how to scroll to look at new content. Another issue is that Google may not like big pages with a lot of content, as they can take too long to load. There are many different proposed solutions to the SEO problem, so if you do take the plunge into Scrolling Design territory, make sure you do your research!

Here’s an article with some SEO solutions to parallax design: The Perils of Parallax Design for SEO

Text-Based Websites are Not Ideal

Remember when we said a scrolling website would be perfect for image-based sites? The opposite is true for text-heavy websites. Unless if creative typography is your thing, a text-driven website could be messy, intimidating, and not visually stunning.

Navigation

Imagine this dreaded situation: A potential client of your eCommerce site can’t seem to remember where they saw that item they wanted to buy earlier. They scroll a few pages down, get rust rated, and promptly leave. Ouch.

Because scrolling websites often have an entire website on a single page, rather than having multiple pages, it could be difficult for users to bookmark exactly what they want. One solution to this problem would be to include a menu and pagination, while still implementing the scrolling technique.

Wrong Clientele

Sometimes, visitors don’t like change. All of a sudden, they don’t know how to navigate your site, they can’t find the page they were expecting to see, etc. So before you make the leap to a scrolling design, consider what kind of clientele your website attracts. Will they be open to change? Will they appreciate this modern look? Will they stick around to adapt to the new navigation technique? These are important questions to consider.

Conclusion:

So is a scrolling design right for you? It looks great, can create a compelling user experience, and can give your site a clean and modern look. However, be sure to pay attention to the individual needs of your website before making the switch.

If you’re willing to tackle a scrolling design, our hosting includes an instant script install for WordPress, which has many themes to try. If you’re not exactly the most tech-savvy, we’ve got some tech-savvy people at Doteasy to help you implement this design with a website design package only at US$695. Give us a shout if you need help!

web_design

Popular Web Design Resources to Jumpstart Your Website

September 9th, 2013

One of our main objectives at Doteasy is to provide services to help our clients get a great site online as quickly and easily as possible. We have a variety of options to help you quickly create your website, including our Website Creator to allow you to create your website without any techie experience, Softaculous to install WordPress to build a hassle-free site, as well as an option to subscribe to our Web Design Service at an affordable price.

However, for those of you who love to get completely involved in the DIY process of web designing and developing, we’ve written a few blogs on the subject of web design, which you can access from our Archives. In addition, we’ve put together a list of even more online resources that can help you put together an attractive and “wow-worthy” website:

 

Web Design Resources

 

These popular websites offer tutorials and resources for web designers and web developers to enhance the functionality and form of their website.

Agile Designers

Agiledesigners is a sharing site which offers both free and premium resources, easily categorized so you can filter them by topic or popularity. A great community to get involved in or just to drop by.

Noupe

A great blog for both designers and developers, Noupe is full of tutorials and tips for both web designers and developers.  We especially love their categorization, which makes it easy to find what you’re looking for by just clicking on a category title. Article categories include AJAX, CSS, WordPress, as well as graphics, typography and more!

Web Appers

This blog features a plethora of open source web resources for web development, such as Ungit, Dripicons, and EasyDropDown, to name a few. Check it out to find resources for functionality and design.

Web Designer Depot

A blog mediated by “experienced designers and developers all over the world,” this site is a goldmine of information, ranging from tech news to tutorials. This is a great place to check out web trends. Also, we love that there’s an entire section of the site dedicated to offering free downloads!

 

Typography

 

Text on your site is incredibly important, and the balance between readability and creativity is often difficult to maintain. These sites can help de-mystify typography.

Incredible Types

Get inspiration from this collection of typography designs from around the globe.

What the Font

Have you ever been curious about a font you’ve seen on one of your favorite websites? By submitting an image, this site can help you find out what that font is by finding font matches in their database!

Thinking With Type

This guide can teach you all the basic and not-so-basic information about typography, helping you make the best text choices to improve the readability and look of your site.

Web Designer Depot’s Typography Compilation

This article includes a variety of website designs that implement the use of text well. Check it out for some great ideas!

 

Stock Photography Resources

 

In this visual culture, the power of good-quality images on your website cannot be ignored. Check out these resources to find royalty-free images- some that are free, some that aren’t.

 

Shutterstock

One of the big ones, Shutterstock boasts a massive library of over 28 million premium royalty-free images, vectors, and videos. They also have a variety of pricing options- either pay as you go or choose a subscription package.

Veer 

Veer is one of the most popular stock image sites on the web. The site includes flexible payment options -save money by purchasing “credit” bundles, choose a subscription package, or pay as you go.

stock.XCHNG

stock.XCHNG is incredibly easy to navigate, allowing you to easily find the images you’re looking for. Their categorization and browsing tool makes it simple to search for both popular images and uncommon finds. The collection is compiled from contributors in the SXC community who offer their work for free to gain exposure.

Stockphotosforfree

If you want to include stock images on your site without having to spend money, stockphotosforfree offers over 100000 photos that are absolutely free for both commercial and non-commercial use. Most of the images are still shots taken from HD videos.

Also check out our blog written on this topic for a longer list of stock photo websites.

There are a multitude of resources on the web to help you design your website, and we hope these will give you some inspiration and keep you informed about the latest web trends. The world of web design is constantly changing, and we hope these resources will help you make informed decisions about the direction you want to take your website!

Web Design 101: The Website Menu Bar

May 27th, 2013

A website menu bar helps visitors navigate the website. It often contains the page link to “About Us”, Contact Us”, “Our Projects”, “Our Products”, “Our Services”, etc. Normally, a website menu bar is horizontally located at the top of the website, but there are websites with vertical menu bars placed on the left of the websites as well.

The website menu bar can really affect the look of your site because it is probably the first thing a visitor sees on your website other than your logo. In general, having a website menu bar with only one row straight across looks the most professional. A single row menu bar also makes it easier for your visitors to navigate your website. If you have many items to show on a single row menu bar and the bar turns out to display in two rows, you may consider using “Subpage”. See the image below.

example_of_subpage

Our Domain Transfer Page is an example of a subpage. Not only providing a more professional outlook with single row menu bar, a subpage can also enable you better group several pages with similar content together. For example, if you own a website that sells your home-made cupcakes, you can create a “Product Page” and various different flavours of your cupcakes as subpages.

Check out this website for some inspirations when designing your website menu bar. Also, make sure you read our last blog post which shares many tips on colours. These tips can help you choose which colours scheme best fit the overall tone and mood of your website.

Web Design 101: Tips on Designing Logo

May 20th, 2013

In our two previous articles on Web Design 101, we discussed a few tips on colours as well as font and typography issues. In this post we are going to share our thoughts on logo design.

web design_designing_logo
Why you need a logo for your website

One of the first things you must do when you set up your business is to have a logo. This also applies to website development. A website logo helps you brand a professional and trust-worthy image for your website. If you want your readers to come visit your website on a regular basis, a website logo is a must!

Dimensions

960 pixel is a common width for website layout. This is because 1024 x 768 was one of the most-often-seen monitor resolutions in the past decade. Having a 960 pixel website width gives enough spacing between the actual browser and the website.

Rule of thumb: When designing your website logo, you may consider having approximately 192 pixel width, or 1/5 of your website width.

Background Colour

Choosing a transparent background for your logo is, in general, easier for you to match with your overall website designs and colours (imagine an irregular shape of a logo with a transparent background. This will work perfectly fine with ANY colour of a website). To do so, save your logo in PNG or GIF format. But please keep in mind that GIF file only supports 8 bits per pixel. What that means is it only allows a single image to reference a palette of up to 256 distinct colours chosen from the 24-bit RGB colour space.

Website Layout

As mentioned in the beginning of this article, a business owner should have the logo BEFORE he/she actually opens the business. This also applies to website logo. You should have a website logo prior to your actual website design. So, when you design your website layout, you should keep your logo in mind and try to match the overall tone and colours of your website with the logo.

A Few Extra Tips

  1. There are thousands of free online logo creators available online. Simply search “logo maker” on Google and that should lead you to some FREE good resources
  2. Avoid blurry image with fonts that are hard to read when designing your logo. A higher resolution of the logo should solve the blurriness problem. But please keep in mind that files with large size will always slow down your website. Consider something under 300kb but with a higher pixel dimension.

Have fun designing! Stay tuned for more design tips on menu bar of a website in our next article. Share this blog post on your social media channel if you find it helpful.

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.