Designing presentations has never been this easy. Design slides in sketch and later convert it to an editable Powerpoint presentation for free using Deck

Deck

Industries such as Architecture or Industrial Design have developed smart modular systems for manufacturing extremely complex objects like airplanes, ships, and skyscrapers. Inspired by this, Atomic Design was proposed as a system that involves breaking down a website or web application into its basic components so that they can be reused throughout the site. Due to new devices with new screen sizes, that are getting released each year, creating pixel-perfect design gets harder if no systems are put in place.



Approaching this problem, <a href="https://medium.com/u/52f676b44c62" target="_blank" rel="noreferrer noopener">Brad Frost</a> coined the term and methodology of atomic design. The web designer, speaker, and writer is the author of <a href="http://atomicdesign.bradfrost.com/" rel="noreferrer noopener" target="_blank">Atomic Design</a> and he says that:



<blockquote class="wp-block-quote">‘Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same&nbsp;time.’</blockquote>



In this piece, I’d like to point 4 things you should know about Atomic design and how you as a designer could benefit from it.



<ol><li>Definition of Atomic Design</li><li>Atomic Design and Interface Inventory</li><li>Atomic Design and Design Systems</li><li>Benefits of Atomic Design</li></ol>



<h3>Definition of Atomic&nbsp;Design</h3>



Atomic Design, introduces a methodology for creating scalable systems, reusable components as well as design systems. In the early days of the web, we’ve had limited ‘pages’ that were not responsive or scalable. There are five distinct levels in atomic design:



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*AOO5xsVMcbN1GyEDRJI5XA.png" alt="Visualisation of atomic design — atoms, molecules, organisms, templates &amp; pages."/><figcaption>graphic by Brad&nbsp;Frost</figcaption></figure>



<ul><li>Atoms represent the smallest entity in UI elements and they can’t be broken down any further. Think of them as Lego blocks. They serve as the foundational building blocks of your interface. Some examples are: form labels, inputs, buttons, components, colors, fonts, animations, single images.</li></ul>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*oE16kjgoSi-eKojDS4N-tA.png" alt="Example of an atom within an Interface Inventory."/><figcaption>graphic by Brad&nbsp;Frost</figcaption></figure>



<ul><li>Molecules are groups of atoms bonded together that take on distinct new properties. They form relatively simple UI elements functioning together as a unit. Some examples are: a form label, search input, and button.</li></ul>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*Cbg1ode0jU-PFivbG2G39w.png" alt="Example of a molecule within an Interface Inventory."/><figcaption>graphic by Brad&nbsp;Frost</figcaption></figure>



<ul><li>Organisms are relatively complex UI components composed of groups of molecules and/or atoms. Most organisms can function on their own, without relying on other elements on the page. Some examples are: navigations, sidebars, forms, and popups.</li></ul>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*HAxQI_832MH4vB23bQ6DgA.png" alt="Example of an organism within an Interface Inventory."/><figcaption>graphic by Brad&nbsp;Frost</figcaption></figure>



<ul><li>Templates are pages without real content and articulate the design’s underlying content structure. Essentially, they combine organisms into a proper website layout.</li></ul>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*yp6aMU6kA2E0G9zptg9SGg.png" alt="A template consists of organisms and molecules, in terms of atomic design."/><figcaption>graphic by Brad&nbsp;Frost</figcaption></figure>



<ul><li>Pages are specific instances of templates that demonstrate the final UI looks like and with real representative content in place.</li></ul>



<figure class="wp-block-image"><img src="https://cdn-images-1.medium.com/max/800/1*L3rYVUQtHRfIyW0Eg2l-Ng.png" alt="A page is the final product, where the placeholder content gets replaced with real content."/><figcaption>graphic by Brad&nbsp;Frost</figcaption></figure>



<hr class="wp-block-separator"/>



<h3>Atomic Design and Interface Inventory</h3>



How do atomic design and interface inventory belong to each other? First let’s define what one of the biggest problems in product development is: the lack of design consistency. By creating a common language for the product development team, you can utilize the atomic design methodology to prevent inconsistencies. This common language is called your interface inventory. You can imagine it as a neatly organized box with all the pieces of your product.



Brad Frost defined an interface inventory as:



<blockquote class="wp-block-quote">‘…a comprehensive collection of the bits and pieces that make up your interface.’</blockquote>



Your interface inventory works as a tool for designers as well as developers — it allows everyone to participate in the conversation while keeping elements consistent and at high quality.



<hr class="wp-block-separator"/>



<h3>Atomic Design and Design&nbsp;Systems</h3>



