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):
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~
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
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?
***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
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