Case Study for www.tiflindesign.com Website Design Created By Tiffany Lin 10/2013 V1
Case Study for www.tiflindesign.com Website Design
philosophy Understanding and witnessing transitions between content and visual design play big in my work and the process in which I work. The relationship between those two items ultimately brings focus to the message of the project and how that message will be communicated to the client’s audience.
To bring that story to the forefront means providing the audience with a solid foundation (simple backgrounds), focused presentation (large images, clear categories), a narrative to follow (process sketches, case studies), and personalization (an about page with resume and philosophy copy to cater to freelance projects and larger companies/agencies. Along with links to my online personalities).
Page 2
Case Study for www.tiflindesign.com Website Design
Page 3
Audience
Site Goals
Freelance Clients
Easy to use, intelligent G/Ui/x
(Artists, Museums, Non Profits, Small Business)
Portfolio to show:
Design Firms/Agencies and Tech Startups
Scope, Consistency, Process, Voice
(Art Directors, Creative Directors)
Work Experience to show:
Non-Design Companies
Team and lead experience, growth, stability
(Marketing Leads)
Web Presence/Reputation (social media links, blogs)
Colleagues
Contact Info
Case Study for www.tiflindesign.com Website Design
inspiration
Page 4
Case Study for www.tiflindesign.com Website Design
mood board
Page 5
Case Study for www.tiflindesign.com Website Design
map
home
index.html
projects
#projects
contact #contact
project details
/project-name
Page 6
Case Study for www.tiflindesign.com Website Design
Sketches
home projects
project details
contact Page 7
Case Study for www.tiflindesign.com Website Design
Projects Page Development original
Side Nav
visual cue TOP top Nav
Page 8
Case Study for www.tiflindesign.com Website Design
1023 px
wireframes
TEXT HERE
TEXT HERE 1660 px
Page 9
Case Study for www.tiflindesign.com Website Design
wireframes
TEXT HERE
TEXT HERE
PROJECT NAME
Page 10
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECTS
CONTACT
PROJECT NAME PROJECT NAME PROJECT NAME PROJECT NAME
Page 11
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECTS
CONTACT
PROJECT NAME PROJECT NAME PROJECT NAME
PROJECTS CONTACT
PROJECT NAME
Page 12
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECTS
CONTACT
PROJECT NAME PROJECT NAME PROJECT NAME PROJECT NAME
TOP
Page 13
Case Study for www.tiflindesign.com Website Design
wireframes PROJECT NAME PROJECT NAME
PROJECT NAME PROJECT NAME TOP
Page 14
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECT NAME This album is a collaboration between an electronic musician and an acoustic instrument player. The album represents a melding of old and new. I’ve decided to use mixed fonts and simple shapes and lines to call back on old theater posters, but using clean lines to give a sense of the modern. This album is a work in progress and will be screen printed.
Page 15
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECT NAME
This album is a collaboration between an electronic musician and an acoustic instrument player.
Page 16
Case Study for www.tiflindesign.com Website Design
wireframes PROJECT NAME PROJECT NAME
PROJECT NAME PROJECT NAME
Page 17
This album is a collaboration between an electronic musician and an acoustic instrument player.
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECTS
CONTACT
PROJECT NAME PROJECT NAME PROJECT NAME PROJECT NAME
Page 18
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECTS
CONTACT
PROJECT NAME PROJECT NAME PROJECT NAME PROJECT NAME CONTACT
Semiotics sriracha aliquip Vice, velit seitan jean shorts synth single-origin coffee stumptown nesciunt cillum hoodie. Tofu hella kogi, Carles Austin et umami
Page 19
CONTACT
Semiotics sriracha aliquip Vice, velit seitan jean shorts synth single-origin coffee stumptown nesciunt cillum hoodi
Case Study for www.tiflindesign.com Website Design
wireframes
PROJECTS
CONTACT
CONTACT Semiotics sriracha aliquip Vice, velit seitan jean shorts synth single-origin coffee
ABOUT
Semiotics sriracha aliquip Vice, velit seitan jean shorts synth single-origin coffee stumptown nesciunt cillum hoodie. Tofu hella kogi, Carles Austin et umami chillwave tattooed single-origin coffee. Letterpress enim XOXO, YOLO
(c) 2013 by Tiffany Lin
Page 20
CONTACT
Semiotics sriracha aliquip Vice, velit seitan jean shorts synth single-origin coffee stumptown nesciunt cillum hoodi
ABOUT
Semiotics sriracha aliquip Vice, velit seitan jean shorts synth single-origin coffee stumptown nesciunt cillum hoodie. Tofu hella kogi, Carles Austin et umami chillwave tattooed single-origin coffee. Letterpress enim XOXO, YOLO
Case Study for www.tiflindesign.com Website Design
Styles FONTS novecento wide
logo
HEADINGS Sub Headings
lato regular
Fashion axe mlkshk next level farm-to-table, ex est locavore laborum Schlitz ethical forage Williamsburg Pinterest letterpress retro. Cosby sweater Godard PBR Wes Anderson drinking vinegar Schlitz. Ut synth sartorial High Life. Echo Park gluten-free fugiat pickled narwhal gentrify seitan, eu mixtape. DIY nesciunt bicycle rights, sriracha laborum ennui minim placeat. Bushwick Tumblr readymade adipisicing id.
Colors
Elit veniam Pitchfork typewriter, mixtape art party whatever culpa assumenda PBR.
Page 21
Case Study for www.tiflindesign.com Website Design
Hi-Fi
CONTACT Email : Tiffany@tiflin.com Tweet @tiflin
about Tiffany works in her cozy Seattle studio, next to a photo of a gray wolf. She's been freelancing
for
years
and
almost
everything she's learned about design is self taught. She’s worked with: Demand Media Apex Learning Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 22
Case Study for www.tiflindesign.com Website Design
Album Design
Hi-Fi
Lava Theif Records Projects Album
Contact Design
Lava Theif Records Album Design
Rosoka Software
CONTACT Email : Tiffany@tiflin.com
Brand ID & Collateral & Information Graphics
Soapworks Studio Website Design
Tweet @tiflin
about Tiffany works in her cozy Seattle studio, next to a photo of a gray wolf. She's been freelancing
Seattle Phonographers Union
for
years
and
almost
everything she's learned about design is self taught.
Album Design
She’s worked with: Demand Media Apex Learning Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 23
Case Study for www.tiflindesign.com Website Design
Hi-Fi
Projects
Contact
Lava Theif Records Album Design
Rosoka Software
Brand ID & Collateral & Information Graphics
Soapworks Studio Website Design
Seattle Phonographers Union Album Design
LavaCONTACT Theif Records Album Design
Email : Tiffany@tiflin.com
Tweet @tiflin Rosoka Software Brand ID & Collateral & Information Graphics
about
Tiffany works in her cozy Seattle studio,
Soapworks Studio
next to a photo of a gray wolf. She's been Website Design
freelancing
for
years
and
almost
everything she's learned about design is
Seattle Phonographers Union She’s worked with:
self taught.
Album Design
Demand Media Apex Learning
Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 24
Case Study for www.tiflindesign.com Website Design
Hi-Fi
Projects
Contact
Lava Theif Records Album Design
Rosoka Software
Brand ID & Collateral & Information Graphics
Soapworks Studio Website Design
Seattle Phonographers Union Album Design
LavaCONTACT Theif Records Album Design
Email : Tiffany@tiflin.com
Tweet @tiflin Rosoka Software Brand ID & Collateral & Information Graphics
about
Tiffany works in her cozy Seattle studio,
Soapworks Studio
next to a photo of a gray wolf. She's been Website Design
freelancing
for
years
and
almost
everything she's learned about design is
Seattle Phonographers Union She’s worked with:
self taught.
Album Design
Demand Media Apex Learning
Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 25
Case Study for www.tiflindesign.com Website Design
Lava Theif Records Album Design
Hi-Fi The Cessation Elegy The album represents a melding of old and new. I've decided to use mixed fonts and simple shapes and lines to call back on old theater posters, but using clean lines to give a sense of the modern. This album is a work in progress and will be screen printed.
Lava Theif Records Album Design
Projects
Contact
Lava Theif Records Album Design
Rosoka Software
Projects
Brand ID & Collateral & Information Graphics
Soapworks Studio Website Design
Seattle Phonographers Union Album Design
contact CONTACT Lava Theif Records Email : Tiffany@tiflin.com
Rosoka Software Brand ID & Collateral & Information Graphics
Tweet @tiflin
about Tiffany works in her cozy Seattle studio,
Soapworks Studio next to a photo of a gray wolf. She's been freelancing
for
years
and
almost
everything she's learned about design is
Seattle self taught. Phonographers Union She’s worked with: Demand Media Apex Learning
Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 26
Case Study for www.tiflindesign.com Website Design
Hi-Fi Lava Theif Records Album Design
The Cessation Elegy The album represents a melding of old and new. I've decided to use mixed fonts and simple shapes and lines to call back on old theater posters, but using clean lines to give a sense of the modern. This album is a work in progress and will be screen printed.
Lava Theif Records CONTACT Album Design Email : Tiffany@tiflin.com Tweet @tiflin
about Tiffany works in her cozy Seattle studio, next to a photo of a gray wolf. She's been freelancing
for
years
and
almost
everything she's learned about design is self taught. She’s worked with: Demand Media Apex Learning Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 27
Case Study for www.tiflindesign.com Website Design
Hi-Fi Lava Theif Records Album Design
Lava Theif Records CONTACT Album Design Email : Tiffany@tiflin.com Tweet @tiflin
about Tiffany works in her cozy Seattle studio, next to a photo of a gray wolf. She's been freelancing
for
years
and
almost
everything she's learned about design is self taught. She’s worked with: Demand Media Apex Learning Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 28
Case Study for www.tiflindesign.com Website Design
Hi-Fi
Projects
Contact
CONTACT Email : Tiffany@tiflin.com Tweet @tiflin
about Tiffany works in her cozy Seattle studio, next to a photo of a gray wolf. She's been freelancing for years and almost everything she's learned about design is self taught. She’s worked with: Demand Media Apex Learning Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and Recreation The White Center Community Association
CONTACT Email : Tiffany@tiflin.com Tweet @tiflin
looking for tiffany lin, musician? visit www.tiflin.com (c) 2013 Tiffany Lin
about Tiffany works in her cozy Seattle studio, next to a photo of a gray wolf. She's been freelancing
for
years
and
almost
everything she's learned about design is self taught. She’s worked with: Demand Media Apex Learning Novo Fogo Organic Cachacas The Wing Luke Museum Prefecture Music City of Seattle Dept. of Parks and
Page 29
Case Study for www.tiflindesign.com Website Design
Citations Sites for Inspiration 1. http://bjoernmeier.com/ 2. http://brokentwill.co.uk/ 3. http://gavinpotenza.com/ 4. http://www.omfgco.com/
Images Title Page: “View from Lake Ann, at the edge of Mt Baker Ntnl Forest.” Tiffany Lin, August 2013. Hi Fi Home Page (22) : “View from Lake Ann, at the edge of Mt Baker Ntnl Forest.” Tiffany Lin, August 2013. Hi Fi Project Page (24, 25, 26) : “Near Lower Curtis Glacier.” Tiffany Lin, August 2013 Product Detail Mockup Background (28) : http://www.behance.net/gallery/Outsiders-Artwork/10362083
Mood Board 1. http://totokaelo.com/ 2. http://designspiration.net/image/2041752651862/ 3. http://www.flickr.com/photos/martonjancso/6243909354/in/faves-paulgrech/ 4. Vintage travel poster of Greece designed by Freddie Carabott 1960’s #kitsakis http://www.pinterest.com/pin/8162843046308821/
Page 30
Case Study for www.tiflindesign.com Website Design