From my observations, the process of creating visual design from wireframes tends to be poorly understood within design teams. I’m doing research on the topic with the purpose of educating teams on how more experienced designers work with wireframes and I’m inviting designers with a considerable experience working with wireframes to share their experience & knowledge on the questions below:
1. What kind of wireframes you are typically working with?
e.g. hi-fi, lo-fi, sketches, clickable (tappable), colored/greyscale, heavily annotated/not annotated, what tools were used, in what format delivered to you, etc.
2. Where do you start when designing from wireframes? What’s your first step in the process? Does anything in particular help you create the first version of look and feel?
3. How would you describe your method of applying visual style to the wireframed interface elements? e.g. do you generally keep yourself strictly constrained by wireframes or allow some (or a lot of) liberty? How do you handle situations when you have a better than the wireframed solution for an UI element? How do you combine creativity with following schematics of the wireframes? How often do you feel blocked by wireframes and how do you solve it?
4. Often less experienced graphic designers produce visual designs that look like colored wireframes. What would be your advice to avoid it and bring in more visual freedom into the process?
5. What are the biggest challenges in creating visual design based on wireframes and how do you overcome them?
Thank you in advance! The story of how this research has started is here: http://theoxygenated.posterous.com/108073640
). I’ll do basic sketches to just get ideas out of my head. From there, when I’ve got two or three solid wireframes, I’ll stick it into Photoshop as described above. Finally, I’ll layout a full image of the site farther down the road.