UX to UI Design: Creating a moodboard, Style Tile, and finished layout

This week we began to flesh out our design using a moodboard and Style Tile before creating our finished design mockup. I found the moodboard to be the most challenging aspect of this assignment. I mean, it’s a faculty portal for entering grades; what kind of mood could I possibly create here? But as I started doing the assignment, I came up with some creative imagery for the mood board: a seagull at sunset, for tranquility, and a statue of the Buddha because I want this to be a very “zen” experience for my users! Although I have been doing web design for nearly 22 years, this is my first time creating a moodboard. It was kind of fun. (I found a great moodboard template at http://www.laurenschroer.com/blog/free-mood-board-template. Thanks, Lauren Schroer!)

For the Style Tile, I tried to restrict myself to web-safe fonts (Georgia and Verdana). Because this is a faculty portal, and will likely be accessed on older machines by some faculty members, I didn’t feel that web-embedded fonts were necessarily a good choice. Speaking of fonts, something weird is happening to the text on the menu buttons when I move from Illustrator to Photoshop. The text looks great in AI, but it looks off to me in Photoshop. I’m not thrilled with the buttons, and if I had more time to spend, I likely would have redone them.

If I end up teaching our new Human Computer Interaction course in the Spring, I plan to have students do a moodboard and Style Tile as part of their final projects. (A free Style Tile template was provided by Adobe Education Exchange.)

View my completed assignments here: