Essential Tools for a Digital Illustrator

<p class="reader-text-block__paragraph">We launched our first Design Hive meetup utilizing DesignOps and improv thinking exercises to create an empowering experience.</p>
<p class="reader-text-block__paragraph">My team at <a href="https://www.linkedin.com/company/thehovdesign/" data-entity-type="MINI_COMPANY">HOV Design</a>, with the help of <a href="https://www.linkedin.com/company/innovuze-solutions-inc-/" data-entity-type="MINI_COMPANY">Innovuze Solutions, Inc.</a> (venue sponsor) and <a href="https://www.linkedin.com/company/gdgcdo/" data-entity-type="MINI_COMPANY">Google Developer Group Cagayan de Oro</a> (community partner), made our inaugural meetup on February 25th a success. We were nervous to take on this challenge but excited to finally make our dream of establishing a design community in PH a reality.</p>
<h2 class="reader-text-block__heading1"></h2>
<h2 class="reader-text-block__heading1">Introducing the Design Hive</h2>
<p class="reader-text-block__paragraph">A community with a mission of bringing together designers of diverse backgrounds to collaborate and offer resources, support, and opportunities for professional and creative growth, with the goal of using design to solve real-world problems and create a positive impact on society.</p>
<blockquote class="reader-text-block__quote"><p><em>Leading community initiatives is often seen as “+1” or “extracurricular” work that is layered on top of full-time job responsibilities. Source: </em><em><a href="https://medium.com/dropbox-design/community-powered-by-design-ops-b8d09239467e">Community powered by Design Ops</a></em></p></blockquote>
<h2 class="reader-text-block__heading1"></h2>
<h2 class="reader-text-block__heading1">What to expect during the meetup?</h2>
<p class="reader-text-block__paragraph">Tech talks? Lectures? Info session? Nope 🙅 ♀️! We will be having a round-table community mixer that enables every guest to share about their creative practices, career stories, and design leadership approach. The meetup will be facilitated by <a href="http://linkedin.com/in/estellabravo">Estella</a>, a designer and tech community leader.</p>
<h2 class="reader-text-block__heading1"></h2>
<h2 class="reader-text-block__heading1">Setting up the goal</h2>
<p class="reader-text-block__paragraph">Design Hive seeks to bring together designers in the city, fostering connection and camaraderie through our shared interest in design.</p>
<p class="reader-text-block__paragraph">By the end of the gathering, we hope to have generated an inspiring idea that will drive us to continue meeting with a unified purpose.</p>
<h2 class="reader-text-block__heading1"></h2>
<h2 class="reader-text-block__heading1">D-Day of the meetup</h2>
<p class="reader-text-block__paragraph">We first made an introduction of who we are and our purpose for hosting a meetup. The event was attended by 23 guests out of 35 who registered.</p>
<div class="reader-image-block reader-image-block--full-width">
<figure class="reader-image-block__figure">
<div class="ivm-image-view-model   ">
<div class="ivm-view-attr__img-wrapper ivm-view-attr__img-wrapper--use-img-tag display-flex

        "><img id="ember35" class="ivm-view-attr__img--centered reader-image-block__img lazy-image ember-view" src="https://media.licdn.com/dms/image/D5612AQFv88p98QLwvQ/article-inline_image-shrink_1000_1488/0/1677606353071?e=1683763200&amp;v=beta&amp;t=dxXMsJnq2OtaFGvuLye8fZrhOlpXQ4Oh42PgQDE4JpE" alt="No alt text provided for this image" /></div>
</div>
</figure>
</div>
<blockquote class="reader-text-block__quote"><p>Our design community offers a safe and inclusive environment for designers of all backgrounds, to collaborate, learn, and build professional and creative relationships. We strive to provide resources and opportunities for growth and to use design to make a positive impact on society.</p></blockquote>
<h2 class="reader-text-block__heading1"></h2>
<h2 class="reader-text-block__heading1">Agenda</h2>
<p class="reader-text-block__paragraph">I was the one who facilitated the entire 3-hour meet-up with 3 different activities.</p>
<div class="reader-image-block reader-image-block--full-width">
<figure class="reader-image-block__figure">
<div class="ivm-image-view-model   ">
<div class="ivm-view-attr__img-wrapper ivm-view-attr__img-wrapper--use-img-tag display-flex

        "><img id="ember36" class="ivm-view-attr__img--centered reader-image-block__img lazy-image ember-view" src="https://media.licdn.com/dms/image/D5612AQH9SbPAX8YFlA/article-inline_image-shrink_1500_2232/0/1677606410780?e=1683763200&amp;v=beta&amp;t=HsWK3JcrYUbPjrMLaW8OE4ruMFaMLM1qkEK83OHUdyU" alt="No alt text provided for this image" /></div>
