Hello world.
Read on for more information about the website's history and design, what the process of rebuilding the website has looked like, and a list of what still remains to be fixed.
History
As I have mentioned elsewhere, the website was initially created for a school assignment. My previous portfolio hand-ins had been in the form of simple PDF files, and this time around I wanted a bit more freedom than what InDesign could provide.
I had already worked with Webflow through other tasks and assignments, and found it to be a great tool for visualizing ideas quickly instead of messing around with HTML and CSS for ages before potentially discovering that this looks like shit and was a very bad idea. And yeah, I know that's why tools like Figma exists, but Figma and I are not friends yet.
You can read more about the original creation process in the report I handed in as part of the aforementioned assignment. Long story short - I was quite content with the end result, which felt very true to who I want to be both as a person, artist and designer:
Whimsical, fun and adventurous - and knowing the rules well enough to be able to break them in clever ways (one day, at least).
So when I finally had the time on my hands to start collecting all my creative works in one place, I realized that I already had the platform I wanted; it just needed to be rebuilt in order to accomodate for the necessary changes. And here we are.
Design and structure
What follows is a quote from the aforementioned report.
I wanted something joyful, preferrably with a lot of color, both because my previous web design project had a lot of dark undertones and because I wanted to express my own visual style and adventurous spirit through the design.
Ignoring the awkwardness of describing one's own spirit as ~*~ adventurous ~*~ I guess I can still stand for this. About the structure and how the website was initially planned, well...
For once, I really felt like just seeing where the process would take me. Without having planned much beforehand, I used the vibe of the background as a guide and experimented a lot with grids, colors, fonts, placements etc. before I landed on the result you can see [in front of you].
Roughly and realistically translated: I procrastinated and had to jump straight to the finish line in order to deliver on time. Whoop dee doop.
Current progress
I started on the restructuring process in early February 2023, and initially didn't bother to make a physical list of what should be done. The combination of "things I know need to be done", "things that might need to change but maybe not", and "things I want to try out along the way" made it a bit daunting to plan for the process and all eventualities that might come up - so I simply started, and ended up working on items from the different categories interchangeably.
This way of doing it has actually been pretty successful thus far, as it allows me to constantly gain boosts of new motivation and I've been able to avoid that classic burnout. I'll work on one issue, realize that "Oh! I want to make this other thing look a bit different," and jump to fixing that —then later I'll return to the previous problem.
In the list below I have tried to accurately document the changes which have been made to the website since I started working on it again, and also attempted to explain why I felt they were necessary.
Landing page
- The current landing page didn't exist, as the original website only showcased my works from one academic term and a landing page separate from the portfolio itself would have felt redundant. I did expand on the website at one point (for the next portfolio hand-in), but chose to simply copy the existing homepage, add the works of the current term onto the new page and link to this page from the original one.
- When looking through the school folders on my laptop I found an artist's statement which I had previously created for an assignment. The statement still holds pretty true, and I realized I wanted to find a way to present it to visitors in order to give them an immediate feeling of who I am as a designer.
After playing around some, I ended up placing a button in the upper left corner of the landing page (where you'll normally find the home button), which when clicked on triggers an image placed in a fixed position in the middle of the page to become visible.
I added an exit button on the image which appears a moment later - this in order to make its existense more obvious, so that the visitor sees that they can easily make the image disappear again. When clicked, the exit button not only makes the image disappear, but also causes the first button to fade away — in order to hopefully create sort of a mysterious vibe.
Lastly, I added another on-click interaction to the first button which would lower the opacity on background elements, and one for the second button which reverses this effect. I also adjusted the easing values for all animations, in order to make for a smooth viewing experience for the visitor.
Note: This feature currently only exists on desktop/tablet.
Sitewide
- Complete restructuring of the navigation bar, to account for new subpages and the sudden, pressing need for a clear structure and hierarchy.
- I added a home button, as I'm pretty sure I read somewhere that it's a good idea to provide visitors with a way to get back to the landing page.
- I've placed all images in the different landing sections into link boxes, so that these will have the same function as the text links below.
- I added an interaction animation which reduces the opacity of the images in the landing sections. The animation is triggered by the mouse hovering over an image, and the opacity is restored to standard values when the mouse moves away. This should make the homepage seem less "flat", and make it apparent that the different landing section items are clickable links that will take you somewhere — if not Narnia, then maybe some other exciting place.
- The footer section has been rewritten, to account for the fact that the website no longer represents only my 3rd and 4th Noroff terms.
Graphic design portfolio
- I added links to the end-of-term portfolios for the 1st and 2nd terms of my graphic design studies.
- I also added a sub-page referring to and directing visitors to my Reflective Journal; a WordPress blog we were required to have as students in my program. In this journal you'll find the results of some of the weekly lesson tasks I worked on alongside larger assignments (the ones featured on the website you're currently on).
- Obviously, the subpage you're currently on is also a new addition.
Personal portfolio
- All the necessary subpages have been created.
- Pictures have been added to the landing area on each subpage.
- I've started adding some images in the section where I present and elaborate on my projects, but there's still a long way to go - especially in the paintings and illustrations category.
About page
- I added a proper about subpage. Previously, this info could only be found in the footer.
- I've also added some more relevant information about myself and my background.
- From this page, you might also click on a link and be taken to my WordPress school journal; more specifically to a post in which I talk about some things that inspire me and what I like to surround myself with in order to stay creative, among other things. Basically, it should allow the visitor to gain a little more insight into my head, or one version of it at least.
What's next?
I originally only thought to write this list in one of my numerous notebooks, and to use it as a personal brain organizer. This would hopefully ensure that no parts of my plan - big or small - would be forgotten.
Then I realized I might just as well post it on here. I've divided the list into categories, in order to make it easier to follow (for you and me both).
Landing page
- Look over the introduction texts for all categories, as these were written in a hurry because I didn't want a landing page full of lorem ipsum.
- The artist's statement feature currently only exists in the desktop and tablet viewing modes, as the fixed position of the button made things a bit wonky on mobile. This will be solved somehow - I could potentially make the statement disappear when you click on the image itself, but would that be easy enough to comprehend?
- I might add an Instagram reel or slideshow showcasing my currently non-existent art-and-graphic-design profile... As one does.
- I'll find an answer to this Q: Should the featured work category exist in its current format, or does it only cause confusion as it messes with the overall hierarchy?
- Overall it would be nice to have this page stand out a bit more from the other overview pages, although I do like the current aesthetic a lot.
Sitewide
- Add alt text to all images and do research on how to make the website more universally accessible.
- Compress all images and reupload them, in order to improve loading speed. In the website's current state, on content-heavy subpages the pagenav links don't always take you all the way down to the selected category, and I suspect that the image file sizes are to blame for that.
- Add the appropriate metadata.
- Decide on if I should make it more obvious that the pagenav dropdown list in the navigation bar is a page-specific navigation feature that makes traversing the different sub-pages easier (less scrolling), and eventually what the best way to do that would be. I'm quite fond of the current minimalist aesthetic, and don't want too many attention-dragging features cluttering it down.
- Some more easter eggs would be cool. "Click on this and watch some interesting thing appear", "solve this puzzle and who knows what will happen next"— those kinds of features. Most websites really aren't very fun, and many seem to have bought and used the same common oh-so-standard strategically designed templates in order to gain the most clicks/sales/subscriptions/souls. I really want to avoid that, although I guess I still need to keep in mind that some standards are widely used for a reason.
- An extremely neat easter egg would be to give the user the option to click on a button to activate dark mode (as in "dark&dangerous adventure mode"; this has nothing to do with being kind to people's eyes or some other bullshit) on the website, which would change the background, text colors and such.
- Overall - testing, testing, testing. When clicking around on the website I'm still finding broken links or links that open the new page in a separate tab, or I discover that I've forgotten to optimalize certain elements or features for other screen sizes than desktop, and so on. I want potential future visitors (or me, myself) to have a smooth experience while navigating around the website, so obviously these mistakes should be found and corrected.
Graphic design portfolio
- Add additional works such as semester projects, project exams and my favourite lesson task results.
- Add portfolio/project/exam reports.
- Add the appropriate references to the different mockups I've used to showcase my works. Shame on me.
- Potentially create a sub-dropdown list from the overview link in both the graphic design and other stories categories, which will contain the different portfolio project links (and others which are to be added). I hope this will lead people to instantly gain an understanding of the page hierarchy; so far I've only been relying on the power of language for this, but I realize it might not be obvious to everyone that the overview link actually leads to an overview of all projects/sub-categories and would be a good place to start exploring.
Personal portfolio
- While all of the sub-pages should be out of the template territory, overall they haven't been treated with the same level of care as their graphic design counterparts. This is due to the fact that those were created some time ago for the aforementioned school assignment, and have already been through several revisions.
- Some of the pictures of my books and other works appear to have been taken using a potato. This will be fixed by taking new ones where it is possible, using not-a-potato. In addition to that I'm going to scan and upload all book pages for my book projects.
- Lots of lorem ipsum in here— text still remains to be written for most of the projects.
- As I haven't so far succeeded in embedding Instagram videos on the website and it seems like this is a commonly known issue with no easy fix, I'll need to get into my old, quite-dead computer and find the original files for my stop motion projects (I don't want visitors having to switch to Instagram in order to view them).
About page
- Add more info, make it stand out as a separate entity from the footer area found on other pages - perhaps new design?
- Add a contact form.
- It would be cool to have sort of a guestbook in which people could leave a comment (sort of like back in the days when everyone had their own Piczo website; where obnoxious, glittery gifs were in abundance and twenty YouTube videos would all start playing as the page loaded, making your web browser crash - good times).
