Design Ideas « Datadial Blog
0208 6000 500

On the subject of Design Ideas

flat-google-plus

Matt

December 19th, 2014.

Trends That Will Dominate eCommerce in 2015

Due to the increased use of technology, particularly mobile devices, such as smartphones, eCommerce is expanding and evolving at an exponential rate. eCommerce sites are having to adapt and evolve to meet the ever-changing needs of technology. From the emergence of responsiveness optimised web design to the increased use of video content, eCommerce has changed a great deal in the past decade. These changes are set to continue in 2015. Next, year here’s what trends we expect to dominate eCommerce in the coming year.

Mobile Payments will be in Demand

People are using their phones for everything from sending text messages, to making purchases online, and often, they don’t want to use a card, because they worry about security, and because it’s inconvenient to enter card details. Mobile payment systems make paying from your phone a simple process, and no card details are necessary.

13618923175698510597464_9bcd47278a_bPayments made using mobile phone payment systems are increasing. By 2017, it is predicated that mobile payments will account for 3% of the international eCommerce market. This means that websites that allow consumers to pay using a mobile payment system, like Zong, will have an edge over their competition. In 2015, mobile payment systems will likely become much more prevalent among eCommerce websites. Mobile payments systems will likely become more refined and easier to use in the coming year too.

Quality Content will be even more Important

According to statistics, content marketing methods are 62% less expensive than traditional marketing methods are. While content marketing is much less expensive, in gets three times as many leads as traditional marketing does. In 2015, creating high quality content will be even more important for eCommerce websites. Nowadays, consumers are exposed to more advertising than ever. From television adverts to pay per click adverts on Google, consumers see advertising everywhere. This means that consumers tend to tune out advertisements and other things that they don’t perceive to be useful, valuable or relevant to them. This is why content marketing is one of the most effective methods for engaging customers, establishing trust and building a loyal brand following.

Content marketing methods, like social media, articles, blog posts, newsletters, and videos are more effective than television advertisements, and other traditional marketing methods, according to marketing trends. In 2015, if eCommerce websites want to compete in the market, they need to produce valuable, relevant, and informative content that customers will find useful.

Mobile Optimisation will be Essential

According to statistics, 15% of physical goods purchases were made from a mobile device and 32% of all online purchases are made from a mobile device. Optimizing your website, advertisements, and emails for mobile devices will become even more important by 2015. Next year, eCommerce sites will need to make their stores mobile responsive. Stores need to be convenient and accessible for mobile users. If an eCommerce store isn’t mobile responsive, it will lose out on a large percent of the market, and it will struggle to compete with competitors.

Social Media Marketing will become more Diverse

Social Media Marketing will become even more important in 2015. As mentioned earlier, outbound marketing methods, like television adverts, are losing their effectiveness, whereas content marketing is maintaining its effectiveness. Social media is an important part of the content marketing process. Next year, however, it won’t just be Facebook or Twitter that the eCommerce sites will be utilizing. More well-rounded social media platforms, and image-based sites, like Pinterest, will also be utilised more predominantly. Ultimately, in 2015, eCommerce sites will have to diversify their social media marketing efforts to suit their audiences.

Flat-Design will Dominate

Flat-design for websites will dominate in 2015. It’s already becoming increasingly prevalent, with large corporations like Google and Microsoft implementing it. A flat web design is clean, features neat lines and crisp edges, and utilizes flat, two dimensional graphics. Unlike other web design trends, which feature, shadows, gradients, garish graphics and other bold design elements, flat-design is minimalist, and uses a less is more approach. A famous example of a flat design user interface is the Microsoft Windows 8 interface.  Flat-design is becoming popular because it looks clean and neat to the user, it’s easy to read and navigate and this type of design is easy to make responsive.

flat-google-plus

Retargeting Ads will become more Prevalent

Retargeting ads are incredibly effective, and will likely become more prevalent in 2015. According to statistics, retargeting can increase your ad response by up to 400% and three out of five consumers say that they notice adverts for products they have already viewed. Using browser cookies, an eCommerce site can track the sites, products and pages that their customers visit. After these customers have left the site, and are viewing other websites, the items they viewed will be advertised.

