Standard notation for describing UI

Question

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

etc..

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

Answer 1

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.

Answer 2

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.

Answer 3

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:

(source http://www.wordsworthwriting.net/Technical%20Writing%20and%20Editing%20Tips%20Site/editing.htm)

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).