diff --git a/src/routes/blog/post/designing-init-event-logo/+page.markdoc b/src/routes/blog/post/designing-init-event-logo/+page.markdoc new file mode 100644 index 0000000000..ddebd50cd7 --- /dev/null +++ b/src/routes/blog/post/designing-init-event-logo/+page.markdoc @@ -0,0 +1,251 @@ +--- +layout: post +title: "Designing Init: Event logo and theme" +description: "How the Appwrite Visual Design team crafted Init 2.0" +date: 2024-08-23 +cover: /images/blog/designing-init/cover.png +timeToRead: 5 +author: jesse-winton +category: design +featured: false +--- + +After the success of our first [Init](https://appwrite.io/init) event in Spring of 2024, we knew there would be more coming soon, and that, visually, we had set ourselves a high bar. Even though Init is a fully online, virtual event, Appwrite’s visual design team created something tangible and interactive with the fully customizable, and shareable [Init event tickets](https://appwrite.io/init/tickets). In early July, knowing that our next event was just around the corner, we gathered again and began to brainstorm the visual design style that we wanted to bring to Init 2.0. + +# The Design Process + +As a team, we always begin these design sprints with an empty FigJam board, where we can add notes, add screenshots that might give us inspiration, and have discussions about the things we like and dislike. Since this was our second time ideating for Init, we were able to apply many learnings from previous processes, which made this (and subsequent phases) feel more streamlined. + +![FigJam inspiration](/images/blog/designing-init/figjam-1.png) + +With the new feature set in mind, we needed to make sure that every piece of the design language was communicating the ways these new features would boost developer productivity, remove friction, and enhance performance. As we all gathered inspiration, we ultimately started to come together on the concept of line art; it felt dynamic and had a sense of organic movement that was in line with the key themes of performance that we wanted to focus on. + +![FigJam inspiration](/images/blog/designing-init/figjam-2.png) + +Once the team agreed on our visual style, we began to iterate on concepts. + +# Concepts + +We had a few iterations of the event logo before settling on our final version. In situations like this, there can be a lot of value in iterating in code; it’s easy to preview, you can start to get a feel for the real world implementation, and once the team finds something that works the job is halfway done. + +![Sara's pass](/images/blog/designing-init/saras-pass.png) + +{% video src="/images/blog/designing-init/first-browser-pass.mov" /%} + +After several days of going back and forth, Jade gave us the version that we would end up going with, designed in Figma, and animated in After Effects. + +{% video src="/images/blog/designing-init/first-pass.mp4" /%} + +We all agreed this was the right direction- it felt snappy and performant, but wasn’t so ornate that it would be impossible to build under a tight timeline. Once we had our conceptual animation, the challenge became translating it to the browser. In order to animate the stroke along the letter paths, I started with some of the gradient tracing concepts from [Rauno Frieberg](https://rauno.me/craft/nextjs#gradient-tracing), but it was feeling like overkill (lots of JavaScript and an animation library), and it wasn’t quite getting us where we needed to go, looking more like a broad brushstroke animating in, rather than individual lines being drawn onto the paths. + +{% video src="/images/blog/designing-init/gradient-tracing.mov" /%} + +What we ended up shipping was much simpler, and significantly more performant, relying entirely on CSS. + +# Animating the Event Logo + +> At Appwrite, we build our marketing site in SvelteKit, but these principles will easily translate into any component based framework. + +Storing the letter paths in an array gave me lots of flexibility for how I wanted to render them. In this case, I rendered each one 3 times, which matched the number of individual strokes we wanted to have active on the event logo at any given point in the animation. Each path had an applied `animation-delay` ensuring they’d start at different points in the timeline, and set based on their index within the array. + +```svelte + + + + {#each paths as path} + + {#each Array.from({ length: 3 }) as _, index} + {@const delay = (duration / 3) * index} + + {/each} + {/each} + +``` + +With a few ways not to do the animation under my belt, the final step was finding the correct solution. I started experimenting with CSS animations, and while doing some digging, I landed on [this Stack Overflow post](https://stackoverflow.com/questions/46443036/svg-stroke-animation-increase-length), which gave me the what I needed to start. Utilizing the power of `stroke-dasharray` and `stroke-dashoffset` I was able to create a simple animation, applying it to each path. + +```css +:root { + --stroke-color: #333; + --stroke-width: 2; + --fill: hsl(var(--web-color-background)); +} + +.stroke { + stroke-dasharray: 0 1000; + stroke-dashoffset: 0; + stroke-width: var(--stroke-width); + filter: drop-shadow(0px 0px 1px rgba(255, 255, 255, 0.4)); + animation: stroke var(--duration) linear infinite; + + @keyframes stroke { + 0% { + stroke-dasharray: 0 1000; + stroke-dashoffset: 1000; + } + 25% { + stroke-dasharray: 500 500; + stroke-dashoffset: 1000; + } + 50% { + stroke-dasharray: 500 500; + stroke-dashoffset: 500; + } + 75%, + 100% { + stroke-dasharray: 0 1000; + stroke-dashoffset: 0; + } + } +} +``` + +Applying the same animation properties to 75% and 100% is a nice little hack to delay an animation. The `animation-delay` property only applies to the first paint, so adding this, and extending the total duration made sure that the animation was completed by 75%, and there would be a pause, equivalent to 1/4 of the total duration, before it would start again. With this in place, the logo animation was how we’d envisioned it. + +{% video src="/images/blog/designing-init/final.mov" /%} + +## Animated Lines + +The background lines were much simpler. + +```svelte + + +
+
+ {#each Array.from({ length: lines }) as _} + {@const delay = getRandomDelay()} + {@const height = getRandomHeight()} +
+
+
+
+ {/each} +
+
+ + +``` + +With this, we get 2 groups of 2 lines, each with a randomized height and animation delay, creating a subtle, dynamic backdrop for our lockup. + +# Expanding the theme: feature illustrations + +Of course, the Init lockup was not the only component of design work needed for Init. This is a week-long event jam packed with daily announcements. To make every day of Init feel special, we wanted to create a series of visual assets that expanded on the event’s theme while serving as great visual support for each announcement. + +We worked together with Appwrite engineers to understand how each new feature launched could be illustrated using the dynamic line art concept we developed. This resulted in a set of key illustrations we used across different channels such as campaign announcements on social media, website illustrations, blog covers, and animations. + +![Day 0](/images/blog/designing-init/day0.png) +![Day 1](/images/blog/designing-init/day1.png) +![Day 2](/images/blog/designing-init/day2.png) +![Day 3](/images/blog/designing-init/day3.png) +![Day 4](/images/blog/designing-init/day4.png) + +This helped expand the concept we began developing with the Init lockup and made the whole event’s identity feel more expressive, diverse, and complete. + +# Conclusion + +As a design team, our goal is to do work that sets a standard of excellence for not only ourselves, but also the industry as a whole. Here, we set out to build something that was visually appealing, pushed the quality up another level from 1.0, was performant, and fit the themes of our event. Through a lot of hard work, learning, and iteration, we feel as though we managed to do all three. We’re constantly evolving, and will build on what we learned here to make our next events, and every other surface even better. Keep an eye out, and thanks for joining Init 2.0! + +Shout out to Sara, Jade, Caio, and every other Appwriter who contributed to creating the Init 2.0 design! diff --git a/static/images/blog/designing-init/cover.png b/static/images/blog/designing-init/cover.png new file mode 100644 index 0000000000..6c0071c100 Binary files /dev/null and b/static/images/blog/designing-init/cover.png differ diff --git a/static/images/blog/designing-init/day0.png b/static/images/blog/designing-init/day0.png new file mode 100644 index 0000000000..0d8d13d726 Binary files /dev/null and b/static/images/blog/designing-init/day0.png differ diff --git a/static/images/blog/designing-init/day1.png b/static/images/blog/designing-init/day1.png new file mode 100644 index 0000000000..c848bc49dc Binary files /dev/null and b/static/images/blog/designing-init/day1.png differ diff --git a/static/images/blog/designing-init/day2.png b/static/images/blog/designing-init/day2.png new file mode 100644 index 0000000000..55c360a25a Binary files /dev/null and b/static/images/blog/designing-init/day2.png differ diff --git a/static/images/blog/designing-init/day3.png b/static/images/blog/designing-init/day3.png new file mode 100644 index 0000000000..b049c66e71 Binary files /dev/null and b/static/images/blog/designing-init/day3.png differ diff --git a/static/images/blog/designing-init/day4.png b/static/images/blog/designing-init/day4.png new file mode 100644 index 0000000000..a479c8a1b5 Binary files /dev/null and b/static/images/blog/designing-init/day4.png differ diff --git a/static/images/blog/designing-init/figjam-1.png b/static/images/blog/designing-init/figjam-1.png new file mode 100644 index 0000000000..4a55970ff7 Binary files /dev/null and b/static/images/blog/designing-init/figjam-1.png differ diff --git a/static/images/blog/designing-init/figjam-2.png b/static/images/blog/designing-init/figjam-2.png new file mode 100644 index 0000000000..365b0f5b8d Binary files /dev/null and b/static/images/blog/designing-init/figjam-2.png differ diff --git a/static/images/blog/designing-init/final.mov b/static/images/blog/designing-init/final.mov new file mode 100644 index 0000000000..2c264f4662 Binary files /dev/null and b/static/images/blog/designing-init/final.mov differ diff --git a/static/images/blog/designing-init/first-browser-pass.mov b/static/images/blog/designing-init/first-browser-pass.mov new file mode 100644 index 0000000000..25a4b6c0f3 Binary files /dev/null and b/static/images/blog/designing-init/first-browser-pass.mov differ diff --git a/static/images/blog/designing-init/first-pass.mp4 b/static/images/blog/designing-init/first-pass.mp4 new file mode 100644 index 0000000000..e7a3a7d7a8 Binary files /dev/null and b/static/images/blog/designing-init/first-pass.mp4 differ diff --git a/static/images/blog/designing-init/gradient-tracing.mov b/static/images/blog/designing-init/gradient-tracing.mov new file mode 100644 index 0000000000..2918eb4153 Binary files /dev/null and b/static/images/blog/designing-init/gradient-tracing.mov differ diff --git a/static/images/blog/designing-init/saras-pass.png b/static/images/blog/designing-init/saras-pass.png new file mode 100644 index 0000000000..e20b1572e9 Binary files /dev/null and b/static/images/blog/designing-init/saras-pass.png differ