Project Overview

The art industry is a notoriously difficult field to get into due to the massive amount of competition, therefore an artist’s portfolio can often determine whether or not they get the job or contract.

It’s important, then, for artists to consider how their portfolio frames their work and to utilize every available method to make their work stand out more.

Goal

Design a mobile portfolio that frames the artist’s work in its best light while also being unique and distinguishable as a whole.

Problem Statement

I am a new mecha anime/manga artist looking to stand out more from other artists to land a full-time job.

Process

My design process

Research

The bulk of this project was largely based around research to answer two crucial questions:

1. What are the current conventions (e.g. information, styling, etc.) of an artist’s portfolio?
2. Which design approach would help make an artist’s portfolio stand out more?

For the first question, I searched and viewed dozens of existing artist portfolios and articles about artist portfolios, and made notes about the themes that came up the most often. I found that:

• A good portfolio tells [the artist’s] story: Art is easily plagiarized, and much like UX, people can often take someone’s work as their own. While there are ways to trace art back to its original source, an artist who can tell their story and have it reflected by their work appears to be much more attractive to recruiters.
• Contact details are a must: A bit of an obvious point, but one iterated in most of the articles in my research, was that an artist needs to add their contact details. At minimum, the artist should provide their e-mail, which enables recruiters to add them to a list of prospective candidates, but having links to the artist’s other accounts (e.g. ArtStation, DeviantArt, Instagram, etc.) also helps.
• Grid layouts are benefitial for both organization and responsiveness: Practically all of the portfolios that I viewed during my research showcased their work in a grid-styled format. This appears pretty standard, especially as popular artist sites like ArtStation and DeviantArt utilizes this style, and it also lends itself well for good responsive web design practices.

The answers for the second research question largely stems from my findings for the first research question. All of the portfolios that I viewed appeared to have been made with some sort of template — while templates provide an easy way to build and organize a portfolio, they are inherently generic.

If I wanted to make an art portfolio to stand out, I needed to achieve a couple things:

• Art that distinguishes itself: A uniform grid only makes an artist’s work blend together; it doesn’t relay what the artist perceives as their best work, therefore nothing really stands out. Sizing is one common way to address this goal, but incorporating illusions of depth, a core component of Material Design, can also enhance the object’s relative prominence to surrounding objects.
• Framing art pieces with field conventions: Art always has a purpose, so an artist’s portfolio should reflect that purpose. In the case of my hypothetical artist, the portfolio should reflect how art is used by the manga and anime industry, which could deal with anything from digital wallpapers to manga paneling.

To establish a more unique portfolio style that compliments the art, I believed a hybrid of neumorphism and flat design techniques would allow me to achieve both of these factors.

While neumorphism can be a little controversial, one of its core characteristics is its ability to create a much more convincing illusion of elevation; one that’s not floating above a layer, but being raised above it. Using neumorphism also helps to facilitate the overall portfolio’s sense of uniqueness, as the style has only been implemented in a handful of sites.

To maximize neumorphism, however, I also felt like I needed to integrate some elements of flat design. Historically, sites made up entirely of neumorphic elements have very minimal contrast and confused users as to which elements were interactive.

Blending flat design into some aspects of the overall design would help solve this issue, as it would allow for me to define how neumorphic elements should act and behave for the sake of consistency.

Information Architecture

After gathering my research findings, I set out to chart the paths for the mobile portfolio site. A single-page site appeared to be highly recommended by recruiters as it allowed for them to quickly review the artist’s work.

The majority of existing portfolios, however, are segmented based on sections that introduces the artist, provides tutorials, or links to a shop where visitors can buy the artist’s work.

In the case of my hypothetical artist, the goal is to land a job, not to sell their work, therefore I opted to only design a single page site aimed towards recruiters.

I do acknowledge, however, that having additional sections are both conventional and necessary, therefore having a menu button that houses links to additional sections would balance both the site’s sense of simplicity and modularity.

Under a single-page design system, a journey should be established beginning from the top and ending at the bottom.

Thinking of a three-tiered storytelling structure, the first section should introduce the artist and their greatest work, followed by a second section that highlights more featured works, and a third section that provides more work samples and a way to contact the artist for job or contract inquiries.

Wireframing

Wireframes

After establishing a general information architecture, I created a few basic wireframes to visualize the products of my research.

With each subsequent section, the images gradually become smaller, which establishes a journey from the artist’s best work to their contact information.

The Gallery subsection also features some unique styling reminiscient of manga panels, which helps to further cement the artist’s expertise in manga and anime styles.

Furthermore, while I only focused on the single-page site, adding a menu button on the top-right of the first section allows for clear navigation for any sections the artist would like to add beyond the single-page site.

Final Render

Final renders of the Illustrator Mobile Portfolio

Once the wireframes were completed, I used stock images related to mecha and other anime and manga imagery to fill in where an artist’s work could be placed.

Specifications:

Font Type: OCR-A
H1: 42-pt (Name)
H2: 18-pt (Title and User Instruction)
H3: 31-pt (Section Headers)
H4: 21-pt, Opacity: 60% (Featured Work Names and E-mail)
Column Layout: 4 (83 width, 10px Gutter, 25px Margins)

For the typography, I used OCR-A as it matches the sharp edges of prototypical mecha, and the corner brackets (i.e. kagi kakko) help to both frame important text while furthering the sense that the artist specializes in a Japanese art style.

The artist’s major art pieces have all been elevated through several techniques.

For the splash page, the art covers the entirety of the screen, while art pieces in the “Featured Works” section benefits from ample screen space, title information, and neumorphic techniques, and the “Gallery” section frames the art pieces using manga panels.

For the latter, neumorphism also helps to ease some of the gray-box optical illusions that are normally prevalent when elements are placed closely together.

Although an accidental discovery, this could be attributed to the light and dark shadows used to create the neumorphic effect; rather than having a sharp contrast between the border and background gaps, the shadows establish a smoother transition that mostly eliminates the gray-box illusions.

Conclusions

I set out to create a mobile portfolio site that would enhance an artist’s ability to distinguish themselves in a sea of other artists. A well-constructed portfolio is just as important as the artist’s work, therefore it was important for me to design a system that presents an artist’s work at its best.

My use of both neumorphism and flat design work well in this instance, but I also acknowledge that this styling cannot be used by any artist.

While this can be a limitation in terms of how many people could benefit from it, it also allows the artist to maintain a sense of uniquness when their portfolio is compared against other portfolios made with generalized templates.

As this was a personal prompt, there were a lot of limitations to this project, most of which could be attributed to the lack of a team to exchange ideas.

Although my research informed how I approached the designs for this project, I was limited to the sources that I could observe independently rather than cooperatively.

Still, the finished design maintains the sort of simplicity that I aim for my designs while demonstrating my experimental nature and approach towards design.