personal website proposal

Brooke Anderson Design

personal website proposalProject 1 • Interface Design •Scott Mansfield • Wed 545

BROOKE ANDERSON Interface Design • Personal Website Proposal

Table of ContentsUser Descriptions

Concept StatementInspirational Websites

Mood BoardStyle Guide

Site MapThumbnailsWireframesFirst Comps

Hi-Fi’sSources

12345678111525

BROOKE ANDERSON 1Interface Design • Personal Website Proposal

Who Looks At My Site?Creative DirectorsArt DirectorsPR PersonnelClientsStudentsTeachersFriendsFamily

What Do They Want To See?Creative Directors and Art Directors:Images of projects that are easily accessible and quick to navigate through. Easily found and download able or selectable resume and obvious contact information. Probably a safe bet that less is more- showcase your work, less clutter.

PR Personnel:Resume that is easy to download or select. Obvious contact button.

Clients:Beautiful work and easy navigation with a seriously easy to find call to action! Hire me or contact me button should probably be on every page.

Students:Inspiration! Students are more interested in picking apart your coding, finding how things work and looking at your work to get ideas for their art.

How Do I Persuade Them To...Promote my: designs! I need things to show that are WORTH promoting.Goals of the site are: showcase my work in a way that is easy to understand and navigate, without overwhelming the viewer but still keeping interest. My ultimate message/philosophy (about who you are): “Design is so simple, that’s why it is so complicated.” -Paul Rand I believe that the most promising and beautiful work is the most simple, and conceptual. A picture can say a thousand words, and I want to prove that to you with my designs.What is the story you are telling? Simple is beautiful.

Teachers:Easy and quick navigation. Concept driven work with explanation of work.

Friends:Work that looks “realistic” and makes sense conceptually. Fully functional page that is not hard to understand but that really showcases my work.

Family:Any work posted by their awesome daughter/cousin/niece/relative that they can be impressed by. Must be VERY easy to understand with anything that has an image click-able (basically).

User Descriptions


The main purpose of my website is to show my work to future employers and potential customers. My work should be the focus and star of the website, so I don’t want it to get lost in a messy or cluttered homepage. I want the website to have very intuitive and easy to understand navigation, with the aid of thumbnails and directional arrows to drive users to change projects. In order to grab attention and keep attention on my page I will use variety and show my best projects as well as include large, high quality images. As a designer, and a person, I rely and use humor in my work and my life. It is important to me to reflect who I am to my audience but also to keep my humor aside from my professionalism.

In order to show the best possible me, and best possible projects, I want to hand pick the designs I showcase. My personal logo or name will be in a stationary position on the website along with the navigation to create a feeling of consistency and ease. I will utilize arrows to toggle through projects as well as have click-able links so a user can always easily change what they are seeing. My main goal is create a website that people can browse without fuss or hassle that has an obvious call to action: hire me!

Concept Statement


Inspirational Websites

Ben Barry Ben Hulse Cast Iron Charlotte Tang

Cymetriq Kendra Schaefer M1 Morten Claussen

Olly Gibbs Paul Currah Ryan Scherf Scribble Tone


Mood Board


Style GuideBrooke Anderson DesignLOGO:

COLOR SWATCHES:

logo Pantone 5523 UR: 188G: 219B: 217#bcdbd9

C: 26M: 4Y: 14K: 0

Pantone P 179-15 CR: 51G: 51B: 51#333333

C: 69M: 63Y: 62K: 58

Pantone P 170-15 CR: 66G: 65B: 64#424140

C: 60M: 55Y: 54K: 53

Pantone 7539 UR: 70G: 70B: 71#464647

C: 67M: 60Y: 58K: 42

Pantone Cool Gray 2 CR: 215G: 215B: 215#d7d7d7

C: 15M: 11Y: 12K: 0

Pantone P 124-11 UR: 153G: 204B: 204#99cccc

C: 40M: 5Y: 20K: 0

PATTERN/TEXTURE:

TYPEFACES:Logo rock saltHEADINGPT SANS • BOLD • ALL CAPSABCDEFGHIJKLMNOPQRSTUVWXYZBody • Size 18ptPt Sans • Regular • Initial caps

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz 123456789

