How to Mock Up a Website Design (simple, general, and useful)

There are tonnes of templates for all the platforms that websites and web applications are built upon. There a sea full of designs that can be spun from frameworks and theme makers, almost all of these come from tools like GIMP or photoshop or Illustrator. One can rig a theme in photoshop and then go slicing it up for your favourite Content management system.

Before I start let me go by saying that I will only mention broad steps without going into menus and options. So I would assume that you would have basic working knowledge of one of your favourite graphics editor.

responsive devices showing responsive builder website in loft office mockup

1. Creating Layers: organising elements and nesting them up in layers is a good idea. For example a folder for header with separate sub layers for Header text, logo, icons, search, background, etc. Create layers for what you feel should be separately organised, for example: Header, Footer, Body, Social media elements, Sidebars, Advertisement space in each area, element groups for each area, etc.

2. Decide on a theme or layout: Decide on what layout you need. Will it be a double sidebar design, will it have a sidebar at all. Will it be a showcase inspired rolling theme with full width? What all do you want the footer to accommodate and how many columns it must have? So answering these questions and making a rough layout helps. Sketch it in a scratch book using your tablet or plain paper. This should help you be clear about your design and stick to the basic framework.

3. Follow a grid: you can turn snapping on and use a grid (or guide lines) for easy organising and drawing various spaces. Keep spacing where you want and stick to uniform pixel size across the design. Each element will need aligned to a guide at a certain level. You want a guide line each for ending of one element and starting another for keeping consistent spaces between each. Then you would need guiding lines for icons and buttons, wherever you want to align them.

4. Drawing the shapes: Draw the shapes of different elements with ease by just creating a shape, then setting the outlines and layer effects. You may use smart objects or shapes if you want to make the theme to be responsive. Again, using snap to grid function will make it easy for you to quickly draw your shapes.

5. Effects and shadows: You can add photoshop layer effects and copy the effect over to different layers. For example if you want borders of a certain type to all elements, make the effect on one element and then copy it over to all the other elements that you so desire.

6. Adding dummy text after choosing fonts: You need to present a sample headline and body font and then fill up the template with sample text. Elements like Quotes, widgets, images and sample theme logo in the header give the template a complete look. This is how one would know how a finished website can look with this design.

7. Slicing your design: After you are done, you would need to slice your design into a usable format. Photoshop will create the required CSS/HTML code for sliced images. When used with a Content management system like Wordpress, this will reassemble the sliced parts back perfectly.

So these were the basic overall steps needed to create a simple web design. Although you will need to get into technical details, I hope you will get the idea on how to approach the concept. Thanks for reading.

Photo credits: Georgejmclittle.

Your article must be written in English

Publish
Related image searches
Mockup related image searches