This is the second part of my previous article. Maybe you would like to read that one.
Continuing from the last article where I showed you how to build a login form.We’re talking about how to make cool User Interface. In this article, I will show some more examples and some UX.
Let’s redesign an old website.
This is a website I got to redesign. This is a very old website.
My rule to redesign is like what do I feel bad for me as a user if I were visiting the website.
“These are my own view on the website”
1. I hate the background
It’s a medical website so, I can be argued that this image is fine. But I don’t like it.
So, I removed the background
2. The Tagline is at the bottom of the website
Moved it up.
3. The font family.
I just don’t like it. So changed it.
4. Those buttons
I think it should have some info about where I am going to. Because these two buttons open two different websites.
5. The Logo.
I just didn’t like the logo. So, I redesigned it.
Let’s design a Portfolio.
But before let’s have some UX question.
“UX designers are problem solvers”
So, Let’s solve some problems.
We need to understand the problem before finding a solution.
We will ask some questions.
Why do you need a portfolio website?
– To get a job?
– To Showcase your skills?
2. For whom?
Who are the targeted audiences?
– IT Companies?
– Friends and Co-workers?
Let’s build a mockup.
“Whenever I start designing a website I draw some mockups to get my Ideas to paper.”
Does these mokups answers to the questions we asked for?
– Showcasing the skills
– Showcasing some Projects.
– Targeting IT companies.
Let’s Design/Code it (No Codes I think Codes are good in video tutorials).
“I don’t use Adobe XD or Sketch or anything like that because I can build a website without them but sometimes I can’t able to come up for the design that I like then I use those software”
Now we have a simple Portfolio website.
Do you have any questions? Ask me on twitter @niranjannitesh
- niteshkumarniranjan (Nitesh Kumar Niranjan)
- Nitesh Kumar Niranjan (@niteshkumarniranjan) * Instagram photos and videos
- Nitesh Kumar Niranjan on CodePen
- Nitesh Kumar (@niranjannitesh) | Twitter