gabetippery.com - Version 2.0
FIELDS:Web Design, Interaction Design, UI/UX
Description
A responsive, mobile-friendly redesign of my personal portfolio site.
Copyright Info
- Featured on:
-
AIGA Member Gallery
- gabetippery.com - Version 2.0Winter 2012
- gabetippery.com, my personal site, has been in need of an update for quite sometime. The previous design was based on what I could easily teach myself about coding from web searches and library books in a single weekend.For this design, I decided to take a course in HTML, CSS, and Javascript taught by Jeremy Patterson at ACCAD on Ohio State campus.This redesign was built on top of the "beautiful boilerplate for responsive, mobile-friendly development" Skeleton. It was coded using HTML, CSS, and Javascript using the wonderful TextWrangler App by Bare Bones Software for OS X. The slab-serif typeface used is "Bitter," integrated via Google Web Fonts.Unfortunately, this design will not be going live, as I have decided instead to use the wonderful service, ProSite, right here at Behance.
Redesigned Site - gabetippery.com Version 2.0
Original Site - gabetippery.com Version 1.0
Primary Navigation: Static on desktops and tablet devices.Static Contact Panel: Slides out from right side.
Content Show/Hide Toggle: To allow for easy one-page navigation without overwhelming the user with content. Images display in "lightbox" effect via javascript.
Responsive Grid based on CSS media queries reflows content for various screen sizes.- Responsive Grid based on CSS media queries reflows content for various screen sizes - 1 column at mobile sized screens.
- On mobile devices, Primary Navigation sticks to the top of screen via Javascript so that it is always present.
Discuss This Project: ( Comments)