Last week we launched the new website for Serge Films, a film production company based in London. They connect brands to their audiences through a blend of strategy, storytelling and beautiful high definition film.

The aim was to make the work the central focus for the user and encourage them to explore the site and other pieces of work. To achieve this we kept the design relatively minimal and the colour palette neutral, leaving the colour and visuals of the work to grab the attention of the user.

Check out the site at www.sergefilms.co.uk

This is a bit of a beginners article really, but sometimes the basics are forgotten, and the impact is major. Visual feedback is extremely important in User Interface Design. It tells the user what’s happening, or what’s going to happen next, and without it the user is left guessing or frustrated. In reality buttons, controls and objects react to our interaction, so this is how people expect things to work. It’s basic stuff, but it matters much more in user interfaces as there aren’t any tangible controls, it should all designed to replicate/represent reality. I’m going to list a few of the common elements of interface design and why they really need to give the user feedback.

Buttons & Links ¶

Buttons & links are probably the most common elements which need to give feedback, and can be easily forgotten when designing in a program like Photoshop. There are 2 key states to a link/button: Hover and Active. When you hover the curosor over the link you should be changing the appearance to make this obvious to the user. This works best if it’s superficial, like a colour change, oppose to indenting or movement. When the user clicks the link, it changes to the CSS :active state, which should communicate that the link has been clicked.

Navigation ¶

The navigation on an interface should not only incorporate all the above aspects, but also what page or sections the user is currently on. Whether it’s a different colour for text, or a sub-menu being viewable, the user should always know which page they’re on by viewing the main navigational menus. It’s also good practice to make the current page ‘un-clickable’ to further communicate that it’s the page your currently on, so there wouldn’t be anywhere to click to…

Forms ¶

When filling out a form, certain information is normally required, or required in a certain format (email for example). You should firstly be letting the user know which bits of information are required, and how they should be input-ed. Users won’t always read this information though, so it’s up to you to provide useful feedback and help after validation has failed. The best way I’ve found, is to highlight the form inputs which failed, opposed to a list at the top or bottom. This way the user knows immediately what they’ve done wrong, and how to correct it.

Content loading ¶

If your loading in content after the initial page load, you need to provide some sort of feedback that this is the case. Seeing a blank space where content should be communicates that the site is either broken or badly designed (or both). There are universally recognised graphics/animations which symbolise that something is going to happen at some point, nearly always associated with loading content. Even if the content only takes 2 seconds to appear, you should still display a loading indicator like the above. There are a few good resources for creating your own here and here.

Progress bars ¶

Similar to the above points, but more information should be communicated. Waiting for things to load, upload or download is normally pretty frustraiting, but is made worse by not giving an indication of progress. ¶

