The Book… A free download

What’s a cookie? How do I protect myself on the web? And most importantly: What happens if a truck runs over my laptop? For things you’ve always wanted to know about the web but were afraid to ask, read on…20thingsilearned.com.

The Process

The Fi team rose to the challenge and created the book

To learn more about the process that went into making this project happen read and watch the video on the Fi website. Another great project to checkout on their website is the building of the new Fox.com site, an interesting read indeed.

Build

Build’s newly designed website features pleasing collapsible/cascading functions operated through the Mac’s arrow keys which makes for an intuitive browsing experience. A handy index is also included as a further navigation tool.

Meta Design

Germany’s famous Meta Design has crafted a predictably, though pleasingly, Swiss affair for their studio website. Vertical sub-menus exist to guide the browser through the site’s architecture and rolling news headlines running along the bottom of the screen lend seriousness to things.

Madethought

The easing functions on the website of Madethought are difficult to beat, the rising and falling of the sub-menus an addictive joy for the peruser. These are housed at the bottom of the screen within an understated black design which showcases some great work.

Effektive

Scotland-based Effektive has created a gorgeous-looking website with a colour scheme of matte greys and a single dynamic blue. Sub-menus become endowed with a blue bar as the cursor hovers over them and animated files whizz past in displays of individual projects.

Bunch

Bunch, of London, has also got it right on the easing of its sub-menus. Four thick black slabs open to reveal an abundance of links, and while lots of quick animation is present, it never becomes overbearing or detracts from the work on show. Also worthy of note is their excellent search facility where viewers can search for a project based on year, type, media & technique and application.

North

For sheer confidence and originality, North warrants an entry. The designers there have elected to show a single page of logotypes they have designed, which, as I wrote elsewhere, segue randomly from grey to colour in a delicate array of cadences. Tantalizing, restrained brilliance.

Frost

Australia’s Frost have gone for a concept based around Apple’s coverflow fascia. Viewers are presented on the homepage with a vast collection of project icons and invited to speed through them coverflow-fashion. Once clicked on and perused, navigating your way back to the thumbnails or next project is simplicity itself with the large cursor icons at hand.

DO: Keep your page structured

In the recent months we’ve seen an explosion of great grid layouts and css files. The most famous (in my opinion) being 960.gs and one of the cooler, more light weight grid systems being the 1kb grid. Following after the structure and balance of a great magazine/newspaper, these grid systems help lay out information in a structured and easy to follow format.

DONT: Just place boxes everywhere

We’ve all seen these types of websites before – 20+ boxes, all different sizes, nothing lining up properly and not on piece that actually grabs your attention because you’ve just ran into a whirlwind of craziness. if you’re a web designer and you cannot properly place items in a structured environment, well, I would’t really call yourself a web designer.

DO: Focus on what’s important

Are you building a website for a business that sells one specific product? If so, make sure that’s the focus of the home page. Allow yourself space on the inner pages to place calls to action for that specific item. If you’re building a blog that gives out freebies or writes tutorials, make sure they’re getting the proper amount of focus and attention. Websites like WOO Themes do a great job and putting forward what their main focus is – wordpress themes.

DONT: Place irrelevant ads across your page

If you’re going to try and make money from your website/blog, do yourself a favour and lay off the excessive advertisements. If your page loads and has 70% ads and only 30% content, odds are high that people will leave and never come back. Making your ads the #1 priority is a bad idea. Try blending them in and making sure they don’t take away from the content.

DO: Choose the right colour scheme

Knowing what your readers emotions are will help you in choosing the proper colour scheme. You won’t want a bright and ‘loud’ colour scheme if your website is in the meditation niche. You’ll notice that most punk rock bands have CMYK colour schemes (pink, yellow, black and blue), while a doctor/medical website will generally stick with a lighter, more ‘open’ colour scheme

DONT: Overdo it with 20 different colours

Having every colour that is inside the 64 set of crayons on your screen will not only look bad, but it will annoy your readers and drive them away. Your colours should blend well together, not clash. If you’re not good at picking colour schemes, I’d suggest a site like Colour Lovers which has user generated colour schemes posted. Find the right colour scheme (at most, 5 colours) and see how much better your designs turn out.

DO: Make it easy to scan your pages

