A first website

What to show on the website of a freshly started design studio if you have no projects to demonstrate your abilities? We created our first website in evenings hours to enable us to put something online the day we opened for business.

If you can’t let your work do the talking, you have to actually explain what it is you do. We opted for a concept of several cards, each card explaining a part of our service or company. All cards together form the one-pager that was our first website. On the right side we added a navigation that blends the pattern of in-page dotted navigation with a hamburger style off-canvas menu. Recognizable, yet a bit different.

Each card has a minimal height of your browsers viewport, stretching in height if the content demands. Clicking the navigation will provide a smooth scroll to the selected section of the page.

We believe a concept for online should always scale well to both large and small screens.

No framework. Just handwritten HTML, CSS and a pinch of JS

We like code, even though we are no front-enders. To keep the relatively long page snappy and fast, we choose .svg files for the sketches and wrote our code in html with a minimum of external .js and .css files.
Not particularly scalable or practicle when adding new cases on a regular basis (in two languages), but pretty solid for a first online presence. And speedy.

We selected Neue Haas Grotesk as the typeface for our website. A digital reconstruction of the original design for Neue Haas (1957), the font that later became Helvetica. A font that is firmly rooted in the modernistic graphical tradition of Dutch design. Which is probably why it fits our taste.

On our site, we combined the Neue Haas with hand sketches and a digital version of Bart’s handwriting.

Many thanks to Mario Bussink for his generosity regarding the mbstudio.nl domain.

Visit our first website

concept, design + code for mbstudio