UX/UI and Visual Hierarchy

sony web interface

Interface Highlights

This project is a one-page Sony website designed and developed using HTML and CSS in Dreamweaver. The goal was to create a clean and structured interface that reflects Sony’s brand while maintaining clear navigation and visual hierarchy.

Hero

Designed to create strong visual impact and brand presence

A pair of white Sony wireless noise canceling headphones with a soft carrying case and packaging. The background is light, and the product is the main focus of the image.

navigation

Simple and clear for easy user flow

Navigation menu from Sony website with options for TV & Home Theater, Audio, Mobile, Gaming, and More.

Product Section

Structured layout to organize content and maintain readability

Product page for WH-1000XM5 Wireless Noise Cancelling Headphones in silver, showing a front view of the headphones, price $399.99, rating 4.5 stars, and options for color, with buttons to add to cart, wishlist, and sharing.

features banner

Grid-based design for consistency and balance across elements

A woman relaxing on a couch with her eyes closed wearing white over-ear headphones, with promotional text about headphones on the left.

Showcase Grid

Variations presented in a clean grid layout for easy comparison

Comparison of three WH-1000XM5 headphones, including two over-ear headphones on the left and right, and a carrying case in the center.

Alternating Content

Alternating layout used to create visual rhythm and improve readability across sections

Three images of women wearing white over-ear wireless headphones, with accompanying descriptive text highlighting sound quality, hands-free calling, and portability.

Collapsible sections designed to organize additional information without cluttering the interface

Footer

A webpage from Sony Electronics featuring sections for Reviews & Questions and Return Policy, with a "See More" button at the top and legal disclaimer at the bottom.
Previous
Next

This project was created for educational purposes. Some visual assets may be sourced from publicly available materials and are used for non-commercial presentation.