Some of you might think, what actually is a Design system and how is it different to an Interface Inventory? In my eyes, the best definition was provided by <a href="https://medium.com/u/a174f7ac9f65" target="_blank" rel="noreferrer noopener">Audrey Hacq</a>:



<blockquote class="wp-block-quote"><a href="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969" rel="noreferrer noopener" target="_blank">‘A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.’</a></blockquote>



She explains further that



<blockquote class="wp-block-quote"><a href="https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969" rel="noreferrer noopener" target="_blank">‘…a Design System is not a deliverable, but a set of deliverables. It will evolve constantly with the product, the tools and the new technologies.’</a></blockquote>



So how is it different from an interface inventory? An interface inventory is showcasing the status quo and the different phases in a product’s life. In comparison, a design system keeps on evolving and acts as the single source of truth to return to for each product team member. Its fundamental purpose is to facilitate the work from all teams involved which reaches from the design team to the development team, etc.



A well defined and documented interface inventory, however, can be a good starting point to create a design system.



<hr class="wp-block-separator"/>



<h3>Benefits of Atomic&nbsp;Design</h3>



Atomic design can require considerably more thought and planning, but it’s often worth the extra effort. So what are the main benefits of it?



<ul><li>Building a component-based system — When we are breaking down our components into basic atoms, it becomes easier to see what atoms can be combined or mixed and matched to form other molecules or organisms. It helps us to navigate between atomic parts and the whole of our UIs.</li><li>Style guide creation becomes simple — Applying the atomic design principles from the get-go, which means that all the atoms and molecules are created before the site is built, you can incorporate all your atoms and molecules into your style guide. This keeps your design consistent across platforms.</li><li>Easy-to-read code that is more consistent — The code of ‘atomically’ designed websites is typically much easier to read than one created a more traditional way. Consistency is given when you use predefined atoms in order to create the site layout. It makes it easy to see which components are being used for different parts of the site. This reduces the tendency of duplicate code on the site.</li><li>Faster Prototyping and updating — By having a defined list of atoms before the creation process begins eventually means that you can mock-up pages quickly and easily. You simply pick and combine the required elements for the site. If an update is necessary, only one atom, molecule or organism is changed at a time. This simplifies any updates to a component that is carried out across to all other instances.</li></ul>



<hr class="wp-block-separator"/>



Atomic design breaks the UI of a site down into Atoms, Molecules, Organisms, Templates, and Pages. By breaking a page down into these different elements, we create a mental model that helps with constructing a UI. As Stephen Hay says:



<blockquote class="wp-block-quote">‘We’re not designing pages. We’re designing systems of components.’</blockquote>



Atomic Design might be time-consuming, but the whole team can benefit from its advantages.



<hr class="wp-block-separator"/>

4 things you need to know about Atomic Design

[ProtoBites Part 4: ProtoPie]



<figure class="wp-block-image"><img src="https://www.prototypr.io/wp-content/uploads/2019/08/2019-08-13-21-43-01.2019-08-13-21_44_11.gif" alt="" class="wp-image-43484"/><figcaption><a href="https://www.youtube.com/watch?v=jFCZ7PZZe1M">Part 5 in our Video playlist</a></figcaption></figure>







The next steps for the Moon animations are very similar to the Sun. Why don’t you try and work out how to do the Moon’s animations? Or if you don’t fancy doing that, feel free to follow along with my steps.



<h2>Rotation 🌝</h2>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=jFCZ7PZZe1M
</div></figure>



1. Select the Moon (luna) and add the ‘Rotate’ condition to conditions 1, and set the ‘Rotate By’ to -180.



2. We want our Moon to have the same Cubic Bezier effect when it reaches the right-hand side of the switch. Change the ‘Easing’ to Cubic Bezier and enter the values from left to right on the boxes below: 0.18, 0.89, 0.32 and 1.29. Change the duration to 0.51.



3. Underneath conditions 2, add a new ‘Rotate’ condition and set the ‘Rotate By’ to 180. The duration of the reverse is 0.59.



As you can see now, we are finally getting to see the transition of our Sun to Moon. It is starting to look very slick. All we need to do now is change the scaling and opacity of the Moon.



<figure class="wp-block-image"><img src="https://www.prototypr.io/wp-content/uploads/2019/05/image_preview-1024x48.png" alt="" class="wp-image-40409"/></figure>



<h2>Scaling 🌚</h2>



In this step, we will change the scale of the Moon as we did with the Sun. This is the first time that you will see the Moon at full scale!



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=vF26LREVDFA
</div></figure>



