Personal Portfolio Design: Jenna Guswiler

Introduction

In today’s world, digital designers require a beautiful web presence to get work. My colleague Jenna Guswiler, with whom I won first prize of $1,000 with our Smart Spicerack, wanted a custom web portfolio to stand out against those default looking Squarespace or Wix designs. Jenna is a UI / UX and Product Designer in Chicago, IL and I worked with her to develop a specific and custom website that could show her ability to design a product exactly the way she wanted. This portfolio was build to showcase her User Interface and User Experience work, as well as be a product in itself. The site was built using basic HTML, CSS, and jQuery. The site is hosted on DigitalOcean servers and served using Node.js.

Her site can be accessed here: http://jennagus.com/

Design

We wanted this site to be fluid and responsive.  To achieve this, I created a javascript module to resize the entire page based on the screen width to element height ratio. The landing page clearly illustrates the resizing capabilities I developed.

Screen Shot 2016-12-17 at 5.31.37 PM.png
Landing page for jennagus.com

Custom Javascript

I created several custom JS elements build on top of jQuery. I created a custom gallery view to display screens from Jenna’s work. Below you can see an image of a dashboard she created with several widgets. I worked with jQuery to develop this gallery from scratch, rather than use an open source option.

Screen Shot 2016-12-17 at 5.21.06 PM.png
Custom gallery to display still work. Seen here.

As well as still galleries, I created templates to hold videos to show how the designs would work live. My blog post only allows for still images, but if you link to this page, you will see the videos begin to play and walk through the application.

Screen Shot 2016-12-17 at 5.24.23 PM.png
Left: Video playing inside template, Right: Mobile gallery

Final Thoughts

I enjoyed building this site and I learned a lot about how to build a web site from start to finish. The major difficulties in designing this site dealt with my manual resizing of all DOM elements. Nothing was done using bootstrap. Although I probably should have used bootstrap, I enjoyed the process and feel like I learned a significant amount about how the DOM elements work together.

 

Kyle Franz

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s