Sudrajat Dhanubroto
UI & UX Design Graphic Design Illustration
port folio 2016 ─ 2020
1
preface This portfolio contains a selection of my works in graphic design, UI design and illustration.
From personal projects to commercial projects
throughout 2016 - 2020. From all the designs in this portfolio, there is no defined set of design
style, because I want to explore many different approaches, to adjust with the briefs and take
challenges. Without any further ado, please enjoy my design portfolio that I have made with all my heart and thank you for spending your time.
Sudrajat Dhanubroto birth 11.06.1996 phone 081219893729 email sudrajatdhanu11@gmail.com
hello, I’m Dhanu, I’m just like any other designers who prefer bring a totebag than a rucksack to everywhere I go (except to work, ‘cause I need to bring my workstation), stay up late for a simple rough sketches, have some post-punk songs in playlist like Joy Division or The Jesus and Mary Chain.
skill Ai
Ps
language Bahasa English
social media Sudrajat Dhanu Sudrajat Dhanu sudrajatdhanu
Id
Xd
education 2011
Graduate Junior Highschool SMPN 11 Jakarta
2014
Graduate Senior Highschool SMAN 112 Jakarta
2017
Associate Degree of Visual Communication Design Brawijaya University
experience 2016 (aug to dec)
UX Designer Intern Definite
2017 (jan to apr)
Freelance Illustrator Emerson Stone
2018 ─ 2019
Graphic Designer Ajita
2019 ─ 2020
UI Designer Olrange
Sudrajat Dhanubroto
01
UI & UX design
6
2016 ─ 2020 portfolio
7
/ UI & UX
ENERVON WEBSITE Site www.enervon.co.id Client
Darya Varia Laboratoria
Date
2019
Description:
8
Enervon is a nutritional supplement to increase energy and enhance the immune system, also for Vitamin-B complex and Vitamin-C daily needs. Divided into two different products, Enervon-C and Enervon Active with Zinc to give more energy.
Objective:
To give user news, updates and informations about Enervon through website, such as event, and articles. Also to give information about product knowledgement, the difference between Enervon-C and Enervon Active, and their efficacy.
9
/ UI & UX
Article Content
10
Contain with many different kind of contents, like health, work, etc. To give user information and news about those category above. And also to show the facts about multivitamin myth busters.
Enervon Website
Product Knowledgement
To give information about Enervon products, Enervon-C and Enervon Active and their efficacy. Product pages has the function to help user where to buy the products through e-commerce, supermarket and minimart.
11
/ UI & UX
User flow
home page
Here’s the main activity user can do through the website.
Expert’s Corner is article content that the source is from a doctor
12
Enervon Website
product page
article home page
directory to site
13
/ UI & UX
UI preview
about
14
Enervon-C product page
En
nervon Active product page
Enervon Website
article home page
article read page
contact page
15
/ UI & UX
16
Enervon Website
17
/ UI & UX
ONTRACE WEBSITE Site www.ontrace.co.id Client
KPSG
Date
2020
Description
18
As part of DEOS Group, Ontrace’s business focuses on the implementation of information technology to create values in business, new frontiers, and digital capabilities.
Objective
Designing a company profile website that present information about the company, their products and their latest update.
19
/ UI & UX
UI components
main navigation
footer
cards
20
OnTrace Website
button
icon & illustration
21
/ UI & UX home
User flow Here’s the main user flow to get user view their services and how to contact them.
22
OnTrace Website services
view service page
other service
CTA to contact OnTrace
CTA to view other service
23
/ UI & UX
UI preview
about page
24
service page 1
service page 2
OnTrace Website
career page
article read page
article home page
contact us page
25
/ UI & UX
26
OnTrace Website
27
/ UI & UX
PAYPRIME WEBSITE Site
in development
Client
KPSG
Date
2020
Description:
28
Payprime Payroll Process Services has been actively driving the establishment of strategic alliance in 2011 with ADP Streamline, the world’s largest payroll process services company for HR, payroll, talent, time, tax, and benefit administration.
Objective:
Designing a company profile website that present information about the company, their products and their latest update.
29
/ UI & UX
UI elements
main navigation
footer
cards
30
Payprime Website
button
icon
31
/ UI & UX home
User flow Here’s the main user flow to get user view their services and how to contact them.
32
Payprime Website services
view service page
other service
CTA to contact Payprime
CTA to view other service
33
/ UI & UX
UI preview
about
34
client testimonial
ca
areer
Payprime Website
news read page
news home page
35
/ UI & UX
36
Payprime Website
37
/ UI & UX
OLROUND WEBSITE Site
in development
Client
Olround
Date
2020
Description:
38
Olround is a digital marketing ranch, formed by a group of digital enthusiasts who have been around the field for some time. Located in Jakarta, Olround has executed many projects from national and international clients.
Objective:
Designing a one scroll page portfolio showcase website.
39
/ UI & UX home
One scroll page website Because the main goal is to engage user to see their portfolios, the website only contains about the company, portfolio list, and their contact.
40
Olround Website
41
/ UI & UX
home - view portfolios scroll down to each sections
footer
pop up view portfolio
contact directory to email
42
Olround Website
User flow Here’s the main user flow if user wants to contact them after viewing their portfolios.
43
/ UI & UX
44
Olround Website
45
/ UI & UX
neuCentrIX WEBSITE REVAMP Site
neucentrix.co.id (revamp in development)
Client
Telkom
Date
2020 (on going)
Description:
46
neuCentrIX is data center where content, connectivity, and end users meet. located in 13 big cities across Indonesia, It is designed with high quality building that ensures high reliability and security level both physical and logical.
Objective:
Revamping neuCentrIX’s website to create a fresh interface, to drive more traffic, awareness and to engage user to contact them.
47
/ UI & UX
UI elements
main navigation
footer
cards
illustration
48
neuCentrIX Website
button
icon
other
49
/ UI & UX home
Revamp features More clean interface. Cross content added in every pages, to engage user to jump into their pricing range.
50
neuCentrIX Website
new feature web live chat to see all branch locations in location page
see services
new added cross content to jump into pricing page to make user download their whitepaper immediatly contact us section in case potential clients have some questions in mind
51
/ UI & UX home
52
services
co
neuCentrIX Website
ontact
User flow Here’s the main user flow if user wants to contact them after viewing their services.
open pop up web live chat directory to WhatsApp web 53
/ UI & UX
UI preview
about page
54
service page
ne
ews home page
neuCentrIX Website
news read page
location page
55
/ UI & UX
56
neuCentrIX Website
57
/ UI & UX
BAKMI GM E - MENU Client
Bakmi GM (pitch)
Date
2019
Description:
58
First established in 1959, Bakmi GM is a food restaurant that produces noodles as its main menu. Apart from noodles, there is also a rice menu and other side dishes.
Objective:
Designing E-menu for Bakmi GM to provide outstanding experience to their restaurant guests through an attractive menu display and ease in adding or removing orders, and payment choices.
59
/ UI & UX home
User flow Split into two flows, with or without membership. Login with membership will track recent previous menu so user can quick pick it if they want to order it again. category list
continue without login membership
if already pick a m
60
Bakmi GM E - Menu login
login membership
home - log membership account
login membership
menu list
menu assortment
payment page
checkout page
y menu
61
/ UI & UX
62
Bakmi GM E - Menu
63
Sudrajat Dhanubroto
02
graphic design
64
2016 ─ 2020 portfolio
65
/ graphic design
ENERVON-C SOCIAL MEDIA CONTENT DESIGN Client
Darya Varia Laboratoria
Date
2018 - 2019
Description:
66
Enervon is a nutritional supplement to increase energy and enhance the immune system, also for Vitamin-B complex and Vitamin-C daily needs. Divided into two different products, Enervon-C and Enervon Active with Zinc to give more energy.
Objective:
To give awareness about the brand through Facebook and Instagram Designing content about information, tips, facts about health, work-life balance and finance.
67
/ graphic design
Visual Design
The visual mostly use orange as its main color. Using free hand styled font to make it more friendly and easy looking. copy image title
brand’s logo
feed design
carousel copy image body
carousel screen design
Story with multiple screen design
68
Enervon-C Social Media Content Design
The layout of every kind of content is different to make the audience recognize the kind of content even without content pillar label.
Content Pillars
tips
product
facts
travel 69
/ graphic design
Facebook & Instagram Content
70
Designing social media content about tips and facts about health, carrier, and finance. Communicate the information of the content through visual.
Enervon-C Social Media Content Design
Digital Activity
Reach more audience with giveaway items through many kind of digital activity such as photo contest, post using Enervon GIF, etc.
71
/ graphic design
BIOGESIC SOCIAL MEDIA CONTENT DESIGN Client
Darya Varia Laboratoria
Date
2018 - 2019
Description:
72
Biogesic is a paracetamol to ease various type of pain such as headache, tootache, PMS, and also effective to heal fever. The target market is for millenials mom to average mom. Biogesic wants to label their brand as “medicine for family�.
Objective:
Targeted to mothers to give awareness about Biogesic effectiviness through Facebook and Instagram and also to give acknowledement to moms that Biogesic is a medicine with 100% Paracetamol which is safe to consume to all family members. 73
/ graphic design
Visual Design
Because their target audience are millenials mother, the visual design is minimalist and informative to educate and give moms information about heatlh, info and parenting.
copy image title
Blue layout design
content pillar label
copy image body
Regular design
Story with multiple screen design
74
brand’s logo
Biogesic Social Media Content Design
The visual hierarchy is almost the same, what makes the content is different from the other is the signature content pillar label, except product without label and logo.
Content Pillars
health
product
parenting
useful info 75
/ graphic design
Facebook & Instagram Content
76
Designing social media content about parenting tips, health, and useful info for audience. Communicate the information and message of the content througah visual.
Biogesic Social Media Content Design
Digital Activity
Reach more audience with giveaway items through photo contest and story telling through Instagram.
77
/ graphic design & editorial design
GENBODY INDONESIA PACKAGING & CATALOGUE BOOK Client
GenBody Indonesia
Date
2020
Description:
78
GenBody Indonesia is a medical device and equipment manufacturer, subsidiary of GenBody Inc., South Korea, one of the fastest growing medical equipment manufacturing companies in the global world.
Objective:
Designing COVID-19 Ag packaging, an antigen test kit to detect COVID-19 virus. Also layouting its catalouge book and many other GenBody Indonesia’s products.
79
/ graphic design
GenBody Indonesia version
Design a new packaging based on the original to make it Indonesia’s version.
original design
packaging Indonesia’s license version
80
GenBody Indonesia Packaging
logo
packaging template
C: 18% M: 100% Y: 100% K: 10%
C: 57% M: 39% Y: 37% K: 19%
C: 91% M: 79% Y: 62% K: 97%
81
/ graphic design
82
GenBody Indonesia Packaging
83
/ editorial design
Catalogue Book
84
Layouting a catalogue book for GenBody Indonesia product. Each book contains information about the product.
GenBody Indonesia Catalogue
85
/ editorial design
86
GenBody Indonesia Catalogue
87
/ editorial design
88
GenBody Indonesia Catalogue
89
Sudrajat Dhanubroto
03
illustration
90
2016 ─ 2020 portfolio
91
/ illustration
ILLUSTRATION WORK Date
2016 - 2020
Description:
92
Some of my illustration works were executed with many variant of styles. I intend to explore the style to match with the project communications and objectives. Some of them are personal works because I’d love to explore more styles and scales.
93
/ illustration
Enervon-C 2019 Calendar 2018
94
Illustration Work
95
/ illustration
Enervon-C & Enervon Active Instagram Sticker 2019
96
Illustration Work
Definite Christmas & New Year greeting card
Eid Mubarak greeting card
2016
97
/ illustration
Illustration for Emerson Stone’s Design Agency Product 2017
98
Illustration Work
Illustration for Emerson Stone’s Design Agency Website 2017
99
/ illustration
On Boarding App practice
100
Illustration Work
Other illustration works
101
thank you! Now that you’ve reach this last page of my journey, I thank you for your time and have a great day!
102