Fashion retailer New Look is a prime example of a large company that utilises retargeting ads. For example, if you view a pair of shoes on New Look, when you leave the site to look at a news website, for example, you will see adverts for the shoes and anything else you may have viewed the New Look site. Statistics have shown that just 2% of first visits to a site result in a sale. Ad retargeting can significantly increase your conversion rate.

sofa

Matt

October 8th, 2014.

Great Content Used on eCommerce Product Pages

Creating a high quality product page requires a combination of many different elements. From the content to the layout, a good product page must combine functionality, optimisation and high quality copy.

Presenting your product pages in a way that is useful for both search engines and customers is incredibly important. Many different elements are involved in creating a website that prompts customer action and increases conversion rates.

Cross-Selling

newlookCross selling is a technique that involves suggesting or recommending products that are similar to the one that the customer is already viewing. For example, when a customer on a furniture website is looking at a sofa, the website may recommend an ottoman, by placing a link to that product somewhere on the same page.

Statistics show that cross-selling increases conversion rates by 3%. It also improves the overall ease-of-use of your site, increases the average value of each order, and provides more visibility to your website’s overall range of products.

Example: New Look

Click on any product on fashion retailer New Look’s website and you’ll not only be presented with great high quality imagery for that product, but also other complimentary items. New Look gets cross-selling right in their “You May Like” sidebar. The complimentary products are prominent, but small enough for the main product to still be the primary focus.

Effective Copy

Effective content is, arguably, one of the most important aspects of creating a high quality eCommerce site. In fact, 60% of consumers buy a product after they’ve read content about it.

panGood copy cannot only increase your conversion rate, but it can also help your site’s search engine ranking. If you want to increase conversion rates, you must have an engaging product description written for every product on your site.

It should not only include the dimensions and specifications of a product, but it should also tell the reader why they should make a purchase. It should let them know what makes this product unique.

Example: William Sonoma Steel Grill Fry Pan

When it comes to product descriptions, William Sonoma gets it right. The product description for their Steel Grill Fry Pan combines all the elements of a good product description. It uses adjectives carefully, and cleverly, and provides the reader with information about the product in an interesting and engaging way.

Subtle Use of Keywords

Search engine optimisation is as important as ever for online businesses. B2B statistics show that SEO leads have a close rate of 14.6%, while traditional leads, such as print advertising, only have a close rate of 1.7%

johnlewisImplementing effective SEO on-page elements can drive traffic to your website, and place it at the top of the search engine results. Search engine rankings are important for your site. According to statistics, 75% of consumers never scroll past the first page of search engine results. If you can get your site higher up in the search engine results, using SEO, it can have a massive effect on your conversion rates.

Example: John Lewis

Using both generic and brand phrases such as Adidas and football trainers, as well as longer tail descriptive keywords like black, white and mens in a way that reads naturally, and actually adds value to the copy and covers longer tail search phrases, John Lewis is a prime example of how SEO can be used effectively. There is also a good amount of descriptive text on the product page that will help the product rank for a wider range of long-tail phrases.

Customer Reviews

bootsProduct copy is one of the most important aspects of a good eCommerce website, but potential customers often want the opinions of “real” people. Allowing customers to leave reviews on your site can increase your conversion rate. Statistics show that 70% of consumers check with reviews before making a purchase.

Example: Boots

Pharmacy, and cosmetic company, Boots allow their customers to leave reviews on products. You can even sort products by customer rating, using the “Top Rated” search criteria.

High Quality Imagery

sofaPhotographs are a huge selling point for eCommerce sites. High quality imagery makes the shopping experience for your customers better overall. It gives the customer more information about the product, which words simply can’t convey.

To increase your conversion rate, offer controllable 360 degree views, photos with products on their own and in use, close-ups and views from multiple angles and perspectives. It’s also ideal to use images that are on the larger scale, rather than small images, as these can increase conversion rates by 9%, according to statistics.

Example: Sofa.com

Sofa.com is a fantastic example of how high quality imagery can be used to enhance customer experience. Large, high quality photos, and 360 degree product views, make the viewing experience a delight for the consumer.

Utilise Extras Like Video

