01 Oct 2014

Our new website

Categories: Design, Webdevelopment, UI

You may have noticed that we have a brand new website. After having our old website for one and a half year, it was time to rebuild the website completely. This process took longer than expected since the website is more than just a few pages. It represents us, explains the way we work and showcases the projects we're proud of. The way we work has changed a lot over the past one and a half year. Now with the new website we needed to put our new process on paper and make it concrete, and that was tougher than expected.

####Tl;dr: We built and designed our new website with Jekyll, kept the feel of our old website and described our new work process.

A new look with a familiar feeling

Building a website for your own shop brings a lot of questions to mind. Not only design related questions, but also more business related questions. Building a new website is fun, but you are aware of the importance of the website. Within Label305, the function of the website was very clear: “Show both potential clients, potential employees and peer companies what we do, what we are capable of and who we are, while maintaining the feel and recognition of our old website.

Flat design with detailed icons

In my opinion—the elements that ‘made’ the old site, were the grungy illustrations and details, the the font Intro and our blazin’ blue and roaring red color. My brother Xander and I both wanted to abandon the grungy thing within the old website, while maintaining the feel of the same old website. What we mean with “the feel of our old website” is the combination of a certain degree of flat design and a more cartoon-like style illustrations.

I added the yellow color to our color palette and transformed the round borders under the old website’s sections to sleek repeated triangles and rotated squares. The “Intro Book Alt” font was also added to the Label305 style to have the opportunity to vary more with the fonts. I shot some pictures of our office and projects, something that was totally missing on the old website. However there was still something missing in the design and overall style. The recognizable Label305ness. Alex van Brakel and I started to make vector icons, for every step in our process, and our services. These icons became some kind of “small art works”: icons with a lot of detail.

The combination of screen filling images, sleek borders, cool colors and detailed icons made the overall style very familiar to the style I describe as the “Label305’s style”. All while having a design that does not look like the old website at all.

Development

The development of our website was done the same way we work with clients. We started with a session with four people and determined the goals and the raw concept of the website. Wireframes were made and a lot of ideas were captured. Based on this session, a backlog with to-do’s was filled. The new website was made using Jekyll, which is great for static websites, and Sass CSS.

During development, every built feature was reviewed in pull requests and merged within the development branch. I was focusing on building parts which are usable, consistent and could be improved in the near future, being useful at the moment. This way, I was able get a creative workflow, without focusing on one single element of the website. Photoshop was not touched within the process and every step was an improvement, which works very satisfying.

Animations

The old website looked kinda cool, however when looking at animations it was a bit static. There was one CSS-slider with images and the other parts of the website were just present. Animations are cool and can be an addition to your website, but a website is not a showcase of all animations you can make. Keeping this in mind, I focused on combining animations that have the same direction, creating unity. For example the header animation combined with the parallax titles: both vertical. All animations in the website are vertical upwards based, focusing on scrolling further to the bottom.

Responsive web design

Our website’s styling is optimized for both tablet and phone viewports, which was a real challenge. Bootstrap was helping a lot, but I really needed CSS to create specific styles for specific screen sizes. It took some effort, but it is so cool when your website looks good at all sizes. The site now looks different on laptop, tablet and phone, but the readability is always good.

Conclusion

The new Label305 website really represents who we are and what we do a lot better. Also the implementation is much more open to further additions and changes, since there is a lot more consistency in the design. Jekyll is a cool tool for static websites. And as a front-end developer, I really learned a lot during the development of this website.

By the way, the source code of the whole website can be found at GitHub.

Written by: Olav Peuscher