116's Website Design Case Study | Nilead | Portfolio


Bringing brand awareness to Oneonesix through digital marketing


WEB PORTFOLIO
116 is a full service film & commercial production house, based in HCMC Vietnam, servicing South East Asia TVC, feature films, series & stills.

ONEONESIX


OneOneSix (116) is a collaboration project of TheLabSaigon and Nilead. In this project, Nilead took the position of the web technical service provider to implement the new website interface of OneOneSix:

  • We collaborated with TheLabSaigon design team to turns the still design into a working website.
  • We helped TheLabSaigon and 116's team to work out improvements on the design using our web design experience.
  • Nilead team provides technical training and documents for OneOneSix team to manage their website.

OneOneSix was not a huge project but it had its challenging moments for us to deliver minor improvements to enhance the end-users experience.


ONEONESIX-WEB-DESIGN-CASE-STUDY-NILEAD-PROJECT

EMPOWERING THE FILMMAKERS


Nilead's objective was to create an outstanding website based in the original design provided by TheLabSaigon to elevate 116's brand, showcase their philosophy and hard work through their versatile portfolio. The website also serves the purpose of a communication portal aiming to attract potential customers and partners, and generate new leads.

To accomplish this: we focus on creating a flexible layout with an easy and intuitive management system that allows 116 to showcase multiple gallery sections with their projects in a minimalist style. At the same time, the website should be easy to navigate and work with all the major devices with a special focus on mobile devices..


ONEONESIX-WEBSITE-CASE-STUDY-WEB-DESIGN-NILEAD-PROJECT


BUILDING THE SITE


The design of 116 was done mainly by our partner, TheLabSaigon. After receiving all the design and guidelines from TheLabSaigon creative team, Nilead team collaborated with the design team and the client to make improvements on the design for web and mobile users and created the general website style that complies with the brand guidelines.

BRANDING GUIDELINES


IDENTITY USAGE
ONEONESIX-WEB-DESIGN-CASE-STUDY-LOGO-USAGE-1
ONEONESIX-WEB-DESIGN-CASE-STUDY-LOGO-USAGE-2

ONEONESIX-WEB-DESIGN-CASE-STUDY-LOGO-SPACING



MIN SCREEN SIZE
Dimensions: 46px length
Minimum spacing size: 15px

MAX SCREEN SIZE
Dimensions: 248px length
Minimum spacing size: 80px
IDENTITY CONSTRUCTION
ONEONESIX-WEB-DESIGN-CASE-STUDY-LOGO-CONSTRUCTION

COLOR PALETTE

Black

HEX: #000000
R:0
G:0
B:0
H:29
S:38
L:0
100%
80%
60%
40%
20%

Pale Gold

HEX: #EABE8F
R:234
G:190
B:143
H:29
S:38
L:91
100%
80%
60%
40%
20%

White

HEX: #FFFFFF
R:255
G:255
B:255
H:29
S:0
L:100
100%
80%
60%
40%
20%
TYPEFACE
ONEONESIX-WEB-DESIGN-CASE-STUDY-TYPEFACE
HEADLINES
ONEONESIX-WEB-DESIGN-CASE-STUDY-HEADLINES
BODY TEXT
ONEONESIX-WEB-DESIGN-CASE-STUDY-BODY-TEXT


SINGLE PAGE LOADING EFFECT

One of the small yet fascinating features we did for 116 was a fake single application effect. With the client's requirement to have the website to load like a single page application, we considered several options and did not feel confident that using AJAX to load the website is a good solution for Search Engine Optimization purpose. Even with Google bots now capable of processing javascript on websites (only to a certain extent), not all search bots can do the same. What we did, in the end, was to fake a one-page loading effect while still keeping each website page under its own URL and capable of being accessed directly via unique URL.


FLEXIBLE LAYOUT

Based on the client's need to edit and upload new content (images and videos) regularly to the gallery sections on the website without breaking the layout, we created a block design system. Depend on the number of blocks in the design, the blocks size and position can be adapted to fit the layout design automatically. This flexible block design system and Nilead's CMS empowers 116’s management team to update content in an easier and efficient way.

ONEONESIX-WEB-DESIGN-CASE-STUDY-BLOCK-SYSTEM-NILEAD-PROJECT


ONEONESIX-WEB-DESIGN-CASE-STUDY-LAYOUT-PROJECTS

ONEONESIX-WEB-DESIGN-CASE-STUDY-LAYOUT-WHO-WE-ARE

ONEONESIX-WEB-DESIGN-CASE-STUDY-LAYOUT-CONTACT-PAGE

ONEONESIX-WEB-DESIGN-CASE-STUDY-WIREFRAME-PROJECTS

ONEONESIX-WEB-DESIGN-CASE-STUDY-WIREFRAME-WHO-WE-ARE

ONEONESIX-WEB-DESIGN-CASE-STUDY-WIREFRAME-CONTACT
116's website was designed using a 12 columns grid layout to allow flexible elements arrangement.


EASY NAVIGATION

We implemented a sub navigation system that is only displayed under specific sections when necessary to avoid cluttering the navigation system.
Throughout the design and improved UI/UX, we never lost sight of the end goal: The user, after seeing the portfolio, should be able to contact 116 for their services in an easy and fast way. To remove all complication and distractions we placed a call to action button on the navigation bar, allowing the user to contact 116's team with a simple two clicks process.

ONEONESIX-WEB-DESIGN-CASE-STUDY-NAVIGATION-SYSTEM


MOBILE-MINDED

Today’s users can access online information from diverse devices, and they expect the mobile experience when navigating a website to be as good as in a desktop computer. The responsive designs for 116’s website aren’t just scaled down version of the desktop design; they are designed and developed deliberately and uniquely, with an absolute focus on every element. We adapted the responsive functionality and overall design aesthetic of the site in order to improve the user experience on the website and meet their expectations on usability and load times.

ONEONESIX-WEB-DESIGN-CASE-STUDY-RESPONSIVE-DESIGN-MOBILE


We have run various tests to ensure best user experience on these devices and made many changes along the way using real users' feedbacks. While it's impossible to run tests on all mobile devices, we picked the most common Android, iOS, Windows phones to run test ensuring better compatibility.


ONEONESIX-WEB-DESIGN-CASE-STUDY-RESPONSIVE-DESIGN-TABLET-MOBILE

116 website is displayed beautifully on major devices including tablets.

Experiments


In every project we do, we always try to do something new, either small or big. In this project our experiment was with the animated introduction on the website homepage. At first, we wanted to use a video file, but the size of the file was troubling (over a few Megabytes even with all the compression). We didn't feel like it was a good solution considering that it can slow down the site loading speed and hinder users' experience on the website. After researching and testing several solutions, we decided to use bodymovin, an Adobe After Effect plugin to export the whole animation into html/css/js with a much smaller size. The additional bonus of using this plugin is that we can know exactly when the animation ends and trigger the display of the introduction text and menu.

DELIVERABLE


solid interior

CORPORATE WEB

Nilead partners with TheLabSaigon to revamp Solid Interior online presence, showcasing their new company brand identity and mindset
next project

LET’S START TODAY


Contact us today for free consultation and get your project quoted and started within hours. Need a
project done next week? We can do it, let's get in touch.

contact us