Shincube Landing Page Branding
About
Branding design for Shincube, with the MVP being the landing page – I worked with my client (who is also a developer) to design a landing page with the objective being to have animations and effects to impress the user on Shincube’s capabilities as a technical development house.
Role
Research / Branding / Conceptualization & creative direction / Creation of visual assets / Mockup prototyping
Tools
Adobe Illustrator, Adobe XD
The website starts with the Shincube website as a loading icon.
When the website finishes loading, the icon should then expand out – with other elements floating around the webpage, which “wiggles” slightly according to the user’s mouse position & movement.
As the cube loads out, the text will load in.
This is when the Shincube logo loads in, and is slightly placed on the right to ensure readability of the text. The menu also initially appears at the bottom – the client wanted a bottom menu for something “different”.
However, as the reader continues scrolling, the menu will move to the top to ensure it doesn’t block elements.
The Shincube cube then breaks apart.
The next section scrolls in – “Collaborate” (from top to bottom) and “Commission” (from bottom to top.
Clicking on “Collaborate” expands to show Case Studies where Shincube worked on mostly technical development only.
While clicking on “Commission” expands to show Case Studies where Shincube came in for both consultation and technical development.
For the Services section, we wanted to go with a grid format that would showcase the different services offered (from Technical to Non-technical), all at a glance and in a more visually unconventional format than the usual “table”.
The last part calls back the Shincube initial animation, where scrolling down puts together the cube and then leads to a final call-to-action.
Research
Copious amounts of research was done for this project, as it involved a lot of brainstorming and recommending concepts (such as transitions, animations, and effects) to the client and determining feasibility and user experience.
For the rest of the website, such as iconography, color scheme, and animations, effects, and layouts, these were the references I provided.