1. Ensuring the Moon is selected, add the ‘Scale’ condition to conditions 1.



2. Change the size drop-down box to ‘Scale By’ and set the height and width to 60. Add the ‘Scale’ condition to conditions 2.



3. Like the previous steps, change the size drop-down box to ‘Scale By’. This time we want the Moon to decrease in size so set the width and height to -60.



We have finally created the illusion that the Sun spins into the Moon and the Moon spins into the Sun. It is a simple effect but adds distinctiveness to our toggle.



<figure class="wp-block-image"><img src="https://www.prototypr.io/wp-content/uploads/2019/05/image_preview-1024x48.png" alt="" class="wp-image-40409"/></figure>



<h2>Opacity 🌜🌛</h2>



<figure class="wp-block-image"><img src="https://www.prototypr.io/wp-content/uploads/2019/08/2019-08-13-21-46-02.2019-08-13-21_47_00.gif" alt="" class="wp-image-43487"/></figure>



The final step in the Moon animations, we are going to change the opacity of the Moon and complete the morphing illusions.



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=_4a8EedUw3A
</div></figure>



1. Select the Moon (luna) and add the ‘Opacity’ condition to conditions 1. Then, set the opacity to 100. In this step, we are changing the Moon from being invisible to being visible.



3. Make sure the duration is around 0.24, and then under conditions 2, add the ‘Opacity’ condition and set the opacity to 0.



5. Alter the duration to 0.15 and add a start delay of 0.22. We require the start delay for the same reasons we used a start delay in the Sun section.



<figure class="wp-block-image"><img src="https://www.prototypr.io/wp-content/uploads/2019/05/image_preview-1024x48.png" alt="" class="wp-image-40409"/></figure>



That’s it! You have completed this part of the tutorial. As you can see, creating interesting micro-interactions is about building up the small details first. A small detail should never take over the whole interaction. Adding layers of details is what makes your apps unique!



<figure class="wp-block-image"><a href="https://www.protopie.io/?utm_source=prototypr&amp;utm_medium=article1&amp;utm_campaign=protobites"><img src="https://www.prototypr.io/wp-content/uploads/2019/05/image-3-1024x374.png" alt="This image has an empty alt attribute; its file name is image-3-1024x374.png"/></a></figure>



Next time, we'll start by adding colour transitions.



Thanks to ProtoPie for sponsoring this ProtoBites series. <a href="https://share.protopie.io/CLxvAQaVDm8">Download the final demo file from the ProtoPie cloud</a>&nbsp;and try it out.



<a href="https://www.prototypr.io/tutorial/scaling-and-opacity-transitions-in-protopie/">👈Go Back to Part 3</a>



<a href="https://www.prototypr.io/tutorial/color-transitions-in-protopie/">Read Part 5</a> 👉



<figure class="wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-prototyping"><div class="wp-block-embed__wrapper">
https://www.prototypr.io/tutorial/color-transitions-in-protopie/
</div></figure>

All in one: Rotation, Scaling, and Opacity in ProtoPie

Last week we launched the new Prototypr 3, with an open space to publish articles without the boundaries of sign up walls and popups. We finished <a href="https://prototypr.io/post/design-articles-without-the-paywall-open-stories/">3rd on Product Hunt</a>, and are already at nearly 3,000 members!



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Screenshot-2020-05-19-at-22.25.37-1024x559.png" alt="" class="wp-image-51567"/><figcaption>Prototypr Open Stories</figcaption></figure>



And today, I'm excited to share our new editor - now you can directly contribute to our <a rel="noreferrer noopener" href="http://prototypr.io/posts" target="_blank">Open Stories</a> section from a new editing dashboard. The publishing tools include:



<ul><li>📝 An Editor: Write and edit your posts.</li><li>🖼 Media Library: Easily upload images for your articles.</li><li>👁 Preview: See how your drafts will look when published.</li></ul>



<h2>Open design, open content</h2>



Traditionally, blogs and educational content in the design/development industry have been openly accessible for anyone on the web to learn from, no matter their background. Recently though, we’ve seen a rise in gated content, which has also been known as ‘the great paywall mania’ (well, I made that term up):&nbsp;



