personal website proposal
-
Upload
brooke-martin -
Category
Documents
-
view
223 -
download
0
description
Transcript of 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
BROOKE ANDERSON 2Interface Design • Personal Website Proposal
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
BROOKE ANDERSON 3Interface 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 4Interface Design • Personal Website Proposal
Mood Board
BROOKE ANDERSON 5Interface Design • Personal Website Proposal
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:
BROOKE ANDERSON 6Interface Design • Personal Website Proposal
Site Map
BROOKE ANDERSON 7Interface Design • Personal Website Proposal
Thumbnails
BROOKE ANDERSON 8Interface Design • Personal Website Proposal
WireframesHome Page - Portfolio
Image expands when hovered over, neighboring images smooth and shows project title.
BROOKE ANDERSON 9Interface Design • Personal Website Proposal
WireframesProject Pages
Project Page A shows a project with three images, while Project Page B shows a project with four images.
A B
BROOKE ANDERSON 10Interface Design • Personal Website Proposal
WireframesPortfolio Return/Hover, About Me & Contact Page
portfolio hover about me
contact
BROOKE ANDERSON 11Interface Design • Personal Website Proposal
First CompsHome Page - Portfolio Home Page - Portfolio Dropdown Menu
BROOKE ANDERSON 12Interface Design • Personal Website Proposal
First CompsHome Page - Portfolio Image Hover
BROOKE ANDERSON 13Interface Design • Personal Website Proposal
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
BROOKE ANDERSON 14Interface Design • Personal Website Proposal
First CompsProject Page B - 4 Photos
BROOKE ANDERSON 15Interface Design • Personal Website Proposal
Hi- Fi’s Home Page
BROOKE ANDERSON 16Interface 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 17Interface Design • Personal Website Proposal
Hi- Fi’s Project Page • 3 Photos
BROOKE ANDERSON 18Interface Design • Personal Website Proposal
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.
BROOKE ANDERSON 19Interface Design • Personal Website Proposal
Hi- Fi’s Project Page • 4 Photos
BROOKE ANDERSON 20Interface Design • Personal Website Proposal
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.
BROOKE ANDERSON 21Interface Design • Personal Website Proposal
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?
BROOKE ANDERSON 22Interface 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 23Interface 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 24Interface 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 25Interface Design • Personal Website Proposal
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