Web & Mobile Interface

UI/UX Design

Website Designs

Program used:

  • Adobe Photoshop

  • Adobe Illustrator

  • Canva

  • Website Platform: Shopline

Programming Language/Script used:

  • CSS

  • HTML

Website Design & Build

Year: 2017 - Present

Berjaya EnviroParks Sdn. Bhd.

Platform: Wordpress

MyClinic

Platform: Wordpress

Machka & Co.

Platform: Shopline

World Of Coffee

Platform: Shopline

Diva De Luca

Platform: Shopline

Adonai Glocal

Platform: Shopline

Tutorpedia

Platform: Shopline

Home and Gardening

Platform: Shopline

START

FINISH

Client Needs & Requirement

Website Designing &

Building Process

Research design

with design team

Handover website to client. Prepare for client feedback for further amendments.

Designing

process

Amendment on

website design.

Present design to team member for further improvement

Handover final website design to client.

Update design according to team feedback

Mobile Design

Program used for Mobile Design:

  • Adobe Photoshop

  • Adobe Illustrator

  • Adobe XD

  • InVision

Fictional Project: Gym Mobile App

Year: 2021

Note: This UI design is re-invented from an existing gym mobile app to be used in Malaysia for convenience use during the Movement Control Order.

 

Thus the purpose of the app includes to:

  1. Restrict and track down the number people attending

  2. Provide information to users about the update of the gym

  3. Make appointment on the app before going to the gym

1

Wireframing

Platform used: InvisionApp​

Research/Reference App & their role to the design process of the app:

  • Grab - Auto location function to find the nearest gym around user

  • Malaysian Airline - Booking system

  • AirAsia - Booking system

A revised version of a Gym App's User Interface Design – focusing on a simpler, more organised conceptual structure.

Presenting a clear and concise information for user's attention and direct priority details only.

Sample-Wireframing-4.png

2

Design

Software used: Adobe Illustrator

Colour and font are added based on the plannings made on the wireframe.

Layout-01.png
Layout-02.png

a) Typography

Aa

Avenir Font

A B C D E F G H I J K L M N O P Q R S T U

V W X Y Z a b c d e f g h i j k l m n o p q r s

t u v w x y z 1 2 3 4 5 6 7 8 9 0

Layout-03.png
Layout-04.png

3

Typography & Colour

b) Colours

#000000

#C1272D

#39B54A

#4D4D4D

#FFC5C9

Web Design

Program used for Web Design:

  • Figma

On-Going Project: Tech Web Design

Year: 2021

Untitled-2-02.png

Web & Mobile Design

Program used for web and mobile design:

Sample Project: Finance Web Design

Year: 2021

  • Figma

* Click on the image to view prototype

web.png
phone.png