</div>
</figure>
</div>
<p class="reader-text-block__paragraph">We hosted an interactive meetup, allowing everyone to get involved with each activity. This created a feeling of unity and connection for the attendees.</p>
<div class="reader-image-block reader-image-block--full-width">
<figure class="reader-image-block__figure">
<div class="ivm-image-view-model   ">
<div class="ivm-view-attr__img-wrapper ivm-view-attr__img-wrapper--use-img-tag display-flex

        "><img id="ember37" class="ivm-view-attr__img--centered reader-image-block__img lazy-image ember-view" src="https://media.licdn.com/dms/image/D5612AQH5brfVSd5h6w/article-inline_image-shrink_1000_1488/0/1677606429188?e=1683763200&amp;v=beta&amp;t=YQAny3M-844Cy6oRljwmGoi169rGdOKouf5WSIFLXSA" alt="No alt text provided for this image" /></div>
</div>
</figure>
</div>
<h2 class="reader-text-block__heading1"></h2>
<h2 class="reader-text-block__heading1">What improvements were seen through the implementation of DesignOps in our initial meetup sessions?</h2>
<ol>
<li>People-first approach — Building a community requires commitment from both organizers and attendees. To ensure a successful event, consider what attendees need to stay engaged throughout.</li>
<li>The workflow — Attendees can anticipate the session when given an overview of the event beforehand. This includes the activities they will be expected to undertake and the topics that will be discussed. In addition, this allows them to be excited about the event.</li>
<li>Success stories — Establishing a community is not just about kick-starting it; it also involves sustaining and growing it. By envisioning what success looks like for our community and its members, we can develop effective strategies for launch, as well as for long-term scalability and sustainability.</li>
</ol>
<p class="reader-text-block__paragraph">By leveraging DesignOps, Improv Thinking, and Design Thinking, I&#8217;m able to facilitate engaging meetup activities.</p>
<p class="reader-text-block__paragraph">With that, I once again give huge thanks for all the support and we look forward to seeing familiar and new faces at our next meetup in Q2. 🐝</p>


Unlocking Creativity and Connecting Designers Through DesignOps

