Graphium

graphium

Introduction (this felt like hacking but it isn't) Going through past Instagram posts to get a short term ego boost that will dissipate in a matter of seconds I was going through my old Instagram posts trying to find how many people liked my posts. I even went through the ones in the archive (I had like 20 archived posts gathering dust). I needed an ego boost (who doesn’t like a good ego boost? If you don't, you're probably lying). And then, after a boring 5 minute period where I had a stream of random thoughts going through my head, I was like … why not graph the data of my instagram post trends? (all for the ego boost of course) There were a few benefits to this: Using intense mental gymnastics, and systematically ignoring all the possible disadvantages, I could spend much more time looking at my old likes and comments without guilt of wasting time, or seeming egocentric. Instead of like going through Instagram, I would be “analysing data visualisations”, which sounds much more productive.


I would list out all the possible disadvantages but as I said in the previous point I ignored it. Those possible disadvantages were ignored just like friction is ignored in physics problems 💀  .


Improving problem solving and creativity (this one is a no 🧠 brainer)


I can actually produce a *neat* graph -- I am highly messy drawing mathematical graphs (shaky hand and terrible coordination are my worst enemies. Getting started (not procrastinating and scrolling reels) You log onto instagram.com. The default login page asks for your username and password. You blindly give it to them to access the content that will eventually give you brainrot. The first post on the page is the source of brainrot: some random person singing slang. Your friend, at the same time also blindly gives his password and username to instagram.com. But the first post on the page was a fresh out of the oven cooking video, emanating the intense heat vibes to their eyes. Unbelievable How come he gets to see delicious food while I have to hear people chanting 'sigma' over and over again? (this actually happened) It's the same website but the content is different. The website is a dynamic website which changes content every time you reload. (imagine scrolling through mindlessly until you click the reload button. The relatable meme you were about to send to your best friend is now gone forever.) Step 1: Data doesn’t just appear on the page, it comes from somewhere How does the browser know what to display? Surely all the brainrot Instagram reels cannot be all stored in one file? Well the website needs a little help in displaying the data so it has to fetch the data from another source. Think of a dog fetching a bone from another place, to complete the full picture of a happy dog wagging its tail with a bone in its mouth. Good little doggy. Step 2: Well where does the data come from then? Snooping around the page won't get you anywhere. You have to go deeper. Here's a magic trick: go right click and inspect elements. Now you can see al the code that makes it work. A giant chunk of messy HTML blows up in your face. Not cool. How can you find all the data now? Well the interesting part is the network tab. Shows all the network requests being sent and the data being transferred. Think of it as a busy metro station with the trains as data requests, transferring goods (data) from station A (instagram servers) to station B (your browser). And then after looking through all the hard to read scripts in there, all the boring HTML, I found this interesting section Fetch/XHR: The source of the data river (probably) All external data is sent to and from servers here. By looking through the requests you can find lots of interesting stuff the website gets from servers, or what it sends. Most of the time though it looks like gibberish. Step 3: Scrolling through Instagram (productively) In order to find where the server gets the data, I had to scroll through a lot of network requests :). Forget scrolling through memes and reels, lets scroll through network requests!!!! Eventually after *hours* (or what felt like hours) of searching I found this: The chosen one. A list full of all the data on posts, including the link count, and the comment count, in convenient JSON format. Step 3: I got the data, now what Now we need to figure out how we can get the data by performing a similar request programatically. Introducing: Postman - not the one on the motorcycle (as if we see them anymore) but the application online that makes metaphorical data deliveries to your virtual mailbox. Step 4: Roleplay as instagram.com Time to pretend to be like a drama student with the roleplay. This sends a request to instagram just like how the browser sends a request for data. I had to match exactly how the request is made in the network tab; including copying what seems like the most trivial of metadata (that was a very painstaking process), into the Postman parameters in order to get the same data, my way. At this point, I could go on and on about how I got here, my thought process and everything that I have tried. But I know you didn't order a yappachino so moving on .💬 Step 5: Python Copy the python version of the postman request and boom -- you've got yourself a script that fetches instagram data :) Unfortunately the request body payload might contain sensitive data that may or may not be impacting my own account so I cannot share it here. All this script does is continually make a network request to grab Instagram data, passing different parameters (on which page/posts to search) and request body data to collect all the data about the posts. This is necessary because Instagram only grabs the data for around 12 posts at a time, this means that if someone has, say 24 posts I would have to send a request 2 times. It parses the JSON data and adds the number of likes into a list, and the number of comments into another list. Step 6: Non messy graphing It's graphing time. Set x values as post numbers, y values as likes and comments respectively and boom → Step 7: Graph done WOOHOO And there we have it. A shiny graph full of data, collected fresh right out of Instagram. It’s a perfect flex to use on friends and a nice way to look at Instagram productively. (We’re “analysing data visualisations” here people, not “scrolling reels”.) Hopefully this was not a bunch of waffle, and if I was yapping too much let me know so I can submit an application to become the waffle house's new host :) Introduction (this felt like hacking but it isn't) (this felt like hacking but it isn't) Going through past Instagram posts to get a short term ego boost that will dissipate in a matter of seconds I was going through my old Instagram posts trying to find how many people liked my posts. I even went through the ones in the archive (I had like 20 archived posts gathering dust). I needed an ego boost (who doesn’t like a good ego boost? If you don't, you're probably lying). And then, after a boring 5 minute period where I had a stream of random thoughts going through my head, I was like … why not graph the data of my instagram post trends? (all for the ego boost of course) There were a few benefits to this: Using intense mental gymnastics, and systematically ignoring all the possible disadvantages, I could spend much more time looking at my old likes and comments without guilt of wasting time, or seeming egocentric. Instead of like going through Instagram, I would be “analysing data visualisations”, which sounds much more productive. I would list out all the possible disadvantages but as I said in the previous point I ignored it. Those possible disadvantages were ignored just like friction is ignored in physics problems 💀  . Improving problem solving and creativity (this one is a no 🧠 brainer) I can actually produce a *neat* graph -- I am highly messy drawing mathematical graphs (shaky hand and terrible coordination are my worst enemies. Using intense mental gymnastics, and systematically ignoring all the possible disadvantages, I could spend much more time looking at my old likes and comments without guilt of wasting time, or seeming egocentric. Instead of like going through Instagram, I would be “analysing data visualisations”, which sounds much more productive. Using intense mental gymnastics, and systematically ignoring all the possible disadvantages, I could spend much more time looking at my old likes and comments without guilt of wasting time, or seeming egocentric. Instead of like going through Instagram, I would be “analysing data visualisations”, which sounds much more productive. I would list out all the possible disadvantages but as I said in the previous point I ignored it. Those possible disadvantages were ignored just like friction is ignored in physics problems 💀  . I would list out all the possible disadvantages but as I said in the previous point I ignored it. Those possible disadvantages were ignored just like friction is ignored in physics problems 💀  . Improving problem solving and creativity (this one is a no 🧠 brainer) Improving problem solving and creativity (this one is a no 🧠 brainer) I can actually produce a *neat* graph -- I am highly messy drawing mathematical graphs (shaky hand and terrible coordination are my worst enemies. I can actually produce a *neat* graph -- I am highly messy drawing mathematical graphs (shaky hand and terrible coordination are my worst enemies. Getting started (not procrastinating and scrolling reels) You log onto instagram.com. The default login page asks for your username and password. You blindly give it to them to access the content that will eventually give you brainrot. The first post on the page is the source of brainrot: some random person singing slang. Your friend, at the same time also blindly gives his password and username to instagram.com. But the first post on the page was a fresh out of the oven cooking video, emanating the intense heat vibes to their eyes. Unbelievable How come he gets to see delicious food while I have to hear people chanting 'sigma' over and over again? (this actually happened) It's the same website but the content is different. The website is a dynamic website which changes content every time you reload. (imagine scrolling through mindlessly until you click the reload button. The relatable meme you were about to send to your best friend is now gone forever.) Step 1: Data doesn’t just appear on the page, it comes from somewhere How does the browser know what to display? Surely all the brainrot Instagram reels cannot be all stored in one file? Well the website needs a little help in displaying the data so it has to fetch the data from another source. Think of a dog fetching a bone from another place, to complete the full picture of a happy dog wagging its tail with a bone in its mouth. Good little doggy. Step 2: Well where does the data come from then? Snooping around the page won't get you anywhere. You have to go deeper. Here's a magic trick: go right click and inspect elements. Now you can see al the code that makes it work. A giant chunk of messy HTML blows up in your face. Not cool. How can you find all the data now? Well the interesting part is the network tab. Shows all the network requests being sent and the data being transferred. Think of it as a busy metro station with the trains as data requests, transferring goods (data) from station A (instagram servers) to station B (your browser). And then after looking through all the hard to read scripts in there, all the boring HTML, I found this interesting section Fetch/XHR: The source of the data river (probably) All external data is sent to and from servers here. By looking through the requests you can find lots of interesting stuff the website gets from servers, or what it sends. Most of the time though it looks like gibberish. Step 3: Scrolling through Instagram (productively) In order to find where the server gets the data, I had to scroll through a lot of network requests :). Forget scrolling through memes and reels, lets scroll through network requests!!!! lot Eventually after *hours* (or what felt like hours) of searching I found this: The chosen one. A list full of all the data on posts, including the link count, and the comment count, in convenient JSON format. Step 3: I got the data, now what Now we need to figure out how we can get the data by performing a similar request programatically. Introducing: Postman - not the one on the motorcycle (as if we see them anymore) but the application online that makes metaphorical data deliveries to your virtual mailbox. Step 4: Roleplay as instagram.com Time to pretend to be like a drama student with the roleplay. This sends a request to instagram just like how the browser sends a request for data. I had to match exactly how the request is made in the network tab; including copying what seems like the most trivial of metadata (that was a very painstaking process), into the Postman parameters in order to get the same data, my way. At this point, I could go on and on about how I got here, my thought process and everything that I have tried. But I know you didn't order a yappachino so moving on .💬 Step 5: Python Copy the python version of the postman request and boom -- you've got yourself a script that fetches instagram data :) Unfortunately the request body payload might contain sensitive data that may or may not be impacting my own account so I cannot share it here. All this script does is continually make a network request to grab Instagram data, passing different parameters (on which page/posts to search) and request body data to collect all the data about the posts. This is necessary because Instagram only grabs the data for around 12 posts at a time, this means that if someone has, say 24 posts I would have to send a request 2 times. It parses the JSON data and adds the number of likes into a list, and the number of comments into another list. Step 6: Non messy graphing It's graphing time. Set x values as post numbers, y values as likes and comments respectively and boom → Step 7: Graph done WOOHOO And there we have it. A shiny graph full of data, collected fresh right out of Instagram. It’s a perfect flex to use on friends and a nice way to look at Instagram productively. (We’re “analysing data visualisations” here people, not “scrolling reels”.) Hopefully this was not a bunch of waffle, and if I was yapping too much let me know so I can submit an application to become the waffle house's new host :)

