In an effort to improve my skills in web design, I volunteered Spring ‘12 to re-design the
UCSB Writing Minor’s website. It was my first time building a website without wordpress.
Sufficed to say, there was a steep learning curve. However, the experience taught me
considerable lessons in digital design and management which I later incorporated into
other redesigns/my own website.
The purpose of this deck is to demonstrate not only an understanding of the
fundamentals of wireframming and information architecture, but also a mastery of
the tools necessary to make such presentations.
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Business Communications
1. WIREFRAME RECAP: UCSB BIZCOM
UCSB BUSINESS COMMUNICATIONS WEBSITE RE-DESIGN
In an effort to improve my skills in web design, I volunteered Spring ‘12 to re-design the
UCSB Writing Minor’s website. It was my first time building a website without wordpress.
Sufficed to say, there was a steep learning curve. However, the experience taught me
considerable lessons in digital design and management which I later incorporated into
other redesigns/my own website.
(At the time, wireframes consisted of drawings on my bedroom mirror)
The purpose of this deck is to demonstrate not only an understanding of the
fundamentals of wireframming and information architecture, but also a mastery of
the tools necessary to make such presentations.
SPRING 2012
2. WIREFRAME RECAP: UCSB BIZCOM
header
1.0
Home
LOGO HOME
(house 0)
HOME HOME
(house 0)
1.1 1.2 1.3 1.4 1.5 1.6
CLASS OF
HOME ABOUT ALUMNI NEWSLETTER CLIENTS
ABOUT ABOUT ‘12
(house 1)
CLASS OF VIMEO CLASS OF NEWS PDF CLIENTS
CLASS OF ‘12 ALUMNI STUDENTS
(house 2) (embedded) 11
ALUMNI ALUMNI TESTIMONIAL CLASS OF
CLIENTS
(house 3) 10
NEWSLETTER NEWSLETTER PORTFOLIO CLASS OF
PORTFOLIO 09
(house 4)
CLIENTS CLIENTS CLASS OF
(house 5) 08
CONTACT PWM, LINKED, CLASS OF
EMAIL 07
CLASS OF
06
SPRING 2012
3. WIREFRAME RECAP: UCSB BIZCOM
Purpose HOUSE 1
1. Generate interest and educate younger
students about what the writing minor.
2. Exhibit current projects within the minor
and showcase portfolio work. HOME ABOUT CLASS OF ‘12 ALUMNI PORTFOLIO CLIENTS
3. Connect with alumni and demonstrate
growth of the program
Analytics told us that 60% of visitor time on
the old site was spent on alumni, clients, and
portfolio pages, so we wanted to emphasize
those three categories on our homepage
We also wanted to minimize page-loading
time, so we created the page as one long
landscape page with separate “houses” for
each header section ALUMNI CLIENTS PORTFOLIO
HOUSE 1.1 HOUSE 1.2 HOUSE 1.3 HOUSE 1.4 HOUSE 1.5 HOUSE 1.6
CLASS OF
HOME ABOUT ALUMNI NEWSLETTER CLIENTS
‘12
ONE CONTIGUOUS PAGE (links anchored to each “house”)
SPRING 2012
4. WIREFRAME RECAP: UCSB BIZCOM
Alumni ALUMNI HOUSE 1
The writing minor places a large emphasis on
connecting and learning from our alumni,
already in the workforce.
To visually connect current and prospective
students, we created a second “house” to hold Class of ’12 2011 2010 2009 2008 2007 2006
our alumni profiles and also create a fluid
interface for visitors.
This year we also chose to hold a photoshoot,
to align the appearance of our class
I also choose to incorporate student bios in a
lightbox’d profile.
Kellock Irvin
1.0
ALUMNI
1.1 1.2 1.3 1.4 1.5 1.6 1.6
‘12 ‘11 ‘10 ‘09 ‘08 ‘07 ‘06
LIGHTBOX LIGHTBOX LIGHTBOX LIGHTBOX LIGHTBOX LIGHTBOX LIGHTBOX
PHOTO/BIO PHOTO PHOTO PHOTO PHOTO PHOTO PHOTO
SPRING 2012