This is the second of my previous article. Maybe you would like to read that one.

UI Design Guide for Non-Designers (Beginners)

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.

http://xcelrislabs.com/

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

Removing background.

. The Tagline is at the bottom of the website

Moved it up.

Moving tagline.

3. The font family.

I just don’t like it. So changed it.

Changing the font-family.

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.

New Logo.

Let’s 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.

1. Why?

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.”

Mobile

Mobile Layout

Desktop.

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”

Mobile Layout.
Desktop Layout.

Now we have a simple Portfolio website.

Do you have any questions? Ask me on twitter @niranjannitesh


UI Design guide for Non-Designers – Part 2 was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.



Source link https://blog.prototypr.io/-design--for-non-designers-part-2-e877636e1007?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here