The creative and technical process behind the creation of kierdedios.com – from paper to your fingertips. Designed using WordPress and Theme Nectar’s Salient theme.

Client

Personal project

Project Brief

As a new artist venturing out to the world and hopping in the competition, I need to make sure that I will be seen. In order to do this, I need to create a portfolio, which is an integral element in displaying my work as an artist and web designer. The final product will be used to present to potential clients and/or employers to generate income. In addition, potential audience should have the capability to use the website to communicate with me. It should be in a digital platform that everyone can access, must be cost effective, and easy to manage.

Objectives

This project aims to:

  • Elevate kierdedios.com as a brand and introduce myself as a Filipino digital artist and website creator
  • Showcase skills and abilities by building a cohesive body of work. This will be reflected on each of the page of the site.
  • Attract clients and build a client base
  • Attract employers, collaborators, and partners
  • Allow audience to understand my creative process

My Role

Entire product design from research to conception, visualization and design

Project Duration

1 month (From January – February 2021)

My Life Story – the Root of the Problem

At a young age, I have always been interested with the arts. My mother is a public school teacher. She thought me everything I know about the basics of drawing and illustration. At age 6, I joined my first art competition – a Christmas card making contest. I did not win the contest, but losing made me push myself harder to learn and achieve more. Since then, I explored a lot of art media – pastels, poster colors, crayons, colored pencils, watercolors – and honed my skills through observation, practice and dedication. My mind was set on creating a career out of it.

Everything changed when I was about to enter college. My parents decided that I should take up nursing. I was heartbroken. Coming from a poor family in the Philippines, taking an art degree is not the most practical option, so I followed what my parents wanted for me.

I’ve been working as a nurse for nearly 10 years now. Within those years, I have tried hard to love my profession for family’s sake, but I know where my heart is. I learned that the more I try, the more I’m missing in life. So I decided to follow the path that I’ve always wanted to walk on. I decided to cut my work hours in the hospital and study UX design.

Now that I am ready to venture out, I envision of creating a brand that is unique and true to my heritage and personality. I want people to see the story behind each design, and that my designs invoke emotion and empathy – that is the kierdedios.com brand.

The Methods

As stated on the objectives, the main purpose of the website is to attract employers and establish a client base by showcasing my heritage, skills, creative process and body of work. In order to do this, the following steps were carried out, each discussed in detail:

1

Identify potential audience

The first step to creating the website is to identify who will view the website. As this will be a portfolio that can likely generate income, the website must appeal to potential clients and employers/partners.
2

Similar website review

To obtain design inspiration, I reviewed two of the artist portfolios I really like online using SWOT analysis. This allowed me to identify the best qualities I can adopt, as well as the weak points I should avoid doing.
3

Categorize skill set and curate best work

Deciding on what artworks should be featured on the site is important as it will streamline the services I will provide.
4

Platform selection, branding and design

The next step is planning on the design elements for the site. This is an integral step as it will create the entire feel and value of the actual product. As it is a design portfolio, the actual design of the site will make or break the opportunities of attracting clients/employers. The platform of choice for creating the entire portfolio will be through WordPress as it is open source, which makes it flexible, easy to manage, and cost-effective.
5

Test site for responsiveness and online presence

Throughout the design process, responsiveness was taken into consideration. The Salient theme from Theme Nectar has a built in functionality setting for viewport responsiveness, which made this task easier. Next, the website was SEO optimized to drive traffic to the site. This was done using a plugin in WordPress.

Potential audience

Anyone can be a potential client – small businesses, entrepreneurs, influencers. This means that the design elements should be universal and neutral as possible. The entire site should appeal to all types of audiences. The language and choice of words must be understood by all. As for potential employers, the website must present my best works and at the same time, it should embody flexibility, attention to details, and skill. Above all, the website in itself should tell a story to keep the audience engaged.

Similar website review

Two of the online portfolios I really admire is Moritz Osterlau (www.moritzoesterlau.de) and Robert Fiszer (www.robertfiszer.com). Moritz is a UX Designer and his website features 3 of his best works. Robert is a London-based digital illustrator and web developer. His website by itself shows a lot about his works. I have created a SWOT analysis to point out each website’s strengths and weaknesses:

Moritz Osterlau (www.moritzoesterlau.de)

STRENGTHS

The layout is simple and straightforward. On the landing page, you can see his best works instantly. There are no confusing menus or buttons.

The cases studies presented his process logically and chronologically. Each step was described in detail. He added images of his sitemaps and wireframes which is important in story telling.

White space is used wisely all throughout the website. The paragraphs are placed almost at the center with a wide left and right spacing.

The website is mobile responsive. Call-to-action buttons are strategically placed in the header and footer.

WEAKNESSES

Although the project presented are his best works, he could have added more case studies or projects to show range and flexibility. There was no branding strategy.

OPPORTUNITIES

Again, adding two more case studies will allow the users to know him more and the work and thought that he puts in his projects. An on-site contact form or live chat button can also be added so that potential clients can contact the owner directly through the site.

THREAT

Potential competition with other designers especially those that present more work and case studies

 

Robert Fiszer (www.robertfiszer.com)

