Michael Sezen

michaelsezen.com

UI/UX

3D Design & Animation

Product Management

Lead Role

michaelsezen.com website mockup

What is michaelsezen.com?

It's what you're using right now! This is a website portfolio I built for myself from scratch. I designed the entire thing on Figma, and I developed the website in HTML and CSS.

I had never done any web development before, so this was actually a learning experience! I wanted a project to develop a new skill, and I landed on building my own website. I recorded the entire thing as a time lapse, so you can see me learn as I go.

01

What Did I Want You to See?

The very first thing I did was list out everything that could be incorporated into my website. I spent a long time thinking about what I wanted you to know about me and what I wanted to show. Eventually, I grouped up specific items like projects, drawings, videos, and photos that could be displayed on the site to form a very loose layout of the site.

I settled on three main sections: projects, exploration, and about me.

02

Inspiration board made up of screenshots

Finding Inspiration

I started the design process by creating an inspiration board, with elements and images I find all over the Internet. I wanted examples of how other people built their websites and portfolios, so I could pick out what aspects resonated with me most.

I had a faint idea about how I wanted to organize the website, but I had no idea how I wanted to do it exactly, so this process was key to making my ideas tangible.

03

Wireframes and Ideations

With my newfound inspiration, I started creating actual layouts for the websites without any real content. It was important to me that the website flow made sense and displayed everything I wanted to show.



Wireframe of home page
Wireframe of projects page
Wireframe of 'for-fun' page

04

Themes and Typography

Before jumping in, I wanted to settle on one or two color schemes and fonts to design around. I explored a few possible options of each before going with a red-white theme.



Color schemes explores on website mockup
Adobe Fonts webpage

05

Designing the Website

With my inspo board, wireframes, and color schemes, I was able to prototype a full website relatively quickly. I went through a few iterations as I designed (such as the ones seen below), but worked out the designs seen on the site seen now.



Prototype of projects page with red theme
Prototype of projects page with white theme

06

Website's code with live preview overlay

Beginning Development

Aside from a few tutorials that I skimmed through, I went into development relatively blind. I considered this part of the challenge, but I didn't anticipate the effort put into making the websites responsive to multiple screen sizes.

As seen in the video, I spent quite some time trying to force my way into a website that perfectly matched my design.

07

Embrace Flexbox

I wasn't satisfied with how I was doing things, so I spent some extra time going back to the basics and learning concepts like parent-child relationships and flexbox. I decided to essentially start from scratch with these new concepts in mind, and it changed everything. I was getting much more efficient and developing responsive screens were a breeze.



Skills, languages, and timeline in narrow columns
Projects centered in a 2x1 grid
Alternate format of project process explanation

08

Side by side image of Figma version and live version of website

Wrapping Up Content

At this point, it's become kind of meta, because this is the stage I'm doing right now. I'm designing and developing all remaining pages with their content filled out.

This is the most tedious stage of the project by far.

09

Scattered lines of code for website

Tidying Up

I went back and made any final tweaks to the website, including responsiveness, image changes, and revising writing. I've also added sections to some projects that felt incomplete.

At this point, the website is ready to ship and deploy.

10

Deploying the Site

I deployed the site on Firebase, since it was free to use for low-traffic sites. They also have free storage options for the video links connected to the project pages. I also know it's relatively simple to update the website through Firebase in the future, including handling server-side changes and databases.

11

Website skills, language, and timeline sections

Designing with Purpose

I wanted the website to feel intentional and clean. I designed the home page in such a way that anyone could quickly scroll through and get a summary of myself— like a visual resume. If people want to learn more, they can still explore and get all the details.

The development process also provided a lot of insight into what is possible to translate from Figma to a product. I sometimes became frustrated with myself for not making the design easier to digest as a developer. I can already see how designing with the developer in mind can make work flow far better.

12

Tools & Skills Used

For Design: Figma, Adobe Photoshop

For Development: HTML, CSS, Javascript, VSCode, Firebase

Skills Involved: UI/UX Design, Wireframing, Front-End Development