Created by potrace 1.16, written by Peter Selinger 2001-2019 Created by potrace 1.16, written by Peter Selinger 2001-2019 Created by potrace 1.16, written by Peter Selinger 2001-2019 Created by potrace 1.16, written by Peter Selinger 2001-2019

Berlin Architectural Network

Together with architect Maria Bragança, we designed and developed the website for Berlin's largest architecture community.

Background

The community Berlin Architecture Network (·ban), exists as a MeetUp group since 2017. Since then, it gathered almost 600 members, architecture professionals looking to connect, exchange knowledge, and collaborate with each other.

Screenshot of Berlin Architectural Network on meetup.com

Starting this year, we decided to bring the community to the next level: we set out to create the best resource for architecture professionals in Berlin.

The keystone of this goal is ·ban's new website. Using an iterative approach to design and implementations, we started by creating a simple landing page a form to collect the email addresses of our members.

Screenshot of the Berlin Architectural Network website

Slowly, we are implementing new sections and tools: first the Events section, mirroring our events posted on meetup.com. More recently, we implemented a Jobs section.

Among the idea for upcoming features is a list of all architecture offices in Berlin and a forum for our members. However, we are basing all our decisions on our member's feedback. Therefore, we avoid feature-creep and keep our content relevant to best serve our community.

Design

Using Figma as our collaboration tool, we designed ·ban's identity from scratch. We wanted ·ban to be different, quirky, fun, and forward-looking. Our initial logo ideas involving the famous Berlin TV Tower quickly evolved into an abstract representation of the landmark using characters from our chosen logotype font: Share Tech Mono.

Logo variations
Early logo studies

We extended the idea to develop what we now call the ·ban people, a series of stick-figure-like characters who represent the diverse background of our members. They all derive from the main ·ban person based on the Vitruvian Man.

Logo
·ban logo and the ·ban person
Logo
the ·ban people

As we transported the identity to the website, we started by making it simple: white background, black as the main color, with red as the accent color. Ue paired our logo font with the simple, but versatile sans-serif font Open Sans, using it in a single size with varying weights for almost all text.

Screenshot of our Figma file
Early designs: mobile-first

Implementation

Screenshot of our Figma file
Design files of our Event section

The design was implemented as a Nuxt app, coupled with TailwindCSS. We are leveraging Nuxt's full-static mode, using asyncData calls to generate server-side rendered HTML files. This makes the site blazing fast and SEO friendly. As a CMS, we are using Storyblok, and all our images are optmized and served by Cloudinary.

// berlin/index.vue

export default defineComponent({
  setup() {
    const {
      $content,
      app: { $storyapi },
    } = useContext()
    // fetch about text from nuxt-content
    const about = useAsync(async () => await $content('homeAbout').fetch())
    // fetch events from storyblok
    const events = useAsync(async () => {
      const res = await $storyapi.get('cdn/stories', {
        starts_with: 'events/',
        filter_query: {
          date: {
            gt_date: YESTERDAY,
          },
        },
        sort_by: 'content.date:asc',
      })
      return res.total ? res.data.stories : []
    })
    // fetch jobs from hasura
    const jobs = useAsync(async () => await invokeFetchLatest())

    return {
      about,
      events,
      jobs,
    }
  },
})

To support our Jobs section, I created a scraper which crawls several online job boards searching for architecture jobs in Berlin. The scraper is written in Python (using the excellent Scrapy framework) and is deployed to AWS Lambda (with the help of Serverless), where a Cloudwatch event rule fires it every 10 minutes to gather new data.

Additionally, as it finds new jobs and adds to our database, it posts the new link on our Slack workspace, using the Slack API.

Screenshot of our Slack workspace
Our ·ban-jobs Slack bot posting new offers on our workspace

Tech Stack

  • NuxtJS
  • TailwindCSS
  • Storyblok
  • GraphQL
  • Postgres
  • Python
  • Netlify
  • Heroku
  • Hasura
  • AWS Lambda
  • Serverless
  • Sentry