Is there a somewhat standard (commonly used) notation that allows to specify key information right on the mockup like:

  • font, size, boldness
  • color
  • something being centered or left/right aligned
  • same distance


The goal is: to come up with a commonly appreciated notation that could be used by a designer who doesn't know CSS to convey the details about his design to a CSS coder.

This is what I made up to illustrate what I am talking about

enter image description here

  • is there software to add these comments to an image quickly?
    – Kim
    Jan 4, 2013 at 8:18
  • It was done in Corel DRAW x6 Jan 20, 2013 at 14:24

3 Answers 3


You aren't going to teach them a new language because you don't want to learn theirs.

I think it's really important that the designers at least understand the points that are controlled in CSS. You don't have to annotate in valid CSS but the terms you use need to be clearly related for the UI developers. Why invent a new vocabulary?

Here's an example of how I would communicate a button style.

Menu button normal state
- background color (for no-gradient fall back): #ccc
- background gradient: light (top) #eee / dark (bottom) #999
- border color Top/Btm/Lft #999 / Right #eee
- font: Verdana, 11px, 1.2em line height, normal weight, #333
- type shadow: no blur, #eee, offset 1px up
- padding (all sides): 12px
- corner radius (all corners): 4px

That would be in a doc followed by a graphic example of the item in question. Depending on the team, I use Evernote or a Google doc on Drive to share it.

I always aim to provide the development team with a clear set of reference materials.

  • Static mocks with no overlaying info.
  • The same with very basic notes overlaid as necessary.
  • Isolated mock-ups for features that involve interaction, like the example above.

It's a short list if the project is straightforward. For big projects, I might provide them with multiple pages of running CSS instructions and dozens of graphic snippets in addition to the main static comps and any production assets required.

  • 1
    This is perfect assuming business unit cohesiveness. My current designer presents it as such and as comical as it sounds : Its like a romp through a flower garden when I get a spec like this. Its not "perfect css" but its communicative of typography, graphical elements, etc... I need to by my designer a beer i guess - this post just reminded me how much of a boon he has been <3 Jan 4, 2013 at 4:58

There are several systems depending on what you're hoping to notate. For anything text-related, including horizontal or vertical alignment or boldness and italicization you can use standard copy-editing symbols, such as the following:

enter image description here

image source

For things such as equivalent distances or angles between things, you can use geometric notation, such as the perpendicular symbol (⊥), the parallel symbol (||), and the symbols for approximate equality (≈). By this system, a line with one dash crossing is equivalent in length to a line with one dash crossing it but a different length from another line with two dashes crossing it.

Notation for such things as user interaction (clicking, dragging, selecting, etc.) is newer and less standardized. Richard Griffiths has a textual system for this. Jakub Linowski has a system of markings (shown below).

enter image description here

  • These are certainly useful, but are copyediting and UX/ID notation, rather than UI layout specifications (which I think is what the OP was after).
    – DA01
    Jan 3, 2013 at 18:41
  • @DA01 The OP asks about several different things, which is why my answer has several parts. "Font" and "something being centered or left/right aligned" (from the list in the OP's question) are covered by copyediting notation. The "same distance" is covered by the geometric notation. Both fulfill the requirement of being "commonly used." I added in the third part (about UI) because it wasn't clear from the disparate items on the OPs list what additional categories of information might be seeking to display. As for the remaining bullet point of "color," I've never heard of a system. Jan 3, 2013 at 19:36

For web UI, CSS would be a fairly reliable standard for marking up layout.

Granted, this requires that the visual designer understands CSS. I find this important, but realize that this is not always the case.

If your project is segregated in that visual designers do mockups, and all development is handed to another team, I'd suggest not marking it up at all. Just hand over the mockups and let the CSS folks do their best to match it in the most pragmatic method they deem fitting.

I would also suggest that allow expectations to be somewhat flexible. Don't expect the UI team to give you a pixel perfect rendition of your PSD file. Allow for wiggle room. Doing that will allow the HTML/CSS folks to be more efficient and also accommodate the variances that exist on the web.

  • This is what the question is about. How can a designer convey all details about his design to a CSS coder? Jan 3, 2013 at 17:40
  • 1
    By marking it up with CSS notation. Granted, that requires that the visual designer have an understanding of CSS. Something I feel is very important, but recognize is not always the case. I'll update my answer.
    – DA01
    Jan 3, 2013 at 17:42
  • First, not everyone knows CSS, right? Second, what if it is a design guide, should I use CSS there? Jan 3, 2013 at 17:45
  • 1
    Could you use other types of images, such as the main one here w3schools.com/css/css_boxmodel.asp . Images that are used to teach CSS may provide guides to doing the mock up as well, and eventually lead to a better understanding of CSS.
    – CLo
    Jan 3, 2013 at 17:46
  • 1
    Right, not everyone knows CSS. I'd argue that a web UI designer SHOULD know CSS, but sure, many don't and that can be OK. When they don't know CSS, though, I suggest they just hand off the visual mockup to the CSS folks. Let them interpret it. I often find the notated mockups wasted documentation.
    – DA01
    Jan 3, 2013 at 17:49

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.