<h1 id="25e4" class="kf kg ij bd kh ki kj kk kl km kn ko kp kq kr ks kt ku kv kw kx ky kz la lb lc bi" data-selectable-paragraph="">What is a design hand-off?</h1>
<p id="d4a7" class="pw-post-body-paragraph jg jh ij ji b jj ld jl jm jn le jp jq jr lf jt ju jv lg jx jy jz lh kb kc kd hr bi" data-selectable-paragraph="">Design hand-off is a detailed document that contains a description and specifications of the products design components and composition. It is a process of turning-over the final design to the developer for conversion.</p>
<p id="6f13" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Design hand-off should include the flow, behavior expected in the design, breakpoints, validations, states, and preferably a prototype included for demonstration.</p>
<p id="ef27" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Aside from the specifications, we want to also show annotations to know the rationale behind design decisions that made the designer come up with such design. This gives clarity and understanding at the developers end.</p>
<p id="2576" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Design hand-off is meant to provide an ease of identification of the properties the developer needs to follow in order to convert the design properly.</p>
<h1 id="815e" class="kf kg ij bd kh ki kj kk kl km kn ko kp kq kr ks kt ku kv kw kx ky kz la lb lc bi" data-selectable-paragraph="">Hand-off contents</h1>
<p id="8b93" class="pw-post-body-paragraph jg jh ij ji b jj ld jl jm jn le jp jq jr lf jt ju jv lg jx jy jz lh kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Elements specification</strong></p>
<p id="94fa" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Elements specification includes the sizes, spaces, colors, and typography of the elements inside the design. The designer should provide guidelines on the specific measurements of the elements.</p>
<p id="e5f4" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">In Figma, developers can inspect the color and typography specification through the inspect functionality of Figma. This is one less of a work on the side of the designer.</p>
<p id="1a79" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Another part of the specification is indicating the accessibility points in a product. Accessibility points include touch points and alternative actions and captions. Providing accessibility information will allow developers to know how an element will be used in a certain out-of-normal situation. Visualize touch points by providing red-lines around the area of the elements that needs to be specified. Red lining can be manually created or you can use a plugin to help you fasten the process; in HOV design, we use the plugin <a class="ae li" href="https://www.figma.com/community/plugin/781354942292031141" target="_blank" rel="noopener ugc nofollow">Redlines</a>.</p>
<p id="e7d3" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Behavior</strong></p>
<p id="cefb" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Behavior includes animations and interactions. It can be visualized by creating a prototype and make an area where developers can observe and play on how the designers intended a page or an element to behave. Some of the times, some of the behaviors follow a certain pattern already and can be relay by just adding annotation noted for developer to know what the designer want or expecting to happen.</p>
<p id="3c06" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Screen states</strong></p>
<p id="06b5" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Providing a screen states make it clear for the developers what are the possible visuals of pages in a certain situations, such as empty, fresh install, loading screen, or error screen. It allows to provide back-up visual on unusual page situations; this will also avoid the looping back of the developer to the designer just to ask for a screen states.</p>
<p id="2f39" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Flow</strong></p>
<p id="5759" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Providing flow pages in your file will allow developers to understand the sequence and the scenario happening in your design. Flow should show the entry point or action and the result. If necessary, you can provide annotations beside your flow if it requires a specific instruction on the designers end. In our design department at HOV, we use the plugin <a class="ae li" href="https://www.figma.com/community/plugin/733902567457592893" target="_blank" rel="noopener ugc nofollow">Autoflow</a> to fasten our process.</p>
<p id="6652" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Breakpoints</strong></p>
<p id="def1" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Providing breakpoints for the screens, especially if there are still no system or guidelines both the design and developer departments are following is essential. It allows the developer to apply accurate responsive screen size on specific devices.</p>
<p id="d0f0" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Common breakpoints we have that are generally recognized are;</p>
<ul class="">
<li id="de5e" class="lj lk ij ji b jj jk jn jo jr ll jv lm jz ln kd lo lp lq lr bi" data-selectable-paragraph="">Mobile breakpoints (Small devices) min-0dp, max-600dp.</li>
<li id="c23f" class="lj lk ij ji b jj ls jn lt jr lu jv lv jz lw kd lo lp lq lr bi" data-selectable-paragraph="">Tablet breakpoints (Medium devices) min-600dp, max-900dp[Portrait] and min-900dp, max-1200dp [Landscape].</li>
<li id="5da5" class="lj lk ij ji b jj ls jn lt jr lu jv lv jz lw kd lo lp lq lr bi" data-selectable-paragraph="">Desktop breakpoints (Large device) min-1200dp, max-1800dp.</li>
</ul>
<figure class="ly lz ma mb fs ia fg fh paragraph-image">
<div class="ib ic di id bf ie" tabindex="0" role="button">
<div class="fg fh lx"><picture><source srcset="https://miro.medium.com/v2/resize:fit:640/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*U0pYuXUXbh3AbCaoMUvPQQ.png 1400w" type="image/webp" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" /><source srcset="https://miro.medium.com/v2/resize:fit:640/1*U0pYuXUXbh3AbCaoMUvPQQ.png 640w, https://miro.medium.com/v2/resize:fit:720/1*U0pYuXUXbh3AbCaoMUvPQQ.png 720w, https://miro.medium.com/v2/resize:fit:750/1*U0pYuXUXbh3AbCaoMUvPQQ.png 750w, https://miro.medium.com/v2/resize:fit:786/1*U0pYuXUXbh3AbCaoMUvPQQ.png 786w, https://miro.medium.com/v2/resize:fit:828/1*U0pYuXUXbh3AbCaoMUvPQQ.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*U0pYuXUXbh3AbCaoMUvPQQ.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*U0pYuXUXbh3AbCaoMUvPQQ.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" data-testid="og" /><img class="bf if ig c" role="presentation" src="https://miro.medium.com/max/700/1*U0pYuXUXbh3AbCaoMUvPQQ.png" alt="" width="700" height="255" /></picture></div>
</div><figcaption class="mc dm fi fg fh md me bd b be z dk" data-selectable-paragraph="">image from <a class="ae li" href="https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/" target="_blank" rel="noopener ugc nofollow">freeCodeCamp.com</a></figcaption></figure>
<p id="d2a2" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Some will say to start on Mobile first approach, but some designers argue that you should design on what is the priority of your product. Your layout of your design may vary depending on the size of the device you are designing to. Additionally, as the device gets smaller, the elements get hidden as we are prioritizing essential information as the visual space gets limited.</p>
<p id="92f5" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Assets</strong></p>
<p id="216d" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Assets include icons, images, illustrations, media that will be included into the design. Providing it on your design hand-off will reduce the looping time the developer will have on asking for the assets of the project. Advisable to have a specific cloud storage in which the designer can store the assets and the developer can just download it straight from the cloud.</p>
<p id="b4ad" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph=""><strong class="ji ik">Quick sync-up with your developer</strong></p>
<p id="b13f" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Lastly, you would want to jump on a quick call with the developers. Discuss the flow and the reminders you would want to clarify to them. Having a meeting. With them will basically serve as a final stage of hand-off and the conversion is now at their hand. Guide them through the pages you have on your file and some signals that you provide.</p>
<p id="5942" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">Providing a clear hand-off process to your design will also serve as a communication and agreement between you and the developer. Miscommunication on handing-off can lead to conversion errors and back and forth clarification between the designer and the developer. You can also try approaches that you deem may fit into your culture. No approach fits all; the key point we want to cross over in here is to relay the design message correctly to developers for a better conversion.</p>
<p id="e5f7" class="pw-post-body-paragraph jg jh ij ji b jj jk jl jm jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc kd hr bi" data-selectable-paragraph="">I hope you got some substantial information from this read. See you again next time as we tackle more things and experiences about life and design.</p>