<figure class="wp-block-gallery columns-2 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://prototypr.io/wp-content/uploads/2020/05/3Ow3w1w.png" alt="" data-id="51507" data-full-url="https://prototypr.io/wp-content/uploads/2020/05/3Ow3w1w.png" data-link="https://prototypr.io/?attachment_id=51507" class="wp-image-51507"/><figcaption class="blocks-gallery-item__caption">Washington Post Paywall</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://prototypr.io/wp-content/uploads/2020/05/ACM_rGyg.png" alt="" data-id="51508" data-full-url="https://prototypr.io/wp-content/uploads/2020/05/ACM_rGyg.png" data-link="https://prototypr.io/?attachment_id=51508" class="wp-image-51508"/><figcaption class="blocks-gallery-item__caption">Medium Membership</figcaption></figure></li><li class="blocks-gallery-item"><figure><img src="https://prototypr.io/wp-content/uploads/2020/05/eNsVS-Fr-1024x552.png" alt="" data-id="51509" data-full-url="https://prototypr.io/wp-content/uploads/2020/05/eNsVS-Fr.png" data-link="https://prototypr.io/?attachment_id=51509" class="wp-image-51509"/><figcaption class="blocks-gallery-item__caption">LA Times Popup</figcaption></figure></li></ul></figure>



It must be noted here that paid publications such as the Washington Post and LA Times are written by professional news journalists. This makes them tricky to compare with premium blogging platforms like Medium, where anyone can write. 



Running a paid Medium publication with Prototypr, I love that authors can earn money directly from their writing, but there’s another side to it too.&nbsp;



Some content just doesn’t fit the paywall model:



<ul><li>💰 Articles with little research don’t fit - paying members expect high quality.</li><li>👎 Content that doesn’t fit the publication’s calendar will get rejected.</li><li>😢 Subscribers are unlikely to want to read design case studies, that showcase work rather than teach them something new.</li></ul>



That's not even mentioning the ethical dilemma of restricting content to people who can afford it. As famous illustrator extraordinaire, Pablo Stanley puts it:



<blockquote class="wp-block-quote">“The knowledge behind our craft should not be kept behind gates but rather freely accessible to the world.” <cite>- Pablo Stanley</cite></blockquote>



Most of what I learned, including the skills to make this site came from free resources I found on the web, so I agree. And like Pablo, I was guilty of pirating some Adobe software as a student 😂. This is my favourite bit of the <a rel="noreferrer noopener" href="https://uxdesign.cc/open-doodles-5341a677f20c" target="_blank">Open Doodles article</a>:



<blockquote class="wp-block-quote">When I was starting as a designer, there was no one around me to teach me the craft, and I was broke as hell. I wanted to learn how to do digital art, but I had no money to get the programs. So, I had to pirate software (sorry Adobe) and even steal the CDs that used to come inside tech magazines.</blockquote>



So apart from your own website, where is good to publish something that you want to share with an audience? What about just writing for fun, or even sharing information that is in the public interest?



<blockquote class="twitter-tweet">Disappointed to see an article like this behind a paywall!🤦‍♀️I'm all for getting paid for your work but work rights and industry problems concerns all of us. Everyone being able to read this free of charge is what will pay off the most for all of us in the end <a href="https://twitter.com/jamalnichols?ref_src=twsrc%5Etfw">@jamalnichols</a>. <a href="https://t.co/7AZKAUR8WN">pic.twitter.com/7AZKAUR8WN</a>— Signe Roswall (@signeroswall) <a href="https://twitter.com/signeroswall/status/1261636775883177986?ref_src=twsrc%5Etfw">May 16, 2020</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<h2>How to try it</h2>



That’s why we’ve made this <a rel="noreferrer noopener" href="http://prototypr.io/posts" target="_blank">new space</a>. Of course you can still publish with us in the Medium partner program, it’s up to you! This new space provides another option:



<ul><li>Anyone can read it, without restrictions.</li><li>Write about anything: we love side projects, case studies, and career learnings. </li><li>You control when your post is published (no approval needed).</li></ul>



If your article is awesome, it'll be marked as a 'featured article', appear on the front of the stories page, and get sent out in our weekly newsletter.



👋 To access the editor, sign in, and then go to the <a rel="noreferrer noopener" target="_blank" href="https://prototypr.io/new-story/">new post page</a>. You'll see a button that opens the publishing dashboard:



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Screenshot-2020-05-22-at-13.08.13-1024x729.png" alt="" class="wp-image-51716"/><figcaption>Open Publishing Dashboard</figcaption></figure>



<h3>Tech stuff</h3>



If you’re curious about the tech involved, the editor we’re using is the magical <a rel="noreferrer noopener" href="https://wordpress.org/gutenberg/" target="_blank">WordPress Gutenberg</a> editor. It can handle contributor content, and is something stable for the short term.