People will not spend 5 minutes trying to figure out what your website is about and what it has to offer. The best way to ensure you’re getting the right information out to your reader is to make the page easy to scan. Use proper H tags (similar to how this post is using h3 tags) to focus on the important items. You can also use pull quotes, block quotes and images.

DONT: Write one paragraph per page that is 1,000+ words long

If there’s one thing that stops me from subscribing to a blog is that the posts are literally 1,000+ words and have no paragraph breaks. This, and they normally don’t even have blog words or any indication that there’s anything important inside their content. Break your content up and make it easier to read – please, and thank you.

DO: Keep it simple stupid

It’s a proven fact that sign up forms with more than 3 items (usually – name, email & one other item) will have a significantly lower sign up rate than the easier forms. People HATE doing things for too long – so don’t over complicate things. Make things as easy as possible for your readers by pretending a 4 year old will be viewing it. It definitely helps get things out in the open where they need to be.

DONT: Go on and on (and on) about nothing

Rambling, excessive LOL’s, too many smiley faces and random dribble will drop attention spans of your visitors. You want them to stay – act like it. If you have a personal blog where you write about your life, thats one thing, but to randomly post about what you ate, or where you went yesterday on your business website will definitely drive people away.

DO: Focus on killer copywriting

Words matter. Keep them short, sweet and to the point. If you have trouble writing copy that attracts the readers attention to where you need it to go, hire someone. Copy is just as important as the design of your website. Choosing the right words for sign up buttons, page headings, navigation items and calls to action can be the difference between 50% sign up rate and a 90% sign up rate.

DONT: Stuff your pages full of keywords

Google isn’t stupid. Neither are your readers. If your page has the main keyword for your site stuffed into each paragraph 30–40 times, it will not only read very poorly, but you’ll be penalised. Writing should flow naturally and should only mention your keywords where they fit.

DO: Set your navigation up properly

If you’ve got a sign up page on your website, maybe you’ll have your main navigation in a blue colour, while the sign up button is in a green colour. Regardless, you’ll want to make your navigation easy to spot and easy to use.

DONT: Make your readers search to find something

Your readers shouldn’t spend 30–40 seconds trying to find a contact or about page. They also shouldn’t have to click through three pages just to get to a sign up form. Get the important things out in the open. For the items that aren’t required to have a strong focus on your website, you might want to invest in a search box – I HATE when websites don’t have a search box. Web design 101 maybe?

DO: Optimize your load times

If there’s one recurring theme in this entire article it is the fact that visitors are impatient. You need to build your website with optimal speeds and allow your page to load in around 1–2 seconds. You can do this by making sure your css files are compressed, using the google hosted javascript files and ensure your page is coded and designed with optimal speeds in mind.

Someone like embed a video on their site. Then I will not suggest you to make it auto load or auto play, because it makes your site slow. If you do not know how to set them, I suggest you to use moyea flash video mx 6, because you can set the player’s profile in this software. The product site: video-to-flash.com.

DONT: Make everything on your page an image

Text on a website is there to be exactly what it is –text. There is no need to make the text blocks of your site jpg images. Also, making your website background 1MB or more in size will also cause your page to load very slow. I’ve seen websites also use 2 different javascript libraries and load 10+ plugin scripts for them in the headers and their websites took around 20 seconds to fully load.

DO: Choose the right fonts and sizes

I’ve only recently got into typography and have realised that it is a highly important aspect of web design. Making your section titles the right size and making sure the fonts you’re using will greatly effect the experience your visitors have when viewing your websites. Generally speaking, you should use one main font for the content and then you may switch the titles of the pages to a different font.

DONT: Have 5 different fonts in 10 different sizes

Picture this: Page titles are in times new roman, content for those pages are in Arial, navigation links are in comic sans and the sidebar is in impact (yes, that impact). How ugly does that look? Now, remember that vision the next time you want to build a website with 5 different fonts.

DO: Make your page visually appealing

The world may tell you that people don’t judge a book by its cover, but thats a lie. The first thing people see is the web design you’re branded with. That first impression better be a good one. Utilise textures/gradients that give your website depth and draw attention to the beauty of your design. I would strive to ensure each of your website designs are accepted to galleries like css mania.

DONT: Throw a bunch of crap together and think you’ll do well