Graphing Likes and Comments on Instagram Posts to See the Trends Visually

Introduction Art looks good, and as you all know, making art is a big flex 💪. I mean, look at Picasso. His drawings sell for a whole truckload of money. However, when I try to draw something, I'm so messy or uncoordinated that a 'sketch' of a person would end up so simple that I could graph it. So I thought, what if I graph a drawing instead? (I’m not going to draw a graph; there is a fine line between them). The Desmos graphing calculator seems like the perfect way to do it. It’s easily accessible, and we can easily make something good there. Increasing brain waves When you draw, you put your pencil on the paper and move your hand to another location. What if you do the same on a Desmos graph and hope that a line appears? Well, unfortunately, the graph only moves. Boring. Well, with a few extra steps, you can basically “add additional functionality” to Desmos to make it the drawing applications of your dreams ;) (and it’s a big flex, too). Step 1: POINTS CAN MOVE???? AIN’T NO WAY If a point is defined with x and y as variables, you can somehow move the point to define a new x and y. Crazy, right? Step 2: Defy the laws of high school graphing by making a shape without using x or y By putting in a list of points through the “polygon” function, Desmos automatically draws and fills in a shape for you. This built-in function is undoubtedly the most important function used in the entire graph, as it handles all the drawing aspects. All that is left to do is to get user input (coordinates) effectively and supply the points into the function. Step 3: Custom Function There's this feature in Desmos called actions that allow for on screen events to happen in response to a click, by activating it you can write cool features that feel more like code than math. Such as: Actions require an account on the platform, so better create one now. Step 4: Defining some lists These two lists, shown by brackets [], are the x and y points where my point (a, b) is. When the point is moved by the user, the lists change. You might be wondering why the a and b are in []. This is important later. Step 5: More definitions When I click on my tiny little point here, I'm gonna use the Desmos function join() to add the values of 2 lists. The x point defined from earlier is added to the x points list through this method. This is to create a list full of x values my little dot has moved to. Same with y. As the x and y point from earlier was defined in a list e.g. [a] it ensures that it adds the value properly to the x points list, otherwise the result is weird. Join() only joins lists, so I am adding two lists together. Here, once the label “click” is clicked, the x points list will add the number from the list containing the current x point. The data is stored and saved. Step 6: It’s polygon time This defines x and y points as lists of multiple numbers that form a polygon. By putting in all the collected x values and y values a polygon is made. Here's what we have so far: Repeat the process more times, and you can get an extremely weird-shaped polygon. Step 7: OMG, WHY WON’T THIS SEPARATE You might soon find out that if you continue this the whole thing is just one big funky shape and is a mess like my handwriting. Not good. Introducing my “new shape” function! This bad boy, using similar concepts of joining lists, adds the newly created polygon (from 'shape' list) into another list 'shapes' (notice the plural). It also resets the x points and y points lists on the original shape so that you are free to define a new polygon while keeping the original intact. The original is saved in the “shapes” list. All you have to do is click “new” on the screen. As you can see, you can now create all sorts of shapes with the function without fear of being all linked together in one shape. Step 8: Draw em By continually drawing a polygon, adding it to the list, and drawing another one, you can get something vaguely resembling a drawing. Oh, and the function from step 3- it undoes all the drawings, leaving you on a fresh cartesian plane to draw on 🙂‍↕️. You don't want to continually use the undo button :( Also had to make sure to upload an image to trace if needed. Just like an online stencil (As I said, I’m not good at drawing). Step 9: The final step Here, I tested my functionality by drawing Bowser from Super Mario Bros. But you could draw anything. The sky’s the limit. Conclusion Well, I know this isn’t exactly the most practical for daily life (Photoshop has much more features to draw than this), but you should totally do this anyway, as you can go flex on your friends with this. If you really wanted to torture yourself with more high school graph equations you could do all the calculations manually and make a similar drawing. But it is so much easier and faster to just drag and drop. Best creative flex ever. Introduction Art looks good, and as you all know, making art is a big flex 💪. I mean, look at Picasso. His drawings sell for a whole truckload of money. However, when I try to draw something, I'm so messy or uncoordinated that a 'sketch' of a person would end up so simple that I could graph it. So I thought, what if I graph a drawing instead? (I’m not going to draw a graph; there is a fine line between them). The Desmos graphing calculator seems like the perfect way to do it. It’s easily accessible, and we can easily make something good there. Increasing brain waves When you draw, you put your pencil on the paper and move your hand to another location. What if you do the same on a Desmos graph and hope that a line appears? Well, unfortunately, the graph only moves. Boring. Well, with a few extra steps, you can basically “add additional functionality” to Desmos to make it the drawing applications of your dreams ;) (and it’s a big flex, too). Step 1: POINTS CAN MOVE???? AIN’T NO WAY If a point is defined with x and y as variables, you can somehow move the point to define a new x and y. Crazy, right? Step 2: Defy the laws of high school graphing by making a shape without using x or y By putting in a list of points through the “polygon” function, Desmos automatically draws and fills in a shape for you. This built-in function is undoubtedly the most important function used in the entire graph, as it handles all the drawing aspects. All that is left to do is to get user input (coordinates) effectively and supply the points into the function. Step 3: Custom Function There's this feature in Desmos called actions that allow for on screen events to happen in response to a click, by activating it you can write cool features that feel more like code than math. Such as: Actions require an account on the platform, so better create one now. Step 4: Defining some lists These two lists, shown by brackets [], are the x and y points where my point (a, b) is. When the point is moved by the user, the lists change. You might be wondering why the a and b are in []. This is important later. Step 5: More definitions When I click on my tiny little point here, I'm gonna use the Desmos function join() to add the values of 2 lists. The x point defined from earlier is added to the x points list through this method. This is to create a list full of x values my little dot has moved to. Same with y. As the x and y point from earlier was defined in a list e.g. [a] it ensures that it adds the value properly to the x points list, otherwise the result is weird. Join() only joins lists, so I am adding two lists together. Here, once the label “click” is clicked, the x points list will add the number from the list containing the current x point. The data is stored and saved. Step 6: It’s polygon time This defines x and y points as lists of multiple numbers that form a polygon. By putting in all the collected x values and y values a polygon is made. Here's what we have so far: Repeat the process more times, and you can get an extremely weird-shaped polygon. Step 7: OMG, WHY WON’T THIS SEPARATE You might soon find out that if you continue this the whole thing is just one big funky shape and is a mess like my handwriting. Not good. Introducing my “new shape” function! This bad boy, using similar concepts of joining lists, adds the newly created polygon (from 'shape' list) into another list 'shapes' (notice the plural). It also resets the x points and y points lists on the original shape so that you are free to define a new polygon while keeping the original intact. The original is saved in the “shapes” list. All you have to do is click “new” on the screen. As you can see, you can now create all sorts of shapes with the function without fear of being all linked together in one shape. Step 8: Draw em By continually drawing a polygon, adding it to the list, and drawing another one, you can get something vaguely resembling a drawing. Oh, and the function from step 3- it undoes all the drawings, leaving you on a fresh cartesian plane to draw on 🙂‍↕️. You don't want to continually use the undo button :( Also had to make sure to upload an image to trace if needed. Just like an online stencil (As I said, I’m not good at drawing). Step 9: The final step Here, I tested my functionality by drawing Bowser from Super Mario Bros. But you could draw anything. The sky’s the limit. Conclusion Well, I know this isn’t exactly the most practical for daily life (Photoshop has much more features to draw than this), but you should totally do this anyway, as you can go flex on your friends with this. If you really wanted to torture yourself with more high school graph equations you could do all the calculations manually and make a similar drawing. But it is so much easier and faster to just drag and drop. Best creative flex ever.

Making A Drawing Application on the Desmos Graphing Calculator

Let's learn about via these 45 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Graphic Design /Learn Repo 1. 174 AI Tools To Try An overview of 174 AI Tools, a very long overview. Most are free or have a free trial period, some you have to pay for immediately. I’ve broken it down into 8 c 2. 6 Best WebGL Libraries for Perfect 3D Web Graphics Modern frontend, game, and web development are the things that WebGL can transform into 3D web masterpieces. It leads to an interactive user experience. 3. 🎨 Export a .svg file using Canva ⚛️ Create .svgs using Canva.com Pro by selecting SVG from the dropdown options menu. 4. 10 Tools to Create Illustration in 2020 for Graphic Designers & Art Lovers Illustration by Nahuel Bardi 5. Design Patterns: WTF is a Shim? During design meetings at my workplace and even during other conversations with friends, the term "shim" appeared to being placed offhand, with the context not being setup properly to indicate what it is exactly that the "shim" represented. 6. Adobe Pigs Out (Again) Adobe fattens up by acquiring Figma, causing disgust and indignation amongst web designers and developers everywhere. 7. Brand Identity in the Crypto Sector. How It Started and Why It’s Changing When talking about crypto projects, people mainly speak about the qualities of the backend. 8. How To Create A Custom Digital Cartoon Character Drawing What can you do with your digitized art? 9. Design Battle: Visual Design vs Functional Design Sometimes, designers get confused on which design styles to apply to their work. It all depends on what the work is for and who the target audience is. 10. How to Optimize Your Workflow : Time is Money One of the major obstacles every engineer needs to overcome is how to meet deadlines while working with a limited amount of resources, especially for design. 11. How to Hire An Offshore UI/UX Team for Your Next Project Nowadays, businesses just can’t do without relying on the web and various kinds of digital technologies. 12. 8 Mistakes to Avoid When Designing a Logo Want to know how you can be a pro in designing a logo? Avoid the 8 mistakes listed in this blog, and you're good to go. 13. Mobile UI Design: 5 Basic App Screen Types You Must Know About There are five main app screen types that you should be aware of when you design your UI. These are the most likely to occur and make the strongest impression. 14. Top 10 Gifts for Graphic Designers These gift ideas will help you surprise graphic designers and show your appreciation of their work. 15. Inside Graphic Design: A Look at Alepo's Rebranding for the 5G Era Digital enablement and core network solutions provider Alepo has unveiled its modernized logo and updated branding. 16. A Short History of Graphic Design Jobs Graphic Designers and Artists are in high demand, but with advancements in software and the growth of the internet some fear that these jobs will die off. 17. Sculpting the 3D World: 9 Simple 3D Design Tips for Absolute Beginners 3D Design Tips for Beginners. If you want to become a 3D designer you should know these basic tips that help you to start your design career. 18. Hiring In-House vs. Virtual Graphic Designers The purpose of graphic design goes beyond visual appeal — it serves as a means of communication between you and your target audience. 19. How to Make Logo Work for Your Business? The fundamental meaning of the logo is to create an expanding business universe. Understanding this is half the success. 20. What is Your Logo's Super Power? 4 Things That Your Logo Needs in Order to Save Your Brand What is your brand logo doing for you? Is it saving your brand, swooping in like a hero? 21. 4 Must-Read Tips Before Designing Your Logo The best logos come across as simple and effortless. This is a difficult concept to wrap your head around when creating your first logo. In fact the number one issue I have had with most of my clients is their urge to overdo the design. Look at the logos of the world’s most successful brands like Nike, Twitter, or Apple. They are extremely simple and recognizable which is why I spend a good part of my time stressing this point to my clients. 22. How to Start Applying Psychology in Product Design The best designs exist to help users complete their tasks smoothly and efficiently, and they do so discreetly while remaining completely inconspicuous. 23. Real-Time Rendering Tool with Reconstructions Based on UE4 Raytracing Tech Direct use of UE4's pathtracing is a great yet not perfect solution, since UE4 uses BruteForce 24. 6 Web Design Principles You Need to Know Good web design is good business. 25. Some FAQs on the Best Programming Language for Graphics What’s the best programming language for graphics is an excellent question. It’s always curious to discover which languages graphic designers prefer. 26. Basic of  Cryptography What is Cryptography? 27. Real-World Applications of AI in Design AI is quickly becoming mainstream in many industries, including graphic design. The technology is making the designers giddy with excitement because AI can make the designing process so much faster and easier but — it’s also scary at the same time because we’ve seen what AI systems are capable of. 28. ADPList Matches Laid-Off Designers with Mentors for Free ADPLIst is a free community that matches designers and mentors. The new platform has more than 5,000 designers and mentors. 29. Get Over 50+ Free Icons for Your Projects Here Designing resources are heavily priced everywhere. But here I am sharing some resources using which you can get more than 10 Million+ Free Icons. 30. AI Graphic Design Software: The Top 7 Available Eye-catching and beautiful graphics rule digital media. Any business requires graphics in its brand promotion creatives to showcase their brand and convey their message clearly. Whether you wish to make a featured image for your blog or edit product photos for posting on social media, you need the best graphic design software to make or edit your graphics. 31. How To Improve Your Design With Right Illustrations And Animations Stunning designs and dynamic illustrations seize attention, don’t you agree? 32. How to Create Promotional Assets: An Insider's Guide into the World of Graphic Design I offer you to go through the evolutionary stages of promo materials. 33. 2023 Graphic Design Trends: A Look into the Future of Visual Design In this article, we'll take a deeper dive into the seven graphic design trends that are set to dominate in 2023. 34. How to Use Image Enhancers to Improve your Photos Different ways to enhance your photos and show you the best image enhancer to help you bring out the best in your pictures. [35. Animation/Motion Design Tokens for Complex Design Systems](https://hackernoon.com/using-animationmotion-design-tokens-for-more-complex-and-sophisticated-design-zy3t33y5) Each Animation needs a Trigger, Duration, Easing, and Property element. Design systems also play a part in creating Motion Design and Animation. 36. Introduction to Design Systems for UX/UI Designers For junior designers - those who have just started studying UX / UI design systems and those who have been working in this field for up to 1-2 years. The main goal of this article is to introduce you to the basic components of system design, to give you a basic introduction to this concept and to revise the material by demonstrating several examples of design systems that are already used by large companies. 37. Reasons Behind Creating A Website with Black Background Black has always been—if not the most popular design color—the color which designers talk about the most. It is sophisticated, energetic, mysterious, elegant, powerful, stylish, and the complete opposite of the default white. 38. Design Digest: Trends, Logo Redesign, and Fresh Memes [Part1] The ultimate design digest with fresh news, trends overview, and the best cases from the Awesomic team. Find out what was popular in March and check out memes! 39. App Icon Design: 5 Tips To Optimize For Better Visibility What makes you choose one app over another when shopping around? Is it the app icon design? The colour? The logo? The reviews? Have you ever stopped to think about how many apps you actually have on your phone? If you’re like me, you probably have a few on there that you don’t even remember what they do, or when you downloaded them in the first place. 40. How To Use Faster One Font: Quick Tips how to choose font, how to design, learn design, what's a good font, faster one font 41. How to Find Ideas for Web Design Learn how to look for ideas properly so you don’t waste time and energy in the future. 42. 4 Easy Tips to Get Your First 200 Beta Testers I’ve seen many indie product creators or team members work on their product/SaaS for months and after developing it, they mostly don’t know how to get their first beta testers. 43. Automate Designs with Bannerbear and n8n As a designer and self-proclaimed data nerd, I’ve been involved in proceduralizing creative deliverables for some time. Up until now however, my concepts always had to reconcile with the limitations of InDesign macros or my coding skills. n8n empowers me to apply my basic understanding of data objects and the interwebs to create some pretty slick automations with minimal effort. 44. Manipulate Images Using Text Commands via this AI Manipulate Real Images With Text - An AI For Creative Artists! StyleCLIP Explained 45. 30 Web Design Trends To Look For in 2021 What are the best website design trends in 2021? We covered most of the significant trends, like frosted glass, comfortable color palettes, and more. Thank you for checking out the 45 most read stories about Graphic Design on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

45 Stories To Learn About Graphic Design

When it comes to incorporating irregularly shaped text into web projects, we often end up using images. However, there may be a better way – using inline SVG and CSS to create dynamic, responsive, and accessible graphics directly within our . In this post, we'll walk you through the process of achieving this, ensuring our designs are on point while maintaining accessibility and SEO friendliness. HTML https://youtu.be/91A4-iYK1zY?embedable=true The Power of Inline SVG Have you ever encountered design elements that you thought could only be achieved with externally sourced images? Something like this, for example: Well, this may not be your only option. By leveraging inline SVG and some simple CSS, we can build captivating graphics right within our HTML documents. In this post, I'll show you exactly how to do this. Working With SVG To begin, you’ll need to start with a vector graphic of your design. Also, you’ll need to be able to edit it yourself in a vector graphics editor like Adobe Illustrator, or you’ll need to have someone who can help you do so. This is because we need to edit our images to add an invisible path for our text to be placed on. In my case, these were my original graphics: I opened them up in Illustrator and added a path to each of them for the text to sit on. I placed the path for the first banner banner here. For the purposes of this demo, I added a black stroke to it just so that you can see where the path is placed, but in the end, it will be invisible. As you can see, I made the path span the entire width of the main region of my banner so that the text can expand all along this path, accommodating phrases of varying lengths. For the second banner, I did the same. Here’s where I placed the text path: After your invisible text paths have been added, you’ll just need to export the banners as SVG. At this point, it's probably a good idea to optimize these SVG while you're at it. I like to use Jake Archibald's tool when doing this type of thing. SVGOMG Creating the Inline SVG Banner Now that you have your optimized SVG graphic with the invisible text path let's integrate it into your HTML. You'll want to paste it directly into our document: <!DOCTYPE html>
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 691.3 201.8">
      <g id="banner">
        <path d="M148.6 79.6V21.7c-6.6-3.1-13.7-5.6-20.7-7.7C86.6 1.7 42.7-1.8 0 3.7c25.3 17.2 47.2 39.5 64.1 65.1-20.7 9.5-39.2 23.8-53.6 41.4C52 112.3 93 123.8 129.3 144l19.3-64.4zM549.7 121.8v57.9c45 16.4 94 22 141.6 16.2-27.4-15.1-50.8-37.4-67.1-64 13.4-3.9 26.3-9.4 38-16.9 10.6-6.7 20.2-15.1 28-24.8-39-3.5-77.1-15.7-114.3-28.4l-26.2 60z" class="st0"/>
        <path d="M105 46c0-13.7 11.2-24.8 24.9-24.6l18.7.3v46.5c-13.5-4.8-26.5-11.1-38.5-18.8L105 46zM549.7 179.7v-39.9c14.8 5.8 28.9 13.3 41.7 22.6 0 9.6-7.8 17.4-17.4 17.4h-24.3z" class="st1"/>
        <path d="M591.3 160.8v1.6c-26.5-19.1-58.4-31-90.9-35.1-45.1-5.7-91.4 3-133.2 20.8-35.8 15.2-69 37-106.5 47.3-52.4 14.5-111 4-155.7-26.8V46.1C149.7 77 208.2 87.4 260.7 73c37.5-10.3 70.7-32.1 106.5-47.3C409.1 7.8 455.3-.9 500.4 4.8c32.5 4.1 64.4 16 90.9 35.1v120.9z" style="fill:#3dc0d1"/>
      </g>
      <path id="text-path" d="M108.7 124.1c44.2 29 101 38.4 152 24.4 37.5-10.3 70.7-32.1 106.5-47.3 41.9-17.8 88.1-26.4 133.2-20.8 31.7 4 62.7 15.3 88.7 33.6"/>
    </svg>
  </body>
</html> Now, we can add the text using a node. And, Since we’re placing the text on a path, we’ll use a element within our text node: text textPath <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 691.3 201.8">
  ...
  <path id="text-path" d="M108.7 124.1c44.2 29 101 38.4 152 24.4 37.5-10.3 70.7-32.1 106.5-47.3 41.9-17.8 88.1-26.4 133.2-20.8 31.7 4 62.7 15.3 88.7 33.6"/>
  <text>
    <textPath>Welcome Everyone!</textPath>
  </text>
</svg> To link the text to the path in our graphic we add an to our referencing the id of the invisible path for our text: href textPath <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 691.3 201.8">
  ...
  <path id="text-path" d="M108.7 124.1c44.2 29 101 38.4 152 24.4 37.5-10.3 70.7-32.1 106.5-47.3 41.9-17.8 88.1-26.4 133.2-20.8 31.7 4 62.7 15.3 88.7 33.6"/>
  <text>
    <text>
      <textPath href="#text-path">Welcome Everyone!</textPath>
    </text>
  </text>
</svg> Now, our text should appear on our path, but it won't be aligned properly. To center the text, we will need to give our path a length that is divisible by two, in our case let's just make it two. And we'll add a of one to our element, which will now make it start in the center of the path: startOffset textPath <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 691.3 201.8">
  ...
  <path id="text-path" pathLength="2" d="M108.7 124.1c44.2 29 101 38.4 152 24.4 37.5-10.3 70.7-32.1 106.5-47.3 41.9-17.8 88.1-26.4 133.2-20.8 31.7 4 62.7 15.3 88.7 33.6"/>
  <text>
    <text>
      <textPath href="#text-path" startOffset="1">Welcome Everyone!</textPath>
    </text>
  </text>
</svg> At this point, it still isn't quite centered. So we can add a style to properly align this. text-anchor textPath {
  text-anchor: middle;
} There we go, now our text is properly centered. The final styles I added to my text are: textPath {
  fill: #024949;
  font-size: 225%;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-anchor: middle;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
} And, when we resize our viewport, we can see that everything scales great. And what's great about this is that the text can be changed by simply editing the HTML. Of course, if we add too much text, it will break at some point, but it does have some flexibility. This method is not only visually appealing but also accessible and SEO-friendly, as the text is embedded in the document like any other text. Conclusion Using inline SVG and CSS, you can achieve some pretty neat stuff directly within your HTML without the need for images. The combination of accessibility, responsiveness, and SEO-friendliness makes this approach a valuable addition to your web design toolkit. Whether you're displaying messages, promotions, or information, this method offers a creative way to enhance your website's visual appeal in certain circumstances. Want to See It in Action? Check out the demo code and examples of these techniques, the code pen example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://codepen.io/brianmtreese/pen/YzdXJRy?embedable=true Also published . here

