sam's website
a good example of branding, wire-framing and web design.
Sam needed a portfolio, and he hired me to help.
He's an architect with a knack for bold, clean design; something he wanted to highlight with a modern website design and plenty of photographic evidence.
The problem with his current portfolio? Viewers couldn't connect project to skills very easily. Let's change that.
site requirements
required pages
home
resumé
about
contact
architecture (current)
architecture (archive)
sounds
visuals
resumé
about
contact
architecture (current)
architecture (archive)
sounds
visuals
purposes
describe sam's design skills
highlight his CAD modeling
ultimately, get him a new job
highlight his CAD modeling
ultimately, get him a new job
must-haves
the color: cosmic latte
lots of photos
minimal text
lots of photos
minimal text
aesthetic goals
clean
modern
bold
photo-driven
modern
bold
photo-driven
who is the user?
potential employers
what do they care about?
easy site navigation
easy to understand
Sam's skill level
how to get in touch with him
easy to understand
Sam's skill level
how to get in touch with him
because of what the users
care about, what should I
focus on?
care about, what should I
focus on?
1. really good information arch
2. good contact form
3. highlighting Sam's skills
2. good contact form
3. highlighting Sam's skills
let's find some inspiration
clean
white-space
simple colors
minimalist
simple colors
minimalist
modern
small text
grid structure
simple IA
grid structure
simple IA
bold
dark palette
big photos
cosmic latte
big photos
cosmic latte
photo-driven
photo-heavy (duh)
font over photo
high contrast
font over photo
high contrast
some lo-fi ideation
color and font exploration
slightly higer-fi wireframes
( and the introduction of the coolest color ever )
hi-fi illustrator mocks
sam requested that I not include photos.
