Mobile-First, Responsive UX & Web Design

—

Mobile-First, Responsive UX & Web Design —

Design board with color scheme, textures, sample images of cityscape, bridge, portrait, and nature, along with text style guidelines and logo icons.
A chart labeled "How Might We & POV Statement" with five rows and four columns, detailing problems, needs, personas' POV and HMW questions regarding online art galleries and booking platforms.
Venn diagram titled 'Hierarchical List of UX Goals' showing three overlapping circles labeled 'User's Goals', 'UX Goals', and 'Client's Goals'. The 'User's Goals' circle mentions buying limited edition photography, valuing reliability and seeking storytelling through photography. The 'UX Goals' in the overlapping area specify conveying luxury and distinction, providing structured navigation, showcasing limited editions, curating storytelling, and creating exclusive workshops. The 'Client's Goals' mention positioning photography as exclusive and premium, demonstrating credibility, differentiating work, and expanding into education and community.

MOODBOARD

MOBILE

DESKTOP

The webpage for a photography service featuring black and white portraits and artistic images, with a header that says "Every photo tells a story but with a difference." The page displays a grid of photographs including a woman smoking, a bearded man, a young girl, a scenic nature shot, a small house by the water, and a coastal scene with waves. There are sections for booking sessions, client testimonials, and contact information.
A black and white promotional webpage featuring various images including a model, a musician, a bearded man, a tree, a building, and a landscape. It promotes a storytelling or visual project, with sections highlighting different topics and a call to action for exploration.

DESIGNER NOTES

  • The website showcases the client’s photography while communicating their unique value: a photographer who combines artistry with tangible benefits for clients. It positions the client as both creative and solution-driven, blending emotional storytelling with clear value communication.

    With over 60% of viewers accessing via mobile, a mobile-first, responsive design ensures an optimal experience across all devices.

  • Rule of Thirds & Z-Pattern: Aligns images and header to natural eye movement for better engagement.

    Alternating Layouts & Breaking Frames: Symmetry and asymmetry, overlapping images and text maintain interest and flow.

    Continuity: Visual elements guide the eye down the page for seamless interaction.

  • Content Flow: Header, Hero, Featured Sections, Value Proposition, Footer supports conversion.

    Focal Points: Color, contrast, and motion direct attention to key elements.

    Grouping & Scale: Related content grouped; element sizes indicate importance.

  • Fonts: Aboreto (H1), EB Garamond (Paragraph), Geist (CTA) – elegant, readable, action-focused.

    Color & CTAs: Consistent palette reinforces identity; CTA buttons are distinct and strategically placed.

  • White Space: Prevents clutter, improves focus.

    Mobile-First: Responsive, touch-friendly layouts with Z/F-pattern scanning.

  • Dynamic Content: Filters update galleries, keeping UX fluid.

    Hover Feedback: Color/animation indicates interactivity.

    Gestalt Principles: Figure-ground, closure, continuity guide user attention.