The Blog - Archive for design

Optimisation Tactics

by adambutler Filed under: Knowledge,Optimisation

Optimisation is a core element in building any successful product regardless of whether its a website, an app or even a game. But optimisation isn’t just about keeping the file size down its about providing the most fitting possible solution for any given task.

When optimising we think about value, usability, readability, communication and personality as well as the more traditional foundations such as SEO and load times. Covering all these core concepts will ensure you have a delicious product.

So how do we do it?

Throughout each step of design, development and testing we think about these core principles based on our collective experience and through experimenting. Here is one such example…

For one of our top secret projects we have in development we have two large containers which you can navigate between, we found that having a drop shadow these containers caused a subtle but noticeable lag when animating in and out. As with any project there is always more than one technical way to active a task so we brainstormed potential fixes which would allow us to keep the design with a drop shadow.

We decided to trial our current method (A), animating css position values, against CSS Transitions (B). To stress test the demo each container was filled with 2312 child elements all individually coloured and with opacity. The parent containers have the same drop shadow as we intend to use in our project.

Method B out performed A quite significantly in each of the tests. Spending just a little bit of time on this problem helped ensure we had a buttery smooth animation. Although this is a very specific example this logic is used each of the optimisation tests that we run and is essential to making great products.

You can view this test here…. but remember it is a stress test so it may crash your browser.

The First Rusic Hack Day was amazing

by Mark P. Filed under: Community,Products

Yesterday was the first Rusic Hackday. It was awesome. Totally awesome. The skills that we saw blew our minds, with themes being created that we did even think were possible.

The £250 was split up between the designers as “Best use of Rusic”, “Best Design” and “Closest to complete”… Eveybody that attended voted, and by the end of the day there were a few friends of Rusic making it a little more interesting in the voting process (kindly sponsored IamKeir Inc.). Judging by the effort by all involved it wasn’t about the money though!

If you want to come to the next event please sign up at our Meetup page.

And the entries were:

In no particular order and with links to Twitter and the live application itself. It’s worth stressing that all of these applications were created from scratch in about four – five hours with Rusic. Some aren’t quite finished, but they’re not far off. Expect to see more of these themes…

@iamkeirRusicursive

Showing off the Websnappr'd entries to the competition

Showing off the Websnappr'd entries to the competition

A really interesting theme that didn’t quite get where it needed to :) Essentially you add a website and it pulls back the web page as an image and adds it into Rusic. Very cool and with a bit more work it could be part of an interesting theme for building on in the future. As Keir is a friend of Rusic he wasn’t allowed to to enter the competition. (Don’t ask about the name)

@daleanthony - Best Recipes

Lovely design and use of Masonry

Lovely design and use of Masonry

A really simple and beautifully designed theme built with Masonry. Add recipes and share them. Perfect for a cookery site. Dale is part of the Rusic team and built all of the deafult themes in Rusic, so doesn’t qualify for a prize.

@jamesGuestFull English Breakfast

I want that breakfast

I want that breakfast

Building on one of the default themes, James after having to re-install pretty much everything in his laptop, spent a few hours coming up with this. Submit Cafes, their breakfasts and their location to find the best fry up in the UK. Combine this with the iPhone SDK and this is one awesome idea, anywhere you go you can find the nearest decent cafe. Seriously ESSENTIAL. Probably the best commercial idea of the day.

@tholderMountain biking locations

Lovely Google map integration

Lovely Google map integration

A really nifty geo based app for plotting the best mountain bike trails. Good integration with google maps and another app crying out for the iPhone SDK. While Tom would’ve liked some cash he’s part of Rusic…

@adambu1988360k

A beautiful code snippet in Rusic

A beautiful code snippet in Rusic

Adam’s tag line of “Three hundred and sixty thousand pixels & 360kb to do something awesome with…” is pretty cool. Reminiscent of the demo scene popular “way back when”…

This is one of the themes that blew us away. Adam has managed to make a “code gallery”. Coders paste in their code snippet and then other people vote on it. Slick interface, great idea and slick implementation. Hard to believe this was created in an afternoon.

 @jegtnes and @mark_jsBlah Blah

