Hyperbots is a new web development studio I founded in the early spring of 2018. 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.

Information Architecture

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 old school pen and paper. I concentrated on producing a sitemap, user-flows, and wireframes on this stage.

Inspirations and Styles

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.

High-fidelity Mockups

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.

Development

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.