From 119bfbdde45a928376bbcb6d8a412baefc96d459 Mon Sep 17 00:00:00 2001 From: Eduardo Nunes Date: Fri, 3 Mar 2023 23:28:14 +0000 Subject: [PATCH] Tweak typography (#52) * Replace hyphens with non-breaking hyphens * Tweak type in project template * Minor adjustments to copy * Improve type on laptop screens * Re-bolden site title in header --- src/components/Header/index.js | 6 +--- src/pages/projects/bore/index.md | 8 ++--- src/pages/projects/citizensforeurope/index.md | 14 ++++---- src/pages/projects/echo1/index.md | 6 ++-- src/pages/projects/juni/index.md | 12 +++---- src/pages/projects/justhostme/index.md | 8 ++--- src/pages/projects/lannebergbexelius/index.md | 8 ++--- src/pages/projects/matcher/index.md | 20 +++++------ src/pages/projects/oddcamp/index.md | 10 +++--- src/templates/projectTemplate.js | 35 +++++++++++++++++-- 10 files changed, 75 insertions(+), 52 deletions(-) diff --git a/src/components/Header/index.js b/src/components/Header/index.js index 07da33a..e5ee358 100644 --- a/src/components/Header/index.js +++ b/src/components/Header/index.js @@ -89,7 +89,7 @@ const MainHeader = styled.header` border-color: ${(props) => props.theme.colorYellow}; strong { - transform: translateX(-200%) translateY(-50%); + transform: translateX(-190%) translateY(-50%); } small { opacity: 1; @@ -133,10 +133,6 @@ const SiteTitle = styled.h1` margin-right: auto; text-align: center; - strong { - font-weight: normal; - } - @media ${(props) => props.theme.smallUp} { font-size: ${rem(18)}; width: 100%; diff --git a/src/pages/projects/bore/index.md b/src/pages/projects/bore/index.md index 172ea03..0001bd2 100644 --- a/src/pages/projects/bore/index.md +++ b/src/pages/projects/bore/index.md @@ -14,11 +14,11 @@ order: 7
-I am, by no means, a musician. But I grew up surrounded by them: my father and older brother, who are both multi-instrumentalists, and the several musicians they've played with throughout their life. So, growing up, I had a pretty big incentive to pick up a guitar and dedicate part of my life to it. For some reason though, I never did. It seemed as though, for any sort of activity to pique my interest, it had to somehow be connected to a computer. So when a friend of mine introduced me to electronic music back in high school, something clicked. All throughout my teenage years, I spent most of my free time experimenting with [Fruity Loops](https://www.image-line.com/flstudio/) and, even though I never made a career out of it, I've always looked back fondly at those long afternoons. Even as I was studying to become a designer, and especially after I've started working as one—at a time when I forgot what it meant to have free time. +I am, by no means, a musician. But I grew up surrounded by them: my father and older brother, who are both multi‑instrumentalists, and the several musicians they've played with throughout their life. So, growing up, I had a pretty big incentive to pick up a guitar and dedicate part of my life to it. For some reason though, I never did. It seemed as though, for any sort of activity to pique my interest, it had to somehow be connected to a computer. So when a friend of mine introduced me to electronic music back in high school, something clicked. All throughout my teenage years, I spent most of my free time experimenting with [Fruity Loops](https://www.image-line.com/flstudio/) and, even though I never made a career out of it, I've always looked back fondly at those long afternoons. Even as I was studying to become a designer, and especially after I've started working as one—at a time when I forgot what it meant to have free time. > It was not until I turned thirty that I decided I wanted to have afternoons like those again. -To be immersed in my own world, headphones on, time flying out the window. So I set up a small studio in my home office and restarted making music. I'm still rusty and trying to get the hang of it again (switching to [Ableton Live](https://www.ableton.com/en/live/) meant I had to re-learn a lot of things) but I forced myself to send something out into the world before I turned 31. So on October 30th 2017 I released a small EP, under the name BORE. I called it 30. It's an homage to turning thirty and being scared shitless but still feeling insanely grateful and happy to be alive. +To be immersed in my own world, headphones on, time flying out the window. So I set up a small studio in my home office and restarted making music. I'm still rusty and trying to get the hang of it again (switching to [Ableton Live](https://www.ableton.com/en/live/) meant I had to re‑learn a lot of things) but I forced myself to send something out into the world before I turned 31. So on October 30th 2017 I released a small EP, under the name BORE. I called it 30. It's an homage to turning thirty and being scared shitless but still feeling insanely grateful and happy to be alive. @@ -46,8 +46,8 @@ I don't have the time—nor, more importantly and tragically, the skill—to tur The title track is a longer, perkier track than the stuff I'm usually into. It's my attempt at making a danceable track for people blessed with two left feet. 🕺 -The second track gets its title from the portuguese word for Vinegar and was heavily inspired by a long-time favorite poem of mine: [Portugal](http://ensina.rtp.pt/artigo/portugal-de-jorge-sousa-braga/), by Jorge de Sousa Braga. +The second track gets its title from the portuguese word for Vinegar and was heavily inspired by a long‑time favorite poem of mine: [Portugal](http://ensina.rtp.pt/artigo/portugal-de-jorge-sousa-braga/), by Jorge de Sousa Braga. -In 2019, I unfortunately couldn't find any time to keep the momentum going. And though a global lock-down sounds like the perfect excuse to put more hours into your sideprojects, by 2020 I was a newly-minted father and was (am? 🤔) still trying to get the hang of it. So nothing new for now. But one can dream... +In 2019, I unfortunately couldn't find any time to keep the momentum going. And though a global lock‑down sounds like the perfect excuse to put more hours into your sideprojects, by 2020 I was a newly‑minted father and was (am? 🤔) still trying to get the hang of it. So nothing new for now. But one can dream...
diff --git a/src/pages/projects/citizensforeurope/index.md b/src/pages/projects/citizensforeurope/index.md index 8a85848..5065936 100644 --- a/src/pages/projects/citizensforeurope/index.md +++ b/src/pages/projects/citizensforeurope/index.md @@ -14,11 +14,11 @@ order: 9
-Citizens for Europe is a platform for European-based citizens and civil society organisations to share ideas and engage one another in helping shape democracy in an increasingly estranged Europe. Made up of just under 300 NGOs, the platform needed a new visual identity and website that allowed it to not only increase its social outreach, but also actively promote communication between its existing members. When they approached me asking for help, I was regularly collaborating with [FBA.](http://www.fba.pt/), so I worked together with them in bringing the brand and Website to life. +Citizens for Europe is a platform for European‑based citizens and civil society organisations to share ideas and engage one another in helping shape democracy in an increasingly estranged Europe. Made up of just under 300 NGOs, the platform needed a new visual identity and website that allowed it to not only increase its social outreach, but also actively promote communication between its existing members. When they approached me asking for help, I was regularly collaborating with [FBA.](http://www.fba.pt/), so I worked together with them in bringing the brand and Website to life.
-![T-shirt featuring the Citizens for Europe Logo](images/tshirt@2x.png) +![T‑shirt featuring the Citizens for Europe Logo](images/tshirt@2x.png)
@@ -28,7 +28,7 @@ The idea for the logo popped up soon after I saw the first sentence in the brief I highlighted the words citizens, together and Europe, and went looking for things that could broadly convey those concepts. Europe was quite obvious: one of the stars in the European flag. It was actually almost too obvious, and we debated whether we should resort to that kind of cliché or try to find something a bit more nuanced. In the end, though, we stuck to it, because it pieced together nicely with the other elements: fingerprints woven together, representing both citizenship and unity. -I'll admit it sounds a bit far-stretched when you try to explain the concept. And the first few sketches I came up with didn't exactly help the cause, as they looked either forced or boring. But right as I was about to give up, things seemed to fall into place. I had a logo I was actually quite happy with, and that I felt managed to combine all three concepts into a single image. +I'll admit it sounds a bit of a stretch when you try to explain the concept. And the first few sketches I came up with didn't exactly help the cause, as they looked either forced or boring. But right as I was about to give up, things seemed to fall into place. I had a logo I was actually quite happy with, and that I felt managed to combine all three concepts into a single image.
@@ -40,14 +40,14 @@ The original proposal had an additional detail we ended up having to drop. At th > If you simply replace the words Citizens and Europe, you can use the logo as a vessel for any personal or political message you want to broadcast. -To allow for the brand not to get lost in the process, the word "for" was styled differently in the original logo, so that even when you take away the star and replace two-thirds of the name, the brand is still recognizable. +To allow for the brand not to get lost in the process, the word "for" was styled differently in the original logo, so that even when you take away the star and replace two‑thirds of the name, the brand is still recognizable. ![Different possible combinations for the logo](images/logo_roulette@2x.png) -![Girl wearing a t-shirt that reads "Fiona for Peace"](images/fiona@2x.png) +![Girl wearing a t‑shirt that reads "Fiona for Peace"](images/fiona@2x.png) ![Cards with handwritten messages that read "Amber for Love" and "Dylan for Mom"](images/personal_cards@2x.png) ![Buttons featuring words and flags for European countries](images/buttons@2x.png) @@ -69,7 +69,7 @@ What we did keep was Mário Feliciano's stellar [Grotzec Condensed](http://www.f Finally, we designed and developed a Website that serves as the main hub of communication between the various members of the community. The biggest challenge here was turning what is basically a regular WordPress site into a social network of sorts. Organisations should be able to create and maintain their own public profile, as well as submit events, resources and proposals for other members to read and comment on. Under the hood, organisations should also be able to exchange messages between each other directly through the platform, and hopefully forge new partnerships that help shorten the distances between EU member states. -To do all of that, we got designer & developer [João Saraiva](https://concealed.pt/) to help us turn a static template into a full-fledged WordPress theme, complete with custom sign up flows and its own content management system for organisations to be able to submit and manage their own content on the Website. Thanks to his work, we managed to build a powerful multi-user application on top of what is essentially a blogging platform. +To do all of that, we got designer & developer [João Saraiva](https://concealed.pt/) to help us turn a static template into a full‑fledged WordPress theme, complete with custom sign up flows and its own content management system for organisations to be able to submit and manage their own content on the Website. Thanks to his work, we managed to build a powerful multi‑user application on top of what is essentially a blogging platform. @@ -80,6 +80,6 @@ To do all of that, we got designer & developer [João Saraiva](https://concealed > For a Website originally launched in early 2015, I think it has aged quite well. -It's still actively used by Citizens for Europe's now [more than 400 members](http://www.citizensforeurope.eu/organisations/), and new content is published on a daily basis. The site's main goals are also still as relevant as ever—if not more—and will continue to be in a post-Brexit world, so it's comforting to see CFE are still actively trying to build a better European Union. +It's still actively used by Citizens for Europe's now [more than 400 members](http://www.citizensforeurope.eu/organisations/), and new content is published on a daily basis. The site's main goals are also still as relevant as ever—if not more—and will continue to be in a post‑Brexit world, so it's comforting to see CFE are still actively trying to build a better European Union. diff --git a/src/pages/projects/echo1/index.md b/src/pages/projects/echo1/index.md index c36790a..c83ec10 100644 --- a/src/pages/projects/echo1/index.md +++ b/src/pages/projects/echo1/index.md @@ -14,7 +14,7 @@ order: 5
-Echo1 is a Singapore-based company working towards improving sound culture across the globe. They manage and fund businesses working in sound-related areas, while at the same time promoting good business practices within the companies they are involved in. Together with the folks at [Odd Camp](https://www.odd.camp/), I helped build their brand and website in record-time, going from a humble pitch deck to release in a few weeks. +Echo1 is a Singapore‑based company working towards improving sound culture across the globe. They manage and fund businesses working in sound‑related areas, while at the same time promoting good business practices within the companies they are involved in. Together with the folks at [Odd Camp](https://www.odd.camp/), I helped build their brand and website in record-time, going from a humble pitch deck to release in a few weeks.
@@ -41,13 +41,13 @@ We were brought on to the project at a very early stage of the company's incepti Our solution was to come up with a brand system that relied heavily on basic shapes, with a single line running through all of them—keeping everything connected, even if it means following the least obvious of paths. These were paired with a set of warm gradients and snappy animations, which we employed exhaustively [throughout the website](https://www.echo1.co) and the brand applications, creating a tight and easily recognisable brand that can evolve gracefully over time, as the products and companies Echo1 invests on begin to shape the company's values more clearly. -These shapes and colours are complemented by [a quirky sans-serif font](https://www.hvdfonts.com/fonts/niveau-grotesk) for headings and [a sobering serif](https://typekit.com/fonts/warnock) for body copy. +These shapes and colours are complemented by [a quirky sans‑serif font](https://www.hvdfonts.com/fonts/niveau-grotesk) for headings and [a sobering serif](https://typekit.com/fonts/warnock) for body copy. ![Several slides from the brand proposal presentation we did](images/proposal@2x.png) ![Detail of the website showcasing the company's practices](images/practices@2x.png) -![Photo of a monitor showing artboards with work-in-progress](images/monitor@2x.png) +![Photo of a monitor showing artboards with work‑in‑progress](images/monitor@2x.png) ![Screenshots of all pages on Echo1.co](images/pages@2x.png) ![Detail of a graph detailing how Echo1's accelerator program works](images/how-it-works@2x.png) ![Contact page on echo1.co, as seen on a laptop](images/contact-page@2x.png) diff --git a/src/pages/projects/juni/index.md b/src/pages/projects/juni/index.md index d5d6e89..a763d0b 100644 --- a/src/pages/projects/juni/index.md +++ b/src/pages/projects/juni/index.md @@ -24,11 +24,11 @@ A couple of months later, I realized I had been way off. For the first six month
-My wife had floated the idea of starting her own brand of clip-on earrings multiple times before. She loves earrings but never got her ears pierced due to an allergic reaction, so she can only use the kind that clips to your ear. Unfortunately, decent clip-on earrings are hard to come by. Almost no brands carry them and, when they do, they're either very basic or poorly built (or, most likely, both). So we thought: maybe we've got a “scratch your own itch” kind of thing going on here. +My wife had floated the idea of starting her own brand of clip‑on earrings multiple times before. She loves earrings but never got her ears pierced due to an allergic reaction, so she can only use the kind that clips to your ear. Unfortunately, decent clip‑on earrings are hard to come by. Almost no brands carry them and, when they do, they're either very basic or poorly built (or, most likely, both). So we thought: maybe we've got a “scratch your own itch” kind of thing going on here. Laying awake at night for hours on end trying to rock a baby to sleep is, of course, extremely tiring. But it also gives you plenty of time to think. And so, through all of the crying, the shushing, and the singing in our daughter's ear, we began making plans. -It started with the name. That was an easy one: Juni, the Swedish word for June. It's the month I met my wife, and the month our daughter was born. Then came the logistical side of it: finding good, reliable partners who could help us manufacture high-quality clip-on earrings that looked good and were comfortable to wear. We had no time to simply pick up the phone and call manufacturers during the day—and we definitely couldn't go and see them in person. So we'd just send typo-riddled e-mails in the early hours of the morning, written on a phone with the hand that wasn't holding a baby. After a lot of hard work, and a fair amount of luck, we found partners we could trust. We did the whole dance of putting orders in, getting proofs in the mail, sending them back, making adjustments; all over e-mail and without leaving our apartment once. +It started with the name. That was an easy one: Juni, the Swedish word for June. It's the month I met my wife, and the month our daughter was born. Then came the logistical side of it: finding good, reliable partners who could help us manufacture high‑quality clip‑on earrings that looked good and were comfortable to wear. We had no time to simply pick up the phone and call manufacturers during the day—and we definitely couldn't go and see them in person. So we'd just send typo‑riddled e‑mails in the early hours of the morning, written on a phone with the hand that wasn't holding a baby. After a lot of hard work, and a fair amount of luck, we found partners we could trust. We did the whole dance of putting orders in, getting proofs in the mail, sending them back, making adjustments; all over e‑mail and without leaving our apartment once. Over time we grew our inventory, and we put together a collection we were happy with. That we had no way to actually sell any of it seems, in hindsight, like an issue we should have anticipated. But you know what they say: sleep deprivation is a hell of a drug. Luckily, as time went on, what everyone kept telling us would happen finally did: it became easier. Our daughter cried less, slept better, and we suddenly had a little bit more time to work on the brand, the website, and the marketing strategy. @@ -46,7 +46,7 @@ This being mainly the result of my wife's vision, I wanted to model the brand af > I knew she'd want it to fit neatly into your average Instagram fashion hashtag, but with a slight indie slant. -So I grabbed a huge collection of high-quality scans of flowers and leaves I had laying around and started trying to put them together. We sprinkled in a very restrained color scheme and a quasi-brutalist logo and there it was: the exact balance we were looking for. +So I grabbed a huge collection of high‑quality scans of flowers and leaves I had laying around and started trying to put them together. We sprinkled in a very restrained color scheme and a quasi‑brutalist logo and there it was: the exact balance we were looking for. The floral motifs take center stage and remain more or less unchanged across all applications. To ensure the brand remains fresh and flexible, we made sure to shuffle elements around as much as possible. Similarly, we rely on different color schemes to denote special occasions (like the red and pink for valentine's day) or seasonal drops (like the blue and orange for our Summer collection). @@ -62,7 +62,7 @@ The floral motifs take center stage and remain more or less unchanged across all > An aspect we put a lot of thought into was the packaging. We devised a solution that is practical and safe, with a minimal carbon footprint. -It consists of a piece of recycled paper, that protects the earrings during shipment but can act as a display stand for them as well. It has a pair of die-cut holes to hold a spare set of ear lobe savers—two little pieces of white rubber that slide into a slot in the earring's clips, to reduce pressure on the ear when in use. Once folded, the card slides into a compostable bag made out of fermented corn starch. A logo printed on the bag lines up with the pattern on the card, giving the brand an extra bit of depth. These bags are then shipped inside envelopes padded with a recycled paper filling—an alternative to the more common bubblewrap ones—which means we use no plastic in the entire process. +It consists of a piece of recycled paper, that protects the earrings during shipment but can act as a display stand for them as well. It has a pair of die‑cut holes to hold a spare set of ear lobe savers—two little pieces of white rubber that slide into a slot in the earring's clips, to reduce pressure on the ear when in use. Once folded, the card slides into a compostable bag made out of fermented corn starch. A logo printed on the bag lines up with the pattern on the card, giving the brand an extra bit of depth. These bags are then shipped inside envelopes padded with a recycled paper filling—an alternative to the more common bubblewrap ones—which means we use no plastic in the entire process.
@@ -72,10 +72,10 @@ It consists of a piece of recycled paper, that protects the earrings during ship
-In hindsight, the reason we decided to launch ourselves into a side business like this, at a time when our lives were already going through massive change, is obvious. We were looking for something to keep us grounded. Being a first-time parent can be brutal—more so if you don't have a proper support network close by. And it's very easy to let yourself get sucked into a spiral of despair. +In hindsight, the reason we decided to launch ourselves into a side business like this, at a time when our lives were already going through massive change, is obvious. We were looking for something to keep us grounded. Being a first‑time parent can be brutal—more so if you don't have a proper support network close by. And it's very easy to let yourself get sucked into a spiral of despair. > For me and my wife, having a goal we could work towards, outside of parenting, was crucial. It kept us sane and in touch with the world outside. And that made us better parents. -I'm glad we did it, and I'm happy to report we're still running our small side-business from our home office to this day. Now with the help of our beautiful daughter. +I'm glad we did it, and I'm happy to report we're still running our small side‑business from our home office to this day. Now with the help of our beautiful daughter.
\ No newline at end of file diff --git a/src/pages/projects/justhostme/index.md b/src/pages/projects/justhostme/index.md index c74f6aa..09417a0 100644 --- a/src/pages/projects/justhostme/index.md +++ b/src/pages/projects/justhostme/index.md @@ -16,7 +16,7 @@ order: 6 JustHostMe is a British Web hosting company founded over a decade ago. They provide traditional hosting solutions for individuals and businesses worldwide, and were trying to consolidate their position as one of the few hosting companies entirely based and staffed in the UK. They asked [Odd Camp](https://www.odd.camp/) to freshen up their brand and redesign their website, a process I was lucky enough to lead. -After our first few meetings, it became apparent the client was looking to cater to a mostly British audience, marketing themselves as a trustworthy national enterprise that, besides offering British Web hosting servers, would also provide customer support through a team of UK-based staff members always ready to help out. So we set out to design a brand that hinted at British culture and pride, without making it feel exclusive or uninviting to customers worldwide. +After our first few meetings, it became apparent the client was looking to cater to a mostly British audience, marketing themselves as a trustworthy national enterprise that, besides offering British Web hosting servers, would also provide customer support through a team of UK‑based staff members always ready to help out. So we set out to design a brand that hinted at British culture and pride, without making it feel exclusive or uninviting to customers worldwide. @@ -24,7 +24,7 @@ After our first few meetings, it became apparent the client was looking to cater
-We chose to start from a list of Great Britain's clichés, identify their core features and gradually remove any visual references to them, until we were left with a set of colours and a geometric sans-serif typeface that pays tribute to historically remarkable British typography. +We chose to start from a list of Great Britain's clichés, identify their core features and gradually remove any visual references to them, until we were left with a set of colours and a geometric sans‑serif typeface that pays tribute to historically remarkable British typography. > We turned their logo into a vessel: a small glowing container you can fill up with your own things, and that's yours to keep or share with the rest of the world. @@ -39,7 +39,7 @@ Because the brand was to be used almost exclusively on screen, we were able to m As we were planning the new site, we figured the one thing a Web hosting company cannot afford to have is a slow and bulky Website. Having a great infrastructure goes a long a way, of course, but we figured design could give them a bit of a push as well. -> So we designed the site to use **a total of zero bitmap images**; every single icon and illustration on the website is 100% vector. +> So we designed the site to use a total of zero bitmap images; every single icon and illustration on the website is 100% vector. This makes every page on the site weigh less than 100Kb, which means it loads blazingly fast — almost uncannily so. We actually considered artificially delaying page loads, to make them look a bit more natural but, in the end, we just rolled with it. @@ -52,6 +52,6 @@ This makes every page on the site weigh less than 100Kb, which means it loads bl
-JustHostMe is a traditional Web hosting company operating at a time when the market space is rapidly being taken over by internet giants, whose infrastructure allows them to provide their services at close to no cost. So the amount of effort required to just keep your business afloat increases exponentially. For JustHostMe, the strategy has been to target small creators and business owners who would rather pay an extra couple pounds for a service that feels personal and close to home, and that is willing to provide some hand-holding as they try to get their hobbies and businesses on-line. It's a model I have great respect for, and that I felt honoured to be a small part of. +JustHostMe is a traditional Web hosting company operating at a time when the market space is rapidly being taken over by internet giants, whose infrastructure allows them to provide their services at close to no cost. So the amount of effort required to just keep your business afloat increases exponentially. For JustHostMe, the strategy has been to target small creators and business owners who would rather pay an extra couple pounds for a service that feels personal and close to home, and that is willing to provide some hand‑holding as they try to get their hobbies and businesses on‑line. It's a model I have great respect for, and that I felt honoured to be a small part of.
\ No newline at end of file diff --git a/src/pages/projects/lannebergbexelius/index.md b/src/pages/projects/lannebergbexelius/index.md index 6775fa7..9863b46 100644 --- a/src/pages/projects/lannebergbexelius/index.md +++ b/src/pages/projects/lannebergbexelius/index.md @@ -14,9 +14,9 @@ order: 8
-Lanneberg Bexelius is a Stockholm-based personal branding consulting company run by Pia Lanneberg and Kristina Bexelius. They work within a field that is increasingly relevant, but not always easy to describe—something I can relate to. Put simply, Pia and Kristina are really good at sitting down with people, finding out what their personal and professional goals are, and figuring out ways in which their communication and thought process can be improved, to get as close as possible to achieving those results in as little time as possible. +Lanneberg Bexelius is a Stockholm‑based personal branding consulting company run by Pia Lanneberg and Kristina Bexelius. They work within a field that is increasingly relevant, but not always easy to describe—something I can relate to. Put simply, Pia and Kristina are really good at sitting down with people, finding out what their personal and professional goals are, and figuring out ways in which their communication and thought process can be improved, to get as close as possible to achieving those results in as little time as possible. -They came to [Odd Camp](https://www.odd.camp/) asking for help setting up a couple of Websites: one they could use to promote their custom-tailored services (where they work directly with people's specific goals), and another one where they would sell access to e-learning courses (essentially, video lectures and reading materials). Somewhat paradoxically, however, they had no visual identity, so I suggested we should start there. +They came to [Odd Camp](https://www.odd.camp/) asking for help setting up a couple of Websites: one they could use to promote their custom‑tailored services (where they work directly with people's specific goals), and another one where they would sell access to e‑learning courses (essentially, video lectures and reading materials). Somewhat paradoxically, however, they had no visual identity, so I suggested we should start there.
@@ -26,7 +26,7 @@ They came to [Odd Camp](https://www.odd.camp/) asking for help setting up a coup The brief for the brand was quite open, with only one request: don't make it too solemn. Because most of the clients they work with are people in leadership positions, companies operating in this segment of the market tend to look way too corporate. And boring. Lanneberg Bexelius wanted none of that. They didn't want to be seen as suits helping other suits. -> They wanted to be seen as people helping others find out how they are perceived by their peers, how they **would like** to be perceived, and what they can do to reconcile the two. +> They wanted to be seen as people helping others find out how they are perceived by their peers, how they would like to be perceived, and what they can do to reconcile the two. We figured: if we're going to make something that feels personal and approachable, we might as well do it by designing the brand to channel Pia's and Kristina's personalities. So we spent some time floating ideas around, trying to boil their tastes and influences down to a set of core elements we could combine to make up a brand. What we ended up with is a vibrant colour scheme, a pair of complementary typefaces and a bunch of simple but fun illustrations that establish a clear tone of voice for the brand. Tying it all together is a logo made up of their initials, seamlessly fused into an elegant monogram. @@ -41,7 +41,7 @@ We figured: if we're going to make something that feels personal and approachabl For the promotional website, we made extensive use of the brand's vibrant colour scheme, quirky illustrations and wide typographic range. These, along with some brilliant copywriting, make for a Website that feels light and is a joy to use. -Under the hood, we employed a static site generator—specifically, [Middleman](https://middlemanapp.com/)—to turn the Ruby-flavoured code into plain HTML. The only exception being the blog section, for which we decided to use WordPress with a custom-built theme that makes the transition between both platforms seamless for the end user. +Under the hood, we employed a static site generator—specifically, [Middleman](https://middlemanapp.com/)—to turn the Ruby‑flavoured code into plain HTML. The only exception being the blog section, for which we decided to use WordPress with a custom‑built theme that makes the transition between both platforms seamless for the end user.
diff --git a/src/pages/projects/matcher/index.md b/src/pages/projects/matcher/index.md index 5b7fce0..01e8f0b 100644 --- a/src/pages/projects/matcher/index.md +++ b/src/pages/projects/matcher/index.md @@ -14,11 +14,7 @@ order: 1
-Sometimes, I have a slight tendency to over-complicate things. It's a flaw very few designers will admit to having, even though a good chunk of us share it. Occasionally, I will bump into a nagging issue, for which I know there are a million different solutions, and I will choose what is arguably the hardest, most time-consuming one. That's how Matcher came to be. - -Matcher is a small Web app that seeks to solve a very specific problem: scheduling amateur sports matches. I used to play football with a few friends on a weekly basis and, after a short while, the logistics of it got a bit out of hand. One of us would have to take the better part of a day off every time, to try and get everyone to RSVP, find a date and time that fit everyone's schedule and split the group into well-rounded teams. - -> So I took the chance to scratch my own itch and designed a small Web app that fixed all of it for us. Only, I over-did it a bit. +Matcher is a small Web app I built to solve a very specific problem. I used to play football with a few friends on a weekly basis and, after a short while, the logistics of it got a bit out of hand. One of us would have to take the better part of a day off every time, to try and get everyone to RSVP, find a date and time that fit everyone's schedule and split the group into well‑rounded teams. So I took the chance to scratch my own itch and designed a small Web app that fixed all of it for us. Only, I over‑did it a bit.
@@ -26,9 +22,9 @@ Matcher is a small Web app that seeks to solve a very specific problem: scheduli
-I started out by enlisting the help of my good friend and developer-extraordinaire Filipe Pires to put together an algorithm that would take a certain number of players, along with some skill stats we got everyone to compile, and generate the most tightly balanced set of teams possible. It worked nicely for a while, but because we had to feed the algorithm all of the stats manually, it actually turned out to require more work than before, so we went looking for a way to automate the process somehow. +I started out by enlisting the help of my good friend and developer‑extraordinaire Filipe Pires to put together an algorithm that would take a certain number of players, along with some skill stats we got everyone to compile, and generate the most tightly balanced set of teams possible. It worked nicely for a while, but because we had to feed the algorithm all of the stats manually, it actually turned out to require more work than before, so we went looking for a way to automate the process somehow. -> The answer was a small Web app where users could do it all: rate people they've played with according to a set of stats, create matches, invite other players, set up balanced teams, etc. +> The answer was a small website where users could do it all: rate people they've played with according to a set of stats, create matches, invite other players, set up balanced teams, etc. I had just started working at [Odd Camp](https://www.odd.camp/), where Ruby on Rails was king, so I took the chance to teach myself some Rails and started building what would eventually become Matcher. @@ -54,7 +50,7 @@ As for the colour scheme, it's ripped right off of the courts we used to play in
-With the brand settled, it was time to move on to the UI. One of the biggest temptations, when you're designing an app like this, is to focus on the desktop experience first and then try to gracefully degrade it so it fits on smaller screens. I went with the opposite approach: started out by designing everything mobile-first, and then tried to scale it up so it looks good everywhere. In all fairness, the app still ended up looking better on phones than it does on desktop, but I'm happy to report that it's just as usable on every device—and all versions share the exact same set of features. +With the brand settled, it was time to move on to the UI. One of the biggest temptations, when you're designing an app like this, is to focus on the desktop experience first and then try to gracefully degrade it so it fits on smaller screens. I went with the opposite approach: started out by designing everything mobile‑first, and then tried to scale it up so it looks good everywhere. In all fairness, the app still ended up looking better on phones than it does on desktop, but I'm happy to report that it's just as usable on every device—and all versions share the exact same set of features.
@@ -66,9 +62,9 @@ With the brand settled, it was time to move on to the UI. One of the biggest tem
-As soon as we had something that was barely usable, we started using it to schedule our own matches. Calling the first version we launched an MVP would be an overstatement, yet it worked surprisingly well for us so, after a few months of testing and improvements, I decided to open up a closed beta. I put together a small little promotional page for it and used MailChimp to set up a half-baked beta sign-up system. +As soon as we had something that was barely usable, we started using it to schedule our own matches. Calling the first version we launched an MVP would be an overstatement, yet it worked surprisingly well for us so, after a few months of testing and improvements, I decided to open up a closed beta. I put together a small little promotional page for it and used MailChimp to set up a half‑baked beta sign‑up system. -Because it was still a bare-bones app, hosted on a cheap Heroku server, I took a cautious approach and only let in small groups of users at a time, but the response was encouraging nonetheless. Sadly, the amount of time I could invest in it dwindled, and development eventually felt a lot like what our football matches used to be: slow, largely uneventful and slightly embarrassing (if still rewarding). It also didn't help that I picked up a pretty nasty ankle injury, and stopped playing football for good—which took away part of my motivation to work on it. So I decided to sunset it in 2022. +Because it was still a bare‑bones app, hosted on a cheap Heroku server, I took a cautious approach and only let in small groups of users at a time, but the response was encouraging nonetheless. Sadly, the amount of time I could invest in it dwindled, and development eventually felt a lot like what our football matches used to be: slow, largely uneventful and slightly embarrassing (if still rewarding). It also didn't help that I picked up a pretty nasty ankle injury, and stopped playing football for good—which took away part of my motivation to work on it. So I decided to sunset it in 2022.
@@ -78,10 +74,10 @@ Because it was still a bare-bones app, hosted on a cheap Heroku server, I took a
-For a humble sideproject, built to tackle a minor inconvenience in our day-to-day lives, Matcher turned out to be a very enriching process. It gave me the opportunity to get some hands-on experience with Rails, at a time when I was increasingly in need of understanding it, and it provided an outlet for my desire to design and develop a product without middlemen. +For a humble sideproject, built to tackle a minor inconvenience in our day‑to‑day lives, Matcher turned out to be a very enriching process. It gave me the opportunity to get some hands‑on experience with Rails, at a time when I was increasingly in need of understanding it, and it provided an outlet for my desire to design and develop a product without middlemen. > But it also opened my eyes to what really is important about a service that's targeted at consumers: that they want to use it. -Because I was meeting all of my users at least once a week—and because they had *a lot* to say about the product, as we were warming up before every match—I had a seemingly never-ending supply of invaluable and brutally honest user feedback. Therein lies, who knows, the solution every PM's been looking for. Just get your team to play football with your users—data will start pouring in immediately. +Because I was meeting all of my users at least once a week—and because they had *a lot* to say about the product, as we were warming up before every match—I had a seemingly never‑ending supply of invaluable and brutally honest user feedback. Therein lies, who knows, the solution every PM's been looking for. Just get your team to play football with your users—data will start pouring in immediately.
\ No newline at end of file diff --git a/src/pages/projects/oddcamp/index.md b/src/pages/projects/oddcamp/index.md index 61af860..c3d5ef1 100644 --- a/src/pages/projects/oddcamp/index.md +++ b/src/pages/projects/oddcamp/index.md @@ -14,7 +14,7 @@ order: 3
-Back in 2015, I was teaching design, working part-time at a design studio, and moonlighting as a frontend developer—a very exhausting and productive period of my life. My distrust of social networks had not yet fully materialized, and though I wasn't exactly keen on over-sharing, I was an active member of a few online communities. Through one of those communities, the folks at what was then called Kollegorna (a small Webshop based in Stockholm that had started exploring the concept of going entirely remote) saw my work and reached out to me. They were looking for a designer who could code and figured I might fit the bill. I decided to give it a go. Fast forward a couple of years, and I'm being invited to become a partner and take up the role of Head of Design. I was still figuring out how to pronounce "Kollegorna" but agreed nonetheless. +Back in 2015, I was teaching design, working part‑time at a design studio, and moonlighting as a frontend developer—a very exhausting and productive period of my life. My distrust of social networks had not yet fully materialized, and though I wasn't exactly keen on over‑sharing, I was an active member of a few online communities. Through one of those communities, the folks at what was then called Kollegorna (a small Webshop based in Stockholm that had started exploring the concept of going entirely remote) saw my work and reached out to me. They were looking for a designer who could code and figured I might fit the bill. I decided to give it a go. Fast forward a couple of years, and I'm being invited to become a partner and take up the role of Head of Design. I was still figuring out how to pronounce "Kollegorna" but agreed nonetheless. We grew a fairly solid reputation in and around Stockholm, but as we started taking in work from outside of Sweden, the company's name became increasingly problematic. So I used what little influence I now had to push for a name change and all of our public communication to default to English—everyone speaks it in Sweden anyway. It took some convincing, but I eventually got my partners on board. In early 2021, as the world naively prepared to put a shitshow of a year behind it (which, as we now know, worked out great), we decided the time was right to rename and rebrand ourselves. @@ -42,7 +42,7 @@ We had just recently grown our design team—by hiring [Diana](https://www.oddca Early in the process, I got attached to the idea of badges—as in the kind you might get at a summer camp. I have zero personal experience with summer camps, so I have no idea what I'm talking about, but there was something about the concept of using badges to highlight different types of skills, valuing them all equally, that resonated with me (also, my daughter was going through a big [Hey Duggee](https://www.heyduggee.com/) phase, so that may have helped). We tried out different ideas around it but kept coming up short: everything ended up being too rigid and leaning too heavily on the summer camp association. -But then, as Diana began to branch out of the original concept, some of her sketches started to look less like badges and more like the old-school tag clouds we all remember fondly from our days as young, clueless kids exploring the Web for the first time. Others reminded us of the stickers most of us slap all over our laptops. And as we started to steer away from the illustration-heavy universe of camp badges into a more typographic realm, that made it much easier for us to give the brand a unique voice through text while still connecting to all of those visual metaphors. +But then, as Diana began to branch out of the original concept, some of her sketches started to look less like badges and more like the old‑school tag clouds we all remember fondly from our days as young, clueless kids exploring the Web for the first time. Others reminded us of the stickers most of us slap all over our laptops. And as we started to steer away from the illustration‑heavy universe of camp badges into a more typographic realm, that made it much easier for us to give the brand a unique voice through text while still connecting to all of those visual metaphors.
@@ -50,16 +50,16 @@ But then, as Diana began to branch out of the original concept, some of her sket ![Birthday cards for the team](images/birthday_cards@2x.jpg) ![Business cards](images/cards@2x.png) ![Team page on oddcamp.com](images/team@2x.jpg) -![Close-up of contact icons on team page](images/icons@2x.png) +![Close‑up of contact icons on team page](images/icons@2x.png) ![Page from the Odd Camp website as seen on a desktop computer](images/smorgasbord@2x.png) ![Letter sent to the Odd Camp team, featuring one of the badges as a refrigerator magnet](images/food_camp@2x.jpg) -![Left: Badger, a badge-generator built for the brand; Right: an example of the brand badges in use as hover labels](images/details@2x.png) +![Left: Badger, a badge‑generator built for the brand; Right: an example of the brand badges in use as hover labels](images/details@2x.png) ![Screenshot depicting several pages from the Brand Guidelines](images/guidelines@2x.png) ![Construction rules for the logo and badges](images/logo_construction@2x.png)
-The final brand consists of a modular logo and a set of badges that complement it. Badges can be used in several different ways, from headings on documents to labels or tags on our website. We use them in business cards and e-mail signatures. They can be used to inform, to tell a story, or as a joke. And, so long as all badges follow the same set of rules and tone of voice, they allow the brand to sprawl and evolve cohesively. We even devised a simple tool that lets anyone in the team build badges according to this spec, regardless of their experience with design (Figma turned out to be perfect for this). We called it Badger. +The final brand consists of a modular logo and a set of badges that complement it. Badges can be used in several different ways, from headings on documents to labels or tags on our website. We use them in business cards and e‑mail signatures. They can be used to inform, to tell a story, or as a joke. And, so long as all badges follow the same set of rules and tone of voice, they allow the brand to sprawl and evolve cohesively. We even devised a simple tool that lets anyone in the team build badges according to this spec, regardless of their experience with design (Figma turned out to be perfect for this). We called it Badger. Finally, we sprinkled a few extras on top—like the shapes framing the photographs or the colorful abstract clouds seen in some backgrounds—and packaged it all into [these brand guidelines](https://www.figma.com/proto/D4c6PmplUVPbTYtmZZuGga/Odd-Camp-Brand-Guidelines?page-id=455%3A11&node-id=455%3A404&viewport=477%2C48%2C0.12&scaling=min-zoom&starting-point-node-id=455%3A404). It has checked all the boxes for us so far, and we're excited to see where it goes next. diff --git a/src/templates/projectTemplate.js b/src/templates/projectTemplate.js index cca066d..29c0f97 100644 --- a/src/templates/projectTemplate.js +++ b/src/templates/projectTemplate.js @@ -43,6 +43,7 @@ const ProjectContent = styled.section` p { font-family: ${(props) => props.theme.ffPrimary}; + font-feature-settings: 'dlig', 'liga', 'calt'; font-size: ${rem(16)}; line-height: 1.6; margin: 0 auto 1em auto; @@ -56,8 +57,10 @@ const ProjectContent = styled.section` p { font-style: italic; + font-feature-settings: 'dlig', 'liga', 'calt'; font-size: ${rem(22)}; - letter-spacing: -0.02em; + letter-spacing: -0.03em; + line-height: 1.4; margin: 1.4em auto; max-width: 35ch; @@ -117,6 +120,21 @@ const ProjectContent = styled.section` margin-top: ${rem(60)}; } + article { + margin: ${rem(80)} auto; + } + article p { + font-size: ${rem(22)}; + } + article blockquote p { + font-size: ${rem(30)}; + } + } + @media ${(props) => props.theme.xxlargeUp} { + &:first-child { + margin-top: ${rem(60)}; + } + article { margin: ${rem(80)} auto; } @@ -148,8 +166,21 @@ const ProjectNavigation = styled.nav` const ProjectHeader = styled.header` width: 90%; - max-width: ${rem(740)}; + max-width: 28.5em; margin: 0 auto ${rem(30)} auto; + + @media ${(props) => props.theme.smallUp} { + font-size: ${rem(18)}; + } + @media ${(props) => props.theme.mediumUp} { + font-size: ${rem(20)}; + } + @media ${(props) => props.theme.largeUp} { + font-size: ${rem(22)}; + } + @media ${(props) => props.theme.xxlargeUp} { + font-size: ${rem(26)}; + } ` const ProjectTitle = styled.h1`