In the future, we’ll be putting together a faster, custom editor! For now though, Gutenberg lets us get started right away.&nbsp;



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/NRLnE82Q-1024x768.png" alt="" class="wp-image-51558"/><figcaption>Gutenberg Editor</figcaption></figure>



I may not be a Steve Jobs-level guru (yet), but our tiny team has made an open blogging platform that reaches thousands of people every day. Our heart is at the core of everything we do here, and our actions show it.



Hop on board and see what we're creating!



<blockquote class="twitter-tweet">So excited for this! The 1st contributor post published with the new <a href="https://twitter.com/Prototypr?ref_src=twsrc%5Etfw">@Prototypr</a> Editor👉🏽 <a href="https://t.co/cNBL73r1xW">https://t.co/cNBL73r1xW</a> Huge thanks to <a href="https://twitter.com/charlieyllobre?ref_src=twsrc%5Etfw">@charlieyllobre</a>! We're now an open design platform: 📝 New editor 💫 Publish straight away, without approval 👁 Open for anyone to read, for free <a href="https://t.co/VtBHREgE8M">pic.twitter.com/VtBHREgE8M</a>— gram (@graeme_fulton) <a href="https://twitter.com/graeme_fulton/status/1262716511761940483?ref_src=twsrc%5Etfw">May 19, 2020</a></blockquote> <script async="" src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Design Articles Without The Paywall: Open Stories

<blockquote class="wp-block-quote">I launched&nbsp;<a href="https://designerslack.community/" rel="noreferrer noopener" target="_blank">Designer Slack Communities</a>&nbsp;a while ago, aiming to help designers to connect with likeminded people. By sharing my website with the world, I’ve connected with so many designers. The whole experience is a first time for me, so I want to share my experience about how I built it.</blockquote>



<h2>What is Designer Slack Communities</h2>



<a rel="noreferrer noopener" href="https://designerslack.community/" target="_blank">Designer Slack Communities</a>&nbsp;is a website where I collect all the active Slack communities for designers. It’s aiming for designers who are looking to join more communities and connect with designers around the world.







<h2>Why did I decide to build&nbsp;it</h2>



A few weeks ago, I attended&nbsp;<a rel="noreferrer noopener" href="https://remotedesignweek.com/" target="_blank">Remote Designer Week</a>, organized by Design X. It was such a wonderful experience. During the time, I’ve slack-met a lot of designers and got introduced to a few more Slack communities. I enjoyed the sense of community, and many designers are looking to join different communities as well. I think it would be helpful if there is a list of Slack groups for designers to join. When I search for something similar on the internet, there are resources like this. But they are either not tailored to designers, or have expired links. So I decided to build a website to collect all the active Slack communities I can find.







<hr class="wp-block-separator"/>







<h2>Gather information and&nbsp;design</h2>



With the 20 active communities I gathered. I started to design the first version. I wanted to keep the design simple, but I also wanted to try something different this time. I’ve used too much soft shadow and pastel colour in my design work that I’m kind of tired of it. I chose to use bold borders and more vivid colours for this one. It makes the website more fun and delightful.



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/1_oBUrj_iBWXqIguxtOJmO2g-1024x766.jpeg" alt="" class="wp-image-51966"/></figure>



<h2>Building</h2>



With the design done, I started thinking about how do I want to build it. I could look into different CMS options and static website frameworks. It would take me weeks to learn them and make the website. If I wanted to add new features in the future, it would take even more time to figure it out. Then I remembered Webflow. Webflow is great at quickly building a website. Although it has its limitations, a single-page website like this would be the perfect use. Thanks to the power of the Webflow CMS, it only took me a couple of hours to implement my design. The CSS grid makes building a responsive list easy. It’s widely supported across modern browsers. So I would encourage everyone to use the CSS grid whenever you can.



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/1_hLP4JCfin-xeo3NMaChmHQ-1024x624.jpeg" alt="" class="wp-image-51965"/></figure>







<h2>Launching</h2>



After finishing the development, I post my website on various Slack groups and social media. I got a lot of positive response. People were adding me on LinkedIn and Twitter. They found this website is helpful as they were searching for similar resources. I also have people saying they were working on similar things and asking if I want to collaborate. It truly felt joyful as I created something that helped people. That’s the reason why I became a designer.&nbsp;



I’m also surprised by the connections I made. As an introvert and a non-native English speaker, I always find it hard to connect with people. Building a side project and sharing your work is an excellent way for people like me to establish networks.







<h2>Keep improving</h2>