Crafting Dynamic Text Paths with HTML, SVG, and CSS: A Guide to Responsive and Accessible Graphics

Craft ropes that dance, limbs that sway, and fish that splash with the magic of physics and images in Phaser. Learn how to effortlessly create a rope-like mesh from an image, connecting it with physics boxes to infuse your game graphics with captivating animation and character. Breathing Life into Game Graphics: A Guide to Animated Mesh Distortion with Phaser As I was playing a handful of entries for yet another game jam, I found myself impressed with this game about dead fish mixed with pinball. Despite being dead, the fish looked so lifelike, but I had no idea how it was possible. I asked the developer how he did it. Intriguingly, he explained, "The fishes are 5 different sized circles connected by revolution joints with a set limit. I used the PixiJS Rope Mesh to draw the fish graphic along the bones ( )." Ref gamedevjs-2022 game jam This sounded too difficult, so I didn't even try to create it. Then, 2 years later, the itch to understand it lingered, and I decided to give it a try myself. In this blog post, I'll take you on the same journey that started with a simple question during a game jam and led to the exploration of animated mesh distortion with Phaser. We'll learn a simple yet powerful technique to add animation to our game graphics. We'll be using Phaser and MatterJs (the physics engine bundled with Phaser) to achieve this. Before we dive into the implementation, it's a good idea to understand 2 main topics: Mesh (image) distortion Physics and constraints It will be easier to go through the implementation when we understand the concept of these two topics. I won't cover all the nitty gritty details and low-level implementation. Rather, I’ll give an easy-to-understand explanation and more info on how we can effectively use them. Mesh distortion A mesh is essentially an image, but we separate the image into sections, with each segment controlling a portion of the image. The mesh is connected with triangles (or quads), each with its set of coordinates. This may sound more confusing than it is, and the following image can help clarify what I mean. I've separated the image into 4 different regions (with 10 control points.) This is our mesh. When we move the control points, the image will be distorted, and change its shape. This is mesh distortion in action. It may be easier to understand if you've worked with photo editing tools, such as Photo Shop or Affinity Photo. The tools have filters to distort the image, e.g. "Perspective" or "Mesh Warp". The principle is the same. We adjust the mesh to shape the image. I used Affinity Photo for the above image. is useful because you can have 1 image and use it for animations. By manipulating the mesh, you can simulate natural movements, deformations, and reactions to different forces, providing a more lifelike appearance to objects or characters. Mesh distortion Physics and constraints In we have a physics engine. The default is called "Arcade," and the second is called "matter," (or "MatterJS".) We'll be using "matter" in this blog post. With this engine, we can create several boxes and connect them using constraints. A constraint is a rule that tell how objects are connected. Phaser, We don't have to care about the implementation details of this, we just need to know how to use them. That's the beauty of a physics engine. All the difficult calculations and collisions are handled for us. Here's an example of how we can connect two boxes The pink line between the boxes is a constraint. The constraint can have spring-like qualities, or be stiff as a bone. The physics engine will make sure to follow the rules, keeping the boxes connected while respecting the other rules of physics, such as gravity and collisions. Connect the mesh to the boxes Once we understand how we can manipulate an image with a mesh, and connect boxes, we'll be able to create something with life. Phaser has some convenient functions to make this easier for us, but before we dive into the implementation, let me quickly go through what we will do. Create a rope mesh with Phaser Create physics boxes and connect them Each box is responsible for distorting portions of the image Update the rope mesh to align with the boxes All we've done is connect the mesh to the boxes. Phaser handles everything else for us. If we drag the boxes around, the image changes too. The implementation The complete code example is available on , and can also be found at the end of this blog post. I'll go through each part in this blog post. CodePen Creating the mesh Phaser has a built in Rope function we can use to create the mesh for us. The rope will help us distort the image correctly. createRope.js // Use Phaser's built in Rope to create a mesh from the image.
  createRope() {
    this.rope = this.add.rope(0, 0, "example");
    this.rope.setPoints(40); // a number that indicates how many segments to split the texture frame into.
  } Creating the physics We'll create boxes, and connect them together. For this example, I like to think of each box as a bone. Each bone is connected together which will create a skeleton, similar to a spine. Create two functions: which creates a list of bones createSkeleton, , which connects the bones together using constraints createSpine createSkeleton.js // Create the physics boxes