The Efficiency of Design Hand-off to developers.

The Benefits of Proper Typography in UX Design

<p>Most of the time, during the development stage of a certain project, we are often focused on the functional side of things. While there is nothing wrong with making sure that features works 100%, bug-free and delivered on-time, I believe that design should have it’s own place in the cycle.</p>
<p>It is often overlooked that people who will be using the product is not only driven by the features but also by the visual experience delivered by the design.</p>
<p>Designs are a product of intensive thought-process from UX to UI to make sure that the product is not only functional but also engages users to stay, interact and have a better experience which makes it as equally as important as the functional features.</p>
<h2><strong>What is Design QA?</strong></h2>
<p>Design QA is a process of making sure that visual designs, micro interactions, and copywriting are properly followed throughout the development process.</p>
<p>A Design <a href="https://wordpress.highoutput.io/5-myths-about-qa-and-testing/">QA&#8217;s</a> main objective is to make sure that production is carried out with the required level of quality and design output.</p>
<h2>The Challenge <strong>of Implementing Design QA?</strong></h2>
<p>Initially, design QA can be extremely difficult. It can eat up time during a sprint and be quite costly. However, incorporating it into your process ensures high-quality output and better user experiences.</p>
<p><img class="alignnone size-medium wp-image-2422" src="https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-300x128.png" alt="" width="300" height="128" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-300x128.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-1024x437.png 1024w, https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow-768x328.png 768w, https://wordpress.highoutput.io/wp-content/uploads/2022/09/Design-QA-workflow.png 1476w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>The challenge of adding <a href="https://bootcamp.uxdesign.cc/what-the-design-qa-process-means-for-products-and-how-to-do-it-7484e5eaa4e2">Design QA</a> layer in the workflow may receive a lot of friction from the whole team especially the front-end developers.</p>
<p>Devs may want to focus on integrating the API endpoints to their work instead of adjusting paddings, colors and spacings but the moment the team starts doing this, we can be able to reduce design debt which is “<em><strong>all the good design concepts or solutions that you skipped in order to reach short-term goals”</strong></em></p>
<p>While it is always good to focus on skipping some design details specially when we are pushing for a faster delivery, if we continue neglecting Design QA and the product is out, we’ll realize that no matter how optimized our code structure is, if the interface looks totally out of place, all of our efforts will be futile.</p>
<p>If we continue neglecting Design QA and the product is out, we’ll realize that no matter how optimized our code structure is, if the interface looks totally out of place, all of our efforts will be futile.</p>
<h3>“<em>Users interact with the interface, not with the code.”</em></h3>
<p>In the art world, there is always the conflict between form and function and I believe that a balance of a high functioning code and a powerful visual component is what makes a highly successful project.</p>
<p>Apps needs to be a multi-sensory experience. Design, ease-of-use as well as audio will give another layer of flavor.</p>


Importance of Design QA workflow

