Pet Care Hero Section: First Steps Toward a Responsive UX
Hey Uxcelers!
Here’s an initial exploration of the Hero section for a Pet Care website. The design emphasizes creating a warm, welcoming experience that fosters trust while ensuring smooth adaptation for both tablet and mobile devices.
Desktop
Tablet (Portrait)
Mobile (Portrait)
------------------------------
This was just the first approach! In a second iteration, I’ll cover a deeper exploration, addressing all these breakpoints:
- Mobile Devices:
- Small Mobile (Portrait): 320px – 480px
- Large Mobile (Portrait): 481px – 767px
- Tablets:
- Small Tablets (Portrait): 768px – 1024px
- Large Tablets (Landscape): 1025px – 1280px
- Laptops and Desktops:
- Small Laptops (Desktop Portrait): 1281px – 1440px
- Standard Desktops: 1441px – 1920px
- Large Desktops:
- Widescreen and Ultra-Wide Monitors: 1921px and above
Expect the second showcase soon, where we’ll dive into these breakpoints in more detail. Stay tuned!
Tools used
From brief
Topics
Share
Reviews
1 review
Great job here, I like the creativity used to represent the business and the brand. Nothing to point out really.
Although I think that you picked a very easy page to do this exercise. :P
Would like to see how you would manage a more complex page, with different blocks of content on 3 different viewport sizes / media query sizes.
In any case, cute page. Love the logo and the landing page visuals.
I loved it!! You made me thirsty to see the rest of the project
You might also like
Entrant Accessible Signup and Login Forms
A/B Testing for Bumble's Onboarding Process
CJM x Mindspace case study - Ester Cinelli
Dark mode Main page
LUMÉRA - Checkout Flow
Tripit's Login and Sign Up Flow
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
