DESIGN OF THREE PORTFOLIO WEBSITES
The brief was to design a website which will act as an online portfolio to showcase projects and skills to potential clients and hiring companies.
WHAT IS A PORTFOLIO WEBSITE?
A portfolio is a collection of works samples that you can bring to an interview, send to a prospective employer or even post online while a portfolio website is one that provides professional information about an individual or a company and presents a showcase of their work.
There are three types of portfolios;
· Process portfolio: This portfolio shows a person’s performance over a period of time. It purposes isn’t to prove something but rather improve and show the process before achieving something.
· Product portfolio: This portfolio is specific set of evidence developed over a short period of time to meet a desired outcome. Each person developing a product portfolio has a similar piece of evidence.
· Show case portfolio: These are collection of a person’s best works, chosen by the individual. These portfolios are often used for job interviews and teachers of the year competition.
What we worked on was a showcase portfolio
ABOUT THE WEBSITE:
We worked on portfolio websites for three clients, each of these people has different professions, Mark Onige who is a graphic designer, Adebayo Oladipo who is a UI/UX designer and John Alvin who is a full stack web developer and these personal portfolio websites wishes to showcase their talents, so as to obtain a better relationship with clients and have a better workflow as well. At the same time, they want a simple portfolio website that can be easily navigated through by clients. This is because overtime there has been complaints of having too many clicks and all before one can access the works of a skilled personnel. We then decided to group our selves into three extra groups, each of the group picks a portfolio website they would design among this three we have mentioned.
A brief on these professions;
- Graphic designers create visual concepts, using computer software or by
hand, to communicate ideas that inspire, inform, and captivate consumers.
- UI/UX designer, UX (user experience)designers works on a team to create products that provide meaningful and enjoyable experiences for users. They are concerned with the entire process of product design, from branding to design to useability. UI (user interface) designers build interfaces in software or other computerized devices.
- Full-stack web developer is a person who can develop both client and server software.
PROBLEM STATEMENT:
With what we have been able to gather, so many sites have a lot of baggage’s, which makes it bulky for clients to navigate through easily and see what they really want to see.
RESEARCH OBJECTIVE:
Our major aim in this work is to help clients to navigate through the works of professionals with ease to get what they need.
RESEARCH QUESTIONS:
- What should a portfolio be made of?
- How should a portfolio be arranged?
- Are all kind of works to be added to a portfolio?
METHOD OF INFORMATION
- reviews and
- observation method.
USER PAINPOINT:
The website is too packed with a lot of irrelevant details that portray the actual reason for the site, which is to showcase expertise.
DESIGN SOLUTION:
Considering the pain points of users, we ensure to include the following sections [about me, work, skills, contacts]. Also, we included….
- low-fidelity sketch
- high-fidelity sketch
DESIGN DOCUMENTATION:
Basic sections of the Portfolio Website
- Home Page
- About Page
- Portfolio Page
- Contact Page
GRAPHIC DESIGN PORTFOLIO WEBSITES
SKETCHES:
MEDIUM FIDELITY WIRE:
ABOVE IS THE GRAPHIC DESIGNER’S PORTFOLIO WEBSITE
One of the most important aspects of a personalized website portfolio was to select a theme that projected a graphic designer’s persona. Hence, we decided on a dark blue theme, leaning more towards professionalism. As well as using a professional Font family, The Monserrat Font Family.
The navigation through site pages was kept fairly simple — a separate page for each topic to provide a clear distinction.
Color choices: Blue
Font: Monserrat
UI/UX WEBSITE PORTFOLIO
Font choices: Poppins
Color choices: 8C15FF
FULL-STACK WEB DEVELOPER PORTFOLIO WEBSITE
Who is a full stack web developer?
Someone skilled in creating and maintaining World Wide Web applications. Responsible for the technical aspect (capacity & performance) of a site, which measures the speed of the website and how much traffic the web can handle.
Background
The task for the week is for our group of UI/UX Design (Zulu Clan) to design three different portfolio websites with the following sections: about me, work, skills and contact.
We decide to further section the group into three more groups after concluding on the portfolio we plan to design. Of the three groups my team members and I choose to design a portfolio for a web developer.
Problem statements.
During our research we gather that some portfolio for a web developer lacks context; some are using outdated design and either forgot or omitted to update their portfolio. Also, some of the communication in use are unclear. Some have a vague description of themselves and their businesses.
Research Objective:
To design a descriptive, clear, simple and concise portfolio for a full stack web developer.
Research Questions:
We considered the following questions to help us come out with a better results.
1. Whether using a vague description of oneself makes it difficult for use that to recharge makes it difficult for a user to reach out.
2. Whether poor social proof of elements and outdated samples is a put off to users.
Method of information
*online reviews
* observation method.
User pain points.
While conducting research on this project, we observed the following user pain points.
1. Too many textures and colors;
2. Outdated design;
3. Vague description of oneself and the business.
Design solution:
Our design inspiration is from Behance and we made use of Figma in creating this project.
Considering the pain points of users, we ensure to include the following sections [about me, work, skills, contacts].
We included a clear yet simple description in the given task by designing the required sections in separate pages to avoid a complex designs. We also included a download CV box on the Contact page for viewers to have more information about the portfolio.
We made use of four colors which are: White with the color code #FFFFFF; Black #161616; Grey #2A2A2A; and Orange #E24503.
Further, we designed a logo using Canva as our design tool, and with another shade of color Orange with color code #CC5500
Tools used:
Figma, Behance, and Canva
Theme:
Fonts: Monserrat
Low fidelity design
High fidelity design
Since the website is designed specially to showcase the best projects out of all the works, therefore, the project count is low. Only a snippet of the projects is shown, as a way of showcasing simplicity.
The Homepage shows all the project categories from which one can navigate to their desired category. It shows the picture of the owner of the site. It also declares the name and designation of the person in question. Plus, a personalized Logo.
The About Page clearly states the entire description of the owner together with a picture to buttress the point. This description should be written in a context that is relevant and compelling to the types of clients the Designer wants to work with. It’s a page where one is not ashamed to show off one’s personality.
The Portfolio Page speaks volume of what the site is all about, works that define the professionalism of the Graphic Designer. That is the whole essence of the site in the first place.
Lastly, we have the Contact Page, where the contact details of the owner is stated, email, phone number, and address. It makes it a lot easier for clients to contact the Designer. It also gives multiple communication options where a client can get in touch wherever is appropriate for them.
Impact:
We can boldly state at this point that my team members and I can work under pressure.
CONCLUSION:
It was an amazing experience designing the Portfolio Website for this there persons, doing projects like this makes it always very fulfilling and makes one more eager to move forward in the industry. We are so happy for the progress made so far because we have been able to create a website that is so simplified such that the user is always clear on functions and all what we have.