ManyPixels Blog

Get awesome inspirations and tips directly from the ManyPixels team on how to create and use pixel perfect designs

Our favourite design requests (July 2019)

August 2019, 06
Here we go again, here are our **favourite design requests** of the month of July. All those design requests have made by our **ManyPixels designers**. Congratulations Juan, Adit, Ita, Evgenia, Christian, Wis, Nurul fore being be featured in this month's collection. # 1. Blog post images One very good way to make your content stand out is to illustrate your articles with images throughout: It is easier to read! Blog post images are a very popular type of requests that companies or bloggers order on ManyPixels. ![Blog post images]( # 2. Comparison graphics (with illustrations) Another popular design request on ManyPixels are comparison graphic design requests (with our without illustrations). Comparing how your product stands out from the competition or comparing different customers (before / after, or with / without) is a great way to explain your value proposition to your prospective customers. ![Comparison graphic]( # 3. Brochure with illustrations This one is my personal favourite! Whether you are sending a print or digital brochures, complementing it with illustrations is a great way to appear more professional and convey the benefits you are offering to your customers. ![Brochure with illustrations]( # 4. Infographic design Here's a creative way to amplify your content: Graphic design to repurpose your content. As a company or blogger you probably have a ton of content but having infographics is a great way to re-use and reformat the content you already produced. ![Infographic design]( # 5. Landing page with quirky or cartoonish illustrations Here's a trend in design: cartoonish illustrations on landing pages / marketing websites. They make your website have a unique feel and distinctive branding. ![Landing page with cartoonish illustrations]( # 6. Carousel Facebook ad designs (with illustrations) Here's two ideas for your next Facebook advertising campaign: Tell a story or show the multiple benefits your product / services has. A great way to do so is to use illustrations (they are great for storytelling) and the Carousel ad format from Facebook. ![Carousel ad designs]( # 7. Isometric illustrations Here's a unique type of design request our designers love to do: Isometric illustrations. These illustrations are great for video game companies or simply if you want to design a city, design an office building, or design a map. Here's an example design by our team: ![Isometric illustration]( # 7. Children book illustrations or character design A huge audience is for products (books, gaming, education) is children and the best way to communicate what you do: With illustrations! Here's an example made by our team with fun character illustration designs: ![Children book illustration]( # 8. Lead magnet design What is the next step after you attract traffic to your website? Convert your users! The best way to convert your users it to offer a free product / service / sample and that is called a lead magnet. We do that at ManyPixels with our design library. You can use this lead magnet on your blog / on our main website. Here's an example of lead magnet (without copywriting): ![Lead magnet design]( # 9. Packaging design Are you running an e-commerce store or any store that deliver physical products? Having a great packaging is great for marketing / improves the value perception of your product. Here's an example done by our team in July for a moving service company (and their custom moving boxes!): ![Packaging design]( ![Packing design]( # 10. Custom multipurpose illustrations I think you noticed: We love illustrations! Here is some more inspiration. You can use illustrations to complement your how it works page, the different services / products you offer, or simply to make your website more easy to understand. ![Custom illustration]( ![Custom illustration]( ![Custom illustration]( If you need custom design made, you can always check out our [website](
Continue reading

June 2019 Design Ideas

Each month, we're doing a small round up with design trends and ideas for your next requests. Here are 7 ideas for what you can request in June. # 1. Blog post illustrations The currency of internet is content. Great content will help you get ranked on search engine, but also educate customers. One way to make your content more interesting and engaging is by creating blog post headers / illustrations. Here's a simple blog post header by Alex: ![Blog post header]( Another request idea is to request multiple blog post headers at once. This is useful if you want to plan this along your content calendar: Here's an example done by Alex: ![Blog post header]( # 2. Custom illustrations Another popular request is custom illustrations. You can use them for practically anything you want! ![Custom illustrations]( ![Custom illustrations 2]( # 3. Landing page illustrations Another request you can make is landing page illustrations. They will capture the visitor attention and reduce bounce rate. And as an added bonus: This makes your branding more unique! ![Landing page illustrations]( Here is another example done by our team: ![Landing page illustrations]( # 4. Pinterest image design Another great source of leads for your business is Pinterest. Here is an example of design made by our team: ![Pinterest image design]( # 5. Logo and brand guide One of our most popular type of request is logo and brand guides. Here is one our team made for a fin tech startup. ![Finin]( # 6. Banner design Banners are a great way to catch the attention. Whether they are to display on your website (to ask customers to download an ebook for example) or for advertising, having a well-designed banner will improve conversions. ![Banner design]( # 7. Display ads Another popular request you can order is display ads. Whether it is for Google or Facebook, you can make one request and ask them to have them designed for multiple platforms. Here are some examples designed by our team: ![DisplayAds]( ![DisplayAds2]( ![DisplayAds3](

Pixelian of the Month: Juan

With a slight delay, here is the Pixelian of the month of April! The award was given to Juan! … 🥁 … Juan ![Juan]( Juan joined ManyPixels a year ago and is a full-time freelancer on our platform. _(Each month, we recognise the great work of ManyPixels’ designers by giving an award, the Pixelian of the Month is awarded to acknowledge excellent design and communication skills and the designer receives an additional bonus)_ # 1. Can you tell us about you? My name is Juan. Nothing really special about me. I'm a designer and currently work and live in Jakarta, Indonesia. I am passionate in brand development and editorial design (presentation design such as pitch decks as well). Aside from design I also like football and watching movies. I loved good visuals since I was a little. I was good at drawing and I love to draw new designs for products such as cars or sneakers (I was a sneaker enthusiast way before I knew what a sneaker enthusiast was), packaging, etc. Those factors encouraged me to take a design major. There was a product design major in one of the university in my hometown but I didn't feel it was good enough so I decided to take visual communication design instead. From there I learnt a lot and found some fields I loved to work on, and here I am. ![Juan sketching laptiop]( _Above, work in progress of a logo by Juan_ # 2. What’s your typical day like? I often work at home but once or twice a week I also work in some nice coffee shops. My favourite coffee shops in Jakarta are Chief Coffee (try their Bailey's Latte), Kopi Nalar, OnThree, and 1/15 Coffee in Menteng. Working at different places helps me to keep refreshed, but can also distract me if I do it too often. ![On Three Coffee]( _OnThree, one of Juan's favourite places to work from in Jakarta_ When I am done with work I sometimes do indoor football or hangout with friends during weekends. # 3. How do you get inspired? My inspiration really comes from anywhere. It can come from books, internet, visiting places and learn new things, even from talking with people. Specifically, I use Behance and Pinterest the most. That said, I use Instagram for my daily dose of inspiration. There are lots of great agencies and designers sharing their inspiring work, and also some accounts share curated designs which makes it easier for me when I need some specific style for inspirations. My favourite Instagram accounts to follow are []( and [WeLoveBranding]( # 4. Can you share some of the pieces of your work you’re most proud of? I really liked doing the logo for Finin, a fin-tech app. They were really happy with the result and also asked for business cards, letterheads as well as the full branding package. ![Finin]( ![Finin]( ![Finin]( # 5. Finally : What’s your advice for designers? Nowadays visual design tends to evolve faster, and to stay relevant you have to stay up to date and be aware of trends. But don't give up your design style just to follow the trends. You can always adapt the trends to complement with your personal style, in your own way to make it unique and you. ---------- Thanks for the interview, Juan!

Our favourite design requests: May 2019

So what did our designers work on in May 2019? They worked on more than 500+ design requests for our clients and here are some of the coolest work they've done, curated for you! # 1. T-Shirt design "Ben Franklin" (by Christian) Christian is a talented illustrator that joined us as a freelancer a few weeks ago. The request was simple: Design a T-shirt with Ben Franklin drinking a pint of beer. The objective was to sell this t-shirt on Amazon Merch. ![Amazon Merch T-shirt design]( Great result, isn't it? # 2. Pitch deck / Investor presentation design (by Juan) One of the most popular requests we have is powerpoint presentation redesigns. Whether it is sales decks, pitch decks, or simply an internal presentation, designing it with the correct branding is really key in order to pass the right message. Here are a few slides of the deck: ![Slide deck design]( ![Slide deck design]( ![Slide deck design]( ![Slide deck design]( # 3. Explainer infographic (by Nurul) Infographics are a powerful way to communicate a message. Once your infographic is done you can also ask to have special versions for posting it on LinkedIn, Slideshare, Instagram, or Facebook to make sure the right message is sent in the right format to your audience. This request was not an easy one for Nurul: Lots of data and specific branding guidelines to respect but the result is beyond awesome! ![Explainer infographic]( # 4. School poster design (by Evgenia) This request is one of my personal favourites: I really love the level of creativity (and it wasn't an easy one as Evgenia used multiple fonts). ![School poster]( # 5. Custom illustrations on our gallery (by Wis) Earlier this year we released our royalty-free, 100% editable SVG [illustration gallery]( Each week we update our illustration gallery with 15-20 new illustrations. ![Free illustrations]( # 6. Coverage map for a car-sharing startup (by Japhet) This request wasn't easy either - redraw an entire map with the branding of the startup and add precise locations of the coverage. The result turned out excellent! ![Coverage map car sharing](") # 7. Flyer with illustrations (by Alexander) This request was for a crowdfunding e-book promotion: Design a beautiful flyer with custom illustrations. ![Flyer with illustrations]( # 8. Infographic for a SaaS (by Japhet) This request is for a SaaS infographic. The request had a lot of data point so it wasn't an easy feat for Japhet. ![Infographic for SaaS]( # 9. Email marketing banner (by Deddy) ![Email marketing banner design]( Another request we have are email marketing design materials: Newsletters mostly! This project was very fun to do for Deddy: Design a custom illustrations and follow the branding guidelines of the customer. # 10. Dashboard UI design (by Kevin) a Dashboard design for an upcoming car sharing startup. Dashboard designs are usually very demanding and demand a strong eye for a great user experience and Kevin did a great job at this! ![Dashboard design]( # 11. WINNER: Sales brochure illustration (by Evgenia) And the winner is... This sales brochure illustration by Evgenia. I thought the result was so beautiful aesthetically yet conveyed a lot of important information. Great job! ![Brochure illustration](

Pixelian of the Month: March 2019

This month, the award of Pixelian of the Month goes to... ... 🥁 ... Kevin! ![Kevin]( Kevin joined ManyPixels a few months ago and is a full-time freelancer on our platform. *(Each month, we recognise the great work of ManyPixels' designers by giving an award, the Pixelian of the Month is awarded to acknowledge excellent design and communication skills and the designer receives an additional bonus)* # 1. Can you tell us about you? Let me introduce myself, my name is Kevin. I was born in Indonesia's capital, Jakarta. I reflect myself as a well - quite non-interesting individual. Perhaps that's caused by my extreme Introversion personality (I took that online MBTI test kind-of-thing, and got the award for getting a 92% introversion result). > ## My only passion was to play video games and to draw anything related to it. You could say I would highly prefer to do everything and keep everything by and to myself. But may be I can share a few things this time (especially doing it digitally) : My path to work as a designer begins from childhood times. Back in the day, my only passion was only to play video games and to draw anything related to it. That habit is kind of bad as it can took focus out of my study, sitting in the back of the class doing nothing but sketching useless stuff. (Today, I stilll like drawing stuff, just more rarely). It really took its toll as I failed my first year of high school. That event was quite a wake up call for me to focus on something more important. In the end, I am really glad I finished my high school with nearly perfect grades. ![spaceguns]( *Above, a sketch done by Kevin.* College times, I finally could focus on doing *artsy* stuff again. So I entered Bunda Mulia University in 2013, and started having a great time studying visual design. It made my inner artist finally shine at the right place. With years passing by, I really got into learning Motion Graphics and User Interface Design there. Just sadly the UI lessons provided were quite shallow for me so I decided to lean deeper towards Motion Graphics first. The result of that is I worked initially as a 2D Animator Intern for 3 months, which I really liked. While doing that I was still intrigued by how UI worked and decided that my next full time job should be as a UI designer. You could say it was quite a struggle to find a job, as I didn't have any solid UI portfolio, let alone any UI experience. But thanks god, I finally got accepted by a micro-startup in North Jakarta as a junior UI/UX designe thanks to my motion graphics skills. During my time as an intern, I learnt many things by working closely with developers, and getting a good grip on how UI/UX in an app works. Sadly, just 7 months into the job, I got badly ill and had to take a long break, giving up my job. I finally got better and here I am, working as a Junior UI Designer at Manypixels. I have been here for 7 months and hope I will never catch that illness again. # 2. What's your typical day like? > ## I also very much like it when my work is uninterrupted most of the time. My typical working day is pretty usual. I wake up, have breakfast and shower before 8.45 am. Then I immediately open my laptop, and begin to work. I also very much like it when my work is uninterrupted most of the time. (Perhaps my only breaks are just lunch and going to the bathrooms). The main reason I work like this is that I very much like to keep my working pace efficient and avoid overtiming. I tend to finished my work exactly at 16.45 everytime . After my work is done, I finally have a leisure in the same sitting spot and play Destiny 2. My favorite game for the moment. I play it till the night's over and get to sleep. Next day, I wake up and repeat. Yeah, I know it sounds really boring to some, but hey, I absolutely love that. Being humble, doing nice & honest work, some work / life balance, this is good enough for me. # 3. How do you get inspired? My main inspirations for my artworks came from the web, Dribbble, Instagram, Behance, the usual stuff. That said, I have a tendency on looking for them rather rarely. # 4. Can you share some of the pieces of your work you're most proud of? Yes, I do and it's not the prettiest project. But it's a very good example of pursuing great collaboration with the client, which I think we observe more often. Sometimes when we do design projects, it feels like a one way street. Either the client is agreeing to us on everything every single time, or the client keep having endless revisions to a spiralling infinite oblivion. In this project though, the client is actively asking questions, giving suggestions, and we do it vice versa. It's like talking to a colleague rather than a bossy figure, a really fluid two way collaboration that makes working on this project really fun. ![kevinwork]( # 5. Finally : What's your advice for designers? I got no particular useful advice, but I may say that just do what you really feel best for you and be grateful, as not everyone may be as lucky as compared to where you stand right now. So yeah, just be grateful. --- Thanks for the interview, Kevin!

10 Popular Requests on ManyPixels

Wondering what to order on ManyPixels? Here are 10 popular requests you can order today. ## 1. Sales decks Let's face it, in business you constantly need to sell (at one point or another, your job mostly is about selling, in the words of [Sam Altman]( So how do you sell? - You need to pursade - You do so with a great presentation or in other terms, a sales deck ![salesdeck]( ![salesdeck2]( ![salesdeck3]( At ManyPixels we use sales deck a lot. When we reach out to a prospective company, we follow up with a customised sales deck. It speaks to them, it shows we understand their problem, and we try to book a call with them. Here is what goes into a great sales deck: - What problem you're working on for **them** (your customers) - What solution you and why your solution is perfect for **them** (why they should care) - Reference of past clients (clients won't take your words, let your work **speaks for it**) - Pricing - Contact details *Tip: Also add "Services/Product for..." to make it personal!* Here is an example of another sales deck: ![salesdeck2]( ## 2. Logo design with mascot Logo designs with mascot make your brand really unique. In addition to making your brand unique, it also gives you to opportunity to have a logo with multiple use cases (with or without mascot) Here are some logos that our designers have created: ![harvylogo]( ![grumpylogo]( ![happierpets]( ## 3. Infographic design Infographics are a great way to repurpose content. As attention-span is now hugely limited, you have to find another way to capture attention. Here are some examples on how you can use infographics to market your business: - Use them as Facebook Ads to drive traffic to one of your ebook or blog posts. - Use them in your presentations - Use them as social media posts on LinkedIn, Instagram, Facebook - Use them to illustrate your blog posts Here are some examples of infographics our team has designed: ![infographic1]( ![infographic2]( ![infographic3]( ## 4. Display ads Advertising, whether through prospection or retargeting can be an incredibly effective way to generate traffic and leads, build your brand, or even directly drive direct sales to your website. Here are some examples of ads you can request that your team has produced: ![displayaddesign]( ![displayaddesign]( ![displayaddesign]( ## 5. Reports, manuals, and company culture books Another idea to request is to create reports or manual: Present information beautifully so people actually want to consume it. *Tip: You can actually put these reports in powerpoint format and put them on Google Slides to share them internally with your coworkers or with your investors.* ![reports]( ## 6. Landing pages Landing pages design is a very popular design request on ManyPixels. Designing a landing page is usually better to go into redesigning a full website for several reasons: - A landing page gets the visitor to do a single action: Usually booking a call or leaving their email address, downloading an Ebook, etc. They are a great marketing way to capture the attention to a visitor towards a single objective. Here are some examples of landing pages you can request: - General landing page s - Book a demo landing pages - Referral page landing pages - Contest landing pages - Coming soon landing pages Here are some examples of landing pages that our team created: ![landingpage]( ![landingpage]( ![landingpage]( ## 7. Email and newsletter designs Building your email list is like having your own little piece of Internet real estate, where your subscribers are your tenants. Unlike Facebook, Twitter, LinkedIn and other social media platforms, email is still a strong and independent way to reach out customers. **Building your email list is thus hugely important!** Once you've built your list, having compelling emails. Here are some examples of email designs you can request on our platform: - Welcome emails - Lifecycle emails - Receipts emails - Newsletters Here's an example of an email design from you team: ![emaildesign]( ## 8. Custom made illustrations and icons Illustrations are one of our most popular services as well. They have multiple uses cases: - Make a powerpoint presentation look nicer or unique - Help create social media graphics - Help create landing pages Here are some example of illustrations ![illustrations]( ![illustrations]( Or for branding purposes. This e-bike app decided to create a lot of illustrations to help with their branding: ![brandingillustration]( ![brandingillustration2]( ![brandingillustration3]( ## 9. Facebook page branding Another popular example of request is redesigning your Facebook page / Messenger bot. ![facebookbranding]( ## 10. Pitch deck redesign So you're planning to raise your seed or series A round? Well, a better pitch deck will definitely impress your potential investors. Here are some screens of a pitch deck we've recently redesigned. ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( ![pitchdeck]( That's it! We will regularly be posting more popular example of design requests.

Our month in Review: March 2019

March was a busy month for ManyPixels! Here are four important things we achieved in March: 1. Hired new team members 2. Launched a huge marketing project 3. Completed 95% of our new platform (and launching it in the next few weeks to a few select customers) 4. Started seeing repeatable growth (but we're not quite there yet) ## 1. Expanding to 🇷🇴 Romania Growth cannot happen with an intrinsically great product. But also great operations / service delivery as we are a managed design services marketplace. In order to have great operations, we needed to have a great team in place which has been our top focus for the month. So we asked ourselves: What are the attributes of a great team? - Great communication skills - Alignment with our values and goals (we can enable them to grow as we grow) Most of my focus with Quentin was thus hiring freelancers based on those values. After building the largest part of our team in South East Asia for a year (and I lived in Indonesia for one year to recruit myself the first designers on the platform), we made the decision to start hiring designers in Eastern Europe, starting with Romania. Why did we make this decision? - European designers can work in the same timezone of our customers, and thus can ensure faster response rate which will improve customer experience. Liana is our team leader and Alex and Alin joined us as a designers. We're going to announce many more new designers very soon. Here is some of the work from our talented designers from Romania. ![grumpybearlogo]( Or this work... ![happierpets]( ## 2. Launching our 🎨 free illustrations gallery ![freeillustrationgallery](,fit:crop/compress/QbWjcAksRoChCwDoVlPK) Our [free illustration gallery]( is our main marketing tool at ManyPixels. We created this for several reasons: - We are big fans of beautiful, modern illustrations. - We want to help entrepreneurs that are at the beginning of starting their own projects. - We use it to drive traffic to our main website through retargeting, newsletter subscriptions, etc. How did we launch this? **We first decided to promote it on various Facebook groups that could potentially be interested in it (FB ads, E-commerce, Startups groups...)** ![fbpost]( The engagement on Facebook groups was so high (due to people commenting) that I suspect my post organically reached tens of thousands of people, without any paid advertising. **We then launched it on Hacker News. It hit the front page within a few hours and stayed on the 8-9 spots for almost 24 hours.** Shortly after, we got hunted on ProductHunt! ![producthunt]( In total during launch week we got about 15k visitors. Due to the overwhelming response, we decided to **double down** our efforts on the gallery. Instead of 5 new illustrations per week, we set a goal of creating 10 new illustrations per week. If this still works well? Well, we'll double that number again. **How did it perform for us in terms of traffic and sales?** The illustration gallery has been quite a success so far. Here is the spike of traffic from Google Analytics after the launch of the gallery. ![illugallerystats]( In terms of subscribers, we receive 70 to a 100 new email subscribers per day and 3000 visitors on the gallery (this number has been constant since a few days). We also ran an email campaign that resulted in 6 sales, all from the gallery subscribers. I think this kind of product will probably grow best based on word of mouth and just producing exceptional illustrations is thus our main goal. Let's see how it goes in a few months! ## 3. Product improvement Geoffrey recently joined ManyPixels as CTO. Quentin and I went to Paris to meet him back in December 2018 and we spent 5 days just working at various coffee shops / coworking spaces in Paris + spending all evenings together. I highly recommend that you spend a lot of time with your cofounders so you know their working styles. After being sure we wanted to work together (this goes on both sides), we created a shareholder agreement and Geoffrey joined us as CTO as of January 2019. The first task was to recreate a professional looking website, but then what really mattered to create value was creating a solid platform to do the following things: 1. Enable customers to place design orders seamlessly 2. Dispatch orders and manage workers 3. Communicate and collaborate In the upcoming weeks, we are releasing the platform to a select group of our subscribers. Here is a sneak peek of the platform (still in progress!): ![sneakpeek]( ## 4. Growth My main responsibility at ManyPixels is growth . Finding customers, retaining them, and then making sure they have such a great experience that they become loyal fans that refer the product to their friends is a loop that we need to attain. **Here are some of our results from our growth efforts:** - Website traffic for the month is 31k visitors. This month it is projected to be around 90k. - We went from 90 email subscribers in early March to well over 2000 now. - Revenue went up by +13.6% - Net revenue went up by +14.6% - We launched only 1 email campaign, it resulted in 6 sales. - We started experimenting on retargeting ads with a very low budget. Our marketing is basically a mix of three things: **1. Sales** Our sales process goes like this: 1. Targeting: We asked ourselves by looking at our customers what were the attributes of our customers and know more about who they were. We then built list of potential customers. 2. Cold-emailing: It can be an incredibly powerful way to get customers. We do not have a perfect system (yet) for this but we are getting there. We book on average 3-4 high quality calls per week that land long-term customers. 3. Demo of our product / Sales deck: Once the customer has received an intro call, we follow up with a Sales Deck (or soon: A demo of our product for their industry) **2. Content** Content is like our long-term, safe investment that we would be crazy not to have in our marketing portfolio (in the words of [Julian]( I see we can add value by creating two types of content: - 1. Brand content - Monthly reviews, designer of the month, How we do X or Y at ManyPixels. This type of content can add value to entrepreneurs seeking to know how to grow their business. - 2. SEO content - Content that people actively search about, example: "*How to make an infographic*" **3. Ads** We recently started using ads, for now only by focusing on Facebook Ads and we've already had 10 conversions and a positive ROI. We are doubling our efforts on ads as well. ## Conclusion It's already been 3 months since the start of the year and our focus for the next three will be: - Continue to attract talented freelancers on our platform and make that process faster and smoother. - Achieve scalable and repeatable growth. - Improve our product / service delivery so we can continue to generate word of mouth.

How to build a gallery with editable SVG illustrations

I’ve recently made a [gallery for ManyPixels]( displaying SVG illustrations available to help people with their projects, kinda similar to [Undraw]( in its behaviour. Using it is pretty simple: You browse the gallery, pick color that match your brand, click it, download it as PNG or SVG (with updated colors!) and voilà! So how I did it ? It’s a work of developer and illustrator. ---------- # Designing the right way To make all of our illustrations, we use **Adobe Illustrator**. ## It’s all about one colour First you need to choose one color which will be your “dynamic color”, for our gallery we used the hexcolor **#68E1FD** to match our brand. Every illustrations must use this color or the javascript code won’t work when color picking. You can of course use other colors as “static colors”. To achieve the gradient effect, **never use** gradients. You have to create mask layers, gradiant white or black and play with the opacity. ![](*hNRy11oMujaksGMDw6iaYA.png) ## Exporting your SVG When exporting, you have to select **Presentation Attributes,** we have our SVG code with attributes like **fill=“#68e1fd”** which will be easily changed with code. ![](*MUcG0BNyNywsJJ4XbVZFmQ.png) ---------- # The coding part ## Color Picker ``` js import React from 'react'; import { ChromePicker } from 'react-color'; import { dynamicColor } from '../constants/colors'; class Magic extends React.PureComponent { state = { color: dynamicColor }; onChangeColor = color => this.setState({ color: color.hex }); render() { const { color } = this.state; return ( <div> <ChromePicker color={color} onChangeComplete={this.onChangeColor} /> </div> ); } } export default Magic; ``` The goal is to get the **hex** of the dynamic color you will change later in your illustrations. For my example, I used _react-color_ which provides few styles of color picker easy to use. ## How to change the SVG color ``` js import Svg from 'react-inlinesvg'; import styled from 'styled-components'; import { dynamicColor } from '../constants/colors'; const ContainerSvg = styled.div` *[fill='${dynamicColor}'] { fill: ${p => p.color}; } *[stroke='${dynamicColor}'] { fill: ${p => p.color}; } `; <ContainerSvg color={color}> <Svg src={url}>Can't load image</Svg> </ContainerSvg> ``` I’m using styled-components to do all the styling in the gallery. By giving my dynamic color as props, I replace everywhere in the SVG with fill=“**#68E1FD”** by new **hex color.** The illustration is updated instantly. ``` js import React from 'react'; import { ChromePicker } from 'react-color'; import { dynamicColor } from '../constants/colors'; import { ContainerSvg } from './'; import Svg from 'react-inlinesvg'; const url = ""; class Magic extends React.PureComponent { state = { color: dynamicColor }; onChangeColor = color => this.setState({ color: color.hex }); render() { const { color } = this.state; return ( <div> <ChromePicker color={color} onChangeComplete={this.onChangeColor} /> <ContainerSvg color={color}> <Svg src={url}>Can't load image</Svg> </ContainerSvg> </div> ); } } export default Magic; ``` ## Save as PNG or SVG with updated colors You have to first get the **ref** from your inline SVG. ``` js <Svg src={url} ref={ref => this.svg = ref} > Can't load image </Svg> ``` Saving as SVG is really simple, you get the **svg string** from the **inline svg** reference and replace all the colors. ``` js handleOnClickSaveSVG = () => { const { color } = this.state; let svgToSave = this.svg.state.loadedText; svgToSave = svgToSave.split(`fill="${dynamicColor}"`).join(`fill="${color}"`); svgToSave = svgToSave.split(`stroke="${dynamicColor}"`).join(`stroke="${color}"`); const blob = new Blob([svgToSave], { type: 'image/svg+xml' }); const url = URL.createObjectURL(blob); downloadElement(url, 'illustration.svg'); }; ``` Download that **blob**! ``` js downloadElement = (url, name) => { const tempLink = document.createElement('a'); tempLink.href = url; tempLink.setAttribute('download', name); document.body.appendChild(tempLink);; setTimeout(() => { document.body.removeChild(tempLink); window.URL.revokeObjectURL(url); }, 100); }; ``` Saving as a PNG starts like the SVG by replacing the colors. I create a canvas and draw in a new **Image** then use my previous function **downloadElement**() to get it. ``` js handleOnClickSavePNG = () => { const { color } = this.props; const DOMURL = window.URL || window.webkitURL || window; if (!DOMURL) { this.setState({ error: 'Your browser doesn\'t support download' }); } let svgToSave = this.svg.state.loadedText; svgToSave = svgToSave.split(`fill="${dynamicColor}"`).join(`fill="${color}"`); svgToSave = svgToSave.split(`stroke="${dynamicColor}"`).join(`stroke="${color}"`); const blob = new Blob([svgToSave], { type: 'image/svg+xml' }); const url = DOMURL.createObjectURL(blob); let match = svgToSave.match(/viewBox="0 0 (\d+\.?\d*) (\d+\.?\d*)"/m); const width = match && match[1] ? parseInt(match[1], 10) : 500; const height = match && match[2] ? parseInt(match[2], 10) : 500; const tempCanvas = document.createElement('canvas'); tempCanvas.width = width; tempCanvas.height = height; const ctx = tempCanvas.getContext('2d'); const pngImage = new Image(); pngImage.onload = () => { ctx.drawImage(pngImage, 0, 0); DOMURL.revokeObjectURL(url); const imgURI = tempCanvas.toDataURL('image/png').replace('image/png', 'image/octet-stream'); downloadElement(imgURI, 'illustration.png'); }; pngImage.src = url; }; ``` ---------- With that, you have all the tools you need to do an editable SVG gallery! I hope it was clear, feel free to ask on **Intercom** or **** if you want more information. ![](*Ukh7DYekkpqlPDuO7LEG0w.png)

11 Ways to Use Illustrations to Grow Your Business in 2019 (with Design Examples)

Illustrations are a great way to capture visitor attention and add value to your content. We've compiled 11 ways to use illustrations in 2019 to grow your business. ## 1. Header illustrations Probably the most popular type of illustration: Show. Don't tell. Having a unique illustration in your header can tell your visitor about your service or product (and probably help with bounce rate too!) but not only, it can help with your branding. ![enter image description here]( By [Valeria Rimkevich]( ## 2. Coming soon illustration If you do not have time to fully code or launch your service or product, a good way to validate future demand is to create a coming soon page with an illustration. Coming soon pages are faster to create than landing pages and you just need to communicate your value proposition / an email capture form and a beautiful illustration to get started. ![enter image description here]( By [Dmitrii Kharchenko]( ## 3. Blog post illustrations Blog post illustrations really help to share your content over social media or simply to make the post more attractive (like this one!) Here are some of our favourite styles of blog post illustrations: ![enter image description here]( By [Magda Koscianska]( ![enter image description here]( ![enter image description here]( By [Margarida Mouta]( ![enter image description here]( By [Sloan]( ![enter image description here]( By [Magda]( ![enter image description here]( By [Tubik]( ![enter image description here]( by [初夏Ruby]( ![doodleillustration]( ## 4. Features / product in action illustrations Another way to use your product is to show characters using your product / service. ![enter image description here]( By [Dmitrii Kharchenko]( ## 5. Blog post promotion Facebook ad One way to use illustrations is to retarget visitors from your website with an ad linking to your blog post. [Wrike]( is an work management solution that creates a lot of content and then use Facebook Ads to retarget it. ![blogpostad]( ## 6. Ebook chapters illustrations So you've created an Ebook? Now create small illustrations for each chapter! ![chapterillustration]( ## 7. Illustrations for different use cases Another way to use illustrations is to create a Use Case page to show how your product or service may benefit certain type of clients and why. [Slab]( is making good use of illustrations for their product. ![enter image description here]( By [JT Grauke]( ## 8. Social media post illustration Another way to create engaging content on social media is to use illustrations for your social media posts. This is an example from Tech In Asia ![socialmediapostillustrations]( ## 9. Long-form content illustrations A very good example of long-form content and guide illustrations in action is found on the site of [Backlinko](, a marketing blog which recently wrote [a guide about keyword research]( They first start with a very clear header and bullet points to show what they'll talk about: ![longformcontentillustrations]( Which is immediately followed by a clear call-to-action which prompts users to subscribe to the newsletter to download the PDF: ![calltoactionillustration]( Followed by a small illustration set for each chapter: ![chapterillustrations]( And each chapter has its own illustration as well: ![mainchapterillustration]( All in all, it really makes the article structured and a pleasure to read which probably helps rank Backlinko content higher in Google (try googling Keyword Research for example!) ## 10. Carousel ad illustrations Another popular form of illustrations (especially on mobile!) is to use them in carousel ad. Here are some examples from [Flock](, a communication and collaboration tool for teams. ![carouselillustration]( ## 11. Illustrations for infographics ![infographicillustrations]( Probably the most popular : Using illustrations for your infographics. ![infographicillustration](

The Ultimate SaaS Design Trends of 2019

This week we have looked at popular SaaS (or as-a-service type of companies) and compiled a very curated list of trends and design inspiration. From logo inspiration, to illustrations, to some landing pages styles, this guide should give you a solid base to start your SaaS projects in 2019. We've also included some further resources below to tackle your SaaS design projects, so make sure to check them out! ## 1. Minimalist, simple, elegant, and sharp logos (and purple is insanely popular) In 2019 the trend seems to be around SaaS logos that are minimal or simply font-based with slight tweaks. Purple and dark blue are also colours widely used as they represent trust / luxury and thus convey a high-quality service. Here are some examples we've particularly liked: ![saaslogo]( by [Keene Niemack]( by ![saaslogo2]( by [Deividas Bielskis]( ![saaslogo3]( by: ![saaslogo4]( by Chase Turberville ![simplesaaslogo]( by [Eddie Lobanovskiy]( ## 2. Font-based logos (with or without symbols) Another trend are logos that can be used in multiple ways (with or without a symbol) and that are mostly very minimalistic. Some of these logos have just a small font tweak (see DesignModo) ![simplesaaslogo2]( by [Eddie Lobanovskiy]( or ![saaslogofonts]( by [Aaron Poe]( or ![designmodologo]( by [Paul von Excite]( ## 3. Soft illustrations Let's now dive into our favourite topic - illustrations. While we had between 2016 and 2019 a slight overload of isometric illustrations (do not worry - they still look great and we do have them on our website!), there seems to be a surge of new type of illustrations. The first type of illustrations are soft illustrations (or soft line illustrations) which seem to be incredibly popular. For example, [Canny](, a popular feedback tool (and, virtual high-five on them, fully bootstrapped!) used them in their header. These illustrations usually use cold colours or very soft / pastel colours. ![softillustrations]( Here is another example: ![softillustrations]( by [Andrey Kovalev]( ## 4. Illustrations with people A very trendy type of illustrations are those which look like these, which were done for [Prospa](, a small business owner financing app. These illustrations usually use warm colours and are very entertaining. ![peopleillustrations]( by [Andrew McKay]( Another style are the ones done by [Will Beeching]( for [FlatFair,]( a tenant/landlord relationship app. ![peopleillustrations]( Or this one: ![peopleillustrations2]( by [Udhaya Chandra]( ## 5. Minimalist animated icons Again by [Prospa](, these state icons are very cool (and animated) ![animatedicons]( ## 6. Illustrations with pencil style [Gusto](, a SaaS which is a Payroll-as-a-Service recently revamped their homepage and features a unique style of illustrations which we really loved! ![illustrationpencilstyle]( by [Camellia Neri]( Which looks pretty good! ![illustrationpencilstylesaas]( ## 7. Animated illustrations Another popular trend are illustrations with simple animations, which certainly helps to grab more effectively the visitors' attention and deliver a great experience. ![animatedillustrations]( by [Sofy Dubinska]( or ![animatedillustration2]( by [Alegria]( ## 8. Large hero illustrations The trends for landing pages (and not only for SaaS ones) seems to have large hero illustrations. An example is this one by Tubik Studio: ![largeheroillustration]( by [Tubik]( ## 9. Clean UI with crisp and clean fonts The trend for SaaS landing pages (which deserve an entire blog post on its own) seems to be geared towards very clean pages, with crisp fonts which are very easy to read. ![cleanlandingpages]( by [Casey Kennedy]( The same goes for SaaS dashboards: ![saasdashboard]( by [Stan Yakusevich]( ## 10. Further resources Ready to tackle your next SaaS redesign or simply want to start from scratch? Check out some interesting resources below: 1. For your UI projects, we recommend using design systems. For example, Shopify released [Polaris]( which is widely used by SaaS companies. It can save your designer (and developer) a ton of time to design your MVP or your fully-fledge SaaS landing page / app. 2. Icons8 recently created a gallery of free illustrations made by top Dribbble designers, with different styles. You can find it [here]( Alternatively, you can also use our [free illustrations gallery]( as well (*we're constantly updating it and open to suggestions!*) 4. [Land-Book]( is our go-to resource for SaaS Landing Pages. The collection is really well curated and features landing pages that follow (or create) the trends.