Sketch of landing page layout, and location of illustrations.
CLIENT: Jewish Community Online, an area of AOL, Keyword: Jewish
CHALLENGE: It was very important that the landing page convey a feeling of friendly inclusiveness. The client wanted an illustration of topics important to the community - family, spirituality, education, culture, etc. — mapped to take users to related pages. An additional, separate version of each topic illustration would appear on the related secondary page.
This sketch of the front page layout and illustrations now shows the following:
• grouped topic illustrations
• divisions of information
• interactive areas (image map/buttons)
• additional navigation and pull-down menus
At this point there were a few rounds of discussions with the client and AOL regarding how the image areas would be mapped.
TOOLS: Pencil, fine-point marker.
The front page layout is now much simplified, with a greater emphasis on the illustrations, a decision made by the client.
I suggested that the second "m" in "Community" be pushed back with a darker color, and that the moon be used to highlight "unity." The client reviewed many examples of illustrative styles before choosing this one. I then designed the logo, navigation buttons, and typography throughout.
Because the site predated high-resolution monitors, the maximum "live" area was only 550 pixels. That required a very simplified drawing style, with strong contrasts in value. I animated the flickering flame above the logo. This comp was created to AOL's specifications, with image areas mapped for testing. With some minor changes, this file was uploaded to AOL.
I drew the thumbnail sketches with pencil and marker. At first they went through many iterations, but once my client approved the style, the rest were created quickly, with only one or two drafts before client approval.
Once approved, each sketch was recreated in Photoshop and exported in the sizes and formats needed for the secondary pages and navigation.
Copyright © 2018 Li Gardiner - All Rights Reserved.