katy martin. portfolio website redesign
01 intro 02 current site 05 companion elements 06 fonts & colors 07 redesign 08 inspiration
intro
For this project I would like to redesign my portfolio website. There are a lot of design elements I like about my site that I would like to keep, but the functionality of the site needs a major upgrade.
01
02
current site
This is the home page of my current portfolio website. Upon loading, a short animation takes place as the three categories take form. If the view doesn’t want to view this animation, an interruption of the mouse will cut cut the display short and go straight to the navigation screen. I like this, I feel like it gives the viewer a little bit of a ‘wow’ moment. Right now I’m doing this effect along with a responsive full screen with Edge Animate, and would like to translate some version of this into jquery. Upon hover, I’m overall happy with the icons but may change the hover orientation. The background image is used on various elements of my brand and I am still happy with it.
03
For the layout of my current project display page, I was trying to mimick the layout of Behance. I think this is successful overall, but I do not like how the images can get cut off so you can’t view the whole project at once. Another problem is that this page is not responive so at smaller scales the logo, icons and side bar can overlap the image. I think this page could also benefit from a more intuitive home button and better transitions within the icons and page loads.
04
For pages displaying website projects I currently have an iframe connecting to the real site. Personally I like this, but am not sure it is ‘best practice’. I just wanted to utilze all the advantages to a web portfolio with the fewest clicks and richest exeperience possible. Maybe there are ways to do this without an iframe?
companion elements katymartin. us
THE FAVORITES
7 1 5 . 966 . 1750
MMME MUSI C HO
b e.n et / k_mar tin / i n / k atyma r tin 1
LAZLO MAHO
WOR K UWM UNION MARKETING
J
DCI-ARTFORM
R VEMB E ARCH I NO
FAB IO
T TEC
Glendale, WI June 2014-August 2014 Invisionship Intern 10 week retail science & design program
BLEND STUDIOS Milwaukee, WI Sept 201 1-Sept 2012 Intern/Office Assistant Edit film footage utilizing Adobe After Effects & Premiere
-Deans List at MIAD -Freshman Exhibition Winner (MIAD) -NPG.org Video Scholarship Winner
Motivated
Adaptable
LD GRA HICO PH SC
Communicative
IGNER DES IC
Fast Learner
ACCOMPLISHMENTS
IAN
MIAD Milwaukee Institute of Art & Design Interior A rchitecture Sept 2010-Dec 2011
HITE MU SIC KW AC
JAN T
UW-MILWAUKEE Peck Sch ool of the A r t s BFA in Design & Visual Communication Sept 2012-May 2015 (Intended Graduation)
Milwaukee, WI January 2014-Present Graphic Designer 1 Work with clients to translate ideas into finished designs
AGY PHO Y-N TO LG
APHER GR
SCHOOL
IAN
JOSH UA
kmartin 1 881@gmai l.com
Dependable
-Honor Roll at UWM -UWM Annual Juried Exh ibition -President of AIGA-UWM Student Group
katy martin.
A new addition I would like to make to my site is an interactive resume. I already have this designed resume and would like to keep many of its elements. I would like these elements to display dynamically upon parallax scrolling. I am also interested in somehow having an interactive business card.
05
06
nexa LIGHT ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 BOLD ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
R 255 G 242 B 0 # fff100
R 255 G 255 B 255 # ffffff
R 0 G0 B 0 # 000000
redesign t
ABOUT ME
SKILLS
EXPERIENCE
GOALS
For the home page, I was thinking I would narrow the top portion and add the resume into a paralax scroll underneath this main navigation. When the viewer clicks on a category, I would like the logo to mimick a play button, and then have the whole page slide out to the left leading to the portfolio page. Portfolio pages will have a top navigation bar and each project will have its own banner to display the theme and name of the project. I will keep the Behance infinite scroll, but play around with the display. The project navigation will be displayed genie style on the left side rather than the bottom.
07
08
inspiration
http://www.chanified.com/ I like that this site has an opening animation (mine would not be as long) and how the resume is responding to the scrolling.
http://www.mahedineyahia.fr/ I like that this site has an opening animation (mine would not be as long) and how the resume is responding to the scrolling.
thank you!