Project Overview
Neumorphism is essentially a combination of realistic skeumorphism and flat design — a minimalistic approach towards making elements appear real. It’s an incredibly convincing illusory design type that gives off impressions of elevation, but while flat design can do so using drop shadows, neumorphism is relatively reliant on three shades of the same color to pull off the effect.
While neumorphism can certainly look incredible, some UX/UI designers have been skeptical about its practicality and usability. One main concern is due to its low contrast, which could make the interface a bit more difficult for the visually impaired. Sam Vitale Kofman wrote an excellent article detailing the nuances and solutions towards this issue, which gave me a lot to consider when designing the current project. If I was going to use neumorphism, it had to be for something that would benefit more because of it compared to the standards set by flat design.
As neumorphism is more of an aesthetic choice, one of my first thoughts gravitated towards art. The elevation afforded by neumorphism as well as the generally pale color scheme reminded me of art galleries, therefore the purpose of this project was to highlight art pieces for a portfolio/gallery using neumorphism in a way that would be better than flat design.
With a goal in mind, I constructed a hypothetical artist to design for: a mecha anime illustrator and character designer.
Process
Research: As this project was mainly an exploratory concept, the bulk of the project was in the research that I gathered to inform how I’d approach a general design template that others could utilize. After examining dozens of existing portfolios from illustrators, character designers, and other types of similar artists, I was able to identify the most common and effective elements based on these profiles.
The most obvious takeaway is that an artist’s portfolio is most effective when they’re able to showcase their best work — aspects such as their background, education, and tools weren’t nearly as emphasized. Furthermore, while there were a lot of profiles that tended to display dozens of art pieces, these profiles tended to feel a bit cluttered and the pieces themselves felt drowned out by surrounding pieces — portfolios that selected a few art pieces in addition to a minimal, introductory art gallery appeared to be cleaner, simpler, and less overwhelming.
Artist portfolios were also themed based on an artist’s particular style: those who had more edgier pieces tended to have a darker themed site, while those with more gentler pieces had softer web elements and a site with lighter colors. Having a site that is consistent with the art that it houses makes for a seemless experience, therefore it’s important to ensure that the site design isn’t in conflict with the main content.
Another element of my research was in neumorphic design — specifically examining what makes some neumorphic designs good or bad. My findings concluded that sites that were entirely constructed with neumorphism weren’t effective enough to distinguish the interactive elements with more passive elements, but when used sparingly or in combination with flat design principles, it could highlight a particular element to greater effect. In short, neumorphism seemed to be best used as a supplemental design aesthetic rather than a core design choice.
Information Architecture: After completing the research process, I decided on a single page site to provide a quick and simple look into a hypothetical artist’s portfolio. There were three main sections that I wanted to build, with the order being dictated by my research findings. The first section would be a banner that introduces and identifies the artist, the section section would feature the artist’s best works, and a third section would provide a small gallery that showcases some of the artist’s other works as well as links to their social media accounts where artists tend to display more of their work (e.g. Instagram).
Wireframe: Using basic wireframes, I mapped out how the content would be positioned within a 4-column grid — a design choice based on Material Design. As each section represented a “tier” of the artist’s work, I wanted to convey this by incorporating different sizes for the artworks in each section: as visitors would scroll down the page, the art would get smaller and more compact. While most of the portfolios often used a grid-based gallery to showcase their work, I wanted to be able to incorporate a stylized method that would help the artist’s work stand out despite not being featured in the first two sections.
Considering my hypothetical artist client, mecha anime is known more for its rough, sharp edges rather than smoother round designs. With that in mind, fonts and image containers needed to reflect this trend, so I settled on using OCR A font for its mechanical styling as well as image containers with sharp edges for stylistic consistency. Additionally, I wanted to incorporate a bit more syling for the Gallery section that would make it stand out from the traditional grid-based layout of other portfolios. Based on the hypothetical client’s art style, I settled on a layout that was more akin to manga and comic panels — a style that fit naturally within the grid.
Final Render
The final render was constructed primarily from using stock images and screenshots of popular mecha anime.
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)
The first screen was designed to match a traditional title screen: the artist’s name and title were centered in front of an artwork that would set the tone for the rest of the site. While the original image was bright, I used a small gradient filter to darken the areas where text was present while also adding a slight drop shadow to increase its contrast and clarity.
The second screen features the top 3 of the artist’s best works, with the structure being styled like a traditional art gallery. Each of these pieces are distinguished from all of the other art works as they have names attached to them.
The third screen features additional artworks by the artist, with the artist’s main occupation as a manga/anime artist being emphasized by the panel stylings that encapsulate each artwork. At the bottom of this section are also methods that a visitor could contact and follow the artist’s work — this was positioned at the end as visitors would have seen and experienced the artist’s general style by this point. While I considered putting links to the artist’s socials in the first section, I wanted to keep the elements in that section as minimal as possible so that there wouldn’t be too many obstructions to the featured artwork.
For this design, neumorphism was used to elevate each art work, which provides an illusion that each artwork is “hanging off the wall” in the same vein as an art gallery. This design could, however, work without neumorphism — each art work could lay flat or use flat design’s standard drop shadows. Within this design, neumorphism was more of an aesthetic choice, but I also made sure that it would be functionally consistent: wherever neumorphism was used, users would have to be able to interact with that element in some way. For this design, neumorphic elements generally linked to something: Featured Works could link to the place where the visitor could find it, Gallery could overlay the full, unobstructed artwork, and social media icons linked to their respective pages.
For reference, I also converted the final neumorphic design into flat design. To accomplish this, I used drop shadows (the standard x=0, y=3, blur=6, #FFF at 10% opacity) for featured artworks and social media icons. The borders that I used to help make the neumorphic effect smoother was also taken out. While the initial section remains unchanged, the other two sections lose a lot of aesthetic elevation in flat design.
Conclusions
For this project, I set out to demonstrate how neumorphism could be used effectively in a way that would be more benefitial than flat design. I believe that neumorphism has its benefits in certain circumstances, but it’s far from something that could overwrite the standards set by flat design.
I believe this project uses neumorphism appropriately and sparingly in conjunction with flat design. While the first section is essentially flat design, the other sections used neumorphism to highlight each artwork to a much greater effect compared to flat design’s basic drop shadows. In the case of the Gallery section, the gaps feel less strenuous to look at compared to the ones gaps in flat design: while the positioning did not change, the perceived effect did.
Overall, I’m quite happy with how the design turned out, and it’s my hope that a hybrid of both flat design and neumorphism could be used for more unique, intuitive designs in the future. While only a few people and situations could make proper use of this, it still stands as a design choice that could help them stand out from the rest of the crowd.
