Untitled Document
 

UI/UX & branding

s.png

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 

dsf.png

Page hierarchy 

s.png

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://www.dotlogics.com/
https://www.digitalsilk.com/web-design-company?utm_source=designrush&utm_medium=referral&utm_campaign=webdesign
https://rno1.com/ - for services
https://exaud.com/
https://jelvix.com/ -services
https://www.exposit.com/
https://itcraftapps.com/?utm_source=designrush.com
https://www.a3logics.com/?utm_source=designrush&utm_medium=Top%20Custom%20Software%20Development&utm_campaign=paid
https://www.arkasoftwares.com/?utm_source=designrush&utm_medium=referral&utm_campaign=lisitng
https://geniusee.com/ - Service icons

 

Wireframes
 

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

The quick brown fox jumps over the lazy dog

Font: Avenir medium 

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG

The quick brown fox jumps over the lazy dog

Mascot design 

Frame 7.png
 
giphy.gif
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.png

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.png

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


 

Portfolio-1.png

Footer

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.png

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


 

Old_Trafford_inside_20060726_1.jpg

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

Mascot

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

s.png

Check out more of our projects  below

Or

Head back to the top