Untitled Document

UI/UX & branding


Currently under development


The Brief 

Manthan Creations is an up and coming design studio.

A design studio however needs a personalized and unique web presence and an equally stunning website to match.

loading page 2.png
Loading Page 1.png

Interactive prototype

Feel free to interact with the prototype on the right.

An interactive prototype makes it easier to do primary user testing band gives insights early on in the designing process.

Skip to final deleverables

Design process 


Page hierarchy 


Page content

Group 8.png

User personas

Smiling Young Woman

Name: Natalie Bush  
Age: 25
Occupation: PHD student


The inspiration seker

The gist: American born, designer. is going trough design studios to get inspired and to find useful information on design.

Needs: blogs with interactive and fun content on design.
A quick and exciting interface that is easy to understand, multiple excitement features to keep her attention while not being too distracting to ruin the flow of information.

Problems: finds most websites of design studios being catered more towards the clients. hard to find information on projects and educational blogs

Competitor analysys 

https://rno1.com/ - for services
https://jelvix.com/ -services
https://geniusee.com/ - Service icons



Group 8.png

Intro video

Visual language 

Colour palette 

Screenshot 2021-08-30 201807.jpg

Font: Coves light


The quick brown fox jumps over the lazy dog

Font: Avenir medium 


The quick brown fox jumps over the lazy dog

Mascot design 

Frame 7.png
Macbook Pro Tilted Screen Mockup-1.png

PC Mockups 

Macbook Pro Tilted Screen Mockup.png
Macbook Pro Flying Mockup-1.png
iMac Pro Right Side View Mockup.png
Macbook Pro Mockup.png
Macbook Pro Flying Mockup-2.png

Mobile Mockups 

iPhone 12 Pro Mockup.png
iPhone 12 Pro Mockup-8.png
iPhone 12 Pro Mockup-7.png
iPhone 12 Pro Mockup-6.png
iPhone 12 Pro Mockup-5.png
iPhone 12 Pro Mockup-3.png
iPhone 12 Pro Mockup-2.png
iPhone 12 Pro Mockup-1.png
iPhone 12 Pro Mockup-4.png

Final pages 

loading page 2.png
Loading Page 1.png

Loading page

Simple page with logo and company name

Mascot swims across the page periodically

The bottom wave fills up and acts as a loading bar


Home page_Welcome page.png

Home page

The menu is on the top right corner

The mascot swims across the page showing scroll direction

scroll buttons on the right side show the number of pages and current slide

Quick access buttons are provided to reach the most needed pages quickly


Menu bar

The menu bar expands from the top left corner

Contains a looped video of moving fishes giving it the appearance of a fishbowl 

Short cuts to all pages are present here,

The menu bar can be closed by clicking on the menu button on the top left corner or clicking outside the circle


Home Page_Video.png

Intro video

A simple video player to show the introductory video on the company,

Controlled scrolling will make sure that the video is placed at the centre of the screen 

Video will be auto-played and looped



Portfolio Page

Alternating left and right placements which then lead to a horizontal scrolling page

Filter option by categories
(UI/UX,  Product, Graphic, etc)

Images expand on hover showing it as a clickable element,
also, the more button helps with the same 

Name of the project followed by the category of the project under it for grouping.
This is then followed by a small except of the project giving the reader a rough ide of the product 


Desktop - 574.png

Project page

Horizontal scrolling

All information arranged in boxes for easy reorganizing and creation of new pages

The mouse changes shape to show horizontal scrolling 

A mix of text videos and images to keep viewers interest while still being informative




Large contact us button on the bottom right to entice any would-be customers

Looped video of fishes swimming across the page to give a motion element 

Quick links to all the pages

links to all linked social media accounts 

about us 2.png

About us page

Attractive illustration on the top of page

Short informative text about the company

A little bit about the team, automatically scrolling images to show current team and a little bit about them

Some information on the companies logo and the meaning behind it, 

Information is presented as a poem where the language  can be changed using the buttons on the top

Join us page with information on the open positions .

search bar to search for required position 

the dropdown expands to show requirements, experience and  a link to a contact information form



Contact us page

Attractive illustration on the top of page

Various contact sources displayed, boxes expand on hover and is inteactable

contact us form  with basic information

Gallery with images of work and lifestyle of  employees



Scroll bar

Scroll bar shows pages on hover and  expands to show a traditional scroll bar when on a scrollable page 

(most other pages are controlled scrolls)


Frame 7.png


The mascot is an interactive element across all pages.

It follows the user across their journey across the website and acts as a guide throughout the journey.

Thank you for sticking with us


Check out more of our projects  below


Head back to the top