pov you're an internet child
personal project | web design
may 2023
tools used: figma
the two images shown above might just look like a typical screenshot of a mac desktop with two windows, but they are far from it; they are actually screenshots that have been completely recreated in figma through different elements and features of figma. i had the idea of presenting the home page of my website as the macOS desktop. my self intro and photo would be presented through the form of a floating safari window and a photo booth window. each page would then be linked on a folder on the desktop. i quickly sketched out the idea in my notebook, then quickly got to work creating the design in figma. before starting, i took a screenshot of the windows and elements that are included in the design to use as reference images.
i first started by creating a blank screen in the dimension of a 14inch MacBook pro. i then searched up the default font and icons apple uses. after some simple research, i realized that all the fonts and icons apple uses in their products can be directly downloaded from the apple website. i quickly got to work and downloaded the font packs, the main one being sf pro. the icons can be downloaded through apple’s sf symbols application, which features most if not all of the icons used in apple products.
the first thing i got around to creating is the status bar in macOS ventura. i pulled the apple logo along with the battery icon, wifi icon, spotlight search icon, and the notification center icon. i type the words in and adjusted the font size, font weight, and font spacing until it matched the reference image exactly. the second thing i started creating is the icons doc.
the photo booth window is created to include a photo, preferably of myself as this is a self introduction page. like the safari window, i first started by creating the top menu bar. the steps were pretty much identical to the steps i took when creating the same bar for the safari window. i did choose to use a slightly different design when creating the three buttons on the top left that would allow the users to manipulate the window.
i then moved on to create the “image” section. i created a rectangular shape with the same dimensions as the reference image. i left that there as a placeholder first while i moved on to create the other elements.
below the image window, a row of photos that are already taken would be displayed. i chose to showcase this through just a rectangular shape with the same color the row would be if there were no photos to be displayed.
the bottom bar had the most to be created; i started from left to right. i first created the rectangular shape with matching dimensions, border radius, and color as the reference image. i then found the respective icons from apple’s sf symbols application and changed them to the appropriate colors as seen in the reference image. i then created the center square/rectangular shape that would fit within the longer rectangular shape and would house the active choice of photography between four photos taken at once and presented in a grid, a single photo, and video. the shutter is created through creating a circle and then inserting the camera icon from the sf symbols application. the effects button on the right is simply a rectangular shape with adjusted color and border radius with the text placed on top. of course, the font is matched to the reference image as well.
the last step of this is to insert the image into the image window and create a clipping mask with the placeholder rectangle previously created. after this step, i just had to double check the spacing between all elements.
for the icons in the doc, i looked through figma community for a template pack of the icons of some apps created by apple.
i then created a long rectanglular shape and adjusted the border radius to match that of the applications dock. i then added a drop shadow below to mimic that of the dock on my laptop. i also added a bit of a background blur before putting the applications onto the dock with equal spacing.
the next thing i moved onto creating is the safari window which would contain my self introduction from my website. i first created the top menu bar. i first created the rectangular shape that would embody the items in the doc. i color matched it and changed the border radius of the top left and right corners to match the reference image. i then created the three small circles that allow the users to manipulate the window. the border and fill colors of the circles are both identical to the reference image.
the difference icons and arrows are all taken from apple’s sf symbols application containing all the icons. the colors are then changed to match the reference image.
the center bar where the url is located is created through the shaped tool in sigma. it is done by manipulating the border radius, removing the center fill color, and adding a stroke with identical color and thickness to that of the reference image.
i opted to create all these elements separately, then put them onto the rectangular shape created in the beginning so i could better manipulate the spacing in between to ensure for the highest accuracy in similarity.
presented above are the final prototypes of two different versions of this homepage design. there are four folders to be found to the right of the desktop. each folder is named after a page of this website, and would be a click-through link to the respective page on the website. the two different versions feature different “screensavers.” feel free to click into both images above to inspect them in closer detail, the same can be done for all the other images present on this page!