Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

share|improve this question
    
is there software to add these comments to an image quickly? –  Kim Jan 4 '13 at 8:18
    
It was done in Corel DRAW x6 –  bonomo Jan 20 '13 at 14:24
add comment

3 Answers

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.

share|improve this answer
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 –  Brandt Solovij Jan 4 '13 at 4:58
add comment

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.

share|improve this answer
    
This is what the question is about. How can a designer convey all details about his design to a CSS coder? –  bonomo Jan 3 '13 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 '13 at 17:42
    
First, not everyone knows CSS, right? Second, what if it is a design guide, should I use CSS there? –  bonomo Jan 3 '13 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. –  Chris Jan 3 '13 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 '13 at 17:49
show 4 more comments

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

enter image description here

share|improve this answer
    
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 '13 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. –  3nafish Jan 3 '13 at 19:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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