Personal website for a Vienna-based freelance architectural artist - Dóra Medveczky. Compromise between personal aesthetics and accessibility, based on her audience's demographic.
Dóra already had a website which was working poorly: pictures were loading slow and on top of each other, active project highlighting in the menu was not showing the correct projects and anchor links would occasionally not update. There were also some bad UX choices: arrows for flipping through the pictures were attached to the bottom corners of the pictures and since pictures are of different formats this was making navigation hard - the user would always need to move the mouse in order to get to the new position of the arrows. Additionally, she wanted to have a smoother scrolling experience, where one scroll would lead to the next project, instead of continuously scrolling. The previous version can be seen in the video:
I was not yet familiar with Hugo and Netlify that were used for this project but it was not hard to figure them out. I didn't want to change the system as Dóra was already used to it and it is fairly simple for her - she just needs to create a new folder, put images and plain text in it and Hugo knows what needs to be done. After that she just uploads the site to bitbucket which is connected to Netlify for automatic building and uploading.
The carousel library and the implementation of sliding was causing the pictures to load poorly and didn’t behave as she desired. I first tried to fix the code that was already there but I realized this would be too much effort so I opted for getting the fullpage.js library which was easy to incorporate and solved most of the problem. Slight adjustments were still needed.
First step was to remove the menu from the screen and make it a drop-down to have more space on the screen for the main content. Since Dora already has a lot of projects and plans to continue adding more, the menu is in two columns. As some of the texts were too long to fit the size of the screen, I removed the scrolling effect present in the desktop version to the continuous scrolling.
The final website is a compromise between Dóra's sensibility and accessible design. Admittedly, the font size is not very accessible for people who have sight issues, however since Dóra's projects are visual, emphasis is made on the pictures while the text is considered secondary. As Dóra is interested in social design and is open for collaborations, the pictures should intrigue the viewer to start a conversation rather than just passively read a long text alone. You can see the final version here.
Hugo, Netfly, webpack, JavaScript, fullPage.js, design