Responsive Design

Thinking About Breakpoints

I was given this screen. It is not my work.

Assignment

As a student project, I was given a screen that had already been designed. It was my job to redesign it for other responsive breakpoints.

I can't take credit for any of the visual design here since it was provided to me.

Large screen (1440)

Larger Screen

First, I redesigned it for a larger screen (1440). I simply added another column of flowers.

Tablet (768)

Tablet

Next, I designed a version for tablet (768). Here, I removed a column from the original screen.

Mobile (320)

Mobile

Finally, I designed for mobile (320). This required the most thought. I had to resize the boxes for each flower, hide the search options in the hamburger menu, and even redesign the functionality of the shopping cart icon.

In a real-world assignment, there is a good chance I would design the mobile version first depending on the nature of the project and the stakeholders. But for this assignment, I was required to start with what I was given.