Now that everyone from your favorite author to your dog sitter has some sort of website, most designers have learned that the old, static layouts and pages just don’t cut it anymore. In order to really get the attention of your viewer you have to stay ahead of the trends; a great way to do this is embrace interactivity. Static pages just don’t stand out to visitors anymore, as they are now used to animation, parallax scrolling, and other interactive elements.
But don’t fear, interactive pages don’t have to be complicate, as you can see in this example. Below we outline other great examples of interactive pages and discuss how emulate a similar style on your own.
Examples of interactive sites
SimpliSafe does a great job of showing their customers the length they will go to protect their property. Moving from inside to outside of an animated house as the viewer scrolls down the page, they teach their customers what they can do to ensure safety and peace of mind.
YouTube pulled out all the stops when they created One Hour Per Second, a microsite that makes great use of animation, creative controls and provides links to some of the most popular clips from their website. When the user starts the presentation, easy to follow examples roll down the screen, providing the viewer with context to understand what it really means to have one hour of video uploaded to YouTube every second.
Life of Pi was recognized as being a visual masterpiece at the box office and numerous award shows upon its release. With a mix of film and animation shown in 3-D, it’s no surprise that fans wanted to know exactly how the movie was made. This website uses lots of cool navigation and superimposed sketches of set designs with images from the film. Visitors can watch videos of some of the trickiest scenes filmed and provides before and after images that show exactly what the special effects provide. It’s a great way for fans of the film to get in on the movie magic.
If there is one thing every James Bond fan enjoys it’s all of the extraordinary tools that he gets to use in the films. And the coolest of all the unattainable items might be the cars he gets to drive. A very clever used car dealer caught on to this and decided to break down all of the Bond cars and let customers choose their favorite. With color palettes that match every decade, swirling backgrounds zoom in and out to reveal the next movie’s car. They obviously know the value of an older car and do a great job of pointing that out to their customers as well.
The Dangers of Fracking makes great use of visual elements to educate viewers on how wasteful and harmful fracking can be for the environment. With easy to follow graphics that take you from start to finish and navigation that makes you feel as though you are flipping through a book, they put everything you need to know about fracking in one place. It’s a great way to inspire visitors to react to the information instead of just reading it.
Luke Clum is a graphic designer from Seattle who specializes in print and web development. He loves coffee, hiking and alpine climbing in the mountains. Follow him on Twitter @lukeclum
Understanding what your niche audience wants from your ecommerce business plays a big part in enabling conversions. But a highly usable and intuitive design is what drives conversion rates to their potential. Apply these tips to your ecommerce site to improve your conversion rate.
1 – Improve your speed
A web page that loads quickly (1-3 seconds) makes a much better impression of reliability and professionalism than slower sites do. Users want results fast, and if any part of your site loads slowly, they have more time to reconsider their purchase and abandon the page. Keep in mind that 25% of users abandon a page after just 4 seconds.
Site speed also improves search rankings, which directs more traffic to your site. A higher priority in search result ranking instills an image of legitimacy in the minds of online shoppers. And the more people that visit your site, the more conversions will be completed. To start, check how quickly your site loads with a site speed tester, and then decide if you need to make any larger steps.
2 – Make clear calls to action
In order for users to convert, the purpose of your site should be very clear. You can describe your product with a combination of images, videos, headlines and copy. But to indicate exactly what users are meant to do with your product, you need concise calls to action. These are most often designed in the form of buttons or forms. They should stand out from the rest of the elements on the page and have actionable copy to describe exactly what they do.
Threadless immediately encourages the user to take action.
3 – Create a good overall user experience
Usability is a characteristic that should be applied to every part of your online store. From navigation to the checkout process, make every step as simple as possible. Items should be easy to find, buttons clickable, and minimal steps should make up the purchasing process. If customers can easily enter your site, find what they want and check out quickly and securely, they’re sure to leave happy.
4 – Build trust
Visitors are more likely to convert into customers if there are marks on your site that communicate its trustworthiness. Create a good returns policy and display your SSL certificate during the checkout process so that customers know that your business will protect their personal information. Previous customer testimonials also build confidence in potential customers for their buying decisions.
Amazon is known for its transparency and reliability because each item has customer ratings and reviews.
5 – Be Consistent
An important contributor to usability is consistency throughout your site. This means that it should be the same style of interactive elements like buttons or links, a coherent visual design and steady loading times. The same care you put into the design of your home page should be applied to product pages, because that’s where most browsing time is spent.
Free People has a very recognizable visual identity and consistent usability throughout its site.
Use these tips to increase the conversion rate of your web design, and make use of this ecommerce platform webinar for more conversion best practices.
Luke Clum is a graphic designer from Seattle who specializes in print and web development. He loves coffee, hiking and alpine climbing in the mountains. Follow him on Twitter @lukeclum
A guest post by Michael Turner, a Graphic Arts and Design graduate
Web design has become a very competitive business in recent years. You may have great, unique content on your website, but if the look and feel is of a poor standard, visitors won’t want to stay and look around. The design of a website should first and full most complement the purpose as well as the particular niche it is in, and it should ensure reading and browsing is as easy and hopefully intuitive experience for any visitor.
The content on any website must be structured and organised. Content should be planned out and divided into logical sections by making them visible and easily discoverable. When content needs to be broken up, break it up into different pages. If content is sparse on a particular topic, try to add it with content that complements it in a logical way. Blank space in some cases can look out of place, and it can give the impression that the content is not important. This does however depends on what the site is about. For example, an art or design site may for aesthetic reasons use negative space.
Optimising a website makes it load quicker and more efficiently for visitors as well as improving the overall design. Imagery of any kind needs to be sized and optimised appropriately. Stretched images that are too large, for example, will look awkward and probably pixelate too. Use a gallery view or thumbnails if larger images are needed, so that they don’t eat up too much room on the page. This will also help towards a faster loading website. Remember to take in to consideration that your site will be used on a number of different devices including laptop and desktop computers, mobile phones and tablets, all with varying sized screens. All have different resolutions, and the website must be readable and optimised for them all.
Break Up your Text
Websites with walls of text are hard to read and off-putting to visitors. Breaking up the text and content with images, paragraphs, lists or subheadings lets visitors quickly scan content to see if it is relevant to their interests. If so, they will be encouraged to read the rest.
Readability and Usability
All websites should have content that is easy to find so visitors can intuitively find the information they need. Users should be able to scan pages and know what information is where, and navigation on the website must be easy with the use of appropriate menus and buttons. Navigation should always be consistent throughout a website and a site search function or site map can make it much easier for visitors.
Similarly, websites should be clear. Avoid overusing distracting animations and graphics, using garish or contrasting colour schemes and using vivid colours for the fonts. Busy backgrounds often make a website harder to read. If the overall design of a site strains the visitor’s eyes or makes it difficult to look at, they won’t want to read it and will move on in most cases.
Create A Brand
Branding a site can actually make it more appealing and in some cases attractive, and it can tie in with the design of the rest of the site. An appropriate, well-designed logo can make the website more recognisable and hopefully memorable, and it can also determine the whole colour scheme for the design. Make sure the colours used reflect the sector and possibly even the values of the site.
Keep it Simple
Your websites functions and features need to be appropriate and simple. They don’t need a huge amount of Web 2.0 features just for the sake of it. Embedded media and other plug-ins can be used effectively too, but overusing them can make it look a little over crowed. This is most true for social media widgets, which should only be used if the social media sites have a dedicated user base that is active.
Rob Cubbon is a graphic and web designer, a prominent design blogger and has also recently written a book all about running a web design business. I asked Rob to share a bit of his design background and offer his advice to anyone who wants to know how to start up a web design company.
Please could you tell me a little bit about yourself and your background as a graphic and web designer?
Rob: I never went to a design school or college. I used to work for newspapers and magazines and witnessed the “desktop publishing” revolution. I taught myself Quark and Photoshop and gradually got more and more artworking and design roles within the print industry.
After years of freelancing punctuated with the odd spell abroad teaching English, I eventually got round to setting up my own website in 2005. After only a few months of blogging I had clients contacting me for work. I then set up my own company. For two years I spent half my time freelancing in design and marketing companies in central London and half my time working for my own clients at home. And for the last 3 to 4 years I’ve been solely working from home on my own business, increasingly supplying web design and related services.
You have recently written a book called “Running a Web Design Business” please could you explain what motivated you to write it?
Rob: Looking around at the successful design blogs, I found there were great tutorials sites explaining how to create everything and anything technically and artistically. There are also a great number of blogs that provide fantastic inspiration for designers. But, where I don’t see a great deal of information is on the business side of graphic design – how to get clients, how to handle projects, what to charge, etc. And these are the questions my readers were also interested in.
What have you found has been the biggest factor to your success of running a web design business?
Rob: It’s not artistic talent. Although being able to produce graphic communication that works for the client and the market in an aesthetically pleasing manner is tremendously important and is something that I work hard on – it’s not my strongest point. However, I do think I’ve developed systems to attract the best sort of clients and then to evolve a long-term mutually beneficial partnership with them. I think that’s helped me grow the business over the years.
As part of your research for the book you reached out to a lot of well know web designers and bloggers. Were there any answers that surprised you from your research?
Rob: Virtually all the answers surprised me in some way, although it surprised me that their answers were similar to mine. The fact that none of us spend any more than 50% of our work time designing shouldn’t have surprised me, but it did. And then only a narrow majority of the designers always use a contract surprised me a little but this showed the trust that exists after having created a good relationship.
If you were offering advice to someone just starting out what would be your two top tips?
Rob: The first thing I always say is to concentrate on your own site. Not only do you really have to get it looking great and present your work as well as you can, but also you have to be continually working on your blog as that will attract the visitors amongst which will be your potential customers.
Second to blogging will be relationships. Relationships with other designers online, with your existing clients and with other business people in your communities (both real local meetings and in online communities) – these are great for leads.
Where can people find out more about you and get a copy of your book ”Running a Web Design Business?”
Ben Vallack contacted me the other day to tell me about his new CMS (content management system) called SetSeed. Most people will have heard of WordPress, which is incredibly popular so it will be interesting to see how Setseed develops as the new kid on the block.
One of the key ideas behind the CMS seems to be that we, as designers can set up the CMS and make it look as we want and then hand it over to the client allowing them to edit the text they need to without being able to fiddle with (and break) the design.
Some features of Setseed CMS
SetSeed is a self-hosted CMS which lets you rapidly build and deploy complete websites and online stores for your clients.
The CMS interface is beautiful, easy and lets your clients control their content without breaking your design. Use your own logo on the CMS and even in our training videos for your clients.
Pay a one off low-cost fee per site no expensive monthly payments
I recently had a lunch with one of my clients, a well-known and successful graphic designer. At some stage during the meeting our conversation shifted to the way our businesses and sales are going. And it was during that part that I was really stunned by my clients views.
He simply stated how easy it is for him to sell a website. His observation was that you can be pitching hard any graphic design related work but it is the minute you mention a website that your prospects eyes widen. Not to mention that he finally starts paying attention.
And I guess it’s true. Everybody wants a website these days. And with all the technology that surrounds us that we’re so used to, talking about websites is much much easier. All you need to do is mention some technology related stuff and you are an expert.
But there is a danger in this. Selling websites may be easy but it’s also really easy to promise a large system you can not deliver thinking you’re signing up for a simple site only.
I see this happening all the time. Just look at any web related forum out there. It’s full of designers trying to get advice on coding issues, or setting up servers, installing CMS systems and many others. And most of that only because the job exceeds their skills and capabilities.
So, what’s the solution then? Not selling websites at all and stick to print?
Definitely not. Those of you who know me know also that I am a big believer that design studios should expand and incorporate web services into their offer. To me, it is the only way for them to develop their business. And with the times to come it may be a single thing that will actually keep them in business.
What I am also constantly advocate is that in order to build a web career you need to learn, discover and master it. As one of my friends had put it, it’s a big jump from print to web. And you have to train really hard to land on the other side.
So, what do you need to know to understand more what you sell? And ultimately know what you need to deliver.
1. Understand the difference between web and print and realize one important thing, users do not visit your sites for their design.
No matter how silly this sounds it is actually one of the main reasons for many designers failing in delivering web projects. Designers tend to think that their work is the sole selling point of the website but in reality it’s the information contained on the site the only thing that matters to users.
2. Learn how to organize that information.
Learn how users read on the web, what helps them to scan your copy and find information most relevant to what they are looking for. Also you should know what makes great copy on the web and how to write a content that focuses on fulfilling your users needs.
3. Learn how to structure the site as well.
Master ways to build the sites structure so that your user has no problems whatsoever in finding what they are looking for.
4. Learn the technology behind websites.
Just like at the start of your design career where you had to learn the basics of print processes, with the web you need to know how the technology running the show works.
5. Investigate actual limitations of the design material you can use.
Fonts, colors and images all work different than with print. Once you know that difference the whole process of design will become much easier for you. Otherwise there may be some not so nice surprises waiting for you at the end of the road.
6. Understand how the code works.
If you design the site you should have at least a basic understanding of it. But by all means you don’t have to know how to code. All you need to know is what might cause you potential problems. You will be able to avoid those things at a design stage.
Now, all this seems like a lot. But when you think of it, these are really only the basic stuff that you need to know. Once you know them though selling website will be even much much easier. And you will be sure that you know what you sold and what you need to deliver.
Pawel Grabowski is a web usability and front end development specialist at think two, an Irish web consultancy working exclusively with designers and design studios. We help our clients win and deliver web projects of any size. He also publishes his own blog at www.papertopixel.org