Within a few days after the launch, I got over 50 new communities submitted. The list became rather long. A way to sort or search for communities would certainly help people to find what they want. Webflow doesn’t have this feature built-in, but I found a great tutorial on the Webflow Forum. It uses MixItUp 3 to do dynamic searches for CMS items. With few customizations I made, the feature is working great. Another alternative is Jetboost. It’s a paid service, but the setup process is straightforward. No js code required. <a rel="noreferrer noopener" href="https://forum.webflow.com/t/webflow-cms-mixitup-3-filter-sort-search-hash-url/96306" target="_blank">https://forum.webflow.com/t/webflow-cms-mixitup-3-filter-sort-search-hash-url/96306</a>







I also added RSS to the website. I’m a huge fan of RSS. It’s a great way to let visitors receive updates without manually check the website every once in a while. Webflow makes adding RSS straightforward. You can use all the fields in your CMS to create the content in RSS and preview without opening a new tab.



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/1_r-xAgSszYobi0emqd9aBaQ-791x1024.jpeg" alt="" class="wp-image-51967"/></figure>







Someone suggested I should add social share buttons to lead more referral traffics. Thanks to the help of the Webflow community, it’s quite easy to do it. Wierperwebworks shared a project that makes this process simple as copy and paste. <a rel="noreferrer noopener" href="https://webflow.com/website/simple-social-share-buttons" target="_blank">https://webflow.com/website/simple-social-share-buttons</a>







The last thing I did is to switch to Simple Analytics from Google Analytics. It’s a privacy-focused web analytics tool. It has all the essential metrics that are more than enough for me. Even though it’s not a free tool, it does feel relieved because I know it respects the privacy of my visitors.



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/1_ZcCX-LvpifCemkqp7IJT_Q-975x1024.jpeg" alt="" class="wp-image-51968"/></figure>







<h2>Clone the&nbsp;project</h2>



I’ve made this project available on the Webflow community. Everyone can view it, clone it, use it for your own project. I hope it can help other people, just like how I got help from the Webflow community. <a href="https://webflow.com/website/Designer-Slack-Communities" target="_blank" rel="noreferrer noopener">https://webflow.com/website/Designer-Slack-Communities</a>







<hr class="wp-block-separator"/>



<h2>Conclusion</h2>



Building a side project is a fun process. You can get creative with it because it’s your project. I’m so humbled that I got connected with many people through this project. It may not give me any profit, but I do feel a sense of fulfillment by sharing my work and connecting with other designers. I hope this post can inspire you to make something small yourself. It doesn’t have to be the greatest idea ever. With tools like Webflow, it won’t take too much time to build it either. If you have any questions, please feel free to tag me on Twitter.

How I use Webflow to build a side project to help designers connect

How to find me at a party? 



You normally don’t.&nbsp;But you can try the corner, mostly table for one, furthest from the crowd, maybe that girl who is constantly avoiding eye-contact or any possibilities for conversation. Sometimes though, I am that stranger who walks up to you and initiates conversations about your media consumption habit (very random, yeah?) or that girl who runs a co-creation workshop the other day. No, I am not writing a thriller, I am just describing myself as an introverted UX Designer.



If you google “careers for introverts”, “designer” would appear as a top hit, that is because introverts are perceived as more creative and more empathetic — which makes us great for the job. (Yay to my introverted gangs! ) However, I hate to break it to you, but the job also requires us to do the more of what appear to be extroverted stuff like conducting user interviews, usability tests, presentations, and facilitating workshops.



<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Untitled_Artwork-3-1024x768.jpg" alt="A person anxiously speaking in front of a group of people" class="wp-image-51835"/></figure>



So how do I, a proud introvert do the extrovert aspect of my User Experience Design job, in this case, facilitating workshops? (Spoiler: it is a constantly hard job)



Before you read further, here are some amazing resources and pep talk to get you interested in running a workshop if you are not invested already.



