UI / UX Design | Creating my own Art Portfolio *hiatus*

Before this, I did create my own portfolio for Wixsite while applying for art degrees during A-Levels. It was not bad, per se, but it was outdated and contain a little too many things for my liking. Plus, I did want to explore combining CS and design aspects, so this little project budded out of that :D And what better guinea pig to try this on other than creating my own art portfolio from '''scratch'''.

Why blog it, you may ask? Well, even if it won't reach people, I'd like to keep track of what I did so that I won't forget it anytime soon.

But it also acts as a mean to keep myself accountable into starting this FINALLY after so many months of pushing back :)...
EDIT: it still is pushed back now oops 

This will probably be in a 3-part series (following DesignCourse's YouTube series):
  • Create a web prototype 
  • Create a mobile version 
  • Bring the prototype to life 
Let's get started~

VISUAL RESEARCH

References from Pinterest

I started searching some cool UI / UX designs through Pinterest. Honestly, I was torn between a minimalistic style or an 'aesthetic' style with a play with huge typography. Both styles have its own colour and appeal, but I think I subconsciously combined both elements into the front landing page.

DIVING INTO ADOBE XD

It is good practice to sketch out what you imagine the layout to be, so that you have a clear direction of your website.

But time is not on my side.. so I'm going straight into it :,) (disclaimer: always sketch first)

Starting in Adobe XD

I managed to settle on a certain colour palette to follow and decided to utilize a large space to display my artwork. I guess the display is a preview of some sort, as if saying "hey, this is what I can do, scroll to find out more" :D.

Helpful tip: Displaying columns

By clicking 'Home', the GRID settings will appear on the side, displaying the number of columns to better place elements accordingly.

You may have noticed the unique font here, it is called 'Europe Underground' . It was minimalistic, yet had a unique flair with the shape of 'a' (and it was tall!). So I used it rather freely for the main titled, but it wasn't until the end where I found out putting a whole unique font into a website using CSS may pose some...challenges. Challenges I'm not ready to face yet.

And I wasn't sure whether the font was allowed to be used in websites, so I switched it to Montsserat instead :,) Also, I realized I will eventually need to create more than one page to display different parts of my portfolio...but for now I'll stick to one landing page :,) (I'll come back later to eventually finish the whole portfolio).

Desktop and Phone-size Prototypes

After some experimentation, trial and error, and accommodating it to the phone size, we have the final landing page prototypes! :D

Desktop view - PDF

Phone (IPhone X) view - PDF
I do apologize for the pixelation here...it is meant for a phone screen after all

//EDIT: I found some extra features I can try and incorporate (lottie, adding videos..etc)

I think I can add the actual animation video as a background in the 'animation' section :D I found a cool looping-floating-dot animation and used its json file to make a loading screen overlay~

Adding transition to loading overlay screen

This will probably be an ongoing 'touch-up' thing to add more micro-interactions (hover, darkening..etc). Reminds me of my previous group assignments involving Figma.

Anyways, since the main point is to be more familiar with HTML, CSS and Javascript, let's go to the coding~

BRINGING IT TO LIFE

I will be using VS Code (for the first time wow) and will be following a more updated tutorial~ But before we get to the peak of it, preparation is needed.

PREPARING THE INGREDIENTS

Namely, the process of setting up a folder in VS Code and installing the necessary extensions. And also because this is my first time using VS Code so I just want to remember how to operate it from the start :,).

Using Command Prompt to create 'portfolio' folder and access it

Just wanted to add this here because I learnt these commands in a class and am surprised to use it here.

'portfolio' folder created :D


Installing 'Live Server' extension

In-built Emmet Abbreviation

With just an exclamation mark, we can put in the basic body of html without having to type it from scratch all the time :D
The 'base body' of HTML

Most of the work will be done in the <body> tag. The <head> tag contains data about the elements that will be in the HTML document (eg: character set, CSS styles, scripts...). HTML is the skeleton, CSS is the flesh~ Javascript could be the brain that controls what each part does lol

COOKING THE MEAL

The website will be coded using the phone prototype as reference first (I think it was to determine the proper order of elements?). "Phone CSS first"

Some Attributes of the HTML element

  • href: to link to another html "page.html" or # if it leads to nowhere
  • class: commonly used to point to a style in CSS
  • id: commonly used in Javascript to give function
  • alt: description of the element?
Note to self: It's easier to use CSS to make an image (or SVG?) element as a background rather than using HTML to add it as a background.


***A budding issue: Montsserat Thin doesn't seem to be properly showing in the webpage
SOLUTION: I learnt that browsers automatically tries to how 'h1' elements will look like so it will attempt to BOLD THOSE LETTERS

****An upcoming issue: How to scale the images in that unique shape accordingly???? T_T


-UPDATE (10.04.22): It has come to my knowledge that my approach to this may be flawed from the beginning. Specifically, the scaling of my elements/the type of elements I want to include, etcetc. I shall attempt more tutorials before coming back to this again, because if I rush it, quality will compromise (hence, this situation hahaha). I will update when I update :D meanwhile, apologies for the uncertain delay and stay tuned~



Comments