Web design outsourcing checklist to avoid fuck ups

Web design outsourcing checklist to avoid fuck ups

Well, I’m having meeting with some web design agency today and I have to set some requirements for them for our new design of a-shirt.club. I haven’t been working with designers for a while, so I decided to revise some of my fuck up notes that I make after each project is completed.

The case I want to write about is when you are a web-developer and outsource graphical design to a 3rd party who will provide PSDs that you gonna do PSD2HTML yourself.

The checklist below becomes even more useful when a customer has a graphical designer that has already drawn a brand book but has no experience in web design.

No revelations here, this post is merely my list to revise before outsourcing design to 3rd party or working with a new designer!

Once I had a project that turned out to be a nightmare when it came to the interaction with UX/Design agency. So here I would like to present some major fuck ups that can occur, and I will update this article when some new fuck ups will show up.

Look at the portfolio!

behance-portfolio

«Thanks, cap’n!» – you might say. But again, never trust anyone’s opinion on a design agency blindly. Have a look at portfolio, ask their clients, assess their own web site.

They don’t have their own web-site? At least Behance profile? No?

Pick someone else.

Mobile first!

mobile-first

Oh cap’n, what we would do without you!

You would get ten very detailed (lots of details and elements), ready mockups 1600px wide.

And you would have to be very creative and inventive to adapt it to smartphone!

Touch screens first!

touch-screen-device

Mobile devices are not simply smaller, they do not have a mouse.

So no design elements shown only on mouse over, please.

Clickable items that are screen wide are too easily clicked by mistake while scrolling page with a finger.

And keep in mind that some tablets have a resolution big enough to show «desktop» version of the site, so screen width is not a parameter to check if a user has a touch screen.

Check if they (and you too) understand how to use grids.

Grid is a methodology to create adaptive / responsive web design. Grid is a system of rows and cells. Each row contains a fixed number (usually 8, 12 or 16) of cells of same width. When using a grid a designer splits page layout into blocks aligned in rows and decides how many cells would this block fit in.

resposnive-grid

Let’s say you are using 12 cell grid and want to put one wide and one narrow block in a row. You can decide that the wide block will be 8 cells and the narrow one will be 4 cells.

But why do we need a grid for a responsive design? Simple! You can specify that for narrow screens both wide and narrow blocks will become 12 cells wide and will be aligned in a column, not in a row.

To get an idea how it works open this demo and drag browser window side and resize it to make it narrow and wide back again. The layout will adapt to the window width just the same it will adapt to a mobile device width.

Check if they (and you too) understand that web fonts and system fonts are not the same.

We are all accustomed to the simplicity of fonts usage. We start MS Word, Adobe Photoshop and can use hundreds of fonts installed on our computers. And without a second thought we think that there’s no big deal in usage of any font in a browser.

web-fonts

However there’s a catch. When you start MS Word and Photoshop you see the fonts that are installed on your local system. But all local systems are different. Different operating systems, desktops, tablets, smartphones. Site owner cannot expect user device to have some unique font. So a site owner has to store a font on a server for the browser to request it.

On the local systems software uses usually True Type Fonts (TTF) and Open Type Fonts (OTF).

Browsers on the other hand besides TTF and OTF use Web Open Font Format (WOFF), Embedded OpenType Fonts (EOT) and SVG shapes. Different browsers use different formats.

So to use a font on a web site a site owner must have a set of font files in different formats. Those files are usually obtained from web-font selling web sites (e.g. fonts.com).

Before using some font a designer should double-check if a customer can obtain that font (preferably legally). It might be expensive.

Keep in mind that regular, bold, italic and bold-italic are considered to be different fonts and are often sold separately.

Check if they (and you too) understand how to create design for retina and other high definition displays.

To keep it short and simple all design mockups should be made in a double resolution. So a 100px wide button should be drawn as 200px wide. A16px font size should be 32px high in PSD.

retina-vs-nonretina

Ok, in fact there are lot’s of debates how to create retina ready mockups and some professional use some more sophisticated methodologies to do that. So if you’re a professional do whatever you like, if you’re a newbie begin with double sizing all the graphics.

Oh, and check out vector fonts for icons, like fontello.com for instance.

Style guide first!

Style guide is a document that contains:

  • color palette,
  • font set,
  • styling for headings, text blocks, forms, buttons, links, images, etc (for different screen widths)

style-guide
If a designer designs a style-guide first, the rest of the design process will be like constructing something with lego blocks.

I would advise to begin with drawing two pages first (but for all screen widths):

  1. Main page, because usually it’s design differs from the rest
  2. Typical article (post) page, containing all the style guide elements.

Check out some samples of style guides here

PSDs should be neat!

Well organized PSD files will save you lots of time (and money). The design itself might look good, but the way the PSD is organized will affect greatly, how fast a developer will create a HTML markup.

well-organized-psd

Neat PSD recipe:

  • All the layers are combined logically in groups (header, footer, sidebar, content, etc…).
  • The more meaningful layer titles – the better.
  • In layer navigator layer groups (content blocks) are marked with different colors. If there are several mockups, same blocks are marked with the same colors.
  • Use rulers – all elements are aligned.
  • Use reasonable amount of vertical rulers – ideally designer uses grid rulers.

List items should be different! Less copy paste, please!

Sometimes a designer draws a page that contains a list of similar blocks. Let’s say a list of blog posts. What an average designer does? He draws one block and copy-pastes it multiple times. So we get a mockup where all blocks have similar sizes.

list-items-copy-paste

But in real life list items are different they have different content with different string lengths. So a good designer will create at least three different versions of blocks: short string length, average string length, long string length.

Here’s my opinion how ideal copy-pastes should look like:

ideal-clones

Not all posts have thumbnails!

This point adds up the previous one. Often I see blog designs, where each blog post has a featured image (thumbnail). But sometimes site owner needs to post material as fast as possible, sometimes even without featured image.

post-without-thumbnail

So the design mockups should depict how posts will look like without an image. That concerns all list items, in fact.

Communicate effectively!

Use trello or basecamp. Email or skype are fuck ups here.

You ask 4 questions in one letter, they answer only one. You ask again, they answer ambiguously. And in a little while you have a letter chains nightmare when trying to find out who said what.

trello

It is more effectively to create card or thread concerning one issue and have all relevant discussions there.

Check on their work often, weekly at least!

But they are professionals! I do not want to interfere with their work.

Maybe.

Or maybe you’ll pay twice or triple when they will bring you ten 1600px wide mockups. Or worse…

90s-web-design

Oh but that’s a list for newbies! Nothing new here!

Excellent! Write me a couple of lines on LinkedIn. I would love to know you better!

{{"Show older comments..."|nls}}{{comments.length}} {{"of"|nls}} {{total}} {{"shown" | nls}}

{{'Comment'|nls}}:

{{(dialog.replies.length > 1?'Replies':'Reply')|nls}}: