In this second part I’ll show you how to convert your mockup into an actual design. I’ll use Photoshop but every other design tool will be as good.
As a starting point I used the Photoshop template provided on 960.gs. All vertical guidelines are set up perfectliy. I Import my Mock-Up and put it into a locked layer set with reduced opacity on top of all layers as a guide.
Then I design the content of my mock-up according to the 960 Grid. To push myself out of the comfort zone I don’t use a minimalistic design approach, but implement tricky elements such as non-standard fonts, textured background, rounded corners, slideshows and transperent elements. But I ensure to have a clear and consistent design and think of all elements and states (mouse over, active elements).