<p><a href="https://www.tutorialspoint.com/multimedia/multimedia_introduction.htm">Multimedia</a> design is the art of integrating different forms of media such as audio, text, and animation. In the IT industry, multimedia design is highly used on the Internet, where you might encounter a web page that uses a combination of animation, illustration, and audio.</p>
<p>Being the first multimedia designer in HOV is a lot of pressure for me, especially since I am still a beginner in the field. I am under the guidance of the Design Manager, but of course it would be different if I had a multimedia expert mentor me from time to time. If you ask me what my initial goals are, I would say solidifying and standardizing multimedia design processes in the company is something that I would want to achieve within 1 to 2 years. In the future, I also want to monetize my creations so that I could contribute to the business side of the company and of course, myself, financially.</p>
<p>However, I will not achieve any of this if I do not focus on building my creative and technical skills in multimedia design. In this blog, I will share with you my multimedia design starter pack to help you kickstart your career as a multimedia designer. Beware, I am still a beginner and all these things I will be sharing are rooted in my experience. So read at your own risk!</p>
<ul>
<li><strong>Know the Design Principles</strong></li>
</ul>
<p>****The fact that multimedia designing is still “designing”, means that you must know at least the basic design principles. I assume you are familiar with the terms: balance, alignment, hierarchy, contrast, rhythm, proximity, color, and space. These are the design principles that would make your creation good-looking.</p>
<p>Keep in mind that user experience (UX) is always, if not, mostly part of the design. There are laws and principles of UX that you must also be familiar with in order to make your creations not just aesthetically pleasing, but sensible and impactful.</p>
<ul>
<li><strong>Know Motion Graphics and Video Editing Principles</strong></li>
</ul>
<p>The multimedia design will not be complete without the existence of animation and video. Animation is used in so many areas of multimedia design such as in web and video production. Knowing the basic principles of motion graphics (animation) would really help you become a more effective creator and designer. Some of those principles are timing, spacing, rhythm, eases, anticipation, arcs, and exaggeration.</p>
<p>Meanwhile, as a multimedia designer, you will inevitably deal with video editing and production. This too becomes a must for you to learn. In video editing, you have to be particular with details, timing, use of transitions and shots, music &amp; sound, color scheme, and other visuals. Currently, I edit weekly memo videos and one thing I could say is that you will need a lot of brain cells in choosing the most significant parts of the video, arranging the clips in a way that would relay an impactful message to the viewers, and choosing the right music and visual elements.</p>
<ul>
<li><strong>Watch Videos for Inspiration; Join Online Courses; Read Blogs and Articles</strong></li>
</ul>
<p>We sometimes come to a point where we exhaust our creative juices and can no longer think or conceptualize original ideas. This becomes the perfect time for you to look for inspiration. The best tip I could give you is to watch and explore videos online and take note as to how designers execute their creations. Be keen on details and observe patterns. This activity definitely works for me when I run out of ideas. <strong>Even in your free time</strong>, you can just do more explorations to expand your creativity and knowledge.</p>
<p>Another tip I can give you is to join online courses on multimedia design. If possible, enroll in free online courses so that you can save money. You can also watch video tutorials on YouTube as an alternative. Lastly, if you are a reader, then this tip is for you: read blogs and articles. There are lots of online resources that you can read from to further expand your knowledge in multimedia design.</p>
<ul>
<li><strong>Have a Color Accurate and Fast Device</strong></li>
</ul>
<p>Having a slow device with a screen that has an inaccurate color gamut is something that you do not want to happen. I started working with a laptop that has 8GB of RAM, 256GB of ROM, a pretty basic GPU, an outdated CPU, and a really bad screen in terms of color accuracy. When I was tasked to do some daily animation exercises in Adobe After Effects, as well as video editing in Adobe Premiere, my patience was really tested. I got so desperate in getting myself a new device. The rendering time is really long and the tools I use crash regularly. It adds backlog to tasks, and so I had to find a way to eliminate it. The only option I could think of is to buy a new one with much better specs. If you want to save money, you simply upgrade your device, but as for my situation, I did not opt for upgrading my laptop because the RAM is not upgradable, and the color accuracy of the screen is really bad.</p>
<p>If you ask me what laptop/desktop specs I recommend for content creation, I would say something that has a good color gamut of at least 90% sRGB and a contrast ratio of 1000:1, and a good GPU and CPU as well. Having a good screen color gamut would help you see colors accurately so you would not have problems in color grading and manipulating the colors of an image. Having a good GPU and CPU will definitely improve productivity – you can do more tasks simultaneously and be able to render work in a short amount of time.</p>
<ul>
<li><strong>Exercise Daily</strong></li>
</ul>
<p>Just like exercising physically to achieve the body shape that you desire, in order to be an expert in multimedia design, it is recommended to also practice daily. In my work, I create daily content in After Effects by either replicating works from the internet or using what I learned in my explorations to create original work. Additionally, I took the opportunity to edit the weekly video memo of our CEO so I can practice my video editing skill.</p>
<p>I also noticed that as I kept on doing exercises, I get to learn and apply more techniques and at the same time, familiarize the tools that I use which are Adobe After Effects, Adobe Photoshop, Adobe Premiere Pro, and <a href="https://wordpress.highoutput.io/figma-speed-up-your-design-progress-using-figma-plugins/">Figma</a>.</p>
<p>Right now, I am still in the process of learning, and I have a very long way to go. I want to take things gradually to avoid getting burnout. In the future, I envision myself leading a team of content creators. I hope the tips above helped!</p>


Multimedia design starter pack