It shows the progress of the ‘load’ with the blue bar, which ‘information’ is being transferred. Importantly, make sure it’s accurate. The only thing worse than no indication of progress is one you can’t trust (changing of progress times, or the one progress bar serving the purpose of individual transfers as well as a whole one.

So to conclude... ¶

A lot of these points are very simple to implement, and don’t take much time, so there’s no excuse not to have hover states, or loading indicators. And at the end of the day, websites are interactive, so make sure your talking back to the user.

Last friday we launched a new site for the good people at Beadesaurus.co.uk. They have a couple shops in Birmingham and Marple, Stockport, as well as an online store, to sell a wide range of clothing, jewelry, accessories and loads more.

The brief was to overhaul the design of the site and rebuild it around the Satchmo Ecommerce framework. The site design has a weathered and ‘grungey’ appearance to appeal to the target demographic, but still remains clean, clear and a good usable browsing/shopping experience.

We used a range of CSS3 techniques in the site, such as a multiple background images in places and @fontface to use custom fonts throughout the site. It’s also great to see the people at Beadesaurus already making the site their own by adding some new slides to the ‘featured slider’ on the home page, which will keep the site looking fresh in the future.

Check out the site at www.beadesaurus.co.uk
(and maybe buy a little something for christmas!)

Arlene Adams is an illustrator based in Moseley, Birmingham, originally from Scotland. She recently had a break from her work to raise her new child, but when she was ready to kick start everything again, she came to Substrakt. The brief was simple. Replace her dated existing website and make her work and thoughts more accessible.

This project was interesting to work on, as it presented new challenges and involved trailing a few unique ideas. It ultimately ended up with us stripping back the design and build to the bare bones to keep it as simple and easy to use as possible. The original design, and much of what it looks like now was designed by Arlene herself, but aspects and extra elements had to be adapted to make it work for the web.

Check her work out at www.arleneadams.com

A new site we were involved in for the UK government called Govspark went live yesterday. Govspark takes the energy consumption figures from each individual Government Department and compares usage to monitor the Government's pledge to reduce its carbon footprint.

Nick Booth came to substrakt for a front end design refresh of the site which was currently in development. It was designed by us in under 4 hours and built by josh hart. The site's content and original concept were concieved and developed by Isabell Long

Some details had to be left out due to the tight development schedule, but here's a little something.

Check out the site here: http://govspark.org.uk/

2 days ago Typekit announced that Adobe was joining it's ever expanding roster of font foundries. For those unaware, Typekit is a way of getting more attractive fonts on your website, but in a more accessible, legal way. Fonts on the web have always been a hit and miss subject. You either go with images, cufon, sIFR etc (flash and javascript rendering) which have drawbacks, or go with the font's you know most people will have (Times New Roman, Arial etc).

In the last couple of years however services like Typekit have popped up, allowing webdesigners/developers to embed a vast range of fonts on a website, but remain fully selectable and legal. Most 'uncommon' fonts don't allow for embedding on websites, or just don't include the licensing terms for such things, so it's a bit of grey area. Typekit (and similar services) however deal directly with the type foundries, allowing you to use nicer fonts on the web for a subscription, which pays the foundries for the right to use them on the web. Everyone wins!

So what does Adobe bring to the table? Quite a few nice fonts actually. Some of my favourites of the bunch are Myriad Pro, Caflisch Script, Minion and Rosewood Fill, but many more. This also injects confidence in these type services if a heavyweight like Adobe is getting on-board. So hopefully eventually, any font should legally be available to use on the web (within reason). One question i've wondered though. How are some clients going to respond to paying a yearly subscription for fonts, when there are so many free ones available?

Here's a link to the Typekit press release.

Here at Substrakt we love a bit of emerging technology and CSS3 is especially close to our hearts just for the sheer possibilities it presents. At the moment it's just that 'little extra' for people with the latest and greatest, but it's potential, when widley supported, is epic.

We've all seen the numerous impressive 'icons made with CSS3' tech demos, stared in awe at the technical feat and then jumped into the code to see how bits are done. Some people's reactions to these kind of demos are somewhat overblown, saying their pointless and not practical. Very true, but that's not the point. They're meant to be inspirational. Showcasing what the technology can do. And to most designers & developers, this is pretty obvious...

But on to the post's title subject. I found this yesterday, and was blown away by the sheer creativity and ambitiousness. Simon from Simurai.com has done an awesome job re-creating a photography technique known as Tilt Shift using text, text-shadows and rotation. It could be used practically, but it's best to see it as a creative and inspiring technology demo for now.

Check out the post and demo.

We need things like this to keep us excited about a technology. Without these sorts of demos, the majorty would just see CSS3 as text and box shadows... Surely that's enough reason for the top of the webdesign curve to keep creating things like this and this?

I stumbled upon a neat little application this morning which tracks cursor movement and creates a full screen graphic of the data. It plots lines where your cursor moves and circles of different sizes depending on how long your cursor remains static. I left it running pretty much all day and this is what my mouse movement looked like:

The app itself can be found at http://iographica.com/ (Mac, PC & Linux) and I seriously recommend giving it a go!