Animated gif’s are your first no-no. After that comes the marquee scrolling text and the jumbled mess of text and graphics that resemble a 13 year olds myspace page. It isn’t cute and in case you’re not aware of it, it’s no longer 1980. Things have changed and people don’t expect to see something that looks like a 7 year old made it. If you’re a professional, act like it and make sure your designs are up to par.

Steve Jobs is nobody’s fool. The sleek, sexy and justifiably praised desktops and laptops that Apple make are now a staple —a necessity even— of any self-respecting graphic designer. We await the release of new iMacs and operating systems with impatience, queue up to purchase our copy, and coo over them once they’re installed as if they were newborn babies. We learn them inside out and gush, blog and tweet over new Photoshop filters. Graphic design, along with many other professions which used to require a certain amount of manual endeavour, has, with the rise of digital technology become nigh-on completely computer-based and desk-bound. The modern graphic designer need never sketch out a rough by hand or design a font on layout paper. Everything can now be done with the help of a computer.

The latest “big-cat-themed” operating system that you simply can’t live without and the best ever. Until the next one…

And yet there was a time when graphic design was a very hands-on profession, not at all centred around a magical-looking computer, and which involved all kinds of tactile and smelly materials, and which required actual physical effort to work with the various mediums associated with it. I’m talking drawing boards, airbrushes, magic markers, inks, layout pads, lightboxes, silk-screen printing, linocutting, collage and drawing. What is most fascinating here is that these analogue processes aren’t from some far-flung past. We aren’t talking William Morris’s Kelmscott Press here. No, many graphic designers and tutors in their fifties, forties and even thirties, will have some recollection of their professional life involving the making of things by hand.

Large-scale Voltron models made entirely of Lego, from Grand Admiral / Mark Sandlin www.flickr.com/people/grandadmiral/

Thankfully, most design schools still offer students the chance to get to grips with some, if not most, of the processes listed in the paragraph above. And this fact should be celebrated, as it provides those willing to learn with an anchoring in the distant and not-so-distant analogue past. One could view this advocation of older processes as a certain charming backwardness through lack of funds on the design schools’ part, although the well-planned and carefully thought out courses will have been designed with the same points that I describe here in mind. Good design schools, like many designers out there ‘in the field’, recognise that it’s highly beneficial for the young graphic designer to think outside the Mac. For students, the freedom and breadth of disciplines offered should be taken advantage of, as the opportunity to indulge these passions (in the quantities that design schools can offer) will hardly likely come round again once you’re out there in the working world.

During my own final year of education I decided I wanted to learn about letterpress printing, and planned to use it to print my major end-of-year project. In my pursuit I was fortunate enough to have a course head as enthusiastic as I was and who had valuable connections to a fine printing press in Wales. Within a month I had been packed off there for an intensive, hands-on introduction, and emerged two weeks’ later having learned to design, handset, compose and print using letterpress, and returned home with two posters to exhibit at my end-of-year show. On graduating I kept in touch with the staff at the press and continue to visit them each year. Two weeks is scarcely enough time to master the discipline, though I was at least given an initiation into letterpress printing which enabled me to continue to use it for personal projects. Clients and other designers seem to like the fact I include these handmade projects in my portfolio, and of all my work it is often these pieces, and not my commercial work, which is singled out for praise and which people are most easily able to recall when I speak to them.

Lovely commission for ilovetypography.com letterpress-printed by Typoretum www.typoretum.co.uk

Gorgeous 2010 handbound, accordion-fold letterpress-printed calendar by Campbell Raw Press www.campbellrawpress.com

Two tactile Christmas cards from Hand & Eye Letterpress both set in wood and metal type and printed on a metal-coated board www.handandeye.co.uk

As mentioned above, on completing your education, if you’re lucky enough to bag yourself a job either inhouse or within an independent studio, the chances are the prospect of long hours at the Mac beckons. You won’t mind this at all because within your studio, through all the graft, artworking and occasional tedium involved, you’ll glimpse moments of pure enchantment; when you get a job couriered over from the printers, or have an idea of yours passed for inclusion on a project. You’ll be trying very hard to make a positive contribution to your studio, to make the transition from someone who needs a lot of help and support to a genuinely productive member of the team.

