alex-kaplan.com (or alexkaplan.games)
An overview of the design and development process for this website.
Project Information
This website was created as part of Wesleyan Univeristy's Graphic Design: Website as Portfolio course.
Medium: HTML/CSS/JS Static Site
Role: Designer, Programmer
Duration: Ongoing (It's a living document!)
Process
Initial Design Phase
The design of this website began with the assembly of a series of reference collections and mood boards. These references included a wide variety of resources, such as existing game developer website portfolios, books, games, typographic samples, and music.
Once collated, these references were arranged using Figma to create four potential designs, which were then narrowed down to a set of two. I then evaluated these designs on their layout, readibility, professionalism, and style. Having settled on a mockup, I then sketched a quick first-draft layoyout specification on paper.
Inspiration images from a rejected design, collated into a mood board using figma.
The same rejected design mocked up using placeholder resources. It was rejected for being too difficult to read.
The pencil and paper first draft of the finalized design, with an expanding column-based landing page.
Getting Technical
Once I had settled on a design I liked, I had to determine what technical framework to use when building it. I have experience building responsive websites using React, node.js, Vue, and other common frameworks, but I felt that, since the website's content would be static and databaseless, it would be simpler and faster to build using HTML and CSS. I began the construction of the site using Visual Studio Code and the Live Preview extension.
After building the first version of the site using a tight five-column layout similar to the one in the first draft, I determined that the image frames were too slim to display meaningful information. Instead, I pivoted to the wider framed design currently being used, with logos and evocative 16:9 images being used.
For the individual project pages, I created another mockup that initially used a two-column design. While I liked the look of it on paper, when implemented on the page it felt repetitive. Instead, I replaced it with the current single-column structure, with interstitial images used to break up the flow of the page.
Version Control and Hosting
All construction of the site was done in a GitHub repo utilizing development and production branches to avoid pushing unfinished content to prod. When it came time to release the site, I decided to use Cloudflare as my host, CDN, and domain registrar. This was due in large part to their easy-to-use setup and their built in GitHub integration via Cloudflare Pages.
All versions of the site were tested both on desktop and mobile before being pushed to prod, and were evaluated using Google's lighthouse service to ensure quick load times and compatibility. Additionally, using DNS and SMTP I set up email forwarding, allowing users to contact me at both [email protected] and [email protected].
