<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ graphic design - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ graphic design - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Fri, 19 Jun 2026 22:33:52 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/tag/graphic-design/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ How to Change Mouse DPI Settings in Windows 10 ]]>
                </title>
                <description>
                    <![CDATA[ If your work requires a lot of precision, like graphic design and gaming, then you might want to adjust how fast or slow your external mouse or keyboard is. In this guide, I will show you how you can make your mouse more sensitive or less sensitive b... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-change-mouse-dpi-settings-in-windows-10/</link>
                <guid isPermaLink="false">66adf1042d0eb5bfdd6b0c22</guid>
                
                    <category>
                        <![CDATA[ gaming ]]>
                    </category>
                
                    <category>
                        <![CDATA[ graphic design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ how-to ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Kolade Chris ]]>
                </dc:creator>
                <pubDate>Tue, 02 Nov 2021 17:05:06 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/11/oscar-ivan-esquivel-arteaga-ZtxED1cpB1E-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>If your work requires a lot of precision, like graphic design and gaming, then you might want to adjust how fast or slow your external mouse or keyboard is.</p>
<p>In this guide, I will show you how you can make your mouse more sensitive or less sensitive by changing its DPI.</p>
<h2 id="heading-what-is-dpi">What is DPI?</h2>
<p>DPI stands for dots per inch. It is the measurement of mouse sensitivity and cursor speed. </p>
<p>The higher your mouse DPI, the faster your mouse responds to movement per inch and the farther it travels. The slower the DPI, the slower your mouse responds to movement.</p>
<h2 id="heading-how-to-change-your-mouse-dpi-on-windows-10">How to Change your Mouse DPI on Windows 10</h2>
<p>You can change your mouse DPI through the Settings app.</p>
<p><strong>Step 1</strong>: Click on Start or press the <code>WIN</code> (Windows) key on your keyboard and select Settings.
<img src="https://www.freecodecamp.org/news/content/images/2021/11/ss-1-1.jpg" alt="ss-1-1" width="600" height="400" loading="lazy"></p>
<p><strong>Step 2</strong>: Out of the menu items you see, select "Devices".
<img src="https://www.freecodecamp.org/news/content/images/2021/11/ss-2-1.jpg" alt="ss-2-1" width="600" height="400" loading="lazy"></p>
<p><strong>Step 3</strong>: Click on the Mouse tab on the Devices page, then select "Additional mouse options" under “Related settings”.
<img src="https://www.freecodecamp.org/news/content/images/2021/11/ss-3-1.jpg" alt="ss-3-1" width="600" height="400" loading="lazy"></p>
<p><strong>Step 4</strong>: A pop-up will appear. Click on the "Pointer options" tab.</p>
<p><strong>Step 5</strong>: You will see a slider under "Select pointer speed" which you can use to adjust your mouse DPI. Move the slider to the left to reduce the DPI and to the right to increase it.
<img src="https://www.freecodecamp.org/news/content/images/2021/11/ss-4-1.jpg" alt="ss-4-1" width="600" height="400" loading="lazy"></p>
<p><strong>Step 6</strong>: Click the "Apply" button to save changes and click "Ok" to close the pop-up.
<img src="https://www.freecodecamp.org/news/content/images/2021/11/ss-5-1.jpg" alt="ss-5-1" width="600" height="400" loading="lazy"></p>
<p>Advanced mice such as those used for gaming often have buttons or sliders for adjusting their DPI, so you can change the DPI of those mice without opening the Settings app.
<img src="https://www.freecodecamp.org/news/content/images/2021/11/antonio-manaligod-T_2UFB_xwzw-unsplash--1-.jpg" alt="antonio-manaligod-T_2UFB_xwzw-unsplash--1-" width="600" height="400" loading="lazy"></p>
<h2 id="heading-final-words">Final Words</h2>
<p>In this guide, you learned what DPI is and how to change it on your Windows 10 computer.</p>
<p>Changing the DPI is useful if what you do requires a lot of precision. </p>
<p>If you game on your PC, you probably need a faster DPI to beat intervals. And if you're a designer, you might need the DPI slower for the sake of precision. </p>
<p>I hope this article helps you change your mouse DPI. If you find it useful, please share it with your friends and family.</p>
<p>Thank you for reading.</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ What is Graphic Design? The Graphic Designer Job Explained in Plain English ]]>
                </title>
                <description>
                    <![CDATA[ Magazine covers, business logos, and book covers are all common examples of graphic design. But what is graphic design? In this article, I'll explain what graphic design is, discuss different areas of graphic design, provide helpful learning resource... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/what-is-graphic-design-the-graphic-designer-job-explained-in-plain-english/</link>
                <guid isPermaLink="false">66b8da73b16665d8febd7f46</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ graphic design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Design ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Jessica Wilkins ]]>
                </dc:creator>
                <pubDate>Tue, 07 Sep 2021 15:08:49 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2021/09/emily-bernal-v9vII5gV8Lw-unsplash.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Magazine covers, business logos, and book covers are all common examples of graphic design. But what is graphic design?</p>
