DEV Community

loading...

WEB DESIGN and FRONT-END DEVELOPMENT (Part-1)

Md. Ashikur Rahman
Experience in full stack (PHP, Java, Javascript, MySQL, MongoDB, Linux, Apache - LAMP, MEAN stacks) software development following Agile (Scrum, XP).
・3 min read

USER EXPERIENCE [UX]
• Target – Who is going to use? What need to be present? Who are the target users?
• Process – What will be done?
• Achieve – Measure if the target is fulfilled by assessing some key factor.
USER EXPERIENCE [UX]

Plan: Before starting the work or think about user experience make a plan about executing the work.
Research: Competitor analysis means see at least 20 similar products or services or template available in the market, mid-range, high range, multipurpose analysis means how this design will serve the purpose think about that.
Design: Creating wireframe, making prototype, making mock-up before implementing the design.
Adapt: For which system is the design and will the system like android or web will adopt the design? So have to think about the system adoption.
Measure: After creating the design measure the design on various perspective and factor described.

MEASURE
Why Measure?

It is very important to measure the design work done as who do not able to measure cannot able to execute the work according to client’s satisfactions and you can't manage what you can't measure.
What to Measure?
Measure contrast, color, space, size of the element exist on the design.

How do you know when your design is good enough?

When all of the measurement looks good and target is fulfill or achieve then a design is good enough.

MEASURE
Qualitative Data: Blue/Green Color, Looks Cluttered, Fonts are Heavy, Not Clear, Awesome font
This data are not specific and do not sounds professional, this type of data mainly come from clients end.

Quantitative Data: Icons Width 1170px, 20px Spacing Used fromTitles, Font-size 14px Body padding is 10px, FontAwesome size 20px
Quantitative data is professional and specific and give the details of work area and it sounds more professional. This type of data helps developer and make clients aware about where the work is done and express a professional attitude towards clients.
MEASURE Subjective or Objective Measure?

Wide Slider: when the site is the subject and slider is worked as an object then a wide slider is used
Full Width Slider: When a site is an object of the slider then the full site is worked as a full width slider.

WEB UIVISUAL HIERARCHY
Informing users : By using various elements like call to action buttons users can be informed about an action of a website. Like a button called: “Buy our services” is actually indicating a user about a special service for a user.
Communicating content relationships: Placement of the content is very important for a web service or websites, like for a corporate site, “About Us” menu button will go first and then “Services” and then “Products/ Our Products” and then “Contact Us” as first question will come up like who are you? What do you do? What are you selling? And where I get those?
As well we can put testimonials and featured products and trusted certificates get which actually attract a user about the business.

Creating emotional impact: Creating various emotional impact like “Hurry offer is going to end soon”, “Try at least 30 day trail”, “Signup and will get 5GB free” etc. Those conditions are actually attract a user towards the service.

END GOAL OF UI DESIGN
• What is this? (Usefulness)

• How do I use it? (Usability)

• Why should I care? (Desirability)

Discussion (0)

Forem Open with the Forem app