SWEETUMS: Web Design Project
01. ABOUT THE PROJECT
Hi! My name is Ji Brust and I present to you my final responsive web design project: Sweetums! This is a website for a candy, food and beverage company from the television show, Parks & Recreation.
In this iterative project, I was able to take the client's brand requirements and complete the entire product cycle. I was able to draft the copy/content, sketch-up the wireframes, create high-fidelity mock ups, code the HTML and CSS, and finally, add in responsiveness using media queries.
02. TYPE & COLOR PALETTE
Caveat Brush headings were paired with Montserrat body text.
03. COPYRIGHT / CONTENT DESIGN
The first step of this project was to plan the content. I did this by completing a Website Discovery Questionnaire. Essentially, this document helped me identify my client, their users and their site goals.
The result was a text outline as well as the images and graphics (with filenames for assets and the "alt text" for the images) to fulfill my client's requests. The goal was quality over optimization at this stage.
The most difficult part of this assignment was finding free, high resolution images using Pexels or Pixabay!
04. WIRE-FRAMING / MOCK-UPS
I used AdobeXD to create mobile, tablet and desktop wireframes and mock-ups for all of my pages.
Since the purpose of the wireframes were to see the overall layout of the pages (as well as the general usability/flow), I used low-fidelity "box" depictions as placeholders for the images and the text.
The purpose of the mock-ups were to see the content in high-definition (i.e. full color, typography, size of text and images), as well as make strategic responsive-web design choices.
05. HTML / CSS
In actually coding the website, I made the following adjustments:
Accessibility issues:
1. Video best practices like having a pause and play button (rather than auto-play), prevent motion-sickness
2. Contrasting the text color and background-color of the buttons, making sure they are readable
3. Making sure every image has an "ALT text" for accessibility and a page description for SEO purposes
Layout issues:
1. Putting headers in all the semantic HTML tags (this meant that I had to create a ".hidden" class in the CSS at times)
2. Using padding and margins (for spacing, not positioning!)
3. Using flex box and grid layout for positioning!
4. When to appropriately add divs to group content
I referenced w3c a lot for generic code snippets. I also learned how to use the dev tools (inspector) to help debug!!! I also learned how to be more "efficient" in my CSS selectors and avoided adding ids and classes to everything.
05. FULLY RESPONSIVE
I started designing the mobile (at 320px) first, and then began to transition into tablet and desktop. I was able to set up break points for each of my devices and write in the media queries. It was really interesting process going through each element, seeing what looked WONKY and adjusting the width (from a fixed pixel width to a responsive %). This stage required a lot of inspecting and testing over multiple browsers (Firefox, Chrome, Safari, etc.).
06. NEXT TIME
If I had to do this project again, I would try to keep in mind the developer's POV. Before this project, I was solely thinking from the perspective of a UI designer. I would forget that the site needs to actually be coded and that there were more strategic ways to design a website (that are more cost-effective, time-effective and actually simpler for the user).