<ul><li><a rel="noreferrer noopener" href="https://workshopper.com/how-to-get-promoted/" target="_blank">Running Workshops: The Secret Career-Boosting Superpower</a>&nbsp;(actually check out their whole website on workshops</li><li><a rel="noreferrer noopener" href="https://uxplanet.org/lightning-decision-jam-a-workshop-to-solve-any-problem-65bb42af41dc" target="_blank">Lightning Decision Jam: A Workshop to Solve Any Problem</a></li></ul>



<hr class="wp-block-separator"/>







<h2>Prep very very well</h2>



Preparation is the key, and I meant both mentally and physically. Personally, I think it is better to be overly prepared than to show up blank, especially when you are doing something that scares you.&nbsp;My preparation is ranging from writing down the self-introduction script (yes, that is very scary for introverts to say “Hello, I am blah blah 😅...”) to do a mock presentation in front of the mirror. So, here are some of the preparation activities I have done prior to running a workshop.



<h3>1- Have a goal</h3>



First thing first,&nbsp;I am assuming you are running your workshop with a clear goal in mind, whether this is a&nbsp;Discovery Workshop — where you are just trying to identify the problem, creating a hypothesis, or a&nbsp;full Design Sprint — where you are building a prototype, or maybe just a quick&nbsp;Lightning Decision Jam to determine how to effectively run meetings. Regardless, you need to have a clear goal of what you want to achieve from the workshop.



This goal is an important motivation to get you to get out of your comfort zone and do these rather extroverted activities. The idea of running a workshop is already tiring, am I right?







<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Untitled_Artwork-1024x768.jpg" alt="Person intensively focusing, bitting her pencil, and sitting in front of her computer." class="wp-image-51837"/></figure>



<h3>2- Have a detailed agenda — a customized one that tailored not only toward the problem but also toward yourself and your participants.</h3>



Being prepared means knowing what you are going to do. What are the sessions about? Plan them down in detail. You definitely want to do some research prior to your workshop as well, to make sure you know as much as you can about the workshop you are running. While you are not expected to be the sole expert on the topic, you need to align ideas and do a lot of conclusions, so do as much research as you can.



As a facilitator, you are also a timekeeper ⏱ ⏲. So plan how long each session is going to be, given your current understanding of the problems and your participants' proactiveness and/or communication style.&nbsp;Some people really like to talk and elaborate on their ideas. Therefore,&nbsp;as a facilitator, even though you need to cut long discussion and get straight to the point, you also need to be aware of the group dynamics.



In addition, the most crucial thing is to be aware of your own energy.&nbsp;Facilitating a workshop is very exhausted, and as an introvert, you get tired more easily in this context than other extroverted facilitators. So be aware of your energy. If the agenda is too cramped for you, consider spacing them out. It is better to be in full energy and concentrated for a two-day workshop, then be exhausted and space-out at a 9h day workshop.&nbsp;When you balance your energy well, you will get the most out of the workshop and the participants.&nbsp;



By giving the workshop an extra day or hours, you are also giving the participants enough time to digest the information, room for creativity, and room for mistakes.&nbsp;A lot of time, the session you plan goes longer than you expected, simply because the problem you would form together as a group is more complicated than you have anticipated. Trust me that happens quite often, especially when it is your first time facilitating or it is the first time the participants are joining a design workshop like this.



Once you finish your agenda, don’t forget to send them to everyone!&nbsp;Make sure to also include any sessions that the participants would like to do in advance as a form of homework. They would really appreciate you giving them extra time to prepare and excel during the session.&nbsp;If I am running a Design Sprint, I generally like to give participants a head up about the Lightning Demos, so if they would like they can do some internet search or light research to find inspirations prior to the session.







<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Untitled_Artwork-4-1024x768.jpg" alt="Writing in note." class="wp-image-51838"/></figure>



<h3>3- Prepare your scripts &amp; maybe some <a href="https://sprintstories.com/23-facilitation-tips-for-design-sprints-34d876aa5317">jokes </a>😂</h3>



You know your agenda, why need a script? It is not like you are giving a speech!



Never think you are too prepared. As introverts, we know too well the awkward moments when words get stuck in our throats and we would stand there and freeze. It is not that we don’t know what to say, but we are just not very good at expressing words in front of a large group of people (and yes if it is more than two, it is a large group). This is where a script comes in handy. You may not use it the whole time but it is a good back up plan.&nbsp;By writing scripts, it also helps you to formulate your ideas well. I usually write my scripts for self-introduction, for the agenda of the workshop as well as for introductions to specific sessions — of course leaving rooms for spontaneous thoughts and pivoting as well.



A good self-introduction goes a long way. This is where you make the first impression. You want to sound confident yet friendly because everyone is here to work together to solve that one problem.



Jokes also come in handy. It helps to lighten up the mood of the room, and also help the participants to be able to express their ideas without feeling judgmental. The participants have to block their schedule, ignore their emails to be in the room joining your workshop. It can get very stressful. Laughter, therefore, is very much preferred.&nbsp;Jokes also help you look relaxed as well. You maybe a bit freaked out inside, but nobody needs to know.



<h3 id="4fe1">4- Have a good rest</h3>



A good-night sleep prior to the workshop is very crucial, simply because you need to maximize your energy usage. I know that the anxiety of facilitating the workshop would keep you up all night. To avoid this, stop preparing or thinking about the workshop at least a couple of hours before bed.







<hr class="wp-block-separator"/>







<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Untitled_Artwork-5-1024x768.jpg" alt="Person speaks confidently in front of a group. " class="wp-image-51876"/></figure>



<h2>Be confident &amp; own it</h2>



Yes! So you have done all the preparation. And today is the day? Are you ready? Not really, yeah? That okay, it’s normal.&nbsp;You just have to look confident, wear your go-to warrior yet comfortable outfits, some pep talks before you leave your house and yep, you are going to do great! Be optimistic and don’t forget your coffee.



<h3>1- Set the stage</h3>



It is very crucial to set the stage right from the beginning.



<ul><li>Set the rules from the start — from no devices during the sessions to no judgment during ideations.&nbsp;So, everyone is not going to be surprised or be mad when you ask them to put their devices away. Also, people get self-conscious when they are the only ones who seem to be breaking the rules.</li><li>Mention that you are going to do a lot of talking today.&nbsp;It can be a bit weird to say that, but it is a good way to let everyone knows that despite your actual job’s position, today you are the facilitator.</li><li><a href="https://sprintstories.com/23-facilitation-tips-for-design-sprints-34d876aa5317">Ask permission to do your job.</a>&nbsp;Mention from the start that during the workshop, you may have to stop some of the discussions that are off the topic or taken too long.&nbsp;This is not just to let everyone knows you are just doing your job, and not being disrespectful, but also helps ease your guilt as an introverted agreeable human being.</li></ul>







<figure class="wp-block-image size-large"><img src="https://prototypr.io/wp-content/uploads/2020/05/Untitled_Artwork-6-1024x768.jpg" alt="Good looking meal :)" class="wp-image-51877"/></figure>



<h3>2- You don’t have to be the extrovert the whole time</h3>



Yes, the whole facilitating workshop thing is very extroverted. I know you are really going out of your own self to do this. But you don’t have to be extroverted the whole time. As mentioned,&nbsp;it is very important to be aware of your own energy level. Break time and lunch break are your time.&nbsp;You don’t have to be chatty during these breaks. You can choose to eat lunch alone or be quiet the whole lunch if that means regaining your energy to continue running the workshop in the afternoon.&nbsp;If you don’t want to be rude, you can let everyone knows that this is how you energize yourself.







<h3>3- Ask for feedback</h3>



Asking for feedback is scary but very beneficial. You should ask for feedback before each break. This is to let you know how the participants think about the workshop, either to reassure you are doing a good job or that you need to adjust your agenda. Because it is before the break, you can take the break time to readjust your agenda accordingly if necessary.



<h3>4- Be forgiving of others and especially yourself</h3>



We should go into the workshop with confidence and a positive mindset. But of course, everything is not going to be smooth. You may encounter that the participants are not proactive, or the decision-makers seem to be indecisive; or you, yourself don’t seem to be doing a good job of explaining what needs to be done in each section. Mistakes happen and that is okay.&nbsp;Be forgiving of the participants if they don’t seem to be paying attention to the workshop or don’t seem to be proactive. These participants may need extra instructions or extra attention from you.



Most importantly be forgiving of yourself. I&nbsp;have had enough bad workshop experiences that I can tell you with confidence that sometimes the workshop just doesn’t work well.&nbsp;Maybe you didn’t establish trust earlier with the participants or they are just not interested in the workshop in the first place. While some of these pitfalls could have been prevented before the workshop starts, only with experience can you sense what needed to be done.&nbsp;So, you just have to do it!&nbsp;Practice makes perfect, the more you do it, the more you confidence you get.



<hr class="wp-block-separator"/>



I suggest you start small, maybe do a small Lightning Decision Jam with your closed group of co-workers, or shadow someone in your organization who are running design workshops. Trust me, you will never feel ready. You just have to give it a try, and if it doesn’t work out well, try a couple more times after that.



<hr class="wp-block-separator"/>











Thank you so much for reading this article. I am writing this mainly based on my personal experiences. I am still learning and experimenting with different workshop techniques. Feel free to leave your feedback or any questions. Would also appreciate it if you share your experiences as well.

Introverted and designer: how I facilitate workshops

UX Research for Brand Colour

Commission free donations for creators!

Ko-fi lets creators get donations, subscriptions and more from fans of their work for the price of a coffee. Join over 500,000 creators with a free Ko-fi Page!

Prototypr.io

Editor at Prototypr