Resources: Design & Interactive

Website Layout Template

Overview

It is common for the Visual Design for web pages to executed in Photoshop.
This template is set up to work with the Wordpress DIVI Builder plugin and theme, but can be used to design sites that will be built using other methods as well.
Keep in mind that DIVI Builder can work with any theme, but using it as the built-in plugin within the DIVI theme allows you to start with a blank page.
This is a 4x scale layout that will allow you to scale images up and down without losing resolution.
The template only sets widths. Heights can be variable.
Perform all of your layout and image editing in a single file and utilize layers in folders to turn pages on and off.
Use only Google Fonts. Most others are not web-compatible.

Download the .psd Layout Template

When viewing images in the .psd layout, assess them at 25% scale
The goal, on export, is to create the smallest file size with acceptable (not perfect) quality.
Use the "save for Web" export tool.
Save as JPEG: medium quality. Then, assess image quality and increase compression quality incrementally as needed.
For flat art and graphics, try PNG8 (or PNG 24 if transparency is needed) . You may get smaller file sizes.
Use these image widths upon export (height can vary)
- - 1/4 column: 360 px
  - 1/2 column: 720 px
  - 3/4 column: 1080 px
  - 1/3 column: 480 px
  - 2/3 column: 960 px
  - Full content width: 1440 px
  - Full page width: 1920 px
note: any image that will be viewed in a single column width on a tablet vertical viewport should be 720 px

Set your layout file image width to 5760 px and image height to 4320px
Set a guide at 0 (horizontal) and 5760 (Horizontal)
Set quarter column guides: 1440, 2880, 4320
Set third guides: 1920, 3840
Lastly Increase canvas to 7680 (this will provide a wide area for full screen headers and other elements)

Google Sites

Report abuse