An Introduction
Base5 Technologies or just Base5 for short is a Toronto based tech start up focused on changing the way Architects, Engineers and working professionals in the construction industry approach code compliance and building regulations.
I joined the team as Creative Lead on this side venture, which means I got the lion’s share of the work when it came to the design of the company’s brand, website, marketing materials, as well as the UX/UI of the product itself.
This post is going to focus primarily on the development of the brand and our corporate website, with a separate post being dedicated entirely to the development of our web app, Query.
The Brand
Not long after gathering the team initial team, we all sat down one Saturday morning for a brainstorming session. Over a long, gruelling 8 hours, as well as many crumpled pages and cluttered whiteboards later, we hashed out what would later become the foundation of our corporate identity. Namely our company name, mantra/mission statement, values as a team and defining in clear terms exactly what problem we were trying to solve. (It was a busy day). Before we even left the meeting, ideas for the logo had already started forming.
Over our next work session I came up with some very rough ideas in terms of the general direction our logo could take. We all agreed that we wanted a word based logo, the question just came down to the aesthetic itself. Below are a few of the many examples we ended up tossing around (and then scrapping) that day.
In the end we liked the 5th power idea for the number, but preferred the cleaner lines of the all caps logo you see above. Over the next few work sessions, between wireframing some of the initial app UI, I put together some further revisions of the logo and started refining the design. I experimented with different weights for the Base and some different font types for the 5.
Once both the team and I were happy with the combination, I redid the chosen logo from scratch, rounding some of the sharper corners, refining the kerning and the overall aesthetic of the logo until we were left with…
During this process I also put together a general colour palette which was later expanded to not only help further solidify our identity, but was also strongly integrated into the UI of the app as well. The green above and the blue in the title image were the 2 primary colours that we anchored everything else against.
The Site
As with any site, before I even fired up my laptop, I opened my notebook and sat down with the team. We worked out the sitemap, user flow and the general content blocks of each section. We wanted to get something up quickly so the initial page was just a quick landing page and it was fairly simple (if a bit utalitarian). It wasn’t until we decided to revisit our home page in anticipation of the product launch that I got to sit down and develop each section further.
As I began drawing up wireframes for the new site, speed, rough drafts and iterating on different versions of an idea became the name of the game. (Below are three different versions of our main blog roll. We ended up going with a combination of #1 and #2).
Instead of doing away with the original page all together, I decided to take the existing design and expand on it. Normally I’d do a full set of mock ups at this stage for the team to review, but since we already had a general idea of the aesthetic and I had free reign over the design, I decided to skip the mock ups and jumped straight into coding.
The site had to be fully responsive and mobile accessible. I decided to use Ghost as our blogging platform, instead of Wordpress on account of it being more light weight and easier to work with. (Though also much more limited, as I later found out). The theme itself was then built using Bootstrap as a backbone for all the frontend work. This was the one place I wish I had done things slightly different. While Bootstrap provided many benefits (solid grid system, existing button classes, SASS mixins, existing media queries etc…) I ended up doing quiet a bit of custom work to get things to look and function how I wanted. While Bootstrap was still of benefit, by the end I was fairly confident I could probably have made the site lighter by coding everything myself from the ground up. That being said, especially for quick prototyping, you still can’t beat working with an existing framework.
In addition to refining some of the elements from our previous landing page, we expanded the home page with a new About Us and a Blog section.
Since we were going to have a number of forms (Sign in, Sign Up, Contact, Password Reset etc…) I wanted to spend a bit of extra time and come up with a form design I was really happy with.
Below is a sneak peek at our Sign Up page. (We’re still in closed beta so this page isn’t live yet). Each field showcases the following state:
- Name: Error
- Email: Default
- Password: Active
- Confirm Password: Hover
Once those were done, I also put together a template for our various error and confirmation pages. .
The Blog
While I’ve done some more traditional blog designs before, I wanted to try a few different things here.
I wanted to make sure that the blog was not just aesthetically pleasing, but functional as well (ie: not just an afterthought on an existing site). I wanted it to be something visitors would actually want to read.
I’ve recently started seeing 2 column blog designs, where the Featured image for the post lives on one side, and the written content on the other. The image on the left stays static as the reader scrolls through the content on the right.
While I wouldn’t use it in every case, I really like this approach. It’s beautiful as well as functional. The big, full screen featured images allow us to really showcase the media and set the tone for the post, while the written content on the right more closely resembles the width and spacing of an actual book. The two combined, hopefully making for a more pleasant reading experience.
As we go forward and start getting feedback from our writers as well as our audience, we’ll be making some tweaks along the way. (In fact I already got some feedback on how to continue to improve on the design). There are some things I want to implement that Ghost doesn’t yet support (namely native galleries and inline commenting), as well as things I simply didn’t have time for this time around, (such as parallax scrolling). As we accumulate content we’ll also add in a search as well as an Archive section, but for now we were happy to finally get this out and start writing.
What’s the famous saying? A project is never perfect or finished; it’s always about 80% done. If you’d like to check out our site and keep up on our progress, you can do so by visiting http://base5tech.com.
If you have any questions or feedback regarding my work above, feel free to leave a comment! You can also see some other examples of what I do, as well as get in touch via my portfolio at http://lehelbabos.com. Thanks for reading!