<p><img class="size-medium wp-image-2352 aligncenter" src="https://wordpress.highoutput.io/wp-content/uploads/2022/06/JCs-blog-300x300.png" alt="" width="300" height="300" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/06/JCs-blog-300x300.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/06/JCs-blog-150x150.png 150w, https://wordpress.highoutput.io/wp-content/uploads/2022/06/JCs-blog-768x768.png 768w, https://wordpress.highoutput.io/wp-content/uploads/2022/06/JCs-blog-231x231.png 231w, https://wordpress.highoutput.io/wp-content/uploads/2022/06/JCs-blog.png 900w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>As a Junior Designer, a newcomer in the industry we are prone to being introduced into something new to us more often. To be able to conquer this, you must have to be able to learn, unlearn , and re-learn</p>
<p>It&#8217;s a bit uncomfortable because we are usually able to learn but never follow through on the latter two habits.</p>
<p>In order to learn, unlearn, and re-learn, you must have to be self aware to know your limit capacity.</p>
<p>Being self aware will help you to assess yourself. You will know what you are good at, where you lack, what you are bad at, and where to improve! Of course, you will not know it all at once.</p>
<h3><strong>YOU HAVE TO TAKE YOUR TIME</strong></h3>
<p>There is already a lot of pressure around you, don’t add up to the fire. Duh.</p>
<p>You are not used to everything that you are introduced to, and so you do not have to move fast. You just have to make movement or progress everyday. It will be harder to track at first, but that is okay. Plan what you are going to do, assess your weakness and strength first to know your capacity. You do not want to rush things and fail before you even get to the middle.</p>
<h3>TAKE WHAT YOU DO SERIOUSLY</h3>
<p>I know we often say to some of our colleagues “<em>Do not stress about work</em>”, “<em>Don’t take it seriously</em>”. But it is not always the case, there are things that we really are committed to and want to achieve &#8211; so we have to be serious about it sometimes. That doesn&#8217;t mean you have to be serious and focused 24/7, know when to stop and have fun through the journey. It&#8217;s more about <em>commitment</em>.</p>
<h3>ALLOW YOURSELF TO FEEL EMOTIONS</h3>
<p>Make yourself feel the very emotion you are feeling at that moment. Whether that emotion is frustration, accomplishment or anything else! Allowing it to be felt will point you on how you are doing in that moment. It will help you observe, analyze, and assess yourself later on.</p>
<h3>JOT DOWN HOW YOU FEEL</h3>
<p>Those fleeting emotions that you have felt, you can jot them down (digitally or traditionally). The point is to make you remember later on how you felt at that moment. You will be able to get back at it and start assessing your struggles, your accomplishments, your failures. Sort of like a diary, a diary that will help you monitor your day and how you are moving forward.</p>
<h3>REFLECT</h3>
<p>Reflect on the emotion that you have jotted down. Think if it is something externally or internally that affects you. Think WHY? Think HOW?.</p>
<p>Why is this happening? How has this happened?</p>
<p>This allows you to track how you ended up here, and you can see if you want to end up here again or how to avoid feeling this way.</p>
<p>Reflect and you’ll find the answer.</p>
<h3>ASK</h3>
<p>Ask the people around you. Be it your manager, your co-worker, or someone in another department. There&#8217;s never any harm in asking.</p>
<h3><strong>OPEN YOURSELF TO FEEDBACK</strong></h3>
<p>Always be open to feedback. This is one of the important points of integrating the self-awareness habit.  Open your ears to any feedback from your colleague as they are also seeing and working with you.</p>
<p>More often than not, you will get diverse answers and be able to see yourself from a different lens. This can often lead to more reflection, which is always a good thing. Don&#8217;t let negative feedback bring you down, assess it in a positive manner.</p>
<h3>WORK ON IT STEP-BY-STEP</h3>
<p>Building a habit is hard, but at the very least you keep moving even if it is inch by inch. Assess yourself day by day and reflect, because not doing any work on the assessment won&#8217;t l end to any results!</p>
<p>A final point: do not rush anything, just trust your process.</p>
<p>Especially as a Junior Designer, you will be dependent on your seniors most of the time especially on decisions &#8211; but if you acquire the habit of self-awareness/reflection, you could be improving yourself day-by-day in the industry that never sleeps.</p>


Becoming more self-aware as a Junior Designer

