Design, Development Hyperbots

Hyperbots Cover Photo

The project required name discovery, logo design, web design, web development, and overall brand strategy. The site is composed of 19 unique pages and is server-side rendered using NuxtJS, Firebase Firestore, and Firebase Functions. I used Paper by Dropbox to create and organize all the information needed such as pages, sections, features, and fields. From there, I sketched layout ideas using pen and paper. I concentrated on producing a sitemap, user-flows, and wireframes on this stage.

Wireframes

I then grabbed inspirations from different mediums such as Dribbble, Pinterest, photographs, textures and compiled them to create a moodboard or style-tiles. That helped me figure out the look and feel of the site.

Style Tiles
Illustration
Logo Variation
Final Logo

Combining everything together, I started polishing the typography, grids and vertical rhythm, applied colors, images, and sample copy. I was able to design and iterate quickly using Sketch.

Homepage
Mockups

Finally, I developed the designs using NuxtJS as a framework. Nuxt is a VueJS framework where you can build server-side rendered websites. Because files are being rendered on the server beforehand, the load time on the client side is extremely fast even with dynamic contents. This is still pretty new but I was excited to try it and the results were remarkable.

Live Preview

Browse more projects


FundMyTravel

Design, Development