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.

Author: Bradley Hotson for The Graphic Design School The Graphic Design School offers vocational training graphic design courses. Delivery is online, affordable and open to students all over the world to study in the comfort of their own home.

Get off the Mac, roll up your sleeves and get making. Once a week.

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

Author: CA Miles and Deborah Roberti for The Graphic Design School

Printing Pre Pres Do’s and Don’ts

Do create and edit your text in a word processing application such as Microsoft Word and then import the text to a desktop publishing application such as QuarkXPress, InDesign, Pagemaker or Corel Ventura where you can create your page layout, format the text with graphics, etc.

Do use QuarkXPress or Adobe InDesign for desktop publishing. QuarkXPress was the print industry standard page layout program for decades, designed and perfected for commercial print output. Adobe InDesign, however, has given Quark a run for its money. InDesign not only costs half as much as Quark, but it is fully-integrated with its sister apps, Photoshop and Illustrator. Another page layout program is Adobe Pagemaker—now discontinued but still around. However, I find that Pagemaker is nicknamed “Ragemaker” for a very good reason. It is fine for small projects—newsletters and whatnot—but for large projects, books in particular, you’ll save yourself a lot of time and trouble in the long run if you use Quark or InDesign. Also, if you are lucky enough to have a choice as to what platform you can use, go Macintosh. PC/Windows desktop publishing files are far more likely to cause problems when it comes to graphics, fonts and printing. If you do decide to stick with a PC/Windows platform, make sure that the commercial printer you select has ample experience with that platform.

Don’t use Microsoft Word as a desktop publishing application. Word does have many of the same layout features as desktop publishing apps such as Quark and InDesign (i.e., it can create columns, import graphics, create nice laser prints, etc.) but when it comes to commercial printing, Word is not going to get you very far. Microsoft Word, WordPerfect, etc. are word processing applications, NOT desktop publishing/layout programs. They handle font replacement differently and often cause reflow.

Don’t create your page layout for multi-page documents in draw programs such as Illustrator or Freehand. Use desktop publishing apps like Quark or InDesign.

Do provide the printer with a hard copy laser printout of your project, as well as all of your layout files (in Quark, InDesign, etc.), graphics and fonts. Inkjet printers are fine for initial proofing and printing, but always get a final printout (and proof it) from a PostScript laser printer.

Don’t assume that what you have printed out and submitted as hard copy or see on your monitor is what you will get. Take a good long look at proofs and bluelines supplied by the printer.

Do take your printer’s advice.

Don’t assume that you know more than the printer.

Fonts

Do supply the printer with ALL of the fonts used to create your project (even the symbol, fraction and dingbat fonts). Try not to use TrueType fonts, and for PostScript fonts, make sure you supply the printer with both the screen and the printer font parts. Remember to include fonts used to create EPS graphics, and fonts that the printer probably already has (i.e. like Helvetica, etc.). There are many different versions of some fonts and a “wrong” version can cause reflow/repagination problems.

Don’t use Bold or Italic in the style menu or hit the Bold or Italic button when you want to bold or italicize text in your page layout program. Use the actual font. For example, in Quark, if you want to create text that is Helvetica Bold, don’t select some Helvetica text and then bold it. Instead, select the text and change the font itself (not the style) from Helvetica to Helvetica Bold:

Do

Don’t

Don’t use TrueType fonts. Period. Always use PostScript or OpenType and Adobe fonts (Macintosh or PC/ Windows) are always a safe bet. TrueType is fine for printing to a laser or inkjet printer, but TrueType fonts can cause severe problems when it comes to commercial printing. Many commercial printers won’t even print a project that contains TrueType fonts. Often, they pop.

Don’t use 20 different fonts for a 4-page newsletter. It makes you look like you don’t know what you’re doing. In desktop publishing, consistency is everything. Use one font for your main body text, another for your main heads, another for photo captions, another for sidebars, etc., but don’t mix and match fonts for your main body text or make every headline a different font unless you’re trying to create some sort of chaotic effect and it is your intention to confuse the reader. Too many fonts is not only considered to be bad design, but it also slows printing to a crawl.

Graphics