createSkeleton() {
  this.skeleton = []; // global variable. We'll use it in another function

  // Create the bones, our physics boxes.
  for (let i = 0; i < 18; i++) {
    const bone = this.matter.add.rectangle(180, 150, 20, 55, {
      friction: 1,
      restitution: 0.06
    });
    this.skeleton.push(bone);
  }
}

// Connect the bones to form our skeleton (spine)
createSpine() {
  const spinePoints = [];
  // Connect each bone with a constraint to create a spine
  // Think of the spine as the curve that goes through the center of each box
  for (let i = 0; i < this.skeleton.length - 1; i++) {
    const boneA = this.skeleton[i];
    const boneB = this.skeleton[i + 1];
    // the points are used to offset the connection betweem the boxes
    const pointA = { x: 10, y: 0 };
    const pointB = { x: -10, y: 0 };
    this.matter.add.constraint(boneA, boneB, 0.1, 1, {
      pointA,
      pointB
    });
    spinePoints.push(...[0, 0]);
  }
  // Creates a smooth line that goes through the center of our bones.
  // A spline will create a smooth curve between each point.
  this.spineCurve = new Phaser.Curves.Spline([0, 0, ...spinePoints]);
} Updating the mesh The final piece of the puzzle is to update the position of the points in our rope mesh according to the position of our skeleton. updateMesh.js updateMesh() {
    // Used for Phaser to know that we must re-render the mesh
    this.rope.setDirty(); 
    let ropePoints = this.rope.points;
    this.spinePoints = this.spineCurve.points;

  // Update the position of the points in our spline curve to the center position of each bone in our skeleton.
  // We do this to make sure we get a smooth curvature and not straight lines between each bone.
    for (let i = 0; i < this.spinePoints.length; i++) {
      this.spinePoints[i].x = this.skeleton[i].position.x;
      this.spinePoints[i].y = this.skeleton[i].position.y;
    }

    // Get a distribution of points along the curve (with the same number of points as our rope mesh.)
    const spinePoints = this.spineCurve.getPoints(ropePoints.length);
  
    // Update the points in our rope mesh according to the curve.
    for (let i = 0; i < ropePoints.length; i++) {
      ropePoints[i].x = spinePoints[i].x;
      ropePoints[i].y = spinePoints[i].y;
    }
  } With this, we've connected our boxes to an image. This technique can be used in different creative ways. Slingshot that stretches like a rubber band Wooden Bridge Fish physics Snake or larva physics Actual ropes or chains I've used the same technique in my (work in progress) game, Fins of Fury. Fish physics The fish connected to a skeleton of physics boxes with different heights. The skeleton is shaped like the fish itself. This will make collisions look real, and the fish will look and feel like an actual fish. Tentacle physics The tentacle will be used as a slingshot in the game. Each bone can be connected with a spring constraint, which helps us stretch the tentacle like a rubber band. The more we stretch the "slingshot" the more tension will be added. Complete code example Here's the complete code example, which you can find on as well. CodePen completeExample.js class Level extends Phaser.Scene {
  rope; // the rope that help us with drawing the mesh
  graphics;
  spineCurve; // the curve that goes from start to end, in the center of each bone
  graphics; // used to draw the spline (curve) that goes through the spine
  spinePoints;
  skeleton;

  preload() {
    this.load.image("example", "assets/sprites/phaser3-logo.png");
  }

  create() {
    this.createRope();
    this.createSkeleton();
    this.createSpine();
    this.createFloor();

    this.graphics = this.add.graphics();
    this.matter.world.setBounds();
    this.matter.add.mouseSpring();
  }

  update() {
    this.updateMesh();
    // this.renderRopeCenterLine();
  }

  // Use Phaser's built in Rope to create a mesh from the image.
  createRope() {
    this.rope = this.add.rope(0, 0, "example");
    this.rope.setPoints(40);
  }

  // Create the physics boxes
  createSkeleton() {
    this.skeleton = [];

    for (let i = 0; i < 18; i++) {
      const bone = this.matter.add.rectangle(180, 150, 20, 55, {
        friction: 1,
        restitution: 0.06
      });
      this.skeleton.push(bone);
    }
  }

  // Connect the bones to form our skeleton (spine)
  createSpine() {
    const spinePoints = [];
    // connect each bone with a constraint to create a spine
    for (let i = 0; i < this.skeleton.length - 1; i++) {
      const boneA = this.skeleton[i];
      const boneB = this.skeleton[i + 1];
      const pointA = { x: 10, y: 0 };
      const pointB = { x: -10, y: 0 };
      this.matter.add.constraint(boneA, boneB, 0.1, 1, {
        pointA,
        pointB
      });
      spinePoints.push(...[0, 0]);
    }
    // Creates a smooth line that goes through the center of our bones (physics rectangles)
    this.spineCurve = new Phaser.Curves.Spline([0, 0, ...spinePoints]);
  }

  updateMesh() {
    this.rope.setDirty();
    let ropePoints = this.rope.points;
    this.spinePoints = this.spineCurve.points;

    for (let i = 0; i < this.spinePoints.length; i++) {
      this.spinePoints[i].x = this.skeleton[i].position.x;
      this.spinePoints[i].y = this.skeleton[i].position.y;
    }
    const spinePoints = this.spineCurve.getPoints(ropePoints.length);
    for (let i = 0; i < ropePoints.length; i++) {
      ropePoints[i].x = spinePoints[i].x;
      ropePoints[i].y = spinePoints[i].y;
    }
  }

  createFloor() {
    const floor = this.matter.add.rectangle(0, 350, 900 * 2, 100, {
      isStatic: true
    });
  }

  renderRopeCenterLine() {
    this.graphics.clear();
    this.graphics.lineStyle(8, 0xffffff, 1);
    this.graphics.fillStyle(0xffff00, 1);
    this.spineCurve.draw(this.graphics, 64);
  }
}