Video offers a number of benefits. It increases overall user experience, and provides a fresh insight into the product. Most, importantly, however, videos can increase your conversion rate. Statistics show that consumers that watch a video about a product are 64% more likely to make a purchase.

Clear CTA

While cross-selling, email capture forms, copy, high quality imagery, and videos are all important for increasing your conversion rates, you don’t want to overcrowd your product pages. You want the focus of each page to be on the product, and on purchasing the said product. So make sure that you have a clear call to action on your site.

Responsive Optimized Web Design

Nowadays, consumers not only shop for goods on a PC, but they also use laptops, smartphones, and tablets. Providing your consumers with a high quality experience on your sites, across multiple devices can improve conversion rates and ROI.

A consumer shopping from their phone doesn’t want to have to scroll across the page. A responsive web design makes a website viewable from multiple devices, without the consumer having to resize the page or scroll across.

Example: Cotswold Outdoor

Whether you are shopping from your laptop, or your phone, the Cotswold Outdoor looks great. A fantastic example of a responsive optimized site, you can view this website on any device, without having to scroll, scale or zoom.

pjoene

Joe Joe

June 25th, 2013.

The 3 Options for Making Your Website Mobile and a 4th.

All of the briefs we’ve received this year have included a request for a ‘mobile version’ of the proposed new site.

But what does this mean? And do I hear the creak of an overloaded bandwagon?

Just as 2011-12 was the year of the Social Strategy [with no specification as to what that actually means], 2013 is fast becoming the year of the Mobile Site. 

Yes, it’s true that mobile use is increasing:

chart

Source Monetate E-Commerce Quarterly.

But how should you respond?