Do supply ALL of the graphics used to create your project. Desktop publishing applications like Quark and InDesign link to your graphics; they do not embed them in the document. If you don’t supply the graphics along with your Quark or InDesign documents, the printer will get a missing picture error, and won’t be able to continue until you supply the graphics.

Do use TIFF and EPS graphic file formats:

Don’t use other graphic file formats like PICT, JPEG, GIF. Just because you can import them into your desktop publishing application doesn’t mean that you should. Stick with TIFF and EPS. If your graphics are in any other format, convert them. This is especially true of the PICT format. Quark hates PICTs; imagesetters hate PICTs. Steer clear of PICT.

Do most, if not all, of your image editing and graphic manipulation (i.e. lightening, darkening, resizing, etc.) in the original program that the graphic was first created or edited in, rather than the desktop publishing application. For instance, if a Photoshop TIFF needs to be lightened or darkened, lighten or darken it in Photoshop, not in Quark. Even though Quark will lighten or darken an image, adjust contrast, etc., you may get different results once you project goes to press and is printed.

Do name your graphics with the appropriate file extension: filename.tif, filename.eps.

Don’t rename graphics once you have placed them in your desktop publishing/page layout document(s). If you do, make sure to go back into your document and re-link the graphics

Do check your mode for color TIFFs. Save color TIFFs as CMYK (not RGB, never RGB). Save black & white TIFFs as Grayscale.

Do check with your printer to see if they charge extra for breaking any of these “rules.”

Design & Page Layout

Do use a document setup size (i.e. your page dimensions) that is the same as your trim size. For instance, if you are creating a 6 by 9-inch book, set up your initial page size in the document setup for 6 by 9-inches.

Don’t create 6 by 9-inch text frames in a 81/2 by 11-inch document setup and manually add registration marks.

Do make page elements that bleed extend at least 8th of an inch beyond the page boundary.

Don’t use your page layout/desktop publishing program’s predetermined “hairline” rule. The width varies from program to program, and prints out differently on a laser printer than on an imagesetter, if it prints at all. Don’t create rules that are less than .25 pt.

Do watch for widows, orphans, rivers, bad kerning and other desktop publishing no-nos that will make you look like an amateur. Get rid of double-spaces after periods, don’t use spaces to align columns (use tabs) or to create paragraph indents. Know your en dash (–) from your em dash (—).

Now on to some tips for editing and formatting those wonderful design and publications in Illustrator and Photoshop

Illustrator vs. Photoshop

This is not about what program is better but more of what program to use for what. You can not say that one is better than the other because they have completely different uses but work closely together.

Photoshop This program is great. It is the best application for editing images and works primarily with pixels. A limitation with pixels is that the pixel-based image is not to be scaled since all you are doing is enlarging the squares/pixels which lose quality and clarity.

If you are a web designer you will work very closely with Photoshop for different elements and graphics of your website… even for Flash. If you are working to produce print you will only use Photoshop to create images that will be imbedded into Illustrator or a layout program such as Quark. Photoshop should not be used to produce text for print.

Illustrator This is not about what program is better but more of what program to use for what. You can not say that one is better than the other because they have completely different uses but work closely together.

This program is also great but is not a pixel-based image editor. Illustrator works mostly with vector graphics. This allows the image to be able to be scaled to just about any size and keep its integrity. As a result logos should always be produced/finalised in Illustrator. You will be able to scale them to just about any size you like.

You can even produce graphics for the web using Illustrator and a lot of the time I have found myself doing this. Since you can output to many pixel-based files, you can make extremely smooth looking graphics and convert them to a JPEG or other raster files.

For print this can act as a layout program. You would take your images edited in Photoshop (most of the time high resolution TIFF files) and place/embed them inside your document. In Illustrator you would then create all your text and shape designs as well as add your logos and other things like that.

Just follow this simple rule: in print use Photoshop for your image editing and then do everything else in Illustrator.

Author: The Graphic Design School

In between tutoring students in The Graphic Design School’s Online Course and making multitudes of coffees, we thought that we would whip up this little blog entry simply for your viewing pleasure…
Ahhh no sleep for the wicked! Enjoy!

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