Brooke Anderson Design
personal website proposal Project 1 • Interface Design •Scott Mansfield • Wed 545
Table of Contents User Descriptions Concept Statement Inspirational Websites Mood Board Style Guide Site Map Thumbnails Wireframes First Comps Hi-Fi’s Sources
BROOKE ANDERSON
Interface Design • Personal Website Proposal
1 2 3 4 5 6 7 8 11 15 25
User Descriptions Who Looks At My Site? Creative Directors Art Directors PR Personnel Clients Students Teachers Friends Family
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 moreshowcase 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.
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).
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.
BROOKE ANDERSON 1
Interface Design • Personal Website Proposal
Concept Statement 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!
BROOKE ANDERSON 2
Interface Design • Personal Website Proposal
Inspirational Websites
Ben Barry
Ben Hulse
Cast Iron
Charlotte Tang
Cymetriq
Kendra Schaefer
M1
Morten Claussen
Olly Gibbs
Paul Currah
Ryan Scherf
Scribble Tone
BROOKE ANDERSON 3
Interface Design • Personal Website Proposal
Mood Board
BROOKE ANDERSON 4
Interface Design • Personal Website Proposal
Style Guide LOGO:
PAT TERN/TEXTURE:
COLOR SWATCHES:
TYPEFACES: Logo rock salt
Brooke Anderson Design logo Pantone 5523 U R: 188 C: 26 G: 219 M: 4 B: 217 Y: 14 #bcdbd9 K: 0
Pantone P 179-15 C R: 51 C: 69 G: 51 M: 63 B: 51 Y: 62 #333333 K: 58
Pantone P 170-15 C R: 66 C: 60 G: 65 M: 55 B: 64 Y: 54 #424140 K: 53
HEADING PT SANS • BOLD • ALL CAPS
ABCDEFGHIJKLMNOPQRSTUVWXYZ Body • Size 18pt Pt Sans • Regular • Initial caps
Pantone 7539 U R: 70 C: 67 G: 70 M: 60 B: 71 Y: 58 #464647 K: 42
Pantone Cool Gray 2 C R: 215 C: 15 G: 215 M: 11 B: 215 Y: 12 #d7d7d7 K: 0
BUTTONS:
Pantone P 124-11 U R: 153 C: 40 G: 204 M: 5 B: 204 Y: 20 #99cccc K: 0
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 123456789 nav • size 24pt pt sans • regular • small caps abcdefghijklmnopqrstuvwxyz
BROOKE ANDERSON 5
Interface Design • Personal Website Proposal
Site Map
BROOKE ANDERSON 6
Interface Design • Personal Website Proposal
Thumbnails
BROOKE ANDERSON 7
Interface Design • Personal Website Proposal
Wireframes Home Page - Portfolio
Image expands when hovered over, neighboring images smooth and shows project title.
BROOKE ANDERSON 8
Interface Design • Personal Website Proposal
Wireframes Project Pages A
B
Project Page A shows a project with three images, while Project Page B shows a project with four images.
BROOKE ANDERSON 9
Interface Design • Personal Website Proposal
Wireframes Portfolio Return/Hover, About Me & Contact Page portfolio hover
about me
contact
BROOKE ANDERSON 10
Interface Design • Personal Website Proposal
First Comps Home Page - Portfolio
Home Page - Portfolio Dropdown Menu
BROOKE ANDERSON 11
Interface Design • Personal Website Proposal
First Comps Home Page - Portfolio Image Hover
BROOKE ANDERSON 12
Interface Design • Personal Website Proposal
First Comps 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.
BROOKE ANDERSON 13
Interface Design • Personal Website Proposal
First Comps Project Page B - 4 Photos
BROOKE ANDERSON 14
Interface Design • Personal Website Proposal
Hi- Fi’s
Home Page
BROOKE ANDERSON 15
Interface Design • Personal Website Proposal
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.
BROOKE ANDERSON 16
Interface Design • Personal Website Proposal
Hi- Fi’s
Project Page • 3 Photos
BROOKE ANDERSON 17
Interface Design • Personal Website Proposal
Hi- Fi’s
Project Page • 3 Photos Alt Image
When a different image is selected it becomes full size, while the neighboring images shrink to thumbnail size with a slide motion.
View More Bar
Scrolling to the bottom of the page exposes a new set of navigational links to change projects by clicking their thumbnail.
BROOKE ANDERSON 18
Interface Design • Personal Website Proposal
Hi- Fi’s
Project Page • 4 Photos
BROOKE ANDERSON 19
Interface Design • Personal Website Proposal
Hi- Fi’s
Project Page • 4 Photos Alt Image
Project Page • Get Home
From any screen clicking on the logo will take you to the home page.
When a different image is selected it becomes full size, while the neighboring images shrink to thumbnail size with a slide motion. BROOKE ANDERSON 20
Interface Design • Personal Website Proposal
Hi- Fi’s
Home Page • Portfolio Link
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.
When the navigation links are clicked or hovered over they turn blue. The About link is special... Are you paying attention?
BROOKE ANDERSON 21
Interface Design • Personal Website Proposal
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.
BROOKE ANDERSON 22
Interface Design • Personal Website Proposal
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.
BROOKE ANDERSON 23
Interface Design • Personal Website Proposal
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.
BROOKE ANDERSON 24
Interface Design • Personal Website Proposal
Sources SOCIAL NETWORK BUTTONS PINSTRIPE PAT TERN CRUMPLED PAPER TEXTURE STYLE GUIDE INSPIRATION WEB SAFE FONTS MOOD BOARD IMAGERY
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
INSPIRATIONAL WEBSITES
ben barry ben hulse cast iron charlotte tang cymetriq kendra schaefer m1 morten claussen olly gibbs paul currah ryan scherf scribbletone
designforfun.com/index.php benhulse.com castirondesign.com/work/ charlottetang.com cymetriq.hu kendraschaefer.com m1-design.de/start.html mortenclaussen.com ollygibbs.com paulcurrah.com ryanscherf.net scribbletone.com
BROOKE ANDERSON 25
Interface Design • Personal Website Proposal