People could be accessing your website from any number of devices (such as phones (of all shapes and sizes), tablets (of all shapes and sizes) and even smart TVs (of all shapes and sizes). So, as a website owner, you shouldn’t be asking whether you should be considering mobile options, you should be asking which mobile options to consider – or shock-horror, opting to do nothing.

So  there are 4 main options available to you. Each has its pros and cons, so let’s get the run-down:

 

#1 Responsive Web Design

What is it?

In a nutshell, this is designing your site so that its layout responds to the device on which it is being displayed..

Advantages

–          Streamlined: The site is hosted on the same domain and uses the same URL so there are no SEO issues or redirecting issues.

–          Consistent with Desktop Content: The same content is just presented in a different layout.

–          Low Maintenance Cost: Although initial build costs may be slightly higher, the cost of maintenance and updating should be lower (as you are only maintaining one site).

Disadvantages

–          Slower Loading Times – If you are adapting an old site to a responsive site you may find that it is not fully optimised for mobile and is slow to load. However, if you are building a new site and taking a ‘Mobile First’ approach, this shouldn’t be a problem. But 3G and 4G coverage remains sporadic and unstable – so some content may take time to download.

–          General Usability – Mobile users will generally have a goal in mind when accessing a website. Whether it’s buying, reading or checking-in, they may not want to go through the same process as a desktop user. They may expect a stripped down version of the site similar to an App.

–          Lack of Mobile Features You won’t be able to get the same level of integration from a responsive site – features such as camera, photos or calendars.

–          Lack of Zoom - if you are used to pinching and zooming into websites on mobile in order to be able to read the tiny text then you will not be able to on a responsive website.

Whether or not to go responsive divides opinion. We’ve been experimenting on our own site with responsive design and generally prefer the regular layout, when viewing on an Iphone.  But all sites and companies are different and user needs should be a chief consideration.

 

#2 Dedicated Mobile Site

What is it?

Dedicated mobile sites are purpose built versions of the original website which are hosted at a new domain address (usually by adding ‘m’ before or after the original address: m.tesco.com or www.argos.co.uk/m/.

The web server normally recognises which device is being used and serves (delivers) the appropriate site to display.

Advantages

–          Different Content – A site purpose-built for mobile will usually have features which can load more quickly on mobile platforms, and you can dispense with some of the superfluous elements found on the desktop version.

–          Speedy Development – Compared with alternatives, a mobile site can be built relatively easily. This is less labour-intensive and subsequently less costly than other mobile options.

–          Mobile-Focussed – Development for the mobile platform means that navigation and usability are friendlier for mobile users.

Disadvantages

–          Slower Service – Redirection from main sites to mobile sites takes time. It may only be seconds, but it still damages the overall user experience.

–          Double Maintenance – Essentially two sites need to be managed; adding new functionality would need to be done twice.

–          SEO Issues – Since the content (and therefore the traffic) is split across two URLs, there’s the chance that your overall SEO will suffer. However, there are ways around this which I’ll outline later in this article.

We built a mobile shop-page for an automotive client. The desktop site’s main focus is selling car parts, so we stripped it down to the essentials to make it easy for mobile users.


 #3 Mobile Apps

What are they?

Apps are programs that are saved to the device. They’re relatively small (compared with full websites) and they tend to serve one function (reading articles, shopping, checking-in). They can be a useful way to allow mobile users to access one of your site’s main utilities, or to promote your brand (with a game or similar App).

Advantages:

–          Completely Mobile Friendly - Apps have the distinction of being native to the device, so they can access and utilize any of the phone’s capabilities (Camera, Calendar, Maps etc).

–          Offline Options – While some Apps require the internet to function fully (social platforms), many others can operate offline, or cache data when an internet connection is available ready for when one isn’t.

–          Quicker Loading Times – Since the App is self-contained, loading times should be quicker. Of course this depends on (and is limited by) the device’s memory and processor power.

–          Push Notifications - Apps have the ability to update you with the things you need to know. Such as when you receive a new friend request on Facebook, or when you’re near a public toilet.

Disadvantages:

–          No Cross-Functionality – Apps are made for specific platforms. iOS Apps will work on iphone or ipad, but will not be usable by Windows devices – or any non-Apple devices for that matter. This means Apps must be developed for each platform, which is expensive.

–          Updates – Apps need to be constantly updated and tweaked. This is in terms of both user-feedback and changes to the device. This can be time-consuming and costly.

–          Downloading – Apps have to be downloaded for use. Success in the App world may require considerable marketing and promotion.

We’ve applied appropriate aptitude to developing an App for a company that focusses on standardised testing. The App allows mobile users to practice the tests wherever they are.

The 4th Option

So those are your three options regarding adapting to mobile.  There is of course a fourth option and that is that of doing nothing.  Most website operate perfectly satisfactorily on mobile and indeed users who know your site will welcome the fact they do not need to relearn where everything is on the page and the new navigation options.  This is a strong argument for keeping the status-quo which is not receiving enough credence now that the dash for “mobile first” has been triggered in marketing departments.

So in conclusion beware of the bandwagon, think about the implications before you jump.  If someone says “Mobile first” to you ask them what they actually mean and what they want to achieve.

If you would like any more information, please get in touch.

And as a special thank you for reading this far, I’ll now present a guide on how to optimise mobile sites for SEO in the form of a Shakespearean sonnet:

You’ve built two sites; one desktop, one mobile,

But now you’re concerned that your traffic’s split,

And now you’ve come to visit Datadial,

To fix your SEO a little bit.

There are two points that must be mentioned here,

Two tags to put in your HTML,

(On each version of the page – let’s be clear)

They are two tags, and they both start with ‘Rel’.

Rel=”alternate” on the desktop

Make sure it points to the mobile and all…

And pointing back, just so it doesn’t flop

On mobile: Rel=”canonical”

But other things cannot be avoided.

Like linking to mobile, just like I did:

 

So basically add some links in the HTML of each page that look like this:

Desktop: <link rel=”alternate” href=”http://m.example.com/page-example”>

Mobile: <link rel=”canonical” href=http://example.com/page-example>

 

Missed boat

Martina Martina

July 13th, 2012.

When missing the boat leads to being forgotten…

Missed boat
Image Source

Online trading is a fast paced world. Whether it be in stock and shares, grants for start-ups or otherwise, there aren’t many examples to date that show the benefits of waiting around.

Let’s look at some examples of once leading technologies, that have recently or notably had to resort to publicising selling shares, or changing hands to stay (or become) relevant; which of these companies/ventures/subsidiaries do you still associate with “cool“?:


MySpace

MySpace

Known originally for: Pioneering the discovery of new music online…

Now thought of as
: A dated money leaking endeavour that has passed hands more than a hot potato.

AOL

AOL

Known originally for: The only key to dial up internet…

Now thought of as
: American acronym that we see online from time to time, mostly trying to be spammed-in as the default homepage for your browser when downloading freeware.

Yahoo!

Yahoo!

Known originally for: Groundbreaking search engine and most famous Google competitor…

Now thought of as
: Fairly annoyingly designed interface that we’re surprised is still around.

Digg

Digg

Known originally for: Quirky news discovery site…

Now thought of as: Recently sold to a company for $500, 000 (much less that it was once worth ($175, 000, 000)

Facebook

Facebook

Known originally for: The new zeitgeist and awesome brainchild of cool-techie Mark Zuckerburg…

Now thought of as: Slightly spammy/stalky connect-service offering the chance to re-establish relasionships with distant relatives & old “friends

Instagram

Instagram

Known originally for: Newbie picture service that made Twitter pics look really cool…

Now thought of as: Lovely money-maker for start-up entrapeneur Kevin Systrom (he knew when to sell)

Hotmail

Hotmail

Known originally for: Having a great customizable email service that tied closely to MSN messeger and then windows live…

Now thought of as: Uber-spammy email service that looks outdated & unsure of its design.

RIM/Blackberry

Blackberry

Known originally for: Creating the Blackberry; a respectable device for business-people…

Now thought of as
: Annoying pingy device taken over by tweens and teeny-boppers who got excited about its messaging service, which is essentially not far from a text message.

Bing

Bing

Known originally for: Competing with the big boys and girls (basically Google) and doing that respectably…

Now thought of as
: A failed Microsoft endeavour, that was close – but no cigar…

Last.FM

Lastfm

Known originally for: Clever algorithms that tailored music choices to the listener based on entering a few personalised details…

Now thought of as: Recently hacked music service that was long out-thought by competitors (Pandora, Spotify and iTunes’ “Ping“)

Kodak

Kodak

Known originally for: Pioneering photo technology as we knew it and introducing a sense of class to both the disposable and polaroid camera…

Now thought of as: A once amazing company that failed to follow technology into the world of digital and subsequently faced insolvency.


Don’t get left behind…

cookie-law

Rob

April 27th, 2012.

Cookie Law implementation ideas

 

I am yet to find many examples of ways in which companies have implemented their Cookie alerts on their website.

This is probably not surprising as it’s yet to come in but the day is drawing near.

Here are some examples.  I will add more as I find them.  Please feel free to suggest your own.

 

Virgin.com – Wow you’ve got to be keen to bother reading all that.  And still the buttons are confusing.

What about “Yes please, use cookies.”  “No thanks I don’t want cookies”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

BT.com

Quite sneaky here.  BT have popped the box at the bottom right hand side of the page.  Be quick though as it disappears after 20 seconds.  Also you need to have a lot of time on your hands to decide which cookies to accept and which not to.

 

Zebedee Creations

These guys have had their policy in place for over a year which is quite surprising.  It reminds me of the moment in Blackadder II where on a voyage of discovery with Captain Rum the water runs out aboard ship and they have to turn to drinking their own urine only to find out that Baldrick has been drinking his own for a year already – he prefers the taste!

Nice simple solution though.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

www.eu-cookie-law.com

Simple solution, which disappears after about 10 seconds.  Presumably they think that not actively agreeing is presumed acceptance? Is this legal?

Jan

April 21st, 2011.

Establishing online business credibility with ‘About Us’ page

Having a good ‘About Us’ page allows you to show off who you are, what you do and it allows to make people more comfortable doing a business with your company. Unfortunately, this page is being sometimes overlooked, as the perception is that it’s not that important.

However, according to a Stanford Web Credibility Research, they derived 10 guidelines/factors which effects websites credibility, 3 of them relating to your ‘about us’ page (based on a 3 year, 5500 person study):

  • Show that there is a real organization behind your site
  • Highlight the expertise in your organization
  • Show that honest and trustworthy people stand behind your site

Naturally, testing a different version of your ‘About us’ page should be on your to-do test list. Unfortunately, in most cases ‘About us’ pages get at most several hundred visitors per month, which is not enough to come with statistically valid results within your 6 weeks test period. In this case, here is the list of 3 must have things an ‘About us’ page for small and medium businesses should definitely have if you want to get more sales:

3 Must Haves

  1. Pictures of your office and your team
  2. A passionate story behind your company showing your values
  3. Peoples bio (credentials, certificates, training)

Here is the list of some ‘About us’ pages for your inspiration.

Creative examples:

www.dropbox.com

www.hunch.com

www.technologywithpassion.com (nice animation)

www.tribal.nl (nice animation)

www.6wunderkinder.com

 

Business (ecommerce + service + corporate) examples:

www.gupuds.com

www.crutchfield.com

www.brooksgroup.com

www.fridaysmove.com

www.bigcommerce.com

 

Rob

February 17th, 2011.

Time delay video of the Taylor Herring website build

We’re delighted to announce the launch of a new site for Taylor Herring PR consultancy.

We rebranded the company with a new logo and new identity.  We redesigned the website and developed it using Datadial’s content management system

If you have never had the pleasure of watching how a website is put together then now’s your chance.  Watch the video below.

Matt

October 28th, 2010.

Optimising Social Media Landing Pages

Maximising the benefit of social and viral traffic is frequently a concept that is misunderstood by site owners looking at huge traffic spikes in their analytics accounts.

Great, 50k visits, how many sales?

None? What a waste of time!

Many years ago when I used to work in sales a key to a successful appointment was sticking to the habit of asking yourself,

What is the minimum I’m going to expect from this call or meeting?

For many salespeople its the sale, which in most cases just isn’t realistic. The minimum an intelligent salesperson expects from a contact is an invite to get in-touch again. Its building on this relationship that creates long-lasting rewarding partnerships.

I have always approached social media with the same kind of mindset. For the vast majority of people that land on your pages, particularly on viral and linkbait type content its the first time that they have had any contact with your brand. – What is the minimum you’ll expect? A sale, or an invite to get in contact again?

I have mocked-up below a before and after of a typical blog landing page.

Before (click for a larger version)

blog landing page

After (click for a larger version)

The key changes to the page include,

  • Adding easily visible subscribe options to a prominent area of the page, including the ability to subscribe by RSS or email.
  • Prominent social media voting buttons at both the top and bottom of a post. Many social media users are members of multiple sites. Many may arrive from Twitter for example and then wish to Digg a story. Make it as easy as possible for them to do this.
  • Twitter followers and Facebook fan pages can be as effective as email newsletter sign ups – make the most out of these if you use them and encourage people to sign up.
  • Experiment with adding related posts to the bottom of your articles, this can help with how ‘sticky’ your site is.
  • Encourage people to comment on your posts. Moderate spam and try to reply to people asking for help or advice.

Remember, its not always about converting a visitor into a sale, converting them into a user, reader, commenter, voter, advocate or sharer can be far more effective in the long-run.

Kolen

May 19th, 2010.

Best & Worst of FOWD Day 2


FOWD logo
Following on from my post after Day One

The Best

John Hicks giving his talk

John Hicks giving his talk (image from m-king)

My favourite today definitely has to be Aral Balkan‘s session. He really knows how to present and make learning fun! It was very inspiring and encouraging on how to make your designs that little bit better by adding an emotional element to your apps/sites. He got the longest applause I have heard at a conference!

But then the loveliest thing was when he acknowledged my tweet of thanks on twitter and his blog. What an awesome guy!

The Worst

umm…
ermmm….
ahhh…

Nope… I really can’t think of anything for The Worst… did I miss something?

Honestly, the whole thing was amazing. I’m really shattered now, but it’s a good tired because I’m also really excited to start doing so many of the things that were presented.

If you couldn’t make it to FOWD this year, I would definitely recommend buying the video pass. It would be really worth it. I’m looking forward to the videos myself because I wanted to go to both tracks so many times today… shame we can’t clone ourselves when the need arises!

In summary…

(I’ll add links to slideshows and downloads as I get them)

  1. Progressive CSS3 Design (Molly Holzschlag)

    Molly presented the plans and workings of the W3C and asked for any web designers who are keen to be voices to the W3C. What I found most exciting was her mention of IE9’s capabilities – it sounds like my optimism about CSS3 in IE9 may be closer to reality than I first hoped!

  2. What will Web Design Look Like in Two Years? (Simon Collison)

    According to Colly it’s going to evolve quite a bit, growing up and getting comfortable with the medium of being online. For example, no longer will we mimic tables with paper and coffee stains; but instead embrace the pixel, the grid and typography. Of course this does require a more mature understanding of grid systems and design fundamentals, but this will make the professionally designed sites stand out from the sea of online content.
    View Slides & Examples

  3. The Art of Emotional Design: A story of pleasure, joy, and delight. (Aral Balkan)

    As I mentioned above, the whole presentation was a pleasure, joy and delight. Aral showed us examaples of how he has made his apps come to life by adding in little emotional attachments, like his famous bird turning red and singing in Feathers.
    Read Keir Whitaker’s write up on Think Vitamin

  4. How to Build a HTML5 Website – Live Demo (Bruce Lawson)

    Up until today I haven’t dabbled too much into HTML5, but Bruce did a live demo which helped to demystify it all. HTML5 is definitely going to be mainstream, and soon. The capabilities of it are awesome, and it is so easy to still support older systems that don’t understand it. In particular I’m looking forward to the day where we can use the <video> tag without having to provide a Flash alternative for IE.
    http://www.brucelawson.co.uk/
    Another good introduction from Smashing Magazine

  5. Rethink Your Job (and Earn More Money). (Brett Welch)

    Everyone knows Web stuff is becoming increasingly commodised, but where the value remains is in expert knowledge, advice and helping your client’s goals. Brett also emphasised starting small, growing in iterations, and the importance of having a marketing plan in place following the site’s launch. We all really admired him for not actually plugging his product in the talk.

  6. Icon Design (Jon Hicks)

    I don’t do icon design very often, so it was really valuable to hear these tips and guides for when I do need to. It’s also very exciting to hear about future abilities like using SVG for icons.
    http://www.hicksdesign.co.uk/

  7. Blending Usability Testing with Interface Design, Prototyping and Rapid Iteration (Dan Rubin)

    I always want to do more and more usability testing, and Dan’s excellent talk really got me excited about it even more. He talked us through a case study of how they had assessed a current site, found the good things and bad things about it, and came up with some suggested changes. He then detailed their technique for testing the changes and how they were able to accurately test them while keeping it in a format that was easy to change and adapt as they went (basically using image maps with an exported Photoshop comp). Definitely a great technique for getting the most value from a test.

Kolen

May 18th, 2010.

Best & Worst of FOWD London Day 1

FOWD logoThe Future of Web Design conference is amazing this year – here’s a quick update after Day One.

The Best

jQuery for Designers session

jQuery for Designers session

The format of this year’s conference is tons better than last year. The atmosphere of the Brewery is great, and the food (which is also outstanding) at the break times gives people a chance to talk to each other and network. It has been much easier this year to meet people and talk to other designers.

It’s really hard to choose a favourite speaker because they’re all so great! I think jQuery for Designers is probably going to have the most impact on my day to day work because it has encouraged me to take a new step into jQuery.

The design clinic time was great, and it was a wonderful opportunity to talk to designers you really respect. I got some great feedback from Mike Kus, who has to be one of my all time favourite web designers because of his original work.

The Worst

Definitely had to be font.com’s sponsor slot. Not only were they the ugliest slides of the day, the introduction was dated (we know about using @font-face already) and then followed by a whole sales pitch on why we should all buy their service. It was very amusing to see the tweets coming in during the talk!

Don’t get me wrong, their service is great and no doubt I’ll be using it soon, but the talk and presentation definitely  gets labelled the worst, after everything else was so amazing.

More to come tomorrow, but in summary…

(I’ll add links to slideshows and downloads as I get them)

  1. Play. Destroy. Create. from Brendan Dawes

    I loved his reference to maths and nature, and seeing how he had turned that into something new. It’s about observing things like the trend of technical stuff to non techy people. Some of the things he was showing was simply play to explore and provoke reactions. He encouraged us to play, have passion and love what we do!

  2. How to Get Started with CSS3 from Dan Cederholm

    After doing a lot of CSS3 work already, I wasn’t expecting to get much from this session, but was very pleasantly surprised. I now have a list of things I want to try, tools to use, and new ideas generated from this session. Definitely ideal for people new to CSS3, but still lots of great stuff in there for those of us who have already been using it.

  3. jQuery for Designers: All You Need to Code (Remy Sharp)

    Very inspiring stuff, and I’m now eager to take the plunge into jQuery!
    Download slideshow

    http://jqueryfordesigners.com

  4. Accessibility in Web Design Robin Christopherson

    I’ve seen Robin speak a few times, and each time he has something new and very informative. This time he encouraged mobile versions of websites, as the format of them is also much more accessible. He also encouraged the use of Text Captcha because it’s accessible, free and offers a comprehensive API. You Tube are now also providing automatic captioning on their videos!

  5. Learning to Love Humans: Emotional Interface Design (Aarron Walter)

    Making things usable is not enough – we should also make them enjoyable. Don’t compromise on the base needs for t»he user, but look for ways you can add that extra layer of emotive enjoyment – like the Mailchimp quotes!

  6. UX Masterclass with Web Standardistas Web Standardistas

    This flowed on really well from the Emotional Interface Design and looked at the secret for making something that is usable really great. The secret is YOU!

  7. Smart Tips for Wireframing Brad Haynes

    Wireframes help communication, focus and workflow. This session was a good practical reminder of why we should be using them and looked at which techniques to use where, including some good tools.

Also check out summary of Day 2 »

Kolen

December 10th, 2009.

Inspiration: Typography

A beautiful type print by Douglas Wilson

One of Douglas Wilson's beautiful prints

I’m about half way through The Elements of Typographic Style and thoroughly enjoying it.  I really wish there was a way you could read a book and ride a bicycle so I could get more reading time in while commuting, but I’ll just have to take my time reading it instead!

Some thoughts so far…

“With type as with philosophy, music and food, it is better to have a little of the best than to be swamped with the derivative, the careless, the routine.” (Page 117)

I think this is true of all design.  In a time where you can get free website templates anywhere or make a website yourself so easily, the designs that have a lot of thought, care and expertise behind them really stand out from the crowd.

Shaping the page

Example of a page layout based on the Golden Section

Example of a page layout based on the Golden Section

Although the book focuses on print, the principles found in the chapter Shaping the Page can be applied to web design also.  It is a great reminder to me of design school, especially the theories of the Golden Section and Fibonacci series.  Using ratios based around π are useful for arriving at a design that is easy on the eye and feels comfortable to use.

Visiting Switzerland

Coffee cup in Zürich

Coffee cup in Zürich

What you read opens your eyes to things around you; I have been noticing nicely designed type everywhere! Recently we spent a weekend in Zürich – I love it how clean, thoughtful design surrounds you in that beautiful country.

Kolen

January 14th, 2009.

Illustration in website design

Sometimes photos just don’t cut it – especially stock photos that are also being used on many other sites. Illustrations using traditional (using pen, ink, watercolour, pencil) and vector (a type of computer graphics) methods are starting to fill some of those holes on websites around the world.  One major benefit of illustration is that it can look exactly how you want it to look. The illustration can be of many different styles, according to what look you’re after, and there are many examples around the internet.

3 finished illustrations on the live website
One of the sites that we’ve designed recently, Conference Genie, uses a cartoon style vector illustration to capture their three service in a unique way.  I thought I would share with you the process that I went through to create these graphics.

Pencil sketch of the illustration
Each character starts off with pencil sketches, which helps me and the client to get the same feel for the illustration.  This part of the process should be a time of a lot of discussion and collaboration with the client.

Tracing the sketch in Illustrator
The sketch is then scanned into the computer and opened in Illustrator.  Here I outline the sketch and start building up some shapes.

Filling the illustration with colour
The shapes are then filled with colours, and tweaked according to what is needed.

Finishing the illustration in Photoshop
Finishing is then applied to the illustration in Photoshop and it is incorporated into the website design for a unique look and feel.

« Older Posts

Recent Posts »

Our work »

What we do »

Who we work with »

Got Questions? Lets Talk »