Web Design Projects
Client Portfolio Re-Design
For this project I worked in a team with 2 other people, where we each filled the roles of engineer, designer, and product manager.
We received a brief from our client of how she wanted her new site to look, which we used to decide layout, color scheme, and basic functionality.
In this project we used flex and grid layouts as needed, and adapted media queries for desktop, tablet, and mobile views. We took the content from her original site, and manipulated certain features to present the information in an interesting, yet readable way. This involved deciding which pages to keep or get rid and how to best organize the information that she wanted to present.
Checkout the original site here (original site), and the one we created here (new site)!
Web Design Class Portfolio
I coded this website myself using HTML, CSS, and Javascript, as well as media queries while focusing on accessibility and responsive design. (Located here: https://kennysha.github.io/ )
I used two media queries to adapt to tablet and desktop views, as well as flex and grid layouts as needed.
In creating this project, I the main issue I struggled with was responsiveness. Although the media queries worked when I changed the size of my browser using chrome, they failed to work properly on actual smaller devices, for both tablet and mobile views. Since after countless hours pouring over this problem I could not find a solution, I chose not to use it as my actual portfolio website. I still include this in my work, however, to show my hard work, experience and capability with web design, as well as the creativity I was able to bring to this project.
Another challenge I faced during this project was difficulty simply trying to place elements where I wanted them within the space. It’s because of this issue, that I realized how important it was to keep the original HTML data structure as simple and semantic as possible.
What I enjoyed most about this project was the endless customizability of colors and fun animated graphical features. If you explore the site and hover over certain things, you will see what I mean :)
“Behind the scenes” - see more about this project at https://github.com/kennysha/kennysha.github.io
Graphic Design Projects
Infographic Project
I developed this Infographic for a class project by choosing a topic (my favorite flower) and researching information about it. I then decided which pieces of information I wanted to keep, and how to arrange this text around my chosen visuals to produce an elegant, sophisticated, readable layout.
Elements of this infographic include:
Typography: I chose two main typefaces
Color harmony: I created a soft, calming complementary color scheme
I was provided the map and radial graph templates by my class, and manipulated the groupings and colors to create the look I was going for
I created the bar graph at the top of the second page by hand
I used 2 watercolor photos of the flower that I found available online.
Sources:
Images - watercolor #1 https://cz.pinterest.com/pin/344525440235851601/?lp=true, watercolor #2 artist - Jessica Yelverton
Text - https://www.illinoiswildflowers.info/weeds/plants/lilyvalley.html, https://www.gardenguides.com/13426295-what-is-the-meaning-of-lily-of-the-valley.html, http://www.softschools.com/facts/plants/lilyofthevalley_facts/2110/, https://www.missouribotanicalgarden.org/PlantFinder/PlantFinderDetails.aspx?kempercode=c250, https://www.gardenershq.com/Convallaria-Lily-Valley.php, https://www.webmd.com/vitamins/ai/ingredientmono-289/lily-of-the-valley, https://upgardener.co.uk/lily-of-the-valley/
1Cademy Logo
I assisted with creating the final logo design for a platform called 1Cademy. We ultimately decided on two different versions of the logo, one for lightmode (on a light background) and one for darkmode (on a dark background). The animation shown here was created by a different team member and appears while the webpage loads.