const game = new Phaser.Game({
  type: Phaser.WEBGL,
  width: 900,
  height: 400,
  backgroundColor: "#ffffff",
  scale: {
    mode: Phaser.Scale.FIT
  },
  physics: {
    default: "matter",
    matter: {
      debug: false,
      gravity: { x: 0, y: 2 }
    }
  },
  loader: {
    baseURL: "https://labs.phaser.io",
    crossOrigin: "anonymous"
  }
});

game.scene.add("Level", Level, true); Final words While I initially struggled with programming, I've come to appreciate the value of learning through trial and error. It's important to maintain a determined mindset when tackling new challenges. If connecting the mesh to the boxes seems challenging, try focusing on manipulating the mesh or connecting the physics boxes separately at first. The learning process is a journey, and growth accompanies each step. If you enjoyed this blog post, you may find my other posts about game development in Phaser interesting: Fun with cloth physics and meshes Vector VS Image in your game Also published here.

Supercharging Game Graphics with Physics in Phaser

Designers have been co-creating with AI for a long time. The recent AI wave, riding on the coattails of generative AI tools like ChatGPT, has made it look as though it’s some scary new technology that we should all be afraid of. The truth is that AI features — content-aware fill and font matching, for example — have been a part of Adobe’s Illustrator and Photoshop programs since 2016. They’ve augmented designers’ work for years and there’s no need to be wary of them now. In this article, I will be sharing my personal observations of co-creating with AI in the past few months. The journey has had many pitfalls but there are upsides to what I’ve been able to create. From to social media post-generation tools, I’ve experimented with AI firsthand, and here’s why I think it’s going to be a huge assistive tool in the future for designers. AI-powered logo designs AI as a Graphic Design Tool To get the most out of AI design tools, you have to . One of the reasons why I think AI will not replace graphic designers, not at least the good ones, is because AI is severely limited in original creative thought. go to it with a collaborative mindset And therefore, its capabilities shine when you ask it to assist you — instead of giving it the sole creative control of the project. These are the areas where I think AI technologies can do some great work for design. ● Generating design ideas You can seriously cut down on your research hours when you use AI design tools for research. is a great place to go to, to kind of explore what’s in your mind. Dall-E Through text prompts, you can ask this generative AI program to create unique imagery for you. These graphics can help you fine-tune your ideas, and even introduce you to new creative pathways to explore. ● Personalization AI can be used to create personalized designs. Using AI to learn consumers’ behaviors and engagement patterns, dynamic content can be created that adjusts itself to what a user is looking for and what they are most likely to respond to. ● Design Automation Certain tasks in brand building can be automated, such as ensuring typographic consistency across branding assets. AI-generated logos are another example of design automation with the help of AI tools. ● Data-driven creative variations Designers usually create principal variations of design pieces to ensure design responsiveness across platforms. This task can be automated, sure, but you can go a step further by using AI to help inform what kind of variations you’ll need. ● Designing at scale and speed Brand designs are sometimes time-sensitive. By cutting down the design time in half, AI can ensure that all your designs go online on time and that they are designed according to the scale of the brand. The Impact of AI on Graphic Design While AI was already a big part of graphic design in some ways — AI-assisted image editing, for example — the current integration has taken the relationship to a whole new level. Here are some perks and challenges that outline this collaboration. Upsides: ● AI-powered graphic design tools save time, money, and other resources. So if you are looking for more efficient ways of using scarce design resources, AI is your new best friend. Resource efficiency: ● You can increase your work speed by assigning some work to your AI partner. Generative AI, premade templates, and AI-powered design tools can all come together to help you get your deliverables ready in time. Designing at a better speed: ● If you feel stuck with a design, use AI design databases to find inspiration. These resources help you keep on track and generally aid creativity. Less creative roadblocks: ● AI’s predictive analysis and machine learning algorithms can help you optimize your visual content based on user metrics. Optimized content means visuals that convert. Optimized visual content: ● Use AI to do your text translations or apply a certain filter or theme across all your content. Automation not only means convenience but also consistency. Automation of repetitive tasks: Challenges: ● AI isn’t magic tech; it doesn’t create something out of nothing. It just studies past designs, learns from their patterns, and makes something similar to it. So when your client needs original ideas, it’s your very human creativity that’ll count. No original thought: ● Expanding upon the previous point, with no original thought and idea, what AI creates are variations of the same thing. So expect to find a lot of similarities across AI design. Homogenization of ideas: ● AI isn’t nuanced. You can teach it design empathy but the task falls to a human designer. To add a unique human touch to the design, you’ll need human intelligence to do that. Lack of nuances and empathy: ● AI keeps evolving and expanding. To ensure it keeps aligned with your creative goals, you’ll need to keep a close check on it, always managing and fixing its parameters and standards. Technology management: ● : How much should you rely on machine assistance when creating client work? Striking the right balance will need learning and experience. A balance between human input and machine assistance The Future of Graphic Design is Augmented Intelligence When we consider the future of graphic design in the context of AI, the correct term I’ve come across is augmented intelligence. It’s the intersection where human and machine creativity combine to serve the larger purpose of efficient design systems. ● Accessibility of design Thanks to AI-powered graphic design tools, brands big and small can now take part in brand activations and startup launches on a more level playing field. These tools make it easy for good logo designs, website designs, and merchandise designs to become more accessible to the SMBs. whether you are looking to create social media posts or want to design ad campaigns from scratch, AI-powered graphic design tools allow you to use premade design templates for a variety of marketing and branding needs. At a fraction of the cost and slashing the design time in half, these tools represent more agile ways for brands to launch and promote their offers. ● Dynamic content Design was always supposed to be dynamic — created specifically to suit different users’ behaviors and preferences. Advancements in AI technologies have made it possible now. Proactive brands can harness the creative power of AI to generate multiple variations of every single graphic design piece for the brand. With differences in color, imagery, text, and other features, each variation can be used to create dynamic ad creatives (based on users’ location, past interactions with the brand, and behavior), personalized banners, and more refined product recommendations. All of this can happen in real time, providing an enhanced brand experience for the user. ● AI ethics So far, there are a lot of blurred lines when it comes to AI-made graphic design. Brands, in most cases, aren’t coming forward to declare a design AI-made, unless they need to do that for marketing purposes. Example: Nutella’s jar labels. But it will change. As the AI culture permeates deeper, brands will feel more comfortable accepting their AI graphics. Similarly, designers will do their part in helping AI engineers create ethical algorithms free of bias, prejudice, and misinformation. ● Emphasizing AI comfort in design hiring In the future, companies and brands will want people on their teams who are comfortable working with AI. Designers who have created efficient workflows where AI plays a critical role are going to be in high demand. These designers will help write the rules of the game, per se. We’ll look to them to test AI’s creative capabilities, charter ethics of working with AI technologies, and innovate ways where AI becomes the foundation of responsive design systems. ● Data-powered design decisions AI’s main power lies in analyzing massive amounts of datasets. These analyses will be used to share insights into which design pieces are more popular with the users, what part of the design is receiving the most engagement, and why one design piece is performing better than the other. Based on these insights, designers can run prompts to create more user-friendly and user-centric designs, with a higher potential for engagement and brand connection. When design decisions are based on what the data says, not a lot of room remains for mistakes. A/B testing becomes stronger and gives more accurate results. ● Rapid artwork localization We talked about dynamic content. As it becomes more commonplace, brand collaterals can enjoy rapid localization so visuals are more contextual and cultural. You can create variations of your brand merchandise that will be customized to different user segments, ensuring you are giving each one something that they’ll most likely enjoy and connect with. for its shows. Based on your behavior patterns, engagement with certain genres and themes, and your interests, etc., Netflix gives you title artworks that you will most likely click on and watch. Netflix is already doing that with personalized artwork Nutella did something similar when it used AI to create seven million jar labels — each one different and unique from the other. The jars sold out in a month. https://www.youtube.com/watch?v=RY-nK4ChLEQ&embedable=true ● The evolved role of the designer With more widespread AI acceptability, a new role for graphic designers will emerge — from creators to curators. Instead of having a creative role in the team, designers will assume leadership of the design process. While AI does the grunt work, designers will have the executive power to make final decisions. They will approve, reject, or modify what AI tools create and even green-light brand design systems for AI to work on. Conclusion AI and graphic design have a promising future together. But for that to become a reality, designers have to remain proactive and in control. By taking charge of the narrative and continuously learning and evolving, designers can use AI to harness their creativity and improve user experience with the design. Through dynamic content, accessibility, and real-time personalization, AI can make the future of graphic design all about custom experiences.

The AI Wave in Graphic Design: Shaping the Future of Creativity

