Exhibit 3

Splash Page for a Class on Time Management

Background:

The small business Continuing Ed Hub develops classes for many professions that need continuing education credits in order to retain their certification. A new class on time management aimed at teachers needed to be brought in to the brand feel of the company.

Design:

  • Color: The company owner did not have any opinions about what colors represented his brand. I went to his website, which had a subdued professional look using low saturation colors. I built a color palette from the text and images on the company webpage. Unfortunately, the company logo contained a blue that competed with the rest of the monochromatic color scheme. I chose to leave that brighter blue out and replaced it with the dark green-gray of the new palette.

  • Font: The Fonts were chosen to match the existing website. The serif font is Playfair Display, and the sans-serif is Montserrat.

  • Proximity: The design was difficult because there were a lot of words. I grouped the title and subtitle, and the Unit number, name, and description together. The start button was placed in the expected position of the lower right corner.

  • Alignment: A Strong left alignment is used for all the of the headings, titles, and company logo. The only breaks from this alignment are the title, which spans the width of the page, and the start button, which is right aligned to match the title.

  • Repetition: The colors of the title and Unit number are repeated in order to clarify the heirarchy. The subtitles and start button also repeat a tone of the site's main color.

  • Contrast: The picture color palette dont' have a strong contrast. I used the darkest shade of the palette to add contrast to the title and unit number. The black logo also adds contrast.

Photoshop Skills Used:

I started by using photoshop to create a color palette to work from. I then imported my photo and used the crop tool to enlarge the borders of the photo using content-aware. I used Select: Color Range and a hue adjusment layer to change the bright turquoise in the image to a more muted green-blue. I then smoothed out the color in a couple areas with the paintbrush and the smudge tool.

Credits:

Photo by Luke Chesser found on Unsplash.

Original Title Page
Company Website

Original Porfolio submission

Revisions

  • Modified the Unit title size and font so that heirarchy was more clear.

  • Made changes to the start button size, alignment, and text color so that it fit better and was clearer to read.