Jason Goldstein
UX/UI Designer

Responsive Design

Thinking About Breakpoints

Responsive Design

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


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.

Responsive Design

Large screen (1440)

Larger Screen

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

Responsive Design

Tablet (768)


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

Responsive Design

Mobile (320)


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.