Web Design

Web Design mockups are complex projects that typically have multiple pages, many repeated elements, and interactive animations and buttons with rollover states, which can lead to very complex files. In order to best manage one of these projects, follow the best practices below to ensure that we are all following the same procedures.

Page layouts are created in Illustrator, preferably using the Web Design template as a starting point. Initial concepts are always created as 1366px x 768px for typical laptop viewport, but would be targeted at all breakpoints between 1024 and 1399px). Ensure all content that is above the fold sits within this initial view and increase your artboard to the height of the content.

When generating responsive views, create additional layouts that match the following breakpoints:

• Mobile at 480px (for breakpoints of 320px — 480px)
• Tablet at 768px (for breakpoints of 481px — 768px)
• Small Desktop at 1024px (for breakpoints of 769px — 1024px)
• Large Desktop at 1400px (for breakpoints over 1200px)

If a web project has more than 10 pages, do not attempt to create all page layouts in the same file on multiple artboards. Develop a naming structure that matches the site structure and name your Illustrator source files by section, such as c1a-XXXXX-v1 ClientWeb - About Pages. Also consider creating subfolders within the Creative folder where all individual page layouts can reside.

For the initial creative presentation, a single Illustrator file may contain multiple pages from different sections to demonstrate a concept, but once we begin developing all of the pages of a site, the file structure should move to separate Illustrator files that match either a section template or separate unique pages. Within the page layout files, you will have an artboard for each of the responsive widths.

To consolidate all pages into a single presentation for client review, consider using InDesign as a shell where the pages can be displayed with additional information like page titles and notes, and import the Illustrator files in to a sequential presentation. As revisions get made to the page layouts, new presentations can be updated more quickly by simply linking each page to the updated layout files. The Indesign file can also contain hyperlinks back and forth to different pages, separate from the layout, which will remain persistent through multiple iterations of the file.