1

A graphic designer has finished the design portion of a large web project my team and I will be developing. (Only jpegs were sent.)

I will be responsible for all implementation of the design, including CSS.

The designer did not send the necessary information I need to implement the css, and I don't have the knowledge or vocabulary to communicate effectively enough to know what I'm asking for.

It's not a style guide - that brings up a whole bunch of theoretical academia in a google when searching for an example. It's not a style sheet, because that's what I'm creating from the designs, and using that term I was reminded that that was my responsibility.

If there is one, what is the word I'm looking for when asking for the information about font sizes, font families, misc typography, colors, link colors, hover colors, image sizes and ratios, etc.

If there is not a formal word for this in the design industry, how can I communicate clearly what I need rather than 100s of back and forth emails each time it's time to style a new element?

Also, I was trying to find a reference to such a sheet online. I have come across them now and then when reviewing pre-made templates. If you have a link to such a reference, please share.

3 Answers 3

4

What you are looking for is, in fact, a style guide. I'm not sure why you've convinced yourself that that's the wrong term, but style guide is right.

When requesting the style guide, define the details that you require (as you list in your question; font sizes, font families, misc typography, colors, link colors, hover colors, image sizes and ratios, etc.) to the designer. Also, agree on a format for communicating this information. An annotated image should suffice in most cases.

The designer has done their bit in establishing the overall look of the site. The last part of their job is to communicate to you everything that you need to know in order to technically implement their design.

4
  • Chris is correct. There are tools for photoshop and Sketch app to create such styleguides online, where the developper can easily read the font sizes etc. I personally use Sympli with Sketch but there are tons of options.
    – Summer
    Commented Feb 16, 2017 at 14:56
  • @JaneDoe1337 "tools for Photoshop ... to create such styleguides." Can you tell me a bit more about this please? Photoshop was used to do the designs. If there is something there I can point to that automatically generates this, this is exactly what I'm looking for.
    – user658182
    Commented Feb 16, 2017 at 15:11
  • @user658182 You could have just googled this... Sympli works with Photoshop as well, I don't know any other tools that I could recommend as this is the only one I've used so far.
    – Summer
    Commented Feb 16, 2017 at 15:14
  • .. I think I shied away from "style guide" because most of what I found online looked very intimdatingly complex (and we're already having communication issues) for example, a highly complicated grid structure denoting even the spacing above and below fonts, as if someone were designing a new font from scratch. If that's the term to use, I'll stick with it, I just didn't want to add more complexity. If you know any references to web site style guides online I can aid in communicating, please reference.
    – user658182
    Commented Feb 16, 2017 at 15:14
2

Your question is on target. A vague guide in Illustrator is of no use to a Web Design implementor. Defining Headings and font sizes and colors is super helpful to avoid rework. Use of logo sizes and background images helps to reveal the intended the vision. It's not enough to throw all of the assets at the implementor and then let them guess what its proposed use is. Spacing between elements should also be communicated. I too wonder if there is a checklist available to translate the style guide to web implementation since most graphic designers target print use cases first. Web properties have confines and rules to be adhered to that make it tricky when designing for desktop to mobile.

Here is an excellent guide! https://logo.com/blog/what-is-a-style-guide

0

Ultimately engineers working on a project should just ask the designer for whatever it is they need. It could result in asking for a style guide, higher fidelity mockups, an explanation of what something is or how it works, view access to the Figma file so you can look at values, or something else. The key is communication, not having the exact right word for what you need.

The end result that designers hand off varies highly depending on the nature of the project, the time given for the project, the budget, the skills of the engineers, and the contract. It's best to communicate at the start what the expectations of the work being handed off should be, with as much detail as it requires, and put that in a contract if you're working with a freelancer.

For example, if I'm a front-end developer working on a personal website for myself, I may want a designer to help out but only in broad strokes, providing me a big picture direction and leaving the details for me to implement myself. But if I'm a full-stack developer working for a large company that has very set best practices and such, usually the designer should provide more detail/views/explanation to make sure that I meet the expectations of that company.

There's no one right answer for every situation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.