Case Study — Web portal design for smart city agency from Berlin
The cities of the future, so called ‘smart cities’ are a popular subject nowadays — and it is no surprise. At a time of such rapid technological growth, it is difficult not to come across this phrase. So far, TEONITE has supported various initiatives, i.e. Open Source, but we had this internal need of doing something more.
This is the reason we started cooperation with Urban Impact — agency out of Berlin, working with smart cities startups. The goal of Urban Impact is to connect all the dots to accelerate urban tech innovation in Europe, which includes working with so diversed actors as cities, startups, venture capital and academia. TEONITE has come up with simple visual identification, created a website and provided technical support.
In the short paragraph below you can find out what guided us during the designing process and which technologies we used during the project.
Graphic concept — simple things work.
Many startups and various incubators treat visual identification very conservatively or even downplay its importance. The thing is that all initiatives related to the subject of smart cities or ecology should not only be of merit, but should also raise positive emotions and encourage cooperation.
We wanted this project to stand out not only with the approach toward the subject, but also with a unique and easy to remember artwork. The premise of the Urban Impact initiative is to change the way city authorities, startups, universities and investors cooperate. Proper cooperation between the aforementioned parties is fundamental from the standpoint of smart cities. That is why we have decided that the theme should be equally fundamental in terms of designing — basic geometric figures.
The area of activity of Urban Impact is divided into three main categories: Academy, Studio and Launchpad. We have matched with them a triangle, square and circle accordingly. Why? Because we wanted to avoid complicated iconography and base it on a set of simple associations:
- The triangle in “Academy” resembles an “A” the first letter of the alphabet and a mountain peak.
- The square in “Studio” symbolizes a room — a place of work and the space for different projects.
- The circle in “Launchpad” is a collection of all existing possible actions of a given initiative, as well as a trampoline which allows the project to step out.
We have also assigned a color for each category:
- Green triangle: development and freshness.
- Blue square: safety and trust.
- Red circle: energy and optimism.
Determining the color coding and visual direction of those three main categories was the starting point for the entire project. Using simple shapes and highly saturated colors, in conjunction with the black and white, gave the project a clean-cut look, in some parts associated with video games — exciting and full of adventures.
To emphasize the modern stylistic, we have used a sans-serif font — Red Hat. In order to keep the right proportions and text readability, we used values based on numbers in the Fibonacci string: 9, 10, 12, 15, 20, 28, 41 … and so on.
The same design was used during the creation of all illustrations and diagrams. All graphic elements visible on the website are a variations of chosen base colors and shapes. End result gives us room for manoeuvre in terms of future marketing and promotional materials… but we can tell you all about it on a different occasion.
Logo — less is more
Assumptions were simple:
- based on typography,
- scalable,
- directly referring to the website’s artwork,
- contains a reference to offered services.
We have decided to create a simple and readable logo, based on the same font we used on the website. It includes three geometrical figures we used — triangle, square and circle, which are seamlessly integrated into letters design.
Due to the fact that the name “Urban Impact” is quite long, we have come up with a simplified, alternative version. Additional compact logo is perfect for social media avatars of any other constrained space. Those solutions are valued among many big brands including i.e. Google or Youtube.
Technology
We have decided to drop the typical approach (CMS) and use static content generator: Jekyll. In conjunction with GitLab, we gain not only full control over the content (thanks to VCS based on Git), but also full automation of generating content and releasing new versions (due to GitLab Continuous Integration & Delivery).
Additionally, Jekyll has got an impressive amount of plugins — creating content in Markdown is simple and effective, and using a static content generator provides a higher level of security than using any CMS.
Summary
The cooperation when creating an Urban Impact brand was an amazing challenge — even more so, because it was not a typical project for us. We believe that our team has prepared something which is one hand simple and clear, but on the other hand draws attention, is memorable, and triggers positive emotions. We are keeping our fingers crossed for the Urban Project team and their mission, and we hope that in the near future we’ll be able to work more on similar initiatives.
See the final result at: urbanimpact.eu
