a look at design for the web & all it entails

· view menu ·

brand design

image & video: courtesy of Oregon Live

The famous and successful Nike swish is a wonderful example of how effective simplicity can be.
Read more about this story:
Creator of Nike’s famed Swoosh remembers its conception 40 years later

NOTE: please excuse the old-fashioned embed here via Flash – couldn’t find this video in a better format.

branding & design

Before you finalise your icon interface – let’s talk about the role of design in successful branding. Hopefully this will help you to work on developing your own brand :)

↓ download slides as PDF

Carrying on work on your current project ~ create a suitable brand for your page. Consider the icons’ visual style as well as the wording of your content.
Please do ask me for help if you are stuck with anything ~ happy to help :)

guidelines: brand / style

useful links & reading

Old Spice – viral video

This is a personal favourite of mine – had to include it here as an example of an effective viral campaign.

➣ Old Spice ~ videos

icon interface – branding

mini project – part #2

Just to remind you that this is of course not the correct order here – your branding should come first, before any other design is even considered. Hopefully you remembered that you will need to brand your icons. Maybe you have already come half way with creating consistent icons for your interface ~ so that you can now finalise your design to fit your new brand.

Deadline for this project is next week with your branded icon interface complete, extended to show suitable pages. Hope you’ll have fun creating your own mini brand and finding a suitable visual style for the icons as well as the page design.

to do list

  1. review your icons and content to find a suitable brand approach
  2. sketch out your ideas for text and visuals in your sketchbook
  3. edit your icons to fit your newly found brand
  4. finalise the design of your webpage/s

working files

Just in case, the link to the templates files again :)
download source files – contains:

  1. “prep” folder: icon size templates and background image
  2. “site” folder: basic webpage showing with of 3 large links (HTML/CSS)

Please feel free to comment below if you have any questions :)


  1. Sonata

    Hi Prisca,

    Here are my icons:

    All the files are on the way ;)

  2. James

    http://greloja.users39.interdns.co.uk/applied-art-for-the-web/icons-branding/ is mine!

    Abandoned the motorcycle idea and went for a cycling one. The background is the d’Huez mountain, famous for being one of the toughest climbs in Tour de France.

  3. Phil

    Hi Prisca, I have uploaded my icons at http://grebaph.users39.interdns.co.uk/icons

  4. Catia Gomes

    Hello Prisca,

    here is my link for the icon branding assignment: http://grelaca.users39.interdns.co.uk/coursework-projects/applied-art/iconbranding/index.html

    See you tommorrow,

  5. Kate

    Hi Prisca,

    Here’s a link to my updated svg icon/branding page – http://grelawtk.users37.interdns.co.uk/svg-icons-and-branding/

    Thanks and see you tomorrow!

  6. Duncan Struthers

    Hi Prisca,

    Here is the link to my branding mini project site:

    See you Wednesday,

  7. Kate

    Sorry, people!

    The responsive style link wasn’t for a ‘maker’ – it was just an example of a single HTML page style prototype.

    Here’s a link instead to the github code but not sure it gives any more insights – https://github.com/sparkbox/dr-style-prototype

  8. Kate

    Here’s the responsive style tile maker for prototyping that I was trying to remember today – http://sparkbox.github.io/style-prototype/

  9. Barbara

    For more videos like this I recommend searching for ‘apeldoorn’ on Youtube – a Dutch insurance company as far as I understood, but the ads are great :)

  10. Tony