Awwwards
 
 
 
 
 

Modello

Modello - header

Project type:

Corporate Website

Services:

Web Design,
Branding update

Client:

Modello is a virtual reality tool that helps you create a custom visualization of a interior or architectural project. It allows the audience to fully experience project visualization as if they were really there. Users can see everything from the cozy details of a new luxury apartment to enjoying the breathtaking rooftop views of a skyscraper. The client needed corporate website design and branding updates.

SEE ONLINE

Project goals

The brand already had logo and some kind of creative direction from the client so the project started by preparing Stylescape and choosing suitable fonts (Poppins for the headings and Montserrat for the main text). After discussion with the client we concluded that the feeling of the webdesign should be minimalistic, clean and architectural. My work included color palette and tweaking of the gold nuances so that it contrasts well both on dark and light backgrounds. We also worked together with the client to choose the proper photo images for the website in the final stages of the design process.

Next stage was Wireframing so that the client can visualize and approve the layout of the homepage. The challenge here was to visualize the potential uses of the product in a compact but still interesting way. Another thing that I had to take into account was the gradual transition between sections as per client request.

The project also included designing an inner content page used for blogging or additional information and also business cards design.

Modello Wireframes
01

Solutions

1 / 6
  • Modello Home Page

    The client wanted to have the design clearly showing that this tool is for creating structures in virtual reality, that's why they liked my idea about animation of the header image that gradually becomes a wireframe technical drawing when users scroll down. I also included other elements of technical drawings like dashed angle, rectangle and circle here and there in the background in order to come closer to the architectural style of the design. The main navigation was fixed on the top of the viewport so that it is easily found in such a long page.

    My suggestion for the next section describing the product was to have a video so that the whole experience will be even more immersive. Blending sections was achieved by using photos of rendered buildings or interior designs that were made monochrome and with lowered opacity.

    Features section included thin line icons that fit well the technical drawing style. I also incorporated isometric lines for background which is another good symbol for the virtual world.

    Uses section was presented by rectangular boxes that have a slight offset so they differ from the usual grid structure, implying that with Modello everything is possible. The designed interaction when hovering over the boxes was to have the box label slide from the bottom to the top and thus allowing space for additional text to show.

  • Modello Contact Form

    We didn't want to have very long home page, but the client wanted to have some kind of contact form anyway. So the solution here was to have the form showing in a popup dialog so when accessed from the navigation it can appear without changing your scroll position but also bringing more attention.

  • Modello Content Page

    The content page was simple. I played with typography so that the client can see all the different use cases for bigger and smaller headings, photo placements, paragraphs etc. Left navigation and a breadcrumb line was also necessary for the good bearing of users.

  • Modello Business Cards

    Business cards also included the wireframe building photo in order to have brand consistency. Back side of the cards was simple - brand's dark blue background, logo in the brand golden color and very short text explaining company's services.

Client Testimonials

Georgi is fantastic to work with! He is one of those rare artists, who can ‘read your mind’. He puts time and effort into learning about the brand he designs for, and it pays off. He really gets how each brand should look and feel like. You point the direction, he comes back with developed idea plus creative additions you wouldn’t have thought of! On top of that, he has great communication skills and work ethic.

Elena Dexter
CEO of AllBright Designs