<p>It&#8217;s easy to overthink what other’s might say or think on the other end of a screen during meetings, and this is especially true in a <a href="https://wordpress.highoutput.io/what-its-like-working-at-hov/">fully remote job</a>. We can&#8217;t gauge other peoples body language because we aren&#8217;t physically with them and words often get mistranslated.</p>
<p><img class="size-medium wp-image-2335 alignleft" src="https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4-300x300.png" alt="" width="300" height="300" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4-300x300.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4-1024x1024.png 1024w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4-150x150.png 150w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4-768x768.png 768w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4-231x231.png 231w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-4.png 1500w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>We tend to be defensive, jump to conclusions and judge a person by whatever they say before asking for clarifications. Heartbeat quickens and our mind begins to race—first in search of an explanation for the assault and then for a retort to rationalize whatever actions are in question.</p>
<p>So, now I’m trying to see <a href="https://www.betterup.com/blog/how-to-give-and-receive-constructive-criticism-at-work">criticism</a> as an opportunity to learn. Even if it’s not delivered in the best way or if it’s unfounded. Instead, maybe we should view it in the sense that it gives us a window to understand other people’s perspective.</p>
<p>Perhaps we should give the benefit of the doubt — it’s also difficult to give feedback to another person. So maybe the person giving you feedback is nervous or may not express their thoughts perfectly.</p>
<p>It&#8217;s time to start training my crooked mind to not go into fight or flight mode, and I encourage you to do the same! <strong>Be</strong> <strong>optimistic</strong>. Be open to stuff you hadn’t thought about earlier, be open to better ideas. And say thanks to the person giving feedback as well. <em>Perhaps, it wasn’t easy for them either</em>.</p>
<p><img class="size-medium wp-image-2336 aligncenter" src="https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5-300x300.png" alt="" width="300" height="300" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5-300x300.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5-1024x1024.png 1024w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5-150x150.png 150w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5-768x768.png 768w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5-231x231.png 231w, https://wordpress.highoutput.io/wp-content/uploads/2022/05/Untitled-5.png 1500w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p><strong>Listen to understand—not to respond. This is the best way to take positives out of criticisms.</strong></p>


Receiving criticism

<h1>Have you ever heard of a color-blind designer?</h1>
<p>Uhm.. Hi? Yep, that’s me.</p>
<p><img class="size-medium wp-image-2286 alignleft" src="https://wordpress.highoutput.io/wp-content/uploads/2022/03/rancy-blog-pic-1-300x234.png" alt="" width="300" height="234" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/03/rancy-blog-pic-1-300x234.png 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/03/rancy-blog-pic-1.png 706w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>But I’m not totally color blind, I have this partial<a href="https://enchroma.com/pages/types-of-color-blindness"> Red-Green color blindness</a> which is one of the more common ones. Being color blind doesn’t mean I cannot see at all; it means some hues and colors are very hard to distinguish when combined with another color or even itself.</p>
<p>It took me 20 years to realize and discover that I was partially color blind, because it eventually became noticeable when I started working. Especially while being in the design industry.</p>
<p>&nbsp;</p>
<h1></h1>
<h1>But how did I even manage to stay in the design industry being slightly color blind?</h1>
<h3>Accepting it as part of yourself</h3>
<p>When I discovered I was color blind, I thought I had two choices: either I hide the fact and be afraid of it, or speak about it every time I met someone new. I realized I had a third choice, to just accept it for what it is. So now, if you’ll ask me then I’ll answer. That’s just it, I don’t wanna be <a href="https://www.hov.co/blog/post/landing-your-first-design-role"><strong>extra</strong> <strong>dramatic</strong> </a>about it.</p>
<p>I remember initially I used to memorize some of the hex code values just to stay aligned and make the color blindness less obvious. It was tough, especially while working on a certain project that required some color consistencies, but I managed. Now I recognize that it isn&#8217;t a big deal, I can just say I’m <em><strong>built different.</strong></em></p>
<h3>Seeing things from a different perspective</h3>
<p>As a designer with partial color blindness, I became more mindful about the product users. I realized that there are could be others who struggle using things that I or other designers build. <em><strong>“A good design is inclusive and works for everyone in every situation.”</strong></em></p>
<p>Instead of trusting colours alone, I put some effort into extending the reach of my design by <strong>using patterns and textures to emphasize the contrast between objects</strong>. <strong>Adding icons</strong> into some of the elements might be helpful too, just to give a bit more context on what message you’re trying to convey. And sometimes, <strong>you don’t have to break design conventions if you don’t have to</strong>. You’re designing for the clarity of your customers not to impress other designers or yourself.</p>
<h1>Resourceful links</h1>
<p><a href="https://webaim.org/">https://webaim.org/</a></p>
<p><a href="https://www.figma.com/community/plugin/732603254453395948/Stark">https://www.figma.com/community/plugin/732603254453395948/Stark</a></p>
<p><a href="https://www.invisionapp.com/inside-design/cat-noone-accessibility-inclusion/">https://www.invisionapp.com/inside-design/cat-noone-accessibility-inclusion/</a></p>
<p><a href="https://colororacle.org/">https://colororacle.org/</a></p>
<p><a href="https://enchroma.com/pages/test">https://enchroma.com/pages/test</a></p>


Designing on a different hue