When it comes to data visualization, presenting intricate information in a clear and aesthetically pleasing manner is crucial. Scalable Vector Graphics ( ) has become a versatile and powerful tool for producing interactive and dynamic visualizations. SVG This post aims to provide a thorough understanding of SVG and its importance in the field of data visualization. Content Overview Introduction to Scalable Vector Graphics Key Features of SVG for Data Visualization Coordinates and Handling in SVG Creating SVG-based Visualizations Best Practices for SVG-based Data Visualization Introduction to Scalable Vector Graphics Scalable Vector Graphics (SVG) is an XML-based vector image format that defines two-dimensional graphics with precision and adaptability. Unlike raster formats such as JPEG or PNG, SVG images are composed of geometric shapes and curves defined by mathematical equations, ensuring that they remain crisp and clear at any resolution. Raster Graphics vs. Vector Graphics: Raster graphics, also known as bitmap graphics, are a type of digital image format that represents images as a grid of individual pixels. Each pixel contains specific color and brightness information, and when combined together, these pixels form the complete image. Raster graphics are widely used for photographs, digital paintings, and images with complex color gradients or realistic textures. Here are some key characteristics of raster graphics: Raster images have a fixed resolution determined by the number of pixels they contain. Enlarging a raster image beyond its original dimensions can cause pixelation and loss of quality due to the stretching of existing pixels. Resolution-dependent: Raster images can achieve high levels of detail, especially when captured at a high resolution. However, the quality can suffer when the image is resized or zoomed in, as individual pixels become more visible. Image Quality: Common raster image formats include JPEG, PNG, GIF, and BMP. These formats store pixel information, color values, and compression settings. File Formats: Vector graphics, on the other hand, are composed of geometric shapes and mathematical equations rather than pixels. Each element in a vector graphic is defined by attributes such as position, size, color, and shape. Vector graphics are particularly suitable for creating illustrations, logos, icons, and designs that require sharp lines, smooth curves, and easy scalability. Here are some key characteristics of vector graphics: Vector graphics are resolution-independent, meaning they can be scaled to any size without losing quality. This makes them ideal for both small icons and large banners. Resolution-independent: Vector images maintain their sharpness and clarity regardless of size. They are not limited by pixel grids, so they don’t suffer from pixelation. Image Quality: Common vector image formats include SVG (Scalable Vector Graphics), AI (Adobe Illustrator), and EPS (Encapsulated PostScript). These formats store mathematical equations that define the shapes and attributes of the elements in the image. File Formats: Raster graphics are made up of pixels and are suitable for images with complex color gradients and textures, while vector graphics are composed of mathematical shapes and are ideal for designs that require scalability and precision. Here is a more comprehensive categorization of vector and raster graphics, taking into account various aspects of their expected attributes: Aspect Vector Graphics Raster Graphics Composition Composed of geometric shapes defined by equations Composed of individual pixels Resolution Independence Maintain clarity at any resolution Quality degrades when scaled up Scalability Infinitely scalable without loss of quality Limited scalability due to pixelation File Size Generally smaller file size Larger file size due to pixel data Editing Easily editable and resizable Difficult to edit without loss of quality Zooming Zoom in without loss of quality Zooming may lead to pixelation Complexity Suitable for intricate and detailed designs Best for photographs and detailed images Animation Supports animations with CSS/JavaScript Animation capabilities are limited Interactivity Supports interactive elements Limited interactivity beyond clicks/hovers Editing Flexibility Non-destructive editing with layers Destructive editing due to pixel manipulation Print Quality High-quality prints regardless of size Print quality depends on the original resolution Examples Logos, icons, illustrations Photographs, digital paintings, textures Accessibility Supports alt text and ARIA labels Limited accessibility features These inherent scalabilities make SVG an ideal choice for data visualization, as it allows visualizations to be rendered consistently across various devices and screen sizes. Let’s look at a broader perspective on the usage of SVGs for data visualization. Key Features of SVG for Data Visualization Resolution Independence Resolution independence is a cornerstone of SVG’s utility in data visualization. Traditional raster images lose quality as they are scaled up, resulting in pixelation. However, SVG images retain their clarity regardless of size. This is particularly advantageous when presenting data visualizations on various platforms with varying screen sizes and resolutions. This feature ensures that the visualizations maintain their quality and legibility regardless of the device used. Interactivity Interactivity plays a pivotal role in modern data visualization. SVG’s capability to incorporate interactive elements enhances user engagement and understanding. For instance, consider a bar chart where hovering over a bar displays additional information. This dynamic feature aids users in exploring data points without overwhelming them with excessive details. SVG’s interactivity capability allows users to interact with the visualizations, uncovering insights and details as they navigate through the data. Animation Animation is a powerful storytelling tool in data visualization. SVG supports animations through CSS and JavaScript, enabling the creation of fluid transitions and effects. For example, an animated line chart can vividly showcase the evolution of data over time, helping users perceive trends and anomalies. The animation feature in SVG adds a temporal dimension to visualizations, making it easier for users to grasp changes and patterns in the data. Accessibility Creating inclusive data visualizations is gaining prominence. SVG contributes to accessibility through features like alt text and ARIA labels. Screen readers can interpret these attributes, making visualizations comprehensible to individuals with visual impairments. Semantic structuring of SVG elements further enhances accessibility. This feature ensures that data visualizations are accessible to a wider audience, including those with disabilities, promoting inclusivity and equal access to information. Coordinates and Handling in SVG In the standard Cartesian coordinate system, the origin (0,0) is at the lower left corner, with increasing x-values moving points right and increasing y-values moving them up. SVG uses a similar cartesian coordinate system to position elements within the image, but the coordinate system starts from the top-left corner of the SVG canvas, with the X-axis increasing horizontally to the right and the Y-axis increasing vertically downward. This coordinate system enables precise placement of shapes, text, and other visual elements. Coordinates are specified using attributes within SVG elements. For instance, the element's attribute defines the X-coordinate of the circle's centre, while the attribute defines the Y-coordinate. This allows you to position circles, rectangles, paths, and other shapes accurately on the canvas. circle cx cy Furthermore, SVG allows the grouping of elements using the element. This can be particularly useful when you want to apply transformations, animations, or styling to multiple elements as a single unit. <g> Creating SVG-based Visualizations SVG Syntax Understanding SVG’s syntax is fundamental for crafting custom visualizations. SVG uses XML tags to define shapes and elements. For instance, the following code snippet creates a simple circle: <svg>
  <circle cx="50" cy="50" r="30" fill="blue" />
</svg> This snippet illustrates how SVG elements are structured using XML-like syntax, resulting in the following output: Elements like , , and can be combined to create intricate visual representations. circle rect path Data Binding Libraries like D3.js (a JavaScript library) simplify the process of binding data to SVG elements. D3.js facilitates the creation of data-driven visualizations by connecting dataset values to attributes. Consider a bar chart where the height of each bar corresponds to a data value. D3.js enables seamless integration of data and visualization, automating the process of generating visual elements based on data. <html>
<head>
    <script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
    <svg id="bar-chart"></svg>

    <script>
        const dataset = [10, 25, 15, 30, 20];

        const svgWidth = 400;
        const svgHeight = 300;
        const barPadding = 5;

        const svg = d3.select("#bar-chart")
            .attr("width", svgWidth)
            .attr("height", svgHeight);

        const xScale = d3.scaleBand()
            .domain(d3.range(dataset.length))
            .range([0, svgWidth])
            .paddingInner(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset)])
            .range([svgHeight, 0]);

        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => yScale(d))
            .attr("width", xScale.bandwidth())
            .attr("height", d => svgHeight - yScale(d))
            .attr("fill", "steelblue");

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(d => d)
            .attr("x", (d, i) => xScale(i) + xScale.bandwidth() / 2)
            .attr("y", d => yScale(d) - 5)
            .attr("text-anchor", "middle")
            .attr("font-size", "12px")
            .attr("fill", "white");
    </script>
</body>
</html> The above code snippet generates the following output: Styling and Customization SVG elements can be styled using CSS, offering extensive customization options. For instance, CSS can be used to define colors, gradients, and animations. By applying consistent styles, visualizations can align with branding guidelines or user preferences. This styling versatility enables designers to create visually cohesive and aesthetically pleasing visualizations. Here’s an example of the same: <html>
<head>
<style>

  .custom-svg {
    width: 200px;
    height: 200px;
    fill: #3498db;
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
    }
  }

</style>
</head>
<body>

  <svg class="custom-svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="40" />
  </svg>

</body>
</html> The above code snippet produces the following output: Best Practices for SVG-based Data Visualization Optimize for Performance While SVG’s flexibility is an asset, complex visualizations can impact performance. Techniques like grouping elements, simplifying paths, and utilizing CSS animations can enhance the overall performance and responsiveness of SVG-based visualizations. Optimization ensures that visualizations load quickly and provide smooth interactions. Responsiveness Creating responsive visualizations ensures a seamless user experience across devices. Combining SVG’s inherent scalability with responsive design principles allows visualizations to adapt gracefully to various screen sizes. This is particularly crucial in the era of mobile and tablet devices. Responsive design guarantees that visualizations remain usable and engaging on a wide range of devices. Use Cases SVG is suitable for a wide range of data visualization types. Let’s take an example of creating a basic bar chart-like illustration: <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">

  <line x1="50" y1="250" x2="350" y2="250" stroke="black" />

  <line x1="50" y1="250" x2="50" y2="50" stroke="black" />

  <rect x="75" y="200" width="50" height="50" fill="blue" />

  <rect x="150" y="150" width="50" height="100" fill="green" />

  <rect x="225" y="100" width="50" height="150" fill="red" />

  <rect x="300" y="50" width="50" height="200" fill="orange" />

</svg> The above code generates: Another example, for instance, is interactive maps can be created by layering SVG shapes and associating data with geographical regions. This adaptability makes SVG an essential tool for creating diverse and informative visualizations. In conclusion, SVG stands as a powerful asset for crafting compelling data visualizations. SVG empowers storytellers and analysts to present data-driven narratives in an impactful and accessible manner. Thank you for reading this far! Also published . here

Harnessing Scalable Vector Graphics (SVG) for Effective Data Visualization

