Overview
Introduction
This is my first personal portfolio site where i showcase my work. Took awhile to think of own’s branding and theme, after hours of grabbing inspiration from the vast internet canvas, finally found my own niche.
Team & Timeline
My Role
Whole Project: March - April
Design Process
Background
Dean Studio
Long story short, this actually is not new as this is the brand name that I've used back when I’m freelancing as Interior Designer. Though the logo itself has been revised multiple times, so there were many variants and versions of it.
Branding and Themes
I don’t have a particular color palette or themes that I have in mind when designing this until after hours and days of hanging around on the web, finally I found my niche. It turns out I liked Gradients, Dark Themes, Gamifications, FinTech. That's where it all started.
Reasearch
Looking for Inspiration
This is the very first phase of my process, hanging around from many sources on the web just to find something that goes well with my niche and personality. Here are some of the sources that I loved to use:
Favourite sources:
Not Pinterest nor Dribble.
For quick reference I would go Pinterest and Dribble.
Logo Design
Dean Studio
Logo Design Sheet
Design System
Design System
Ideation
Reference → Sketch → Design
My design process begins with gathering inspiration online, using reference materials to make initial, simple sketches. I then jump right into Figma to bring those ideas to life, iterating and refining the design through multiple revisions.
Figma | Dean Studio
Dean Studio
Design File
Final Design
Homepage
Screens and breakpoints for responsiveness.
Made few breakpoints for all pages starting with PC - 1920, 1440 | Tablet - 810 | Mobile - 390 pixels.
Figma | Dean Studio
Dean Studio
About Me
Screens and breakpoints for responsiveness.
My background and about myself.
Figma | Dean Studio
Dean Studio
Studio
Screens and breakpoints for responsiveness.
As of doing this portfolio, the content for this page haven't done yet hence putting a placeholder content.
Figma | Dean Studio
Dean Studio
Changelog
Screens and breakpoints for responsiveness.
Update made to the site will be recorded here.
Figma | Dean Studio
Dean Studio
Experience it !
Try and experience this website with some hidden effects scattered across the web pages. That includes draggable elements, movement effects, visual effects and ambient music.
Note: Some browser blocks auto-play feature and have to manually click play button which is located at Footer.
Wrap Up
What Next ?
Planned to use this site to update my career path progress long term wise and will keep updating from time to time.
Discover More