<p>Last year was such a challenging time for everyone. It seems all of our plans were put on pause and all of us have a story to share on how we kept and still keep pushing during those times.</p>
<p>Before being a designer at HOV, I was just a fresh grad completely unsure what path to take. Back in my Senior year in college (2020), I had no idea what I wanted to do once I graduated. As an IT student, we were conditioned and told we could be web developers, software developers, or some type of programmers after graduation.</p>
<h2><em>We have been conditioned on what we should be, instead of finding what we could be.</em></h2>
<p><img class="size-medium wp-image-2257 alignleft" src="https://wordpress.highoutput.io/wp-content/uploads/2022/01/photo-1541829070764-84a7d30dd3f3-300x200.jpg" alt="" width="300" height="200" srcset="https://wordpress.highoutput.io/wp-content/uploads/2022/01/photo-1541829070764-84a7d30dd3f3-300x200.jpg 300w, https://wordpress.highoutput.io/wp-content/uploads/2022/01/photo-1541829070764-84a7d30dd3f3-768x513.jpg 768w, https://wordpress.highoutput.io/wp-content/uploads/2022/01/photo-1541829070764-84a7d30dd3f3.jpg 1000w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>Straying away from a common IT career path (programming) seemed to be kind of a waste for me back then since I had spent five years studying skills and concepts.</p>
<p>But by that time, I had also developed a keen interest in getting into the UI and UX path. Being different didn&#8217;t sit well with me whenever we talked about our post-graduation options. Most of my peers wanted to join the mainstream, traditional roles but a few wanted to be in the design side of the field.</p>
<p>That&#8217;s when I stumbled upon an article that said&#8230;</p>
<p>&nbsp;</p>
<blockquote>
<h2><em>D</em><em>o what you excel the most at, be great and improve yourself on it rather than doing something you&#8217;re average at and don&#8217;t see yourself in for the long run.</em></h2>
</blockquote>
<p>This has become my college best friend and my mantra &#8211; to be focused on what we want to be and find happiness at the same time.</p>
<p>Covid-19 came just before we graduated and of course this added to the pressure because how do you begin when you&#8217;re stuck in quarantine? There were so many businesses shutting down the idea of getting a job seemed really difficult and daunting. I took this horrible situation as an opportunity to give myself a break and took almost 3 months of reflecting on what I would really wanted to be doing.</p>
<ul>
<li><strong>I started to create my UX case study</strong> and build my own design portfolio. Doing something without any professional guidance is frustrating and worrisome as you don&#8217;t know if you are doing the right thing. But forget that! <strong>I just kept trusting my gut.</strong></li>
</ul>
<p>I attended a conference. One of the topics was entitled &#8220;<em>Trust Your Gut.&#8221;  </em>The talk basically said that sometimes trusting your own gut is a good thing. It can make you get out of your zone, do impossible things, break barriers and get one step closer to your goal.</p>
<ul>
<li><strong>Attended FREE UX events and workshops </strong>Conferences, <a href="https://wordpress.highoutput.io/covid-webinars-a-new-world-for-knowledge-sharing/">seminars</a> and workshops are quite pricey especially when you&#8217;ve just graduated and aren&#8217;t working yet. But there were SO many free conferences and sessions out there, I even got my first conference ticket on a major UX conference just by joining a giveaway contest on Twitter. Free online tutorials and courses have been my companion, then and now.</li>
<li><strong>Built my Portfolio</strong> I compiled all my works to build my first portfolio. It basically contained a variety of contents from UX case studies, UI landing pages, and graphic design illustrations I created to practice myself. A portfolio, even for non-designers, is really helpful. It is also a proof that you as an individual are driven and enthusiastic about what you are doing.</li>
<li><strong>Kept applying to design agencies / IT companies</strong> Keep on trying! I submitted my CV and <a href="http://www.designzbyjamz.com/the-importance-of-a-portfolio-for-designers/">portfolio</a> to countless number of companies. I got rounds of interviews but didn&#8217;t get the final position. It&#8217;s OKAY. Rejections are tough, especially for fresh graduates but keep your faith and courage to show your interest and drive.</li>
<li><strong>Showed interest and enthusiasm in interviews </strong>Always have lively and enthusiastic energy whenever talking about your personal projects. Walk the interviewers through your own thoughts and design processes and discuss how as someone without professional background, you built your projects and your portfolio. <em>Be confident but not arrogant.</em></li>
</ul>
<p>Having such drive and thinking helped me get a position here at HOV. Looking at those simple steps I did as a beginner, I am always proud of myself as I never actually studied design in college.</p>
<h2><strong><em>Trust your self</em>.</strong> Trust the process and never stop.</h2>


Insights