is a boutique consultancy bureau focused on fintech and Web3. We closely watch developing trends in the modern technology sector. However, our team lacks technicians, back-enders, and designers at the startup level. Being far from a pure tech background, we are welcoming and eagerly exploring AI-powered technologies and tools to facilitate solving our current tasks, mainly tackled by web and graphic design. What the Money? This article is a reflection of our personal experience with several AI tools. We specialize in producing various digital products based on research and business intelligence, with the help of up-to-date online design and data management tools. We always continue improving the tactics and technics of packing and delivering WTM reports and news in the best and most attractive way. That’s why we came to AI as a prospective solution to accelerate the ‘graphic design part’ of our daily routine. What digital products do we seek AI-graphic tools for? Their main aim is to provide a basic understanding of the key financial, economic, and technological aspects of a country — for example, check out the UK or South Africa and many more on the : Mini reports or country reviews. WTM website While formatting these reports, we utilize and explore new AI tools. For instance, we are currently training a built-in AI tool in Notion (Notion AI, lifehack #1) to transform it into a WTM team helper that assists us with formatting mini reports, which we publish on the Notion platform. Thanks to the assistance of AI, our mini reports are turning out well, and Notion inherently provides the necessary and intuitively understandable functionality for customizing pages to meet any requirements. The size and format of these reports don’t require any additional external tools. For context: are a pleasant prelude to transitioning to WTM extended reports. Mini reports (coming soon) are approximately 50–70 pages and require more attention to designing and formatting. Extended reports This task led us to ask: Can we use AI tools to format reports where the work would be mainly in the hands of AI? WTM news channel on Telegram is dedicated to posting top fintech news and monthly digests. Occasionally, we curate specific posts from various news sources, which raises the question of how to gather all the essential information while adhering to the post's character limit. We aim to provide detailed descriptions for each case, but it can be challenging to fit within the constraints. To address this challenge, we have explored AI text-generative tools like ChatGPT and Jasper. These tools have proven to be highly effective in handling the summary task. They excel at condensing information and generating concise yet informative summaries of the original content. Leveraging such tools allows us to present comprehensive coverage of fintech developments while ensuring our posts remain concise and engaging for our audience. The task we are solving a completed text document formatted according to all the principles of readable material. Given: an AI application or applications where we can upload the entire document as a whole (not in fragments, this is important) and, as a result, get a designed report. The AI provides its vision for fonts, color schemes, possible decorative elements, build-up infographics, and paragraph formatting while preserving all the links embedded in the document. Essentially, we need a ready-made template with variable pages and basic settings (fonts, colors, decorations) into which we can simply upload a document as a file with a single click and obtain a finished product as output. Needed: And now, let’s delve into the search for the AI tool we need. In addition to personal experience, this article briefly overviews the AI apps market. Testing AI tools: a step-by-step guide Step 1: Taking the straightforward approach I started with the chart collecting the most popular AI-powered apps categorized by type. I reviewed and tested all the applications in the “Text” category. Some allow users to create a collaborative workspace, while others help build email newsletters and generate texts. None of them came close to my task. The main drawback was the inability to work with my existing document. Therefore, let’s move to the next step. Okay, no success with text, but I also need to add images to any formats of our work to make products more understandable and attractive, and of course, I want my visual elements to be unique. For this purpose, I found , an AI tool that creates images out of text and has different image styles to make precisely what you want. Fotor Step 2: Basic browser search Here, I tried different combinations of words to search for the specific application I needed. It started with “AI that works with existing text,” “can design the text into a report,” “can transform the text into a document,” “find design solutions,” “work with fonts and highlights,” and so on. I came across various interesting AI applications, but once again, none of them were suitable for my needs. The issue persisted: AI was eager to write the text for me but did not format it appropriately. I found one helpful tool that helps in building up an infographic. It is called , consists of templates, and is similar to . I watched a tutorial on how to use it, and its interface is very user-friendly and intuitive; there is an extensive collection of elements so that it can be suitable for any kind of business or personal use. I worked here to create the infographic for , and it took me a little time to make the requested image. Visme Canva our Green eCommerce article Step 3: Changing tactics — presentation format comes into play I recalled encountering reports formatted as presentations rather than in A4 format, and the market for AI applications for presentations would surely not disappoint. There are indeed numerous options available, catering to various preferences. Some even function as plugins in . However, the major obstacle I faced was that only some applications I found could seamlessly insert the entire document text into the slides while evenly distributing the information. They would truncate the text or suggest again, “Just provide the idea, and I will handle everything for you.” No, thank you. Automation is necessary; I need to prepare to painstakingly insert the text into predefined cells myself, as it would be a time-consuming task. Figma Later we decided that the presentation format differed from how we wanted to see our extended reports. However, this type of info presentation can find a place in our other tasks, so I suppose that is a tool that deserves attention. It is a plugin that works in Google Workspace, and it creates slides out of your text and fulfills it with design and pictures by installing an AI machine. I downloaded the first part of its article to see its power. SlidesAI transformed my text into a minimalistic presentation where I could work with design: SlidesAI Step 4: AI for AI — not a tautology but a necessary solution I came across a resource that gathered various AI tools and categorized them. The user had to enter keywords to search for the desired AI app, and it displayed subscription costs and brief descriptions. Desperation and inflated expectations played a significant role here. I tried numerous combinations and spent hours searching, but my AI grail remained elusive. Step 5: Acceptance By then, the most suitable tool (not AI) for us is . Yes, it has some AI tools, but they are simple and less potent than a self-sufficient application. However, it has enormous potential, like Google Docs, but in addition to text, it has different decorative elements. Now we are developing the design of our extended reports, monthly digests, and social media posts here, and its page with Brand Templates is beneficial. Its primary disadvantage is that it takes time to upload all text by dividing it into pieces for each page and adding space. Canva The search is not over; we hope to find the perfect solution for our task. After all, new AI solutions are emerging right before our eyes. Of course, I may have missed out on a particular application or failed to recognize the potential of a specific tool. AI solution for our request. Wanted: infinite gratitude and Part II of this story with a mention. Reward: is a fintech consultancy bureau that advises on doing business globally and talks about digital innovations, payment landscapes, and e-commerce. WTM releases monthly digests, regular reports, and articles on hot topics in these industries. ‘What the Money?’ Find available reports on the website, or follow WTM socials to learn more fintech insights and news: , , and . official blog LinkedIn community Telegram-channel

AI Graphic Tools For A Non-Designer: Practical Advice For Startups

Herramientas gráficas de IA para personas que no son diseñadores: consejos prácticos para empresas emergentes

Outils graphiques d'IA pour un non-designer : conseils pratiques pour les startups

गैर-डिज़ाइनर के लिए एआई ग्राफिक उपकरण: स्टार्टअप के लिए व्यावहारिक सलाह

非デザイナーのための AI グラフィック ツール: スタートアップ向けの実践的なアドバイス

Ferramentas gráficas de IA para quem não é designer: conselhos práticos para startups

Công cụ đồ họa AI dành cho người không phải là nhà thiết kế: Lời khuyên thiết thực cho các công ty khởi nghiệp

面向非设计师的人工智能图形工具：给初创公司的实用建议

My name is Olga Abramova. I am an experienced Design Lead focused on tech products. With this article, I want to explain why design (UX/UI and graphics) is essential for B2B (especially in the IT sector) and how it can contribute to strengthening the business's position in the market. B2B and B2C: Different priorities B2B company owners often believe is insignificant to them. The product works, engineers create cool features, and the clients pay money. Why should they be bothered by design concerns, then? Qualitative client accounting, well-established relationships with the customers, and often distributors, exhibitions, and meet-ups with the partners are the factors that play crucial roles in B2B decision-making in contrast to B2C. design The specificity of B2B is that the customer means a person who chooses in favor of a particular product and a partner company, is not always the product's end-user, as the decision on the usage of the specific product can be made by an IT administrator, CTO, or even CEO. In the , the decision on the choice of the product and its importance, precisely the company from which to purchase it, depends on many factors: including the budget, the existing IT infrastructure, and the narrow sphere of business needs. B2B framework Thus every party engaged is less concerned with the product's usability and the company's marketing image than in the B2C business model, where design and level of usability comfort often play a dominant role. That is why the design does not come in the first place. However, I believe the UX/UI and graphic design in B2B are severely underestimated. For example, revealed that companies that focused on design had 32% higher revenue than the ones that didn’t. a study by McKinsey UX/UI and Graphic Design Importance for B2B Tech Products People use B2C technologies daily, so they have some built-in design & usability expectations. Most customers use modern smartphones with up-to-date Operating Systems and other hi-tech products and B2C programs, where usability and brand design are vital to the product. Moreover, the overall level of design and usability in the world is constantly increasing because of loads of successful IT products. Users get used to a certain level of comfort while using a particular IT product and therefore develop expectations regarding the design and usability quality. It is also worth mentioning that millennials are becoming a group that makes business decisions not only in the B2C sector but also in B2B, and according to visual communication plays a crucial role to them. , the research by TechSmith Below I summarized the main reasons, which shall be taken into consideration by B2B businesses concerning UX/UI and graphic design. Usability flaws are irritating. There are several reasons why there is often a lack of usability in B2B products. First of all, so many B2B digital products created during these years used outlandish usability design solutions that became the basement of their products. Secondly, B2B digital products are harder to update because of the deep system integrations with the clients, complicated processes of decision-making, and overall misunderstanding of the benefits of efficient design solutions and their impact on the company’s revenue. . in the early to mid-2000s, there were fewer established standards in UX/UI, According to Forrester, every dollar spent on improving a brand’s user experience can fetch $100 in return As a result, it often happens that a B2B IT product has been developed for many years and got layers of UX solutions for separate parts, but as an entire product, it loses its usability and needs to be revised. An outdated brand design can downgrade up-to-date technologies. Despite the best tech solutions offered by B2B product-led tech companies, those technologies can be perceived as outdated if the first thing the customer interacts with is an outdated company and product image. It may lead to a situation when the company loses to more modern-looking competitors if there is no critical advantage in favor of the one company. In the end, people perceive visual information easier and primarily, and the product's image should correspond to its essence. On top of this, an outdated design may be perceived as a signal that the company does not seek to embrace changes. Direct B2B competitors earn points quickly if they come with a good brand and UX/UI redesign. Working on the product's UI/UX and graphic design means that the company is alive and dynamically changing for the better; stacking its products is a successful investment of time and money. The indirect competitors are a hidden threat. Nowadays, technologies are growing rapidly. B2C companies are not a danger today, but tomorrow everything can change. We see IT startups popping up every day! Sometimes IT giants buy them to widen or strengthen their possibilities. Usually, these indirect B2C competitors and startups have good UX/UI and marketing design. So, it won't be effortless to catch up with them in a day if the design and usability were not updated to a higher level in the previous years; The price of the product should match its quality. In many cases, are expensive, raising fair expectations among the clients regarding a certain level of design quality. The designer's job is to make the product look and feel appropriate and have superior usability. B2B products Design and usability influence the hiring process. Suppose the business seeks to achieve the top position in a specific market. In that case, an experienced designer is a must, and hiring a professional designer to join a company without good design and usability expertise is more challenging. I learned from HR specialists it will also be much easier to hire experienced engineers and developers for the company with good branding and UX/UI of the products; The industrial design of the devices and packaging is also crucial. Packaging is a handshake, it affects the first impression of the product, and industrial design plays a fundamental role in the everyday usage of the device. Nevertheless, it is not only a part of the offline customer experience. The images of the device and its packaging usually fulfill a significant percentage of a company's website and other marketing materials. Remember, people perceive visual information first, so no matter how good your marketing materials design, weak images of your product and packaging can spoil it. Based on my experience, I want to highlight that good can give to a B2B business: UX/UI and graphic design It attracts new clients and helps them choose favor of your product; It helps to keep old clients. It makes it easier for companies to hire highly qualified employees that help to develop the best quality product. In conclusion, UX/UI and graphic design are essential for B2B companies and benefit this business significantly. B2B, which recognizes this aspect of its product and business development, wins in the long-term perspective.

The Importance of UX/UI and Graphic Design for B2B Business Models

Introduction One of the main factors for successful machine learning is choosing the right graphics card that will allow you to process large amounts of data and perform parallel computations as quickly and efficiently as possible. Most machine learning tasks, especially training deep neural networks, require intensive processing of matrices and tensors. Note that TPUs, FPGAs, and specialized AI chips have been gaining popularity recently. What graphics card characteristics are important for performing machine learning? When choosing a graphics card for machine learning, there are a few key features to look for: Computing power: the number of cores/processors determines the parallel processing capabilities of the graphics card. GPU memory: large capacity allows you to work efficiently with large data and complex models. Support for specialized libraries: hardware support for libraries such as CUDA or ROCm speeds up model training. High-performance support: fast memory and wide memory bus provide high performance for model training. Compatibility with machine learning frameworks: you should ensure that the selected graphics card is fully compatible with the frameworks you require and supported developer tools. NVIDIA is the leader in machine learning GPUs today. Optimized drivers and support for CUDA and cuDNN enable NVIDIA GPUs to significantly accelerate computation. AMD GPUs are good for gaming, and they are less common in machine learning due to limited software support and the need for frequent updates. GPU benchmarks for machine learning Memory size (Gb) Clock speed, GHz CUDA cores Tensor cores RT cores Memory bandwidth (Gb/s) Video memory bus width (bit) Maximum power (W) NVLink Price (USD) Tesla V100 16/32 1,24 5120 640 - 900 4096 300 Only for NVLink models 14 447 Quadro RTX 8000 48 1,35 4608 576 72 672 384 360 2 Quadro RTX 8000 GPUs 8200 A100 40/80 1,41 7936 432 - 1555 5120 300 MIG 10000 A 6000 Ada 48 2,5 18176 568 142 768 384 300 yes 6800 RTX A 5000 24 1,62 8192 256 64 768 384 230 2x RTX A5000 2000 RTX 4090 24 2,23 16384 512 128 1 008 384 450 no 1599 RTX 4080 16 2,21 9728 304 76 717 256 320 no 1199 RTX 4070 12 1,92 7680 184 46 504 192 200 no 599 RTX 3090 TI 24 1.56 10752 336 84 1008 384 450 yes 2000 RTX 3080 TI 12 1,37 10240 320 80 912 384 350 no 1499 NVIDIA Tesla V100 A tensor-core GPU designed for artificial intelligence, high-performance computing (HPC), and machine learning applications. Based on the NVIDIA Volta architecture, the Tesla V100 delivers 125 trillion floating point operations per second (TFLOPS). Advantages High performance: Tesla V100 features Volta architecture with 5120 CUDA cores for very high performance in machine learning tasks. It can process large amounts of data and perform complex computations at high speed. Large memory capacity: 16 gigabytes of HBM2 memory enables efficient processing of large amounts of data when training models, which is especially useful for large datasets. The 4096-bit video memory bus allows for high data transfer rates between the processor and video memory, improving the training and output performance of machine learning models. Deep Learning: The graphics card supports a variety of deep learning technologies, including Tensor Cores, which accelerate computing using floating-point operations. This significantly reduces model training time and improves model performance. Flexibility and scalability: Tesla V100 can be used in both desktop and server systems. It supports various machine learning frameworks such as TensorFlow, PyTorch, Caffe, and others, which provides flexibility in choosing tools for model development and training. Disadvantages High cost: NVIDIA Tesla V100 is a professional solution and is priced accordingly. Its cost ($14,447) can be quite high for individuals or small machine-learning teams. Power consumption and cooling: The Tesla V100 graphics card consumes a significant amount of power and generates a significant amount of heat. This may require appropriate cooling measures in your system and may result in increased power consumption. Infrastructure requirements: To fully utilize the Tesla V100, a suitable infrastructure is required, including a powerful processor and sufficient RAM. NVIDIA A100 Delivers the performance and flexibility required for machine learning. Powered by the latest NVIDIA Ampere architecture, the A100 delivers up to five times the learning performance of previous-generation GPUs. The NVIDIA A100 supports a variety of artificial intelligence applications and frameworks. Advantages High performance: a large number of CUDA cores - 4608. Large memory size: The NVIDIA A100 graphics card has 40GB of HBM2 memory, allowing it to efficiently handle large amounts of data when training deep learning models. Supports NVLink technology: This technology enables multiple NVIDIA A100 graphics cards to be combined into a single system to perform parallel computing, which improves performance and accelerates model training. Disadvantages High Cost: The NVIDIA A100 is one of the most powerful and high-performance graphics cards on the market, so it comes at a high price tag of $10,000. Power consumption: Using the NVIDIA A100 graphics card requires a significant amount of power. This can result in higher power costs and may require additional precautions when deployed in large data centers. Software Compatibility: NVIDIA A100 graphics card requires appropriate software and drivers for optimal performance. Some machine learning programs and frameworks may not fully support this particular model. NVIDIA Quadro RTX 8000 A single Quadro RTX 8000 card can render complex professional models with realistic shadows, reflections, and refractions, giving users quick access to information. Its memory is expandable up to 96GB using NVLink technology. Advantages High performance: The Quadro RTX 8000 features a powerful GPU with 5120 CUDA cores. Support for Ray Tracing: real-time hardware-accelerated ray tracing allows you to create photorealistic images and lighting effects. This can be useful when working with data visualization or computer graphics as part of machine learning tasks. Large memory size: 48GB of GDDR6 graphics memory provides ample storage space for large machine-learning models and data. Library and framework support: The Quadro RTX 8000 is fully compatible with popular machine learning libraries and frameworks such as TensorFlow, PyTorch, CUDA, cuDNN, and more. Disadvantages High cost: Quadro RTX 8000 is a professional graphics gas pedal, which makes it quite expensive compared to other graphics cards. It is priced at 8200 dollars. RTX A6000 Ada This graphics card offers the perfect combination of performance, price and low power consumption, making it the best option for professionals. With its advanced CUDA architecture and 48GB of GDDR6 memory, the A6000 delivers high performance. Training on the RTX A6000 can be performed with maximum batch sizes. Advantages High performance: Ada Lovelace architecture, third-generation RT cores, fourth-generation tensor cores, and next-generation CUDA cores with 48GB of video memory. Large memory size: NVIDIA RTX A6000 Ada graphics cards are equipped with 48 GB of memory, allowing them to work efficiently with large amounts of data when training models. Low power consumption. Disadvantages High cost: the RTX A6000 Ada costs around $6,800. NVIDIA RTX A5000 The RTX A5000 is based on NVIDIA's Ampere architecture and features 24GB of memory for fast data access and accelerated training of machine learning models. With 8192 CUDA cores and 256 tensor cores, the card has tremendous processing power to perform complex operations. Advantages High performance: A large number of CUDA cores and high memory bandwidth allow you to process large amounts of data at high speed. AI hardware acceleration support: the RTX A5000 graphics card offers hardware acceleration for AI-related operations and algorithms. Large memory size: 24GB GDDR6 video memory allows you to work with large datasets and complex machine-learning models. Support for machine learning frameworks: The RTX A5000 graphics card integrates well with popular machine learning frameworks such as TensorFlow and PyTorch. It has optimized drivers and libraries that allow you to leverage its capabilities for model development and training. Disadvantages Power consumption and cooling: graphics cards of this class usually consume a significant amount of power and generate a lot of heat q1. To utilize the RTX A5000 efficiently, you need to ensure proper cooling and have a sufficient power supply. NVIDIA RTX 4090 This graphics card offers high performance and features that make it ideal for powering the latest generation of neural networks. Advantages Outstanding performance: NVIDIA RTX 4090 is capable of efficiently processing complex computations and large amounts of data, accelerating the training of machine learning models. Disadvantages Cooling is one of the main issues users may encounter when using the NVIDIA RTX 4090. Due to its powerful heat dissipation, the card can become critically hot and automatically shut down to prevent damage. This is especially true in multi-card configurations. Configuration limitations: GPU design limits the ability to install more NVIDIA RTX 4090 cards in a workstation. NVIDIA RTX 4080 It is a powerful and efficient graphics card that provides high performance in the field of artificial intelligence. With its high performance and affordable price, this card is a good choice for developers looking to get the most out of their systems. The RTX 4080 has a three-slot design, allowing up to two GPUs to be installed in a workstation. Advantages High performance: The card is equipped with 9728 NVIDIA CUDA cores for high-performance computing in machine learning applications. It also features tensor cores and ray tracing support for more efficient data processing. The card is priced at $1,199, giving individuals and small teams a productive machine-learning solution. Disadvantages SLI limitation: The card does not support NVIDIA NVLink with SLI functionality, which means that you cannot combine multiple cards in SLI mode to maximize performance. NVIDIA RTX 4070 This graphics card is based on NVIDIA's Ada Lovelace architecture and features 12GB of memory for fast data access and accelerated training of machine learning models. With 7,680 CUDA cores and 184 tensor cores, the card has good processing power to perform complex operations. A great choice for anyone who is just starting to learn machine learning. Advantages Sufficient performance: 12GB of memory and 7,680 CUDA cores allow you to handle large amounts of data. Low power consumption: 200 W. The low cost at $599. Disadvantages Limited memory: 12 GB of memory might limit the ability to process large amounts of data in some machine learning applications. No support for NVIDIA NVLink and SLI: The cards do not support NVIDIA NVLink technology for combining multiple cards in a parallel processing system. This can limit scalability and performance in multi-card configurations. NVIDIA GeForce RTX 3090 TI This is a gaming GPU that can also be used for deep learning. The RTX 3090 TI allows for peak single precision (FP32) performance of 13 teraflops and is equipped with 24GB of video memory and 10,752 CUDA cores. Advantages High performance: Ampere architecture and 10,752 CUDA cores enable you to solve complex machine-learning problems. Hardware Learning Acceleration: The RTX 3090 TI supports Tensor Cores technology, which provides hardware acceleration of neural network operations. This can significantly accelerate the training process of deep learning models. Large memory capacity: with 24GB of GDDR6X memory, the RTX 3090 TI can handle large amounts of data in memory without the need for frequent read and write operations to disk. This is especially useful when working with large datasets. Disadvantages Power consumption: The graphics card has a high power consumption (450W), which requires a powerful power supply. This may incur additional costs and limit the use of the graphics card in some systems, especially when using multiple cards in parallel computing. Compatibility and support: there may be compatibility and incompatibility issues with some software platforms and machine learning libraries. In some cases, special customizations or software updates may be required to fully support the video card. NVIDIA GeForce RTX 3080 TI The RTX 3080 TI is a great mid-range card that offers great performance and is a good choice for those who don't want to spend a lot of money on professional graphics cards. Advantages High Performance: The RTX 3080 features Ampere architecture with 8704 CUDA cores and 12GB of GDDR6X memory, providing high processing power for demanding machine learning tasks. Hardware Learning Acceleration: The graphics card supports Tensor Cores, which enables significant acceleration in neural network operations. This contributes to faster training of deep learning models. It's relatively affordable at $1,499. Ray Tracing and DLSS: The RTX 3080 supports hardware-accelerated Ray Tracing and Deep Learning Super Sampling (DLSS). These technologies can be useful when visualizing model results and provide higher-quality graphics. Disadvantages Limited memory capacity, 12GB, may limit the ability to handle large amounts of data or complex models that require more memory. If you're interested in machine learning, you will need a good graphics processing unit (GPU) to get started. But with so many different types and models on the market, it can be hard to know which one is right for you. Choosing the best GPU for machine learning depends on your needs and budget. or a server with a with professional-grade NVIDIA RTX 5500 / 5000 / A4000 cards. are also available. The GPU card is dedicated to the VM and cannot be used by other clients. GPU performance in virtual machines matches GPU performance in dedicated servers. Rent GPU servers with instant deployment custom configuration VPS with dedicated GPU cards Also published . here

Stories, News & Mentions about GRAPHIUM

Graphium’s Stories on HackerNoon