Lips&Lips Online Store

Frontend Development / HTML / CSS / UI Design / UX Design

About

This project is done in a two-person team using software tools Bracket and GitHub with HTML and CSS as programming Languages. The project is from the class IAT 339 which is a course about the approaches for technical aspects such as content management, responsive design, and server-side support. In this project, we are asked to design and develop a website for an online store. The final website must be responsive with good usability for users.

Design

My main role in this project is programing (web development). Before the programming begin, I discussed the layout with color and typography choices with my teammates. To let users find the information they need on the website easily, I decide to make the layout as simple as possible to display the information clearly on the page. For a page with less information, I split the page in half which gives the user a clear view of different areas. For the page with more information, I split the page into three different sections for different information, and it makes the information organized on the page.

Programming

Since the layout of our website is either vertical aligned or horizontal aligned, we decide to use flexbox for developing our responsive website. I began with a container that has the display property set to flex. For the pages split in half, I added two columns and set their flex-basis to 50%. For the pages that have three sections, I set their flex-basis to 33.3%. In the end, to make the website responsive to the smaller size of the screen, I used media queries to stack the columns together.

Reflection

As an online shopper myself, the things that annoyed me the most of the time are the complex contents and squeezed texts. In this project, our simple layout design provides more space between different elements and minimum decoration gives a clean look which helps users to find the important information easier and faster.