STRENGTHS

Robert created a website that truly reflects his aesthetics as artist and web developer, therefore creating a solid client base. It shows identity and uniqueness in terms of the pattern and colors used. The entire website is themed, which makes all the pages cohesive and memorable to the audience

He curated all his best works including all his archive projects from the past. This shows experience and in-depth skill. He also briefly presented he process he employs when working on a project.

The website is mobile responsive. Call to action buttons are strategically placed.

WEAKNESSES

No case studies were presented. The website can benefit on showing clients a detailed story behind each project. There is no clear branding strategy.

OPPORTUNITIES

The site can benefit from more detailed case studies. An on-site contact form or live chat button can also be added so that potential clients can contact the owner directly through the site.

THREAT

Potential competition with other designers especially those that present more work and case studies

 

Based on the SWOT analysis made, a set of recommendations were made:

  • Create a branding strategy that will transcend all throughout the pages
  • Devise a theme that will make all the design elements cohesive. This will make the website memorable to the users.
  • Ensure that the site responds to any viewport.
  • Call-to-action buttons must be strategically placed all throughout the site.
  • Addition of an on-site contact form and/or live chat button which allows users to connect to me directly through the site
  • Establish a strongly curated content. This will ultimately be what the potential clients/employers are scrutinizing so the artworks must show skill and versatility.
  • Present high quality case studies. It should show the entire process in detail, including photos of wireframes, sketches, etc. This allows the audience to get a peak into the technical and creative process.

Categorize skill set and curate best work

Information architecture

In order for the clients to understand my service offerings, I needed to classify my skills, which will then affect how the artworks are catalogued on the site. I find this important for a number of reasons:

  • It will delimit the scope of my services
  • It will prevent confusion to the clients
  • It will logically categorize my artworks

In order to do this, I reviewed my body of work, as well as my skill set. Using post-its (see photo below), I wrote all the types of artworks I made (Line 2) and counted the individual pieces I have on file (Line 3). I then matched them to the skills I used (Line 1) to create them. The fourth line shows the average time I spent on the artwork type, as well as the average amount I have earned from them. Doing this, I was able to paint a picture as to what artwork I am experienced on doing and which ones I am getting income from.

Analysis

The data shows that the field I am most skilled at raster/vector imaging, vector animation, and web designing, with logos as the most popular service and websites as the top earner. Based on this data, I have decided that the service offerings I will have will be:

  • Branding designs
  • Illustrations and animations
  • Web Design

This will also be the basis on how the artworks are going to be categorized on the site. Selection of the artworks is based on which ones are the most appealing visually.

Platform selection, branding and design

Platform

WordPress is the platform of choice at it is free and easy to manage. Hosting service was from SiteGround and the domain was obtained from Register365. I decided to use kierdedios.com at is short, and thus, easy to be remembered.

Logo and branding

As I have been doing freelance work in the past, I already have an existing logo (shown below). However, I felt it needs updating as it was not very memorable. People most remember me as the ‘guy with the glasses’ so I thought of using a pair eyeglasses as the main element of the new logo. I did a few sketches of how it would look like and digitized it using Illustrator.

Design elements

I wanted to use both bold and neutral base colors to the site. With much thought and color matching, I found out that the combination of white, a peach/cream shade and a blue-purple tone creates a striking yet neutral look. I want the design theme to exude my Filipino heritage in a subtle way. It must be an artwork by itself and it has to tell a story. I then thought of using the sarimanok (a Philippine mythical bird), the jeepney (Philippine’s mode of public transport), and a colonial house with kiping, a colorful edible house ornament used in the festival called Pahiyas in honor of St. Isidore the Laborer. I created them using Illustrator and, as this will be a fun addition, I decided to animate them using AfterEffects and installed them to the site as a Lottie file.

Optimize SEO and mobile responsiveness

It is imperative for this website to be mobile responsive and be searchable online as most people use search engines and mobile devices on a daily basis. As a freelance digital artist trying to break in the industry as a professional, growing an audience online is essential. Establishing an online presence often translate to authenticity and integrity, core values that are essential in order to create an audience.

Mobile responsiveness

Making the website responsive starts with using the best WordPress theme. I used Salient by Theme Nectar for the website because I have used it for a long time for client projects. Based on my experience using it, the theme is flexible, highly customizable, and has tools that support mobile responsiveness.

SEO Optimization

Certain steps were done to make the website SEO optimized. Potential clients start by putting in keywords to search engines, hence, I need to use keywords the would best reflect the work that I will offer. These keywords are assigned on the footer, page titles, permalinks, and certain elements all throughout the website. Yoast SEO was also used to manage meta data and improve search engine visibility.

Conclusion and learning takeaways

Creating my own website was a challenge. Creating and developing a process from conception to the polishing the final output was a complex task and I was happy that I was able to produce a product that will potentially pave the way for me to be seen as an artist. Ultimately, I have learned that a usable product can be created all through meticulous research and idea mapping. Although there were challenges along the way, they were all resolved by carefully revisiting the process and creating small solutions. Big thanks to Gary Melican who gave me all the design opportunities from where I learned a lot!