Mashimashi

Mashimashi is a Japan-based consultancy that facilitates Design Thinking workshops on solution strategies for companies.

 

Responsibilities:

Web design / Visual design

Duration:

Mar. 2021 - Apr. 2021

Responsive web design

Due to the expansion of Mashimashi, it is time to renew the corporate site. People interested in our product and service can use a laptop or mobile phone to browse our website.

Web_mobile video.gif

Design System

Mashimashi is a creative firm, and it shows energy and trust. Therefore the colour use more saturated and bright. Mashimashi positions themselves as listeners to solve problems, and the rounded font provides a humble and not edgy image.

Marshi_design system 01.png
Marshi_design system 02.png

Web iteration

In the beginning, the website use lots of geometric shapes and symbols to keep simplicity. However, it loses the connection to the users. Our purpose is to enhance the teams and companies, so it should have more humanity. The illustration was included in the final website since it can reflect more connection to people. Colour is defined by the one which gives a warm and close feeling to people.

Workshop

In order to test our MVP(DOWEL), we held two online workshop in Japan after I joined the crew, and here are the banner which uses on the event website.

Takeaway

This is my first time designing a website and collaborating with a front-end engineer. Creating a website includes many details and guides to follow to create a lovely experience for viewers.

  • Visual hierarchy

    Making users notice which part is vital and understanding what the website wants to tell is the first step for designing a website. And it all relies on visual hierarchy; if the website doesn't consider the visual order, it will make users confused and hard to read.

  • Responsive web design

    I considered how people interacted with the website and learned that the font size, photos and navigation had to be changed to adapt to different screen sizes.

Previous
Previous

Dowel | Slack plug-in | UIUX