Redesigning my portfolio website

Usability in Web Design and Responsive Design Across Screen Sizes

Roof

Making it easy and efficient to search and sign home rentals based on the user's preferences without being scammed

Blog

B

Why I completely redesigned my portfolio website - Usability in Web Design.

Neuel Sam

1 Min Read, 15 July 2020

Problem(s)

  • The old website was difficult to maintain. As a product designer, I want most of my time to be spent on products than maintaining my portfolio website.

  • The old portfolio website was created using non-responsive grids, which made it difficult to tailor content according to screen size.

  • No space on the home page for contents such as blogs, updates, or random posts.

  • Lack of white space meant that the content was hard to distinguish, lacked simplicity and hierarchy.

  • Pictures did not scale properly due to complexity in page design.

  • Did not look professional due to clutter.

  • Improper scaling made content to appear over other content and mix-ups.

My Role

Responsive Web Designer

Deliverables

Timeline

Updated Portfolio Website

1 Week

Requirements

  • A redesign that makes the portfolio easy to understand and use.

  • Content should have the attention of the user than how the website interacts.

  • The website should scale across devices (Desktop, Tablet, and Phone) in landscape and portrait mode.

  • Ease of publishing content to the website is of high priority.

  • Must trim down the clutter in all pages.

  • Contact should be on the home page, there is no need to jump to another page.

Solution

  • Top Navigation bar shifted to Side Hamburger Menu to reduce clutter on pages.

  • Card style banners for main Case studies, blog, and research.

  • Grids to follow 4 px baseline for scalability and accuracy of spacing.

  • The sidebar is 100 px in size and scales across Desktop, Tablet, and Mobile views (Location of the bar in screen changes from side to the top in Mobile view).

  • The hamburger menu is responsive and scales with screen size. 240 px on Desktop, Tablet, and full screen on Mobile screen sizes.

  • On Desktop and Tablet, the content is placed in a 600 px box with white space on each side.

    • 600 px of usable space forces visitors to focus on content more.

    • The white space allows for easy scaling on displays with different aspect ratios.

  • On Mobile, the 600 px content space is minimized to a 300 px space with very low white space on both sides for usability on a smaller screen.

  • Heavy text pages have a white background for readability.

  • Creative content pages like photography have a black background.

From this

To this

  • The home page and content pages now scale responsively between screen sizes.

  • Card display with the type of content headline and a sub-headline gives users a hint of what to expect.

  • The redesigned grid and spacing system allows for easier publishing and hierarchy in writing.

Do let me know If anything does not work as expected.

Mock-up

Featured

Projects

All Projects

  • Facebook
  • Twitter
  • Pinterest
  • Instagram

NEUEL SAM

PRODUCT DESIGNER

Discover, define, develop and deliver

Hello, I am Neuel Sam. A systems design engineer crafting products based on human-centered design. Welcome to my portfolio.

Blog

B

Why I completely redesigned my portfolio website - Usability in Web Design.

Neuel Sam

1 Min Read, 15 July 2020

Blog

B

Why I completely redesigned my portfolio website - Usability in Web Design.

Neuel Sam

1 Min Read, 15 July 2020

Other Projects