Branding Design

Branding Process

Project Type

Portfolio

Logo / Branding Design

UX / UI / Web / Mobile Design

Motion Design / Lottie Animation

Typography / Illustration

HTML / CSS / JS /

barba.js / bootstrap /

node.js / UI Kit /

GSAP / SCSS

Software Used

Adobe After Effects

Adobe Illustrator

Adobe Photoshop

Adobe XD

Adobe Media Encoder

p5.js

Visual Studio Code

Date

2019 - Ongoing

Version 3.1

2021 Website

Process

This is the 2nd and current design of my 2021 website. This version of my website has a more typical website structure along with slideshows to show all of the content for the section. I used UIKit to test the CSS framework. I also use the Lottie, GSAP, and JQuery libraries. Crimson is my main focal color, white is my secondary, and black (or dark purple / space) is the background color. Instead of creating generative backgrounds in p5.js, this time I made a space background using After Effects. I kept the Red Hat Typeface from last version because I like it but I'll probably change it for variety next version to something more futuristic. The next website makeover I do will incorporate the fluidity and boldness of my 2020 website idea, along with a futuristic and more spacey feel. And if I have more commissions to display then I will cut down on my older works even more. I also want to find a way to have a javascript background using the minimal amount of computer memory / ram as possible. I love the generative backgrounds of many website but the computer I have at the moment cannot handle it within the web browser. The design language / thinking of this site is in the slideshow below. This site should have fixed some of the pdf and image links that were broken in the previous version. I also avoided using node.js / npm because I felt like I wasn't knowledgable about it to optimize it well enough. The logo will probably stay for a while. This logo is thouroughly thought out and I was debating the design for months. Its a lettermark logo containing the visual of a skateboard deck, the david star, and the letter D.

Version 3.0

2021 Website

Process

This is the 1st design of my 2021 website. This site was an experimental one with the HTML & CSS made entirely from scratch. The JS libraries that I used were Lottie, p5.js, Barba.js, GSAP, JQuery, & node.js (npm). The design has a gridlike layout and used different colors to signify the different subjects of the website. There are a few broken links, like pdfs and previews which should be fixed in the next version. The website compiles a ton of work that I've done while in college so the site is built to be more technical. In the next version, the work will be cut down.

Version 2.0

2020 Website

Process

This is the design of my 2020 website. This version of the design was scrapped because of a different type of scrolling I wanted to try and their was also some problems with the CSS animations of the crosses and dots. It was meant to be a dynamic website with a float like scroll and 3D like cards (where they would turn depending on the mouse position). The bright crimson background was something that I thought was a good idea so I might use it in a future version.

Version 1.0

2019 Website

Process

This is the design of my 2019 website. The slideshows below contain both the 2019 version of my website and some older logo / website versions. These were more simple designs using p5.js and bootstrap.