A charming montage of greetings cards and the colourful back patterning from letterpress-printed stationery designed and printed by Smock www.smockpaper.com

Amidst all this though, try to maintain some link with the traditional processes you’ll have learned at some point during your education. It’ll be all too easy to let things slide when you’re strapped in to an iMac. Sketch out roughs with a pencil as opposed to on screen. Suggest using letterpress on that new album cover. Anything. Thankfully there is now more appreciation for the handmade than there was fifteen years ago. Back then the age of Mac had only just become prevalent and software like Photoshop had still to really catch on. Graphic designers (and their clients) were in thrall to what they could now accomplish with computer-aided design. Luckily, here at the end of the decade, you could say that disciplines such as letterpress and traditional drawing are enjoying something of a renaissance. People will always value the tactile and the handmade (if it’s any good that is) and by choosing to take this route where appropriate your professional life will be richer and more rewarding than it would be spent solely on the Mac.

The creative possibilities that computer-aided design brings is undoubtedly a Good Thing. Adrian Shaugnessy again “The computer has revolutionized the design process. It has made the act of designing easier, and in many ways it has improved the way we design things. Yet in other respects it has made design more formulaic, and it has standardized the act of designing.” These are words worth heeding. Traditional skills retain a charm and often present a usage which should always be remembered, celebrated and, wherever appropriate, used!

Impactful four and three-colour silkscreen prints by Waste Yourself www.wasteyourself.com

Bergh

Portfolio site of Anders Bergh photographer Andes from Copenhagen, has one of the most incredible photographic portfolio sites that we have ever seen.

Its no secret that The Graphic Design School tutors and staff are photography fans. Lets face it the right photograph can make an ordinary graphic design composition look great. We fell in love with Andes and his work at first sight. Not only only is his eye sharp, his aesthetic is clean, his understanding of light manipulation leaves us in awe. This is what Anders has to say about his process as a photographer/designer:

For me, the creative process is a journey from an inspired idea to the creation of raw picture material to detailed refining work in post production.

www.bergh.dk

Mcbess

Portfolio site of Matthieu Bessudo French Born Matthieu now residing in London, has a kick arse site, reel and imagination.

www.Mcbess.com

Staeheli

Portfolio site of Matthias Staeheli “Life is a pixel” is the motto of this Swiss Graphic Designer, in keeping with the motto a fuzzy orange pixel guides you though the site. Matthias is a design student living in Berlin. His fun site will have you exploring and playing with his fuzzy little pixel!!!

www.staeheli.de

Mon Monde

Portfolio site of Guillaume Dupuy Specialist in full flash sites, harmony and ease of browsing experience. The beautiful melange of graphic design, animation and sound development make Frenchman Guillaumes Dupuy a multi talented Graphic Designer to be reckoned with.

www.mon-monde.com

Vis Tek

Vis Tek Graphic Design Studio are based in Barcelona. Vis Tek specialize in branding, web design and advertising design. Their work reflects a harmony between hand illustration and digital creation. A delight.

www.vis-tek.com

Thibaud

Portfolio site of Thibaud Thibaud (last name unknown) is a freelance CJ artist living in Belgium.
His fully interactive site using pantone swatches as his inspiration to share his talents.

www.thibaud.be

Out of Goren

Personal portfolio site oF Anna Mentze German Art Director Anna’s combination of drawing, computer graphics and amazing layout designs make for a very impressive all round graphic design portfolio.

www.outofgoren.de

Tribal DDB

Design agency Tribal DDB with 37 world locations TDDB has made its mark. Their website contains stunning graphics, awesome navigation, and a portfolio that would take an average human 5 weeks to sift through. This award winning design agency is a must see for any graphic design student.

www.tribalddb.com

Magicsocket

Magicsocket An Italian agency based in the creative Italian city of Torino. Magicsocket specialises in Flash technology, and boy do they do it well. Prestigious clients such as D&G, Bisazza, Fiat and Haagen Dazs. Play with their interactive car track while visiting their site… and see how they made it. We stacked on EVERY corner!

www.magicsocket.com

Bionic Systems

Bionic Systems Studio based in Dusseldorf this talented team give us a glimpse of all aspects of graphic design in their inspiring portfolio site. From package and catalogue design to website design.

www.bionic-systems.com