Portfolio Website
Project - A Website to Showcase Design Portfolio
A responsive website to display graphic design projects in an organized manner. The website should also have the capabilities to demonstrate the designer’s thought process behind every design.
Category: UI/UX Design
Target Audience: Design agencies, hiring managers, recruiters, design aficionados.
Design Timeline: Three Months
The Approach
A simple website design generated the desired output. Incorporating some of the principles of minimalism helped in achieving a neat and user-friendly web layout. The minimal design does not distract the visitors, offering them the exact information they need.
The purpose of the website was thoroughly analyzed. Research was done to understand how the problem was solved successfully by other designers. Based on that, it was decided to approach the design task with grids, illustration, images, and text content, searching for the perfect combination of all of these.
Exploration with Sketches
Sketching in the classic old-fashioned way led to clearer UX task flow and even triggered better ideas.
Site Map
Guiding the website visitors through the vast amount of information required planning. A sitemap helped in coming up with a structure that balanced the website visitors’ requirements with my needs as a graphic designer.
How the Sitemap Helped
1. Avoided duplicate content.
2. Streamlined conversation funnel.
3. Made the site more SEO-friendly.
4. Get started with web development.
5. Prioritized important information.
Illustrations
Wireframes and Prototype
After structuring the idea in my mind and sketching the idea on paper, the UX was developed on Adobe XD program. The hand-drawn sketches attained perfection when converted to digital wireframes and prototype.
Color Palette
Three colors were used on the website - black, grey and white. The background, navigation, and text in non-distracting colors gave more emphasis to the designs presented. After all, the purpose of the website is to have the user’s attention on graphic designs and respective case studies.
Black is considered safe and open. The color is linked directly to righteousness, positivity and peace.
White is considered safe and open. The color is linked directly to righteousness, positivity, and peace.
Grey represents neutrality and balance. It helps to maintain a clean, professional look.
Typeface
Arial for navigation: Available on Windows and Mac OS. Using a typeface already available on the user’s computer makes the functioning of the website consistent.
Open Sans for header and body copy: Highly legible on screen even at small sizes. Also, this type is optimized for print, web and mobile interfaces. For prolonged usage, Open Sans is a good choice.
Jenna Sue for sliding banners on home page: Handwritten typeface was effective for conveying uniqueness and quirkiness. Also, it defines the personality of the designer.
Key Web Design Ingredients
1. Coding
The entire website was coded from scratch. Making the page transitions, animations, and navigations work seamlessly on a wide range of devices could have been tough. However, this was achieved by using CSS (Cascading Style Sheets) wherever applicable and keeping the HTML (Hypertext Markup Language) code minimal.
Tools and Programs Used:
Coding: HTML, CSS, Java Script
Hosting: Netlify, Google Cloud, Github
Wireframe: Adobe XD
Roles:
HTML: Shalini Vijay
CSS: Shalini Vijay, Balaji S
Java Script: Balaji S
Wireframe: Shalini Vijay
Hosting: Shalini Vijay, Vijay Rajan Machingauth, Hanish Keloth, Karthik Sethuraman
2. Animation
Adding a simple animation on clickable images made the interaction more fluent and gave the user a good feeling. This was done taking into consideration that excessive use of it may make the whole feature redundant.
3. Grid
Grids created a balance between solid visuals and the overall structure of the website. It enhanced the visual experience of visitors and also offered more flexibility. As a result, it became easy to update the layout in a consistent way to match any screen size.
4. Copywriting
Content strategy was viewed as an arrangement of ideas. With the structure set in place and a firm grasp on the presentation of case studies for each graphic design project, significant content was generated for the inner pages of the website.
5. Design and Illustrations
The illustrations on the homepage helped in adding a unique branding element to the portfolio. These thematic illustrations was a smart way to represent the personality of the designer and convey the messages in a fun, attention-grabbing way. They tell a story leaving a lasting impact on the visitor.
Website Development Stages
Website Pages
Overview
A portfolio website can help in circumstances where I want to make a strong impression, provide proof of my work, and differentiate myself from other designers.
Also, the online presence increases my visibility and increases the chances of getting noticed by prospective employers/clients.
Challenges
Though I was aware of the fact that using a professionally designed and coded template is the easier way than building a website from scratch, I decided to go with the second option to challenge myself and explore my web development skills.
The biggest challenge I faced was not during the coding stage, but it was while getting the website hosted successfully.
Outcome
The website has a completely unique design as it was built from scratch according to my liking.
It was built to be search engine friendly, responsive and it works across all browsers. There is room for expansion if in the future I decide to add more sections to the website.
Learning
Responsive Design
Responsive websites are no longer nice-to-haves. They are must haves. Having a responsive design not only made the website mobile-friendly, but it also improved the way it looked on devices with both large and small screens. Eventually, it will help improve page rankings on search engines.
Clean Code
HTML coding is about craftsmanship. Clean HTML code saves time and avoids confusions in the future when the need comes to make changes to the website.
