In this Photoshop tutorial, I am going to walk you through 5 different tips which I think define standard “Web 2.0” design principles. The tutorial will walk you through the creation of several website buttons, badges, glossy spheres, and finally the classic technique of reflections. Please let us know what you think of our Web 2.0 buttons Photoshop tutorial and thanks for stopping by.
See what I did there? A cheap reference to a cult classic, with a simple but obvious twist to draw your closer attention. Before getting started, if you haven’t already, you really should read zen and the art of motorcycle maintenance by Robery Pirsig. Its bloody good!
What will the prize be?
We are going be giving away either an iPod Nano, an iPod Touch, a Mac Mini, a Macbook or an iMac.
How do you enter?
All you have to do is follow us on twitter – @webdesignerhelp.
How will the prize be chosen?
The prize will be chosen depending on how many followers we have at 12pm GMT 30th June.
If we have 100K in followers will be giving away an iMac
If we have 75K in followers will be giving away an Macbook
If we have 50K in followers will be giving away an Mac Mini
If we have 25K in followers will be giving away an iPod Touch
If we have 15K in followers will be giving away an iPod Nano
How will the winner be chosen?
One of our followers will be chosen randomly, and then we post your prize to you.
Why are we doing this?
We would like to thank our readers/followers on twitter, and thought what better way than to hopefully giveaway an iMac!
Now, if you’re a web designer you might not appreciate the bluntness of this truth:
Web design is subservient to content
But, understanding what web design is, you’re not offended because you know any kind of design (architecture, graphic design, fashion etc.) is about communication and function. Design that fails to communicate or fulfil its functional requirements is decoration and will not be successful.
You know the 5 critical aspects of a website, in order of importance, are:
- Content — the substance of the website. The largest and most important aspect. It’s why the website exists and what visitors come to see.
- Functionality — dictated by the content, the purpose of the website and the audience… what interactivity is required/ desired to fulfil the website’s aim.
- Usability — user-friendly with a simple and reliable interface. The design must make the content easily accessible no matter the technology its viewed on.
- Visibility — a website must reach its audience. The site must provide quality content optimised for search engines and to attract visitors/ backlinks.
- Appearance — graphic design creating the optimal layout and visual style to reinforce the message being communicated.
Starting with quality content, the site must then meet functional requirements, ensure usability and visibility. Only once this is achieved can or should the appearance be decided.
A successful website is one that communicates effectively with its target audience. And what’s our primary means of communicating? Words. Copywriting is essential in effective communication and it’s no accident that the vast majority of online content is the written word.
Attention-grabbing headlines and ad copy, creative and memorable marketing messages, NLP and engaging web content, killer sales copy and strong calls-to-action… these all place different demands on the design.
In other words, web design is dictated by content and therefore by copy. Everything from the number of pages, structure, semantic XHMTL and onsite SEO to the layout… Copy should also have a huge influence on the appearance as both must work in harmony.
Photoshop is the final stage in a long design process — before you reach for it ensure you’re designing to maximise the value of the content, not producing pretty but ineffective decoration.