Loading ...

Responses by Angela Milosevic, art director; and Cody Wall, developer.

Background: “This site is a personal portfolio showcasing several new projects I’ve done over the past year,” says Angela Milosevic. “I’ve visualized it as a minimal, yet elegant site, heavily focusing on typography as the core design element. My goal was to let the work speak for itself but also include some intriguing UI moments. The hope is that this redesign would reach out to other likeminded designers and potential clients who are willing to collaborate or who need help getting their presence online. In collaboration with Cody Wall, my friend and colleague who developed this site, we were able to achieve what I had in mind.”

Design core: “With the site solely relying on type, the typeface had to attain the right design aesthetic I wanted to portray,” says Milosevic. “The typeface, OGG, did just that with its sophistication and edge both in regular and italic weights. Aside from the type, the little details make the overall experience more compelling: the interchanging horizontal and vertical scroll in the project pages, the subtle wave motion within the black and white photo on the homepage, the eye ball screensaver and lastly, the mouse interaction while hovering over the project titles.”

Challenges: “From a design perspective, adjusting the typography,” says Milosevic. “You have to be extremely particular about how the rags of the paragraphs break, the kerning of each individual letter, and more importantly, establishing each break point and how the typography will be able to condense itself to a smaller screen size. To make it easy on ourselves, we worked around this by allowing the type to scale relative to the screen size, rather than with fixed pixel units. Not many sites tend to do this, so that was a personal achievement on our end.”

Technology: “The site is built using Gatsby, a static site generator for React-based projects,” says Cody Wall. “Static site generators are very good for serving super lightweight, fast websites that perform well on performance-based measuring tools. Gatsby is also great because there are so many open-source plugins for it that handle pretty much any use-case you would need. This enables us to nail down the design details rather than spending too much time on behind-the-scenes tech details. We used Netlify CMS to edit and update new files. When CMS changes are saved, the changes are automatically pushed to Netlify to trigger a build and deploy to the live site.”

Anything else? “The mouse interaction while hovering the project titles at the bottom of the homepage was an exciting problem to solve,” says Wall. “It’s built using a canvas. Mouse movement events in the browser don’t trigger for every frame, so if you were to try to accomplish the same effect by painting an image for every mouse move event, you would get gaps between the images. To make sure the images always smoothly connect between mouse movement events, we had to calculate the distance between each event in pixels and draw that many images between.”

angelamilosevic.com

Browse Projects

Click on an image to view more from each project
X

With a free Commarts account, you can enjoy 50% more free content
Create an Account
Get a subscription and have unlimited access
Subscribe
Already a subscriber or have a Commarts account?
Sign In
X

Get a subscription and have unlimited access
Subscribe
Already a subscriber?
Sign In