Liking of Comments.

Liking of Comments.

These two guys, students at UWE performed a minor miracle. I’m still not sure how they did what they did… Essentially they found a way to add “like” states to comments. This is not a core feature of Rusic, it may be one day, but right now it isn’t. Somehow they got it to work. Awesome. Really.

@scottifydotcomFootoFan

Everybody was Kung Fu Fighting!

Everybody was Kung Fu Fighting!

I think this goes down as another really good commercial idea for an application, especially combined with the iPhone SDK. Essentially when you’re at the football you submit the match, and then photos and comments as you’re watching the game. I suspect this theme needs the most extra work as it needs some clever implemenation tricks to get it rocking… although Rusic that won’t take long.

@benjaminReidEye Bomb

The lovely action hover bar

The lovely action hover bar

A beautifully designed theme just for submitting pictures of inanimate objects with eyes on. :) Beautiful action menu appearing over the main image and a nice simple navigation. Worth mentioning the cool Google maps integration here.

A worthy mention goes to Roy that completely stripped and one of the default themes of CSS and javascript and rebuilt it semantically as HTML5. I can’t find your Twitter address or theme Roy. Where are you Roy?

And the winners were:

Best Design - Eye Bomb and 360k.

Best Idea - 360k

We didin’t do the “Nearest to complete” prize in try end as the guys that used the default themes were the  closest to completion which we thought wasn’t on in the end. ;) So instead:

Generally Cool - Footo and Blah Blah

Overall a really awesome day and a testmant to the talent in Bristol. Feed back on Rusic from the guys was really positive, we learnt a lot as well. Thank you so much to everybody that came. Roll on the next one.

Just in case you missed it at the top of this post if you want to come to the next event please sign up at our Meetup page.

Mrzyk and Mariceau video. Style is priceless (NSFW)

by Mark P. Filed under: Community

This saucy little video by Mrzyk and Mariceau is one of the simplest, mesmerising music videos I’ve seen in a long while. Low budget, very simple to look at, making an average tune (Sébastien Tellier – Look) fantastic.

Simple is great and style is priceless.

To quote one of the comments from Youtube:

I’m a woman, i just watched another woman’s butt for 4min, and i found it the most beautiful thing evar. félicitations monsieur Tellier, félicitations Mrzyk et Moriceau

Link goodness – August 25th

by Julia Filed under: Knowledge

Collect rewards with the new Topshop Campaign

Topshop has partnered with location-based mobile gaming app SCVNGR for their back to school campaign. A clever app designed to draw customers into the stores and have them engage more with the clothes.

Thoughtbot Playbook

The guys at @thoughtbot have taken their experience and studies and released playbook: a guide to building web and mobile apps.

How Marketers Can Get More From Infographics

Why have these colourful charts and illustrations become more popular? What makes them so valuable to businesses and brands?

Batman.js

Want to “build apps beautifully and quickly”? Shopify have this week announced the release of batman.js to the Javascript community.

The Launch Effect

Need a viral-ready WordPress theme for your launch? Try this.

Geckoboard

Geckoboard makes it quick and easy to create a really impressive dashboard like this in minutes!

A Primer on A/B Testing

Data is an invaluable tool for designers. Learn how to use A/B testing to easily measure user experience and the effect of different design, content and functionality.

Robot colours!

by Dale-Anthony Filed under: Company,Knowledge

While researching for our big re-brand project I decided to take a unique approach to finding new colour palettes: Robots!

Everyone has a favourite robot character (mine’s Wall•e) so I asked around to find out who the most popular bots from movies were and then took some swatches to make up the colour palettes, here are the results:

While some of these aren’t the greatest of palettes others work quite well, for example the colours from Eve, R2-D2 and Marvin all have colours that would contrast well together.

We probably won’t be using any of the palettes in our branding but it certainly sparked a good conversation which has given a few ideas as to what direction to go in next.

Just goes to show that inspiration can come from anywhere, even from your favourite artificial friend.