As an emerging design professional, I am building my portfolio to present a selection of work samples and to communicate my design methodologies to potential employers.
The objective is to ensure the responsiveness of the website across diverse screen dimensions, achieved through meticulous HTML/CSS implementation.
AB Studios
UX Designer & Web Developer
Design & build a professional design portfolio website for AB Studios, my personal brand.
HTML/CSS, Javascript, VS Code, Illustrator, Figma
Before beginning the design process I did a lot of research on different portfolios. I read a number of articles to determine the most important components in a portfolio and what potential employers are looking for.
The standouts were from WIX Blog, WebFlow and Medium.
|
|
|
|
|
|
A sitemap is a visual representation of the structure of a website and serves as a blueprint for the outline of the different pages, content, and their relationships within the overall information architecture. It is a good exercise to complete ahead of wireframing as it helps identify the screens or pages that need to be wireframed.
Creating low fidelity wireframes is an essential step to conceptualize ideas and iterate on different layouts. Blocking out the main elements helps create a list of graphic design deliverables and refines the page content before investing time in high-fidelity designs.
I had a lot of creative freedom with the design as I am designing my own personal brand.
I decided to use the colors and textures of clay as my inspiration.
I dabble in ceramics and find throwing pottery soothing.
For the logo I went with a typography inspired design and used several fonts as the base.
I introduced brand colors into the logo, and added some personal touches.
See my detailed site spec document here.
This portfolio website project had a long list of over 60 web elements that needed to be included.
I put all of the required elements into a word document and went through element by element, adding code samples from different textbooks and prior builds to the word document.
This served several purposes, it gave me a code bank to pull from, it familiarized me with the requirements, and it helped me review web authoring concepts in preparation for the website build.
Before beginning the website build I created highly detailed wireframes with the content written ahead of time to make the coding process easier. I wanted to be able to focus on the code and not be distracted by the design or content.
I used HTML5, CSS3 and basic Javascript in VS Code to build out the website. If you are curious to learn more about the coding process you can read my site spec document linked here.
Although this is step 5 it is truly part of every step. I solicited feedback from every colleague, friend and family member that I could throughout the design process.
a professional proofreader and reviewed by multiple people in the industry.
increased letter and line spacing for the BC Alphapipe font and increased font sizes across the board on the mobile version.
Responsive design is extremely important for UX Design and I wanted to get it right for my portfolio.
I use Bluehost for both my domain and hosting. This is far from the end! In fact, if you are reading this there is already one more works page - this one!
