My Journey : From Photoshop to Web Design

In the early days, when I was about 7/8 years old. At dinner time, my brother told me that you can swap heads in the computer using photoshop. Then I was like what doesn't this hurt? I began to question more & more as usual. All I'm saying is that's how I first began to gain interest in photoshop and all this designing stuff now.

Read More

Later in college, I started to get more familiar with Html and CSS. I noticed it has capabilities of masking, layers(z-index), blending modes and overall designing so similar to photoshop that I already loved. So, I began to deep dive with Html and CSS (user interface). I started practicing and learning more from youtube, udemy further advancing my expanding professional territory.

ᐅ  Web Designing : What I have Experienced so far!

I recently worked on a couple of website redesign projects (Himal Eco Treks, Himalayan Recreation, ...) that emphasize revamping the web design fulfilling the client requirements.

First off, I did 1-on-1 interview with a member of our executive team to nail down what this company is all about and took some notes. Later the client pinpointed design requirements through a quick paper sketch, a few examples of preferred design and competitive analysis of his own.

Client Requirements

Before diving into the project, we wrote a project brief to keep everything on track.
Some questions we prepared in a project brief are:
• What are we trying to achieve?
• What are the must-haves?
• How will we know the project is a success?
• What’s our deadline?
Then, we looked at what else is out there. I started with a list of competitors, compared competitors’ strengths, weaknesses, observe the old website of the company and noted some design concerns and challenges:

Defining the Challenges

  • Lack of proper layout, consistency & visual hierarchy
  • Excessive words per line make it hard to read
  • No proper white spaces which make it tough to scan
  • Low-contrast between visual elements, tiny icons & texts

Information Architecture

I observed and drew an information architecture diagram of the old website that showed the relationships between the structures of a website. The diagram helped us define the scope of our project and acted like a checklist as we wrote, designed and coded all the pages.

Style Guide

    Before diving right into the design, I prepared the improved style guide from the old site, brand colors and buttons.

Prototyping & Testing

Overall-Design Experience

Thank you for reading till the end, you’re amazing 👌 !
Published on : 02/06/2022