<p>In this article, I'll explain what graphic design is, discuss different areas of graphic design, provide helpful learning resources, and talk about salaries for designers. </p>
<h2 id="heading-what-is-graphic-design">What is Graphic Design?</h2>
<p>Graphic Design involves creating high quality visual content as a way to communicate a message to an audience. Businesses spend a lot of money to ensure that the designs for their company convey the right message for their brand.</p>
<p>You have probably heard of the phrase, "A picture is worth a thousand words". The ability to create a compelling visual to communicate a brand or message is a very powerful skill to have. </p>
<h2 id="heading-basic-principles-and-elements-of-graphic-design">Basic Principles and Elements of Graphic Design</h2>
<p>The basic principles and elements of design consist of color, space, size, shape, form, line, movement, emphasis, texture, balance, contrast and more. </p>
<p>Graphic designers will study all of these principles and elements so they can understand how to create an effective design. </p>
<p>CalArts provides an in depth look into all of these design principles through their <a target="_blank" href="https://www.coursera.org/specializations/graphic-design">Graphic Design Specialization</a>. </p>
<p>Let's take a closer look at one of these important design elements, which is the effective use of color.</p>
<h3 id="heading-how-to-use-color-in-graphic-design">How to Use Color in Graphic Design</h3>
<p>The use of color in design can draw a user in and elicit an emotional response. As a designer, you have to take a lot of care in choosing the appropriate colors for that particular design. </p>
<p>Let's take a look at an example. Have you ever wondered why companies use the color red for sales?</p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/artem-beliaikin-cE8cwN2A2-c-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Red elicits a very strong response from humans. We are programmed to stop and take notice of it. </p>
<p>It is a very effective color when you are trying to promote a sale and convey a sense of urgency to buy now while the price is low. </p>
<p>In contrast, the color blue is perceived by humans to be safe and calming. Blue is a popular choice for financial institutions like banks. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/tech-daily-nExZ4CoZbR4-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>These financial institutions want to the convey the message that "your money is safe with us". </p>
<p>To learn more about effective use of colors in design, I suggest reading up on these articles.</p>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/how-to-increase-user-engagement-with-your-app-using-color-theory-7c6f5c632570/">How to increase user engagement with your app using Color Theory</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/comprehensive-guide-for-color-usage-in-web-design-e2a9afce09fb/">Comprehensive guide for color usage in web design</a></li>
</ul>
<h2 id="heading-different-types-of-graphic-design">Different Types of Graphic Design</h2>
<p>There are different types of graphic design that you can go into. Here is a list of some of the common areas:</p>
<ul>
<li>User interface (UI) </li>
<li>User Experience (UX)</li>
<li>Publication design</li>
<li>Packaging design</li>
<li>Motion graphics</li>
</ul>
<p>Now let's take a look at each of these areas of graphic design in a little more detail. </p>
<h3 id="heading-user-interface-ui-design">User Interface (UI) design</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/alvaro-reyes-zvmZiw3vdsQ-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>UI design focuses on how the user interacts with the interface. These designers will think about smart page layouts, easy to use interfaces, smart use of colors and textures and a sense of consistency on the page.</p>
<p>To learn more about UI Design fundamentals, I would suggest looking into these resources: </p>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-ui-design-fundamentals-with-this-free-one-hour-course/">Learn UI design fundamentals with this free one-hour course</a>  </li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=_P3CrgFlXhg">UI Design Tutorial - Website From Wireframe</a></li>
<li><a target="_blank" href="https://www.freecodecamp.org/news/ui-ux-design-guide/">UI/UX Design Guide: What Are UI Designers, and How Are They Different Than UX Designers?</a></li>
</ul>
<h3 id="heading-user-experience-ux-design">User Experience (UX) Design</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/ux-indonesia-pqzRfBhd9r0-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>UX designers focuses on how the user interacts with the product. The goal is to create a simple and positive user experience.</p>
<p>An example of good UX design would be Google's search engine. It is very simple and fast to use which creates a positive user experience.</p>
<p>To learn more about UX Design fundamentals, I would suggest looking into these resources:  </p>
<ul>
<li><a target="_blank" href="https://www.freecodecamp.org/news/learn-ux-design-self-taught-user-experience-designer/">How to Learn UX Design and Become a Self-Taught User Experience Designer</a></li>
<li><a target="_blank" href="https://www.coursera.org/professional-certificates/google-ux-design">Google UX Design Professional Certificate</a></li>
</ul>
<h3 id="heading-publication-design">Publication Design</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/good-good-good-rqIfy1UyIzE-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This type of design primarily focuses on print and digital media like books, newspapers and magazines.  </p>
<p>These designers will work closely with editors on aspects like layouts, colors, artwork and photography.</p>
<h3 id="heading-packaging-design">Packaging Design</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/toa-heftiba-Kx8DDqb6Wbw-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>These designers focus on the industrial design, visual design, and manufacturing aspects of the product's packaging. </p>
<p>Well-designed packaging for products will effectively sell the product's brand and make consumers interested in buying.</p>
<h3 id="heading-motion-graphics-design">Motion Graphics Design</h3>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/ion-sipilov-f5j-a8M1KEw-unsplash.jpg" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Motion graphics are used in a variety of areas like promo videos, apps, video games, title sequences and more. </p>
<p>These designers will start by building storyboards and then move their designs over to animations and other video art forms. </p>
<h2 id="heading-graphic-design-tools">Graphic Design Tools</h2>
<p>There are many tools that graphic designers will use to do their work. Here is a list of some popular tools that graphic designers use. </p>
<ul>
<li>Reliable computer</li>
<li>Reliable hard drive</li>
<li>Tablet and stylus</li>
<li>Reliable smart phone</li>
<li>Digital camera</li>
<li>Adobe Creative Cloud (includes Photoshop, Illustrator, InDesign, After Effects and more)</li>
<li>Sketchbook </li>
</ul>
<h2 id="heading-graphic-design-salaries">Graphic Design Salaries</h2>
<p>Since salaries will range depending on your location, I would suggest researching Graphic Design Jobs using sites like <a target="_blank" href="https://www.indeed.com/">Indeed</a> and <a target="_blank" href="https://www.ziprecruiter.com/">ZipRecruiter</a>.</p>
<p>Here are a few salaries for graphic designers based in the United States. This data was provided by <a target="_blank" href="https://www.ziprecruiter.com/">ZipRecruiter</a>. </p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/Screen-Shot-2021-09-03-at-9.03.24-PM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p><img src="https://www.freecodecamp.org/news/content/images/2021/09/Screen-Shot-2021-09-03-at-9.04.11-PM.png" alt="Image" width="600" height="400" loading="lazy"></p>
<p>I hope this information was beneficial to you, and best of luck on your graphic design journey. </p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Adobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software ]]>
                </title>
                <description>
                    <![CDATA[ Comparing Adobe XD vs Sketch vs Figma vs InVision studio is a very common topic among designers who are looking for the best design software. Sketch has long been the application of choice for UX and UI designers. But in the last four years, we have ... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/adobe-xd-vs-sketch-vs-figma-vs-invision/</link>
                <guid isPermaLink="false">66c375a2e912451bdfbe18cf</guid>
                
                    <category>
                        <![CDATA[ Design Process ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Design Tools ]]>
                    </category>
                
                    <category>
                        <![CDATA[ designer ]]>
                    </category>
                
                    <category>
                        <![CDATA[ graphic design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Product Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ software design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UI Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Applications ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ website development, ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Alexandru Paduraru ]]>
                </dc:creator>
                <pubDate>Wed, 05 Feb 2020 08:21:51 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2020/02/Adobe-xd-vs-Sketch-1024x576.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Comparing <strong>Adobe XD vs Sketch vs Figma vs InVision studio</strong> is a very common topic among designers who are looking for the best design software.</p>
<p>Sketch has long been the application of choice for UX and UI designers. But in the last four years, we have seen many new contenders for Sketch’s crown. Three of them that have made the biggest strides are Figma, Adobe XD, and InVision Studio.</p>
<p>These four tools have many pros in common but there are some differences too. For example, the first comparison, Adobe XD vs Sketch, makes sense especially since both have a similar interface which is user-friendly and has a minimalistic style.</p>
<p>In this article, I analyze how the most used design apps compete and what their unique features are using my experience acquired while working at <a target="_blank" href="https://www.creative-tim.com/?ref=freecodecamp">Creative Tim</a>.</p>
<p><img src="https://creativetimblog.com/blog/wp-content/uploads/2020/01/adobe-xd.png" alt="adobe xd" width="600" height="400" loading="lazy"></p>
<h3 id="heading-adobe-xdhttpswwwadobecomproductsxddetailshtml"><a target="_blank" href="https://www.adobe.com/products/xd/details.html"><strong>Adobe XD</strong></a></h3>
<p>Adobe XD was developed and published by Adobe Inc. XD, released on 18 October 2017. It is a vector-based user experience design tool for web apps, mobile apps, and voice apps available for macOS and Windows. There are versions for iOS and Android as well that help you preview the result of your work directly on mobile devices.</p>
<p>XD also support website wireframing and creating simple interactive click-through prototypes. With the character and layout tools of Adobe XD, Elements can be easily created and individual objects can be exported.</p>
<p>The interface is kept relatively simple, with a toolbar that is aligned at the side, as well as the large artboard area.</p>
<p>Comparing Adobe XD vs Sketch makes sense especially because of this similar interface which is user-friendly and has a minimalistic style.</p>
<p><img src="https://creativetimblog.com/blog/wp-content/uploads/2020/01/sketch.png" alt="sketch" width="600" height="400" loading="lazy"></p>
<h3 id="heading-sketchhttpswwwsketchcom"><a target="_blank" href="https://www.sketch.com/"><strong>Sketch</strong></a></h3>
<p>Sketch is a <a target="_blank" href="https://en.wikipedia.org/wiki/Vector_graphics_editor">vector graphics editor</a>, developed by the <a target="_blank" href="https://en.wikipedia.org/wiki/Netherlands">Dutch</a> company Bohemian Coding. Sketch was first released on 7 September 2010 for <a target="_blank" href="https://en.wikipedia.org/wiki/MacOS">macOS</a>. It won an <a target="_blank" href="https://en.wikipedia.org/wiki/Apple_Design_Awards">Apple Design Award</a> in 2012.</p>
<p>A key difference between Sketch and other vector graphics editors is that Sketch does not include print design features. Sketch is only available on macOS. This problem is partially solved by third party and handoff tools.</p>
<p>When Sketch first came out it completely disrupted the interface design space, but Adobe XD and Figma have recently come forward as new challengers. They offer unique functionality like prototyping and live collaboration.</p>
<p>I’ve recently been researching these tools for my side project, <a target="_blank" href="http://uxtools.co/">uxtools.co</a>, and wanted to share what I believe the be the most noteworthy decision points. Also, from my point of view, <a target="_blank" href="https://ahrefs.com/keywords-explorer/google/us/overview?keyword=learning%20to%20sketch">learning to sketch</a> is very useful and it does not take to much to become a Pro.</p>
<p><img src="https://creativetimblog.com/blog/wp-content/uploads/2020/01/figma.png" alt="figma" width="600" height="400" loading="lazy"></p>
<h3 id="heading-figmahttpswwwfigmacom"><a target="_blank" href="https://www.figma.com/"><strong>Figma</strong></a></h3>
<p>Figma came to the stage in 2016 <a target="_blank" href="https://techcrunch.com/2015/12/03/figma-vs-goliath/">with initial funding of $14M</a>.</p>
<p>With its seamless user interface and sleek feature palette, the tool quickly became a notorious competitor to similar solutions in the field.</p>
<p>Designers from brands like Twitter, Microsoft, GitHub, and Dropbox swear by Figma as the ultimate UI design tool.</p>
<p><img src="https://creativetimblog.com/blog/wp-content/uploads/2020/01/invision.png" alt="InVision Studio" width="600" height="400" loading="lazy"></p>
<h3 id="heading-invision-studiohttpswwwinvisionappcomstudio"><a target="_blank" href="https://www.invisionapp.com/studio"><strong>InVision Studio</strong></a></h3>
<p>InVision Studio is a new piece of software, released in 2019, that allows designers to build more advanced animation and micro-interactions. Studio also integrated with InVision’s link to Sketch via its Craft plugin.</p>
<p><strong>InVision Studio has got a nice dark UI by default</strong>, that helps developers focus on the work to be done in the evening. However, with macOS Mojave, every app can look like this quite easily. When they created it, they were inspired by another design tool - I am thinking about the Sketch app.</p>
<h2 id="heading-apps-comparison"><strong>Apps Comparison</strong></h2>
<h3 id="heading-1-pricing"><strong>1. Pricing</strong></h3>
<p>Budget can be a big deal when you’re working with your own resources. Some of these licenses have educational and promotional pricing (often 50% off), so don’t miss that part. For example, Figma will get you there for free as long as you're not working on a team.</p>
<ul>
<li><p><strong>Figma</strong>: Free for individuals! You can have 3 projects for free, or you can upgrade to unlimited projects and team functionality for $12/month (billed annually).</p>
</li>
<li><p><strong>Sketch</strong>: $99 per license that gets you the Mac App for life and access to the next production versions of the app.</p>
</li>
<li><p><strong>Adobe XD</strong>: It offers free and paid plans, depending on an individual's or team's needs. Paid plans start at $9.99/month.</p>
</li>
<li><p><strong>InVision Studio:</strong> Free right now.</p>
</li>
</ul>
<h3 id="heading-2-platform"><strong>2. Platform</strong></h3>
<p>Though Sketch has been immensely popular, it forces designers to only use Mac, which alienates developers from accessing design files.</p>
<ul>
<li><p><strong>Figma</strong>: Browser! Figma recently released a <a target="_blank" href="http://figma.com/downloads">Mac app</a> and <a target="_blank" href="https://www.figma.com/downloads">Windows app</a> (not offline-capable, though).</p>
</li>
<li><p><strong>Sketch</strong>: Mac only.</p>
</li>
<li><p><strong>Adobe XD</strong>: Mac and Windows. Subject to the same limitations as the CC suite.</p>
</li>
<li><p><strong>InVision Studio:</strong> Mac and Windows.</p>
</li>
</ul>
<h3 id="heading-3-live-collaboration"><strong>3. Live Collaboration</strong></h3>
<p>Nobody likes to send at the end of the day “version 3.0”, “version3.0.final”, “version3.0.final.final”. Live Collaboration can help us, especially live comments.</p>
<p>I imagine these were the same concerns that surrounded the release of the highly innovative Google Docs suite. Google Docs, however, turned the Microsoft Suite on its head with live collaboration, and now Figma is seeking to do the same thing with UI design.</p>
<ul>
<li><p><strong>Figma</strong>: Yes! Not to mention being browser-based, it allows Windows and even Linux users to have a very polished design tool.</p>
</li>
<li><p><strong>Sketch</strong>: Not natively, but a plugin, <a target="_blank" href="http://picnic.design/">Picnic</a>, is looking to change that. Also, they have <a target="_blank" href="https://www.sketch.com/teams/">Sketch for Teams</a>.</p>
</li>
<li><p><strong>Adobe XD</strong>: It offers real-time Coediting, launched at Adobe MAX 2019.</p>
</li>
<li><p><strong>InVision Studio:</strong> Not currently possible, but can generate share links.</p>
</li>
</ul>
<p><img src="https://i.imgur.com/Sy3UzVS.png" alt="Live Collaboration" width="2864" height="1594" loading="lazy"></p>
<p><em>Image: Figma -</em> <a target="_blank" href="https://www.creative-tim.com/product/argon-design-system-pro?ref=freecodecamp"><em>Argon Design System Pro</em></a></p>
<h3 id="heading-4-handoff"><strong>4. Handoff</strong></h3>
<p>Recently a few apps have been developed specifically to deliver specs (sizing, spacing, color) to developers, but design tools are starting to integrate this functionality natively.</p>
<ul>
<li><p><strong>Figma</strong>: Because of live collaboration, developers can easily jump in (regardless of OS) and access the designs. Figma now neatly prints the handoff code for CSS, iOS, or Android in the right panel.</p>
</li>
<li><p><strong>Sketch</strong>: They've recently launched their own native developer handoff feature — Cloud Inspector. There’s even an entirely free alternative called Sketch measure that works just as well.</p>
</li>
<li><p><strong>Adobe XD</strong>: It offers design specs that allow a designer to create a shared link that contains measurements, assets, and automatically-generated CSS code snippets.</p>
</li>
<li><p><strong>InVision Studio:</strong> They have “Inspect Now”.</p>
</li>
</ul>
<p><img src="https://i.imgur.com/5zY7ixi.png" alt="Handoff" width="2870" height="1494" loading="lazy"></p>
<p><em>Image: Figma -</em> <a target="_blank" href="https://www.creative-tim.com/product/argon-design-system-pro?ref=freecodecamp"><em>Argon Design System Pro</em></a></p>
<h3 id="heading-5-offline"><strong>5. Offline</strong></h3>
<p>This is so important. Some online apps can protect your information when Wifi goes down, but you need full access to open, use, and save from the app offline.</p>
<ul>
<li><p><strong>Figma</strong>: No, in an AMA they stated they don't have any current plans to add it.</p>
</li>
<li><p><strong>Sketch</strong>: Sure.</p>
</li>
<li><p><strong>Adobe XD</strong>: Yep.</p>
</li>
<li><p><strong>InVision Studio:</strong> Yes.</p>
</li>
</ul>
<p><img src="https://i.imgur.com/PY9NsKh.png" alt="Offline" width="2866" height="1596" loading="lazy"></p>
<p><em>Image: AdobeXD -</em> <a target="_blank" href="https://www.creative-tim.com/product/argon-dashboard?ref=freecodecamp"><em>Argon Dashboard Free</em></a></p>
<h3 id="heading-6-prototyping"><strong>6. Prototyping</strong></h3>
<p>There are literally dozens of these apps nowadays, but they might become extinct as Adobe XD brings prototyping directly to the design tool. Keep your eye on these.</p>
<ul>
<li><p><strong>Figma</strong>: Yes! It's very basic but feels like Adobe XD without the transitions. Also, there's a nice <a target="_blank" href="https://medium.com/figma-design/introducing-figmas-integration-with-framer-c69a747aeee2">Framer</a> integration.</p>
</li>
<li><p><strong>Sketch</strong>: Yes!</p>
</li>
<li><p><strong>Adobe XD</strong>: Yes, native prototyping within the app. Adobe XD also supports voice prototyping and keyboard/gamepad support.</p>
</li>
<li><p><strong>InVision Studio:</strong> Yes, you can create prototypes and animations.</p>
</li>
</ul>
<p><img src="https://i.imgur.com/5QZ8Rt1.png" alt="Prototyping" width="2812" height="1522" loading="lazy"></p>
<p><em>Image: InVision Studio -</em> <a target="_blank" href="https://www.creative-tim.com/product/argon-react-native?ref=freecodecamp"><em>Argon React Native</em></a></p>
<h3 id="heading-7-symbols"><strong>7. Symbols</strong></h3>
<p>Symbols can make your work easier. These have completely changed the design process. Forget building and duplicating list items over and over, let symbols do the work for you.</p>
<ul>
<li><p><strong>Figma</strong>: Good to go. Symbols now have states, constraints, and overrides.</p>
</li>
<li><p><strong>Sketch</strong>: The symbol functionality in Sketch is very impressive, and continues to improve. Symbols can be updated across entire documents and can resize responsively (that means less work for you when changing screen sizes).</p>
</li>
<li><p><strong>Adobe XD</strong>: It offers components that can be used throughout a document as well as linked across documents. It also allows designers to create variations of a component for different interactions, known as component states.</p>
</li>
<li><p><strong>InVision Studio:</strong> they have components that are a close approximation to the symbol conventions found in other applications. Components in their final form will honor a broad, scalable hierarchy that allows designers to quickly build-up, mix, and match components intelligently across their designs.</p>
</li>
</ul>
<p><img src="https://i.imgur.com/9lfwDD5.png" alt="Symbols" width="2874" height="1600" loading="lazy"></p>
<p><em>Image: Sketch -</em> <a target="_blank" href="https://www.creative-tim.com/product/material-kit-pro?ref=freecodecamp"><em>Material Kit Pro</em></a></p>
<h2 id="heading-conclusion"><strong>Conclusion</strong></h2>
<p>Sketch has a big disadvantage here because it is only available for Mac users. And as such, it lets tools like Figma and Adobe XD innovate beyond the basic necessities.</p>
<p>Also, in terms of design tools, Adobe XD provides a robust set of responsive while the Sketch doesn’t have this feature built-in (but it has many plugins). If your tool does something better than the other, it is often enough of a reason to switch over. The browser-based approach that Figma has taken is also something to behold.</p>
<p>When talking about Adobe XD vs Sketch, the first one’s future is looking very bright and will win over many Sketch users. InVision’s change of focus may ensure its survival but one thing is for certain - Adobe XD is here to stay. The Adobe powerhouse is strong, and smaller companies like InVision and Sketch will have to work hard to stay relevant in the future.</p>
<p>People usually prefer to design and work in just one place. If you’re a part of a team, then Figma is undoubtedly for you.</p>
<p><img src="https://i.imgur.com/YaMctAr.png" alt="conclusions" width="2522" height="1932" loading="lazy"></p>
<p><strong>After all of that: first is Figma, second is Sketch, third is Adobe XD and fourth is InVision Studio.</strong></p>
<p>Overall, when talking about the best design software, these four tools are extremely well-suited for modern designer needs.</p>
<p>Try all four out to see which one is better for your use cases. I hope this comparison - Adobe XD vs Sketch vs Figma vs InVision - helped you decide which design tool is better for you.</p>
<p>Resources:</p>
<p><a target="_blank" href="https://www.figma.com/figma-vs-sketch/">https://www.figma.com/figma-vs-sketch/</a></p>
<p><a target="_blank" href="https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/">https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/</a></p>
<p><a target="_blank" href="https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/">https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/</a></p>
<p><a target="_blank" href="https://support.invisionapp.com/hc/en-us/sections/360004450191-Studio">https://support.invisionapp.com/hc/en-us/sections/360004450191-Studio</a></p>
<p><a target="_blank" href="https://helpx.adobe.com/ro/xd/help/components.html">https://helpx.adobe.com/ro/xd/help/components.html</a></p>
<p><a target="_blank" href="https://www.sketch.com/docs/">https://www.sketch.com/docs/</a></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Getting the Most Out of Design School (Updated) ]]>
                </title>
                <description>
                    <![CDATA[ By Jared Nutt Advice from a Design Expert I’m not your typical web design student. I spent the last 10 years of my life in the Air Force as a Military Police Officer. When I decided to change my entire life around, I foresaw two barriers to my succes... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/getting-the-most-out-of-design-school/</link>
                <guid isPermaLink="false">66d45f33f855545810e93462</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ graphic design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ learning ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 02 Jul 2019 23:54:11 +0000</pubDate>
                <media:content url="https://cdn-media-2.freecodecamp.org/w1280/5f9ca1c0740569d1a4ca5070.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Jared Nutt</p>
<p>Advice from a Design Expert</p>
<p>I’m not your typical web design student. I spent the last 10 years of my life in the Air Force as a Military Police Officer. When I decided to change my entire life around, I foresaw two barriers to my success. One, I am 30 years old trying to shove my way into the fast evolving world of web design. Two, the experience I got from the military was as far from working in a tech field as possible. Air Force web apps pretty much only work in Internet Explorer (oh, the humanity).</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*G_jj6eOWJgpHrAUXIhWbKA.gif" alt="Image" width="498" height="360" loading="lazy"></p>
<p>But, back to my first point, I view the technology industry as a train, speeding across the country. It’s always moving forward and rarely stops to let anyone on. But this didn’t prevent me from grabbing my bindle (you know, that thing hobos have) and jumping on.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*Fggjb8e12OkEY6e7XVnTog.jpeg" alt="Image" width="640" height="480" loading="lazy">
<em>Which way to the Internet?</em></p>
<p>Like most students, I’m constantly asking myself, “Why am I in school, what am I learning?” and maybe not as common, “Am I learning enough?” Instead of pondering, I went straight to the source.</p>
<p>I had the pleasure of meeting <a target="_blank" href="http://roberteckhardt.com/">Robert Eckhardt</a>, a man of many talents, but most recently an Experience Designer with The Walt Disney Studios. He has worked in product/visual design for 18 years for a variety of organizations, including the NFL and the National Park Service. I sat down with him to discuss what it takes to succeed in the constantly evolving design field.</p>
<h3 id="heading-art-school">Art School</h3>
<p><strong>What did you learn in art school?</strong></p>
<p>“I learned a process. I learned aesthetic theory. I learned how to see. There’s looking and there’s seeing. When you look at art, [you might say], oh that’s cool, I can do that, a five-year-old can do that. But if you can <em>see</em> art, you can see what the artist is trying to do. You have to learn how to see. I think if more people were taught to see, we would live in a more beautiful world. We wouldn’t have so much ugliness around us and visual pollution, from gross billboards to electrical wires all over this town [Los Angeles].”</p>
<blockquote>
<p>“You have to learn how to see.”</p>
</blockquote>
<p>“I [also] learned how to collaborate. I learned to have thick skin. I had very mean professors, I mean they were tough. Our professors were from RISD (Rhode Island School of Design), Yale and Basel, Switzerland. So these are like the cream of the crop design schools. Their curriculum, they were sticking to the process. The manual labor, it slowed us down. That’s another recommendation, is to slow down. Take your time with things. Don’t feel rushed. I know deadlines and stuff come up and I know you don’t want to be in what I call ‘analysis paralysis.’ Sometimes you’re thinking about something so much that you’re just afraid to push that pixel. What if I do it and its wrong? Forget about that, just do it and move on. If you do something wrong, own it, learn from it. You will be so much better person, better designer, better employee, a better collaborator. Admit you’re wrong. Nothing like failure to reveal the truth. If you want the truth, do something completely wrong and you’ll get the truth, real fast.”</p>
<blockquote>
<p>“If you want the truth, do something completely wrong and you’ll get the truth, real fast.”</p>
</blockquote>
<p>“I also learned how to express myself. I learned how to critique. Critiquing others work really, really helps you with your own. You cannot be a good critiquer[sic] unless you know how to see. Anything you say, back it up. Don’t just say, ‘I don’t like it.’ Why don’t you like it? I like the term, ‘what if?’ Say, ‘I don’t know if this is working, but what if?’ It leaves it open. It’s more diplomatic. The other designer needs to feel like, what you said will actually make their work better. At the end of the day, that’s what we want.”</p>
<p><strong>What is “the process”?</strong></p>
<p>“The process is:</p>
<ol>
<li>Understanding. “Understanding is key. To understand, you need to research. I always put it this way: if you’re designing a book, read the book. Not only read the book, interview the author. Not only interview the author, interview the publisher and editor. If you’re designing a book, know the story of it. If it’s set in a certain town, research the town. If it deals with an issue, like a disease, or an athlete, research the sport or the medical condition. Do that first. Get a comprehensive understanding.</li>
</ol>
<p>a. “Understand the readers. Is it fiction, is it non-fiction? Who are those readers? Who typically buys those books? Interview them. Get a complete and total understanding.</p>
<p>“That research isn’t always seen as productive, but to me it’s a huge and integral part of the process. If you honestly don’t have budget or time for user feedback and research, you have friends, coworkers, classmates. You can still do that research. You just do it Guerilla style.”</p>
<ol start="2">
<li><p>Create artifacts of understanding. “Taking understanding to the next level is shared understanding. Being able to communicate your ideas, your product, to a room full of people. You’ve done this research, you’ve come up with some cool ideas, how do you get those ideas out of here (your head) and onto something. There is no ‘one-size fits all’ presentation tool for this type of work. Build something out of construction paper, if you think that’ll work. Build a sophisticated prototype. Draw something in Illustrator. Whatever it takes to tell the story of that understanding of your designed product.”</p>
</li>
<li><p>Feedback loops. “To get from start to finish, products do this: loopy thing. Constantly doing feedback loops. Each loop is a collaborative session. The product keeps getting massaged to it’s ‘truth’. When I say truth, I mean: what’s the authenticity of this product? Is it authentically going to solve the business problem and the user problem?”</p>
</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*vs6E59_XFIEcXdJaNKwnkg.png" alt="Image" width="928" height="410" loading="lazy"></p>
<p>“You can’t make assumptions. You can make educated guesses, and that goes back to the research. Every time you make a decision, an ideation, back it up. ‘I did this because…the insights I gathered from this, led me to this and I think, not assuming, I think that will make it successful, but I’m not sure. Let’s show it to someone else.’ Test it and see if that assumption is true. Always challenge yourself and always challenge your assumptions. Never say, ‘It’s fine, ’cause I’m the designer.’”</p>
<p><strong>Do you think that’s the purpose of design school then?</strong></p>
<p>“Yeah, I think that’s the purpose of any art program. If you’re going to be a practitioner, and creating, visual communication, you should know how to see. Not only see, but interpret almost anything you look at. Once you break that seal, it’s really hard to live in this world.”</p>
<p><strong>A lot of people say, you can teach yourself anything on the internet now, do you believe that?</strong></p>
<p>“I believe, yes. I am self-taught in a lot of ways, but I don’t believe you can become a great designer in a vacuum. I think you need other people to collaborate. I think technical skills, absolutely. I had to fix something in the house, the other day…a faucet was broken, so I went to YouTube. Lo and behold, look at me, I’m a plumber. I taught myself <a target="_blank" href="http://www.axure.com/">Axure</a>, which is another app you should look into if you’re learning digital products. It’s for prototyping. I say, it really allows me to think with my hands. I learned the technical skills for that but what I do with <a target="_blank" href="http://www.axure.com/">Axure</a> would be nothing without the process. It’s just a tool. It’s like a hammer. A hammer can build a home, if you know how to build a home. You’re getting hired to create. That’s what design is, creating. Screw people with their tools, get the ones that work for you to help you create. You should be able to prove you can create these artifacts and you should have those artifacts in your portfolio to prove that you’ve done this work.”</p>
<blockquote>
<p>“I am self-taught in a lot of ways, but I don’t believe you can become a great designer in a vacuum.”</p>
</blockquote>
<h3 id="heading-your-first-job">Your First Job</h3>
<p><strong>For portfolio purpose, should you show an entire process from start to finish, or for at least one project?</strong></p>
<p>“Robots read your resumes now, so you have to write your resumes for robots. Remove your dates. Make your language more like 10th grade. I’ve gone back and forth, I used to do these write-ups and be like, this is what I did in my process. It would be paragraphs. I would go to interviews, expecting people would at least read. They didn’t. Then I went the opposite, where I reduced it way down: this date, this is what I did, if you want to look at it, here it is. Ask me about it later. Then I add the case studies, to kind of expand on that. I feel like that’s working for me now. I would recommend maybe, do a more standard, buffet style portfolio, where they can get a good breadth of your work and then maybe a deep dive on one or two, for the curious. But again, still keep it brief. No more than like maybe, 500 words, tops.”</p>
<p><strong>Do you think people absolutely 100% should go through internships?</strong></p>
<p>“Yes, I believe in apprenticeships. Germany is interesting, because not every kid goes to college, but every kid gets an apprenticeship and they learn on the job. What I learned in school, was very high level stuff. These are all great things to learn, to get comfortable with yourself and your work. What I learned in the field, once I started doing actual work, with real clients…way more beneficial. Especially for this type of work. I think learning from a really accomplished colleague or mentor is by-far greater than any classroom. I highly recommend internships, I would demand you get paid. I would recommend doing it with some place you really admire and respect, if you can. Take it as an opportunity, even if you’re doing crappy work. My interns, I always brought them into meetings. They were always right there, witnessing. That access alone, you’ll learn so much from. Just being in that room.”</p>
<p><strong>What is your experience, good or bad, with students straight out of school?</strong></p>
<p>“Some students who come out act like they know it all. Don’t do that. Your degree is not a license to be snotty. The kids coming out of school who’ve impressed me are the curious ones. Also the ones who aren’t afraid to speak up. I’ve work with a lot of young people who had ideas, who were wallflowers. Some people, that’s their personality, but in a creative collaborative environment, learning to have the confidence to express yourself is a huge win. I find, that’s where success happens. In a creative world, fresh perspectives…is so beneficial.”</p>
<blockquote>
<p>“Your degree is not a license to be snotty.”</p>
</blockquote>
<h3 id="heading-longevity">Longevity</h3>
<p><strong>How do you stay relevant?</strong></p>
<p>“I’m a tech hobbyist, so I’ve always been enamored by technology, so that helps, it’s just natural for me. But its also my industry. I don’t have to force myself to be relevant. When the iPhone came out, I was like, ‘I cannot wait to design for that…to figure it out.’”</p>
<p><strong>How do you personally gauge, what trends to follow?</strong></p>
<p>“It all depends on who I’m working for. If you’re paying me, I will follow things. For example, now I’m working in the movies, so I’m really tuned into…back to that understanding…I’m tuned into movie-goers and movie purchases. Which I happen to be one, but that means nothing. Your own personal bias means nothing. Always question your personal bias. So right now, I’m really into movie trends, how movies are bought, sold, distributed.”</p>
<p>“I let my work drive the relevancy of the trends I follow, but I’m really tuned into the big players of the industry. I try to follow them as leaders, not as a fan boy, but really just trying to figure out what they’re doing.”</p>
<p><strong>How do you prevent a burnout? How do you balance family life with this constant need to learn?</strong></p>
<p>“I just demand it. Part of the reason I left the NFL was because I would leave for work early in the morning and not get home until 9:30–10, so I made a change to get that back. I would ask about it in the interview. You never get what you don’t ask for. Same for Salary. You ask for the money you want, and do your research. Always ask about it, and make sure to talk to more than just one person.”</p>
<blockquote>
<p>“You never get what you don’t ask for.”</p>
</blockquote>
<h3 id="heading-final-thoughts">Final Thoughts</h3>
<p>Another app that we talked about, but didn’t make it into this article is <a target="_blank" href="https://www.sketchapp.com/">Sketch</a>. I took his advice and started using it for my wireframes and mockups. I HIGHLY recommend it. Here’s how he put it: “All the widget shops, if you use photoshop[to design products], you’ll get laughed at. They’ve all moved on [to sketch].” Both apps we discussed are available at a discount for Students/Teachers. $50 bucks for Sketch and $free for Axure.</p>
<p>The conversation I had with Bob was a reassurance that I’m on the right path. I greatly appreciate him taking the time to mentor me and I know I will be better for it. In closing, here are more of his inspiring words:</p>
<blockquote>
<p>“Never lose your curiosity. Always learn, whether you are teaching yourself, or you’re going to a class or you’re watching youtube videos…be curious.”</p>
</blockquote>
<h3 id="heading-update-final-final-thoughts-from-2019">UPDATE: Final Final Thoughts from 2019</h3>
<p>This originally published this article in early 2016. We're here now in 2019 and I've been a professional web developer for about 3 years. All of the info in this article is still relevant, with one small exception. Sketch. Sketch is still used a lot, but I've personally moved on to <a target="_blank" href="https://www.adobe.com/products/xd.html">Adobe XD</a>. It's free and has prototyping built-in. <a target="_blank" href="https://www.figma.com/">Figma</a> is a strong contender too, however, after using all three, I prefer XD.</p>
<h4 id="heading-references">References</h4>
<p><a target="_blank" href="http://roberteckhardt.com/"><strong>Robert Eckhardt - Experience Designer, Digital</strong></a></p>
<p><a target="_blank" href="http://www.axure.com/"><strong>Interactive Wireframe Software &amp; Mockup Tool | Axure</strong></a></p>
<p><a target="_blank" href="https://www.sketchapp.com/">https://www.sketchapp.com/</a></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Fundamental design principles for non-designers ]]>
                </title>
                <description>
                    <![CDATA[ By Anna 4erepawko Mészáros This one is for all the content creators out there who can’t afford to pay a professional designer, as well as for non-designers on a team where designers are always too busy to help. If you can follow these simple steps, I... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/fundamental-design-principles-for-non-designers-ad34c30caa7/</link>
                <guid isPermaLink="false">66c34b1ca124e2df05195f48</guid>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ graphic design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UI ]]>
                    </category>
                
                    <category>
                        <![CDATA[ UX ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Tue, 05 Mar 2019 17:24:36 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*FOsR41GXae-KPlvQM1vWpg.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Anna 4erepawko Mészáros</p>
<p><em>This one is for all the content creators out there who can’t afford to pay a professional designer, as well as for non-designers on a team where designers are always too busy to help. If you can follow these simple steps, I guarantee your designs will look better.</em></p>
<p>This list was born out of years of observing my non-designer friends, family and colleagues struggle with designing things they need in their everyday life. Personal newsletters, CVs and portfolios, pictures for posts on Facebook or Instagram, video thumbnails for YouTube and so on.</p>
<p>All of these people came to me for help and advice on how to make things look better. I’m a firm believer in the whole “teach a person to fish” idea, so rather than designing things FOR them, I tried to give them valuable advice that could help with similar issues in the future.</p>
<p>As time went on, I realised <strong>I’ve been giving people all the same tips over and over again</strong>. I have worded them differently each time, but all of my advice I can distill down to <strong>these four principles</strong>.</p>
<p>I am aware that there are thousands of lists just like this one out there, but I find these lists to be too excessive. You can’t really consistently follow a list of 25 “simple” (nothing containing 25 parts can be truly “simple”) steps as a non-designer. <strong>And you don’t have to.</strong></p>
<p>Will this help you create shiny beautiful designs? No. Will this help you create great, clear and comprehensible designs that everyone can easily understand and interact with? Absolutely. So, without further ado, I present to you:</p>
<h3 id="heading-4-fundamental-design-principles-anyone-can-follow-to-achieve-great-results">4 Fundamental Design Principles Anyone Can Follow To Achieve Great Results</h3>
<h3 id="heading-contrast">Contrast</h3>
<p>Make sure there is enough contrast between all elements.</p>
<p>Why? Because things that are slightly different, but not different enough, create a kind of <a target="_blank" href="https://en.wikipedia.org/wiki/Uncanny_valley">Uncanny Valley</a>. They feel eerie and repulsive to a human eye, and/or are difficult to comprehend. Now we don’t want that in our designs, do we?</p>
<p>Elements of your design should be either <strong>exactly the same</strong>, or <strong>significantly different</strong>.</p>
<p>Issues with contrast mostly manifest themselves in 4 different ways:</p>
<ol>
<li><strong>Colour:</strong> use dark on light colours and vice versa.</li>
</ol>
<p><strong><em>Example:</em></strong> <em>Never use combinations like grey on a slightly darker grey or light pink on light blue — they are extremely difficult to read/interact with.</em></p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*1c9lIQ_y0Cz82vs4uF05ZA.png" alt="Image" width="800" height="380" loading="lazy"></p>
<ol start="2">
<li><strong>Size:</strong> only put elements next to each other that are either <strong>exactly the same size</strong>, or a <strong>considerably different size.</strong></li>
</ol>
<p><strong><em>Example:</em></strong> <em>Don’t put 32pt and 36pt text lines next to each other. 18pt and 36pt, on the other hand, will work great together.</em></p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*Vy_CjoiJ4s3_U3jNW9JZlA.png" alt="Image" width="800" height="368" loading="lazy"></p>
<ol start="3">
<li><strong>Weight:</strong> same as with Size, only put elements next to each other that are either <strong>exactly the same weight</strong>, or a <strong>considerably different weight.</strong></li>
</ol>
<p><strong><em>Example:</em></strong> <em>Don’t put “Bold” and “Black” weights of the same typeface next to each other — because they look too similar. “Light” and “Bold” weights, on the other hand, will work great together.</em></p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*WibV_UOHFJxjD1EUbs2sxQ.png" alt="Image" width="800" height="320" loading="lazy"></p>
<ol start="4">
<li><strong>Style:</strong> don’t put one italic type next to another italic type, or one serif typeface next to another serif typeface. Combine things that are different.</li>
</ol>
<p><strong><em>Example:</em></strong> <em>Don’t put “Times New Roman” and “Georgia” next to each other — they look too similar. Combine fonts that have considerably different styles.</em></p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*kYKhe2rzZkyB8Oi84a6euQ.png" alt="Image" width="800" height="320" loading="lazy"></p>
<h3 id="heading-consistency">Consistency</h3>
<p>Make sure similar elements appear in similar ways.</p>
<p>Why? First of all, by keeping things consistent (and, therefore, simple), you allow people to focus their attention on <strong>important</strong> aspects of your design rather than being distracted by things changing all the time.</p>
<p>Second, consistency increases trust and <strong>makes things look actually designed</strong>, rather than just quickly thrown together.</p>
<p>Things to stick to once you have selected them:</p>
<ul>
<li>Typeface/font</li>
<li>Colour palette/shade of colour</li>
<li>Grid</li>
<li>Alignment</li>
<li>Style of decorative elements</li>
</ul>
<p>And so on...</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*W843TWXVVLson0ME-6crWQ.png" alt="Image" width="800" height="513" loading="lazy">
_Placeholder text courtesy of [Batman Ipsum](http://batman-ipsum.com/" rel="noopener" target="<em>blank" title=")</em></p>
<p>When you are working on many different pieces that appear next to each other (for example, video thumbnails for your YouTube channel, or covers for your Medium articles), choose one overall style for all of them and stick to it as well.</p>
<h3 id="heading-occams-razor">Occam’s Razor</h3>
<h4 id="heading-aka-reduce-visual-noise">aka Reduce Visual Noise</h4>
<p>The fewer the number of elements you use in your design, the better.</p>
<p>Why? It’s hard for the human brain to process information and make decisions with an overload of input. Use as few decorative elements (typefaces, colours, shadows, frames, strokes, icons, patterns and so on) as possible.</p>
<p>Apply a design version of <a target="_blank" href="https://en.wikipedia.org/wiki/Occam%27s_razor">Occam’s Razor</a> to everything:</p>
<p><em>If something can be achieved with just 2 elements, don’t use 3. If something can be achieved with 10 elements, don’t use 20. You get it.</em></p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*Bjh-mMQ5VQ99TvHPyCCmNQ.png" alt="Image" width="800" height="513" loading="lazy">
_Placeholder text courtesy of [Batman Ipsum](http://batman-ipsum.com/" rel="noopener" target="<em>blank" title=")</em></p>
<p>If you don’t like old English scholastic philosophers and prefer things you can see on Netflix, sure: be the <a target="_blank" href="https://konmari.com/">Marie Kondo</a> of your own designs. Whatever doesn’t spark joy (or isn’t a useful part of a design), has to go.</p>
<h3 id="heading-space">Space</h3>
<p>The way things are positioned sends a meta-level message about their meaning.</p>
<p>Why is this important? Because minding how you position things and how much space you add around them helps reduce the complexity of a design, and, therefore, makes it both more pleasing to look at AND easier to interact with.</p>
<p>To use space in your design to convey meaning mind these 3 things:</p>
<p><strong>1. Proximity = Relatedness</strong></p>
<p><em>Things that are <strong>closer</strong> to each other than to the other elements, are perceived as being <strong>related more</strong> to each other than to the other elements.</em></p>
<p>This one is the most important because I feel like it’s being ignored too often (even by some people claiming to be professional designers, not to name any names).</p>
<p>It can be applied in many different ways, for example:</p>
<ul>
<li>There should be more space between the lines than between each word in a line — and, similarly, more space between different paragraphs than between the lines inside a paragraph.</li>
</ul>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*HQyTLidmveDLqN7su2evmg.png" alt="Image" width="800" height="320" loading="lazy"></p>
<ul>
<li>Elements of a design should have less space between each other than between those elements and the edges of the composition.</li>
</ul>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*Wb5mwX_UEIn0Wwsp7ObCNQ.png" alt="Image" width="800" height="320" loading="lazy"></p>
<ul>
<li>Labels and supporting information should be positioned near the elements that they describe/relate to.</li>
</ul>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*zNbzNX9H9GBkfNz2EO5qww.png" alt="Image" width="800" height="304" loading="lazy"></p>
<p><strong>2.</strong> <strong>Negative Space</strong></p>
<p>In combination with Occam’s Razor, give your designs as much negative space as you possibly can, to declutter them and make their meaning more obvious.</p>
<p>Putting too many elements into a limited amount of space is like trying to listen to three different songs at once. It’s hard to understand what is being said.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1*mNNmcsVmOooLRgtF3CJw1g.png" alt="Image" width="800" height="450" loading="lazy">
<em>Look at Apple’s website. One can very clearly understand what is being said (or, rather, sold).</em></p>
<p><strong>3.</strong> <strong>Importance and order</strong></p>
<p>This one is extremely common sense but I feel like I still have to mention it here.</p>
<p>Things that matter most, you put first, and/or make them take up the most amount of space. Use sequences of things to convey order. Et cetera. You can definitely figure out the rest.</p>
<h3 id="heading-the-end">The End</h3>
<p><strong>Congrats!</strong> If you have followed all these steps while making whatever it is you are making, it most likely looks very good by the industry standards.</p>
<p>For everything else, there is always a designer.</p>
<hr>
<p><em>My name is Mészáros Anna, I’m a graphic/UI designer turned UX/UI designer with an academic background in philosophy and interest in all things design ethics. I’d love to connect with more like-minded individuals, so feel free to drop me a message and follow me on either <a target="_blank" href="https://medium.com/@4erepawko">Medium</a> or <a target="_blank" href="https://twitter.com/4erepawko">Twitter</a>.</em></p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to Make the Perfect App Icon ]]>
                </title>
                <description>
                    <![CDATA[ By Nabeena Mali With just 24 app icon slots on the first page of an iPhone home screen, or 28 if you have a fancy iPhone 7, creating the perfect app icon is a vital step in user adoption. I once met someone who had an app icon containing every ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-make-the-perfect-app-icon-f3a6f0d190e6/</link>
                <guid isPermaLink="false">66c35374d58e4fdd567d51b7</guid>
                
                    <category>
                        <![CDATA[ Apps ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ graphic design ]]>
                    </category>
                
                    <category>
                        <![CDATA[ startup ]]>
                    </category>
                
                    <category>
                        <![CDATA[ technology ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ freeCodeCamp ]]>
                </dc:creator>
                <pubDate>Mon, 24 Apr 2017 08:00:05 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/0*bF0auJRnnBgz8Tvv.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>By Nabeena Mali</p>
<p>With just 24 app icon slots on the first page of an iPhone home screen, or 28 if you have a fancy iPhone 7, creating the perfect app icon is a vital step in user adoption.</p>
<p>I once met someone who had an app icon containing every letter of the alphabet on his homescreen, but that zany aesthetic is hardly for everyone — for the average downloader, app icons represent the first encounter users have with a new app. So it needs to be a good one!</p>
<p>If your app icon is ugly, users will either delete the app or hide it away in a folder somewhere that they might forget about it. Unfortunately, this is one area in which looks really do matter. So what can you do to make sure that your app’s icon is the homecoming queen and not the shy girl next door?</p>
<h3 id="heading-stick-to-popular-colours">Stick to Popular Colours</h3>
<p>There are various articles out there dedicated to the science behind <a target="_blank" href="http://www.canadianbusiness.com/innovation/app-icon-colours-and-what-they-mean/">choosing</a> a colour(s) for your app icon. One helpful soul has even created the follow diagram of the most popular colours for app icons:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/zn9ESnY1R0tIOCmMjwZX-769hNtA9PQaIht6" alt="Image" width="800" height="778" loading="lazy">
_Source: [GraphicMac](http://www.thegraphicmac.com/red-green-blue-the-colors-of-app-icons" rel="noopener" target="<em>blank" title=")</em></p>
<p>The implications of this are twofold: using primarily red, blue or maybe green for your app icon is a fairly safe way to go. On the flip side, you could choose a pink, purple, or yellow hue to stand out from the crowd a little more.</p>
<p>Obviously, there are advantages and disadvantages to each of these routes. What’s safe and familiar also risks being forgettable, while breaking the mould carries the risk of looking too different and not blending well with other apps.</p>
<h3 id="heading-use-a-letter-or-dont">Use a Letter (or Don’t…)</h3>
<p><img src="https://cdn-media-1.freecodecamp.org/images/LuNyMw2yUenQd9M6a7Dn7gsU-BWzPLM2PdEr" alt="Image" width="690" height="225" loading="lazy">
_Source: [PXLR](http://pxlr.com/blog/2012/03/16/logo-showdown-part-1-path-pinterest-post-and-phillies-letter-p-and-branding" rel="noopener" target="<em>blank" title=")</em></p>
<p>From Facebook’s ‘F’ and Hotels.com’s ‘H’ to Dailymotion’s ‘D’ and Skype’s ‘S’, there’s no shortage of apps out there that use the first letter of the company’s name in their app icon.</p>
<p>While that’s undoubtedly a smart and straightforward move, it’s not without its risks if the name of your app starts with a very popular letter.</p>
<p>Think about the apps already out there, particularly if you’ll be competing directly with them, and go a different route if you’re concerned about being confusing or overly similar.</p>
<p>Maybe, given Skype’s longstanding associated with the letter ‘S’ in a cloud, that’s what prompted Skyscanner to come up with this neat little abstract symbol for their app icon.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/r6S7RSr5jg1vJtuHT-C5tq89gyKExqIh-ZPg" alt="Image" width="250" height="258" loading="lazy"></p>
<p>Using a letter is a very safe choice, especially if your app logo has a distinctive font associated with it.</p>
<p>Take that distinctive Facebook ‘f’, for example, which is instantly recognisable thanks to the company logo’s ongoing association with a modified version of the Klavika Bold font.</p>
<p>But as a company, it seems even Facebook can’t decide whether letters or symbols are best for app icons. Why else would they have channelled their inner Harry Potter when coming up with a icon for Messenger instead of using an ‘m’ in a speech bubble?</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/aSXTbmYcxxutU7uxwPOcnTcvbmJeWs2rPAuQ" alt="Image" width="256" height="256" loading="lazy"></p>
<h3 id="heading-use-a-coherent-colour-scheme">Use a Coherent Colour Scheme</h3>
<p>If there’s one thing worse than an ugly app icon, it’s a beautiful app icon that opens up to reveal an unappealing or dated looking app. First impressions are important but, if you can’t live up to the high standards set by them, you’ll fail anyway.</p>
<p>Hat tip to Dan Counsell, who gave the following examples of how Ember and Clear keep their experience consistent all the way from opening the app to actually using it:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/VXL4znUNdWtHNqiZc-aP0ifnbGvLoTUDRXop" alt="Image" width="800" height="650" loading="lazy">
_Source: [Dan Counsell](https://www.dancounsell.com/why-you-need-a-great-app-icon/" rel="noopener" target="<em>blank" title=")</em></p>
<p>But that’s not to say that everything has to be exactly the same, though.</p>
<p>Take Words With Friends, for example, which added a heart and shamrock to their app icon for Valentine’s Day and St Patrick’s Day respectively. A nice way to stay relevant, for sure… as long as users update their apps regularly enough to see it in time.</p>
<p>And then there’s their educational offering:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/0kNlDZHz3wsEWWNvxwf4Ayj1tH9qydNnEGZa" alt="Image" width="251" height="251" loading="lazy"></p>
<h3 id="heading-reflect-your-apps-purpose">Reflect Your App’s Purpose</h3>
<p>Do you remember when Instagram changed their icon? I do, not least because it’s something I was asked to <a target="_blank" href="https://www.crazyegg.com/blog/giving-customers-what-they-want/">write about</a> for Crazy Egg. But a lot of people don’t know that Instagram had another app icon before they changed it to the brown rainbow one that everyone knew and loved:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/i0pSY6OHyAVLc3ML6o8f8VIX1E49kYgNA2e0" alt="Image" width="615" height="300" loading="lazy"></p>
<p>The founder gave the following reason for the first logo change: “The old icon had nothing to do with Instagram.” With that sentiment in mind, it’s actually pretty easy to understand why Instagram decided to change their suite of logos to this:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/p79wuv9KW5TRzByblsweuE3QkleenDE7Wg8n" alt="Image" width="800" height="279" loading="lazy"></p>
<p>The vintage brown camera icon had everything to do with nostalgia, like that evoked by the flapping of a Polaroid picture, and nothing to do with the future of photography. And, with 80 million photos shared every day on Instagram, that’s exactly — whether you like it or not — what Instagram is.</p>
<h3 id="heading-conclusion">Conclusion</h3>
<p>Disappointingly, but predictably, there’s no straightforward route to creating the perfect app icon. Hence there being such a wide array of different looking icons out there!</p>
<p>The above tips are useful, but they’re not something you can set your watch by — an app aimed at children or teenagers will, for example, look very different to one that’s used mostly by, say, businessmen or retirees.</p>
<p>There’s another good place to start when you’re trying to find inspiration for app icons, and it’s probably either in your pocket or lying on your desk. Or maybe you’re reading this article on it. I’m talking about your smartphone!</p>
<p>Most founders, app creators etc. build products or apps to address a problem that they’ve identified in their own lives. In other words, you are probably a pretty good representation of your target market. Think about app icons you find attractive, or at least are willing to make room for on your home screen, and you’ll be on your way to app icon success.</p>
<p>And hey, even if you do end up creating a really ugly app icon, it could always end up generating notoriety on <a target="_blank" href="https://www.reddit.com/r/androidapps/comments/64x9o1/whats_the_ugliest_app_icon_on_your_phone_while/">Reddit</a>.</p>
<p><em>You can read more of my writing on <a target="_blank" href="https://appinstitute.com/app-icons/">appinstitute.com</a>.</em></p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