nav • size 24pt

pt sans • regular • small caps

abcdefghijklmnopqrstuvwxyzBUTTONS:


Site Map


Thumbnails


WireframesHome Page - Portfolio

Image expands when hovered over, neighboring images smooth and shows project title.


WireframesProject Pages

Project Page A shows a project with three images, while Project Page B shows a project with four images.

A B


WireframesPortfolio Return/Hover, About Me & Contact Page

portfolio hover about me

contact


First CompsHome Page - Portfolio Home Page - Portfolio Dropdown Menu


First CompsHome Page - Portfolio Image Hover


Project Page A - 3 Photos

Full sized image is shown in the box on the left. When another image slice is selected it changes the image in the left box.

First Comps


First CompsProject Page B - 4 Photos


Hi- Fi’s Home Page


Hi- Fi’s Home Page Hover

When hovered over an image on the home page, the selected image will expand and show up in full color. The neighboring images will slide left or right, depending on which image is hovered over. There will also be a banner that fades in on the project to tell the user the title.

Click on the image and you will be directed to it’s project page.


Hi- Fi’s Project Page • 3 Photos


Hi- Fi’sProject Page • 3 Photos Alt Image View More Bar

When a different image is selected it becomes full size, while the neighboring images shrink to thumbnail size with a slide motion.

Scrolling to the bottom of the page exposes a new set of navigational links to change projects by clicking their thumbnail.


Hi- Fi’s Project Page • 4 Photos


Hi- Fi’sProject Page • 4 Photos Alt Image Project Page • Get Home

When a different image is selected it becomes full size, while the neighboring images shrink to thumbnail size with a slide motion.

From any screen clicking on the logo will take you to the home page.


Hi- Fi’sHome Page • Portfolio Link

When the navigation links are clicked or hovered over they turn blue.

Home Page • Portfolio Dropdown

When the sub navigation links are clicked or hovered over they turn blue. Under the Portfolio link you will find projects by their title.

When the navigation links are clicked or hovered over they turn blue. The About link is special... Are you paying attention?


Hi- Fi’s About Page • Scroll Up

Similar to the View More Projects option, the About section is actually tucked into the top of the page. This parallax trick basically hides the upper section unless the user scrolls up, or clicks on the About link. It can be accessed from any page on the website.

This also shows the hover effect for the links listed in the About section.


Hi- Fi’s Contact Page • Resume Download

The Contact page includes an email form. The text in the boxes will disappear when you start typing.

There are three custom button links to Facebook, Linked In, and Blogger.

The Resume button serves two purposes. For one, a user can right click and download a pdf. Secondly, it acts as a click-able link to a web version resume.


Hi- Fi’s Web Resume

The Contact page includes an email form. The text in the boxes will disappear when you start typing.

There are three custom button links to Facebook, Linked In, and Blogger.

The Resume button serves two purposes. For one, a user can right click and download a pdf. Secondly, it acts as a click-able link to a web version resume.


SourcesSOCIAL NETWORK BUTTONS

PINSTRIPE PATTERNCRUMPLED PAPER TEXTURE

STYLE GUIDE INSPIRATIONWEB SAFE FONTS

MOOD BOARD IMAGERY

INSPIRATIONAL WEBSITES

created by • brooke anderson, 2013

created by • brooke anderson, 2013

created by • cgtextures.com

birth2011.blogspot.com

google.com/webfonts

hellohappy.org/beautiful-web-type/

thedesigninspiration.com

thanh vu, 2011 the great gatsby cover art

pinterest.com

ben barry designforfun.com/index.phpben hulse benhulse.comcast iron castirondesign.com/work/charlotte tang charlottetang.comcymetriq cymetriq.hukendra schaefer kendraschaefer.comm1 m1-design.de/start.htmlmorten claussen mortenclaussen.comolly gibbs ollygibbs.compaul currah paulcurrah.comryan scherf ryanscherf.netscribbletone scribbletone.com

personal website proposal

Documents

Transcript of personal website proposal