The Do's and Dont's of Infographic Design (1) Die Gebote und Verbote des Infografik-Designs (1) The Do's and Dont's of Infographic Design (1) Lo que se debe y no se debe hacer en el diseño infográfico (1) Les choses à faire et à ne pas faire en matière de conception d'infographies (1) インフォグラフィック・デザインの「やるべきこと」と「やってはいけないこと」 (1) Infografikų dizaino privalumai ir trūkumai (1) Что можно и чего нельзя делать в инфографическом дизайне (1) İnfografik Tasarımında Yapılması ve Yapılmaması Gerekenler (1) 信息图表设计的注意事项 (1) 信息圖表設計的注意事項（一） 資訊圖表設計的注意事項 (1)

Since the dawn of the Internet, the demand for good design has continued to skyrocket. Od zarania Internetu zapotrzebowanie na dobry design wciąż rośnie. С момента появления Интернета спрос на хороший дизайн продолжал стремительно расти. From Web 1.0 to Web 2.0 and beyond, designers have remained on their toes as they define the trends and expectations of our online universe. Od Web 1.0 do Web 2.0 i dalej, projektanci nie schodzili z tropu, określając trendy i oczekiwania w naszym internetowym wszechświecie. От Web 1.0 до Web 2.0 и далее дизайнеры оставались в тонусе, определяя тенденции и ожидания нашей онлайн-вселенной. The Internet is a great designer's playground, and online businesses are growing more and more appreciative of what can be gained from a bit of well-executed eye candy. Internet jest świetnym placem zabaw dla projektantów, a firmy internetowe coraz bardziej doceniają to, co można uzyskać z odrobiny dobrze wykonanego cukierka do oczu. Интернет — отличная игровая площадка для дизайнеров, и онлайн-компании все больше и больше ценят то, что можно получить от хорошо выполненной глазной конфеты. Over the past two years, this fact has become the backbone of a growing trend in online marketing: the infographic. W ciągu ostatnich dwóch lat fakt ten stał się podstawą rosnącego trendu w marketingu internetowym: infografiki. За последние два года этот факт стал основой растущей тенденции в онлайн-маркетинге: инфографики.

Infographics are visual representations of information, or “data viz” as the cool kids call it these days. Infografiki są wizualnymi reprezentacjami informacji lub „informacjami z danymi”, jak nazywają to w dzisiejszych czasach fajne dzieciaki. Инфографика — это визуальное представление информации, или «визуализация данных», как это называют крутые ребята в наши дни. The term “data viz” comes from “data visualization,” which implies that sets of data will be displayed in a unique way that can be seen, rather than read. This visualization should not be left up to interpretation, it should instead be designed in a way that provides a universal conclusion for all viewers. Ta wizualizacja nie powinna być pozostawiona interpretacji, powinna być zaprojektowana w taki sposób, aby dostarczała uniwersalnych wniosków dla wszystkich widzów. In the simplest terms, infographics are not too different than the charts and graphs that programs like Excel have been spitting out for years. 簡単に言えば、インフォグラフィックスは、Excel などのプログラムが何年もの間吐き出してきたチャートやグラフと大差ありません。 Mówiąc najprościej, infografiki nie różnią się zbytnio od wykresów i wykresów, które programy takie jak Excel wypluwały od lat.

Of course, just as Web 2.0 changed 1.0, today's infographics are far more eye-catching than simple pie charts and bar graphs. もちろん、Web 2.0 が 1.0 を変更したように、今日のインフォグラフィックは、単純な円グラフや棒グラフよりもはるかに人目を引くものになっています。 Oczywiście, tak jak Web 2.0 zmienił 1.0, dzisiejsze infografiki są znacznie bardziej przyciągające wzrok niż proste wykresy kołowe i słupkowe. Today, infographics compile many different data visualizations into one cohesive piece of “eye candy.” They have evolved with design trends, received some creative facelifts, and the Internet is now getting filled with interesting information delivered in enthralling ways. Dziś infografiki łączą wiele różnych wizualizacji danych w jeden spójny „cukierek do oczu”. Ewoluowały wraz z trendami w projektowaniu, otrzymały kilka kreatywnych liftingów, a Internet zapełnia się interesującymi informacjami dostarczanymi w fascynujący sposób.

While some design trends come and go, infographics are here to stay. Podczas gdy niektóre trendy w projektowaniu pojawiają się i znikają, infografiki nie znikną. With brands like USA Today, The New York Times and Google and even President Obama getting behind them, infographics are becoming a powerful tool for disseminating huge amounts of information to the masses. USA Today、The New York Times、Google などのブランド、さらにはオバマ大統領までもが支持するようになり、インフォグラフィックスは膨大な量の情報を大衆に広めるための強力なツールになりつつあります。 Dzięki takim markom jak USA Today, The New York Times i Google, a nawet prezydentowi Obamie, które stoją za nimi, infografiki stają się potężnym narzędziem do rozpowszechniania ogromnych ilości informacji wśród mas. Companies large and small are using infographics to build their brands, educate their audience and optimize their search engine ranking through link-building. 大小の企業は、インフォグラフィックを使用してブランドを構築し、オーディエンスを教育し、リンク構築を通じて検索エンジンのランキングを最適化しています。 This is why learning how to design a good infographic is a must, and avoiding the common pitfalls of infographic design could mean the difference between landing a big client and losing them entirely. これが、優れたインフォグラフィックをデザインする方法を学ぶことが必須であり、インフォグラフィック デザインの一般的な落とし穴を回避することが、大きなクライアントを獲得するか、完全に失うかの違いを意味する理由です。 Dlatego nauka projektowania dobrej infografiki jest koniecznością, a unikanie typowych pułapek związanych z projektowaniem infografik może oznaczać różnicę między zdobyciem dużego klienta a całkowitą jego utratą.

Wrapping Your Mind Around Data Viz Link Designing an infographic is not the same as designing a website, flier, brochure, etc. Owijanie umysłu wokół danych Viz Link Projektowanie infografiki to nie to samo, co projektowanie strony internetowej, ulotki, broszury itp. Even some of the best designers, with portfolios that would make you drool, cannot execute an effective infographic design. Creating infographics is a challenge and requires a mindset that does not come naturally to everyone. But that mindset can be gained through practice and by sticking to certain standards, the most important of which is to respect and understand data viz. Ale ten sposób myślenia można osiągnąć poprzez praktykę i trzymanie się pewnych standardów, z których najważniejszym jest poszanowanie i zrozumienie danych, a mianowicie. Here are some simple rules to follow when wrapping your mind around proper data viz. Oto kilka prostych zasad, których należy przestrzegać, gdy myślisz o właściwych danych.

SHOW, DON'T TELL A rule of cinema is to show, don't tell. The same holds true for infographic design. To samo dotyczy projektowania infografik. The foundation of any good infographic is data viz. Podstawą każdej dobrej infografiki są dane. As an infographic designer, you may or may not determine the concept and compile all of the research for the final design, but either way you are responsible for turning that information into a visually stimulating, cohesive design that tells a story and that doesn't miss a single opportunity to visualize data. Jako projektant infografik możesz, ale nie musisz, określić koncepcję i skompilować wszystkie badania do ostatecznego projektu, ale tak czy inaczej jesteś odpowiedzialny za przekształcenie tych informacji w wizualnie stymulujący, spójny projekt, który opowiada historię, a to nie przegapić jedną okazję do wizualizacji danych. Take this portion of an infographic about Twitter by ViralMS as an example:

This Twitter infographic writes out the data, rather than visualizing it. Ta infografika na Twitterze zapisuje dane, zamiast je wizualizować. What's wrong with this infographic? It breaks the first rule right out of the gate. Łamie pierwszą zasadę zaraz za bramą. When you have an opportunity to display information visually, take it. Kiedy masz możliwość wizualnego przedstawienia informacji, skorzystaj z niej. Here, the tweets per second could have at least been shown in a bar graph. Tutaj tweety na sekundę mogły być przynajmniej pokazane na wykresie słupkowym. This would enable someone to quickly look at this section and see what's going on; by seeing the various heights of the bars, the eye could have quickly gauged the differences in tweets per second per event without having to read anything. If you're having trouble adhering to this rule, try keeping all of your text on one layer of your AI file (excluding text inside charts and graphs). Jeśli masz problemy z przestrzeganiem tej zasady, spróbuj umieścić cały tekst na jednej warstwie pliku AI (z wyłączeniem tekstu wewnątrz wykresów i wykresów). Every once in a while, turn off the text layer and see whether the infographic still makes sense. Co jakiś czas wyłącz warstwę tekstową i zobacz, czy infografika nadal ma sens. If there isn't any data viz, or if a bunch of pictures are missing context, then you are doing too much telling and not enough showing. Jeśli nie ma żadnych danych lub jeśli w kilku zdjęciach brakuje kontekstu, oznacza to, że za dużo mówisz, a za mało pokazujesz. IF THE CLIENT WANTED AN EXCEL CHART, THEY WOULDN'T NEED YOU It might sound harsh, but it's true. If infographics were as simple as laying out a bunch of standard charts and graphs on a page, then clients would not need to search out great designers. Gdyby infografika była tak prosta, jak umieszczenie na stronie kilku standardowych wykresów i wykresów, klienci nie musieliby szukać świetnych projektantów. Many tools are online that can create colorful pie charts, line graphs and bar graphs, so you have to take things to the next level for your design to stand out. Wiele narzędzi jest dostępnych online, które mogą tworzyć kolorowe wykresy kołowe, wykresy liniowe i wykresy słupkowe, więc musisz przejść na wyższy poziom, aby Twój projekt się wyróżniał. Taking the data from above, which of the two graphs below do you think would make a client happier? Biorąc powyższe dane, który z poniższych wykresów uszczęśliwiłby klienta?

Two ways to visualize the data from the Twitter example above. If you answered Graph B, you're catching on. Of course, not all data lends itself to creative and unique graphs. Oczywiście nie wszystkie dane nadają się do tworzenia kreatywnych i niepowtarzalnych wykresów. Graph A might work very well if the rest of the infographic shared a similar aesthetic. Sometimes you just have to bite the bullet and produce a traditional bar graph or pie chart; nevertheless, always consider ways to dress it up, as in the examples below: Czasami wystarczy ugryźć kulkę i stworzyć tradycyjny wykres słupkowy lub wykres kołowy; niemniej jednak zawsze zastanów się, jak to ubrać, jak w poniższych przykładach:

Ways to dress up simple graphs for an infographic.

TYPOGRAPHY SHOULD NOT BE A CRUTCH TYPOGRAFIA NIE POWINIEN BYĆ KULĄ

Typography can make or break a design, but it should not be the solution to a data viz problem. Typografia może stworzyć lub zepsuć projekt, ale nie powinna być rozwiązaniem problemu związanego z danymi. More often than not, designers begin an infographic with a great deal of energy and excitement, but they lose steam fast as they continue down the page. Najczęściej projektanci rozpoczynają tworzenie infografiki z dużą dozą energii i podekscytowania, ale szybko tracą rozpęd w miarę przechodzenia w dół strony. This often leads to quick decisions and poor solutions, like using typography to show off a big number instead of visualizing it in some way. Here's an example: TravelMatch's infographic highlights too much. Infografika TravelMatch zbyt wiele podkreśla. Whenever I see this, I'm reminded of the “Where's the beef?” ad campaign, and I think, “Where's the data viz?” Although Sketch Rockwell is one of my all-time favorite fonts, this is a perfect example of relying too much on typography. Ilekroć to widzę, przypomina mi się „Gdzie jest wołowina?” kampanii reklamowej i myślę „Gdzie są dane?” Chociaż Sketch Rockwell jest jedną z moich ulubionych czcionek wszechczasów, jest to doskonały przykład zbytniego polegania na typografii. Any time a research number is provided to you for an infographic, ask yourself how it can be visualized. Za każdym razem, gdy otrzymasz numer badania do infografiki, zadaj sobie pytanie, jak można go zwizualizować. Percentages can always be visualized with creative pie charts; numerical values in a set can usually be turned into a unique bar graph; and when numbers don't fit on a consistent scale, you might be able to visualize them in a diagram. Here is another way the above data could have been visualized:An example of how to visualize the TravelMatch data, rather than relying on typography.

TYPOGRAPHY HAS ITS PLACE

All that being said, typography does have its uses, which should not be ignored when creating an infographic. Biorąc to wszystko pod uwagę, typografia ma swoje zastosowania, których nie należy ignorować podczas tworzenia infografiki. Most of the time, you will want to focus your creative typographical energies on titles and headings. The title of the infographic is a perfect opportunity to use a fun and eye-catching font and to give it a treatment that fits the theme or topic. Tytuł infografiki to idealna okazja, aby użyć zabawnej i przyciągającej wzrok czcionki oraz nadać jej obróbkę pasującą do tematu lub tematu. Just make sure the title isn't so distracting that it takes away from the reason we are looking at the infographic in the first place. The truth of the matter is that some infographic topics are boring, but the right title design can engage people enough to scroll through. Prawda jest taka, że niektóre tematy infografiki są nudne, ale odpowiedni projekt tytułu może zaangażować ludzi na tyle, aby przewijać.

Similarly, headings help to break up an infographic and make the data easier to take in, giving you another chance to let your font-nerd flag fly. Podobnie nagłówki pomagają rozbić infografikę i ułatwiają przyswajanie danych, co daje kolejną szansę na powieszenie flagi frajerów z czcionkami.

The title of an infographic is your chance to draw attention to the design. Organization And Storyline Link Organizing an infographic in a way that makes sense and that keeps the viewer interested is not always easy, but it's part of the job for most infographic designers. Usually, you will be given a lot of data and will need to create a visual story out of it. Zazwyczaj otrzymasz dużo danych i będziesz musiał stworzyć z nich wizualną historię. This can be challenging at first, but you can follow some general rules to make things easier.

WIREFRAME THE INFOGRAPHIC

Wireframing an infographic enables you to work out a storyboard and layout for the design. Tworzenie szkieletu infografiki umożliwia opracowanie scenorysu i układu projektu. You may have an idea of the story you want to tell, but as you start laying things out, you might hit a wall and have to start over. Możesz mieć pomysł na historię, którą chcesz opowiedzieć, ale kiedy zaczniesz układać rzeczy, możesz uderzyć w ścianę i zacząć od nowa. Having to reorganize after having already done a lot of the design is incredibly frustrating. Avoid this by setting up your storyline at the start to determine what data to show and how.Set aside an hour to sketch things out and make sure it all makes sense. Unikaj tego, konfigurując swoją historię na początku, aby określić, jakie dane i jak pokazać. Poświęć godzinę na naszkicowanie rzeczy i upewnienie się, że wszystko ma sens. This will also help to ensure that the color palette you will choose drives attention to the important points and keeps the eye flowing down the page. Pomoże to również upewnić się, że wybrana przez Ciebie paleta kolorów zwraca uwagę na ważne punkty i sprawia, że wzrok spływa po stronie.

THINK OUTSIDE THE BOX MYŚL NIESZABLONOWO

As you wireframe the infographic, you will identify section breaks that help to tell the story. Kiedy tworzysz szkielet infografiki, zidentyfikujesz podziały sekcji, które pomogą opowiedzieć historię. Most infographics online have a vertical flow, in which each section has a heading to distinguish it from the last. Większość infografik online ma pionowy przepływ, w którym każda sekcja ma nagłówek, aby odróżnić ją od poprzedniej. This gets boring fast. Organizing the data and sectioning off information without relying entirely on headings and color breaks is a good way to break the monotony. Porządkowanie danych i rozdzielanie informacji bez polegania wyłącznie na nagłówkach i łamaniu kolorów to dobry sposób na przełamanie monotonii.

For instance, rather than going for a typical one-column layout, you could use two columns in certain parts. Na przykład zamiast typowego układu jednokolumnowego możesz użyć dwóch kolumn w niektórych częściach. You could also break up sections with borders, with backgrounds of different shapes or give the entire design a road or path theme. Możesz także podzielić sekcje z obramowaniem, z tłem o różnych kształtach lub nadać całemu projektowi motyw drogi lub ścieżki. Here's some outside the box layouts to get your creative juices flowing:There are many unique ways to lay out an infographic that will keep the viewer engaged. Oto kilka nieszablonowych układów, które rozbudzą Twoje kreatywne soki: Istnieje wiele unikalnych sposobów na rozplanowanie infografiki, które przyciągną uwagę widza. TELL A STORY

All good stories have a beginning, middle and end. Infographics deserve the same treatment. Infografiki zasługują na takie samo traktowanie. At the beginning of the infographic, introduce the problem or thesis. Na początku infografiki przedstaw problem lub tezę. From there, back it up with data. Stamtąd utwórz kopię zapasową danych. Finally, end the infographic with a conclusion.

VISUALIZE THE HOOK WIZUALIZUJ HACZYK

Every good infographic has a hook or primary take-away that makes the viewer say “A-ha!” As a designer, you should make this hook the focal point of the design if at all possible. Każda dobra infografika ma haczyk lub główny element na wynos, który sprawia, że widz mówi „A-ha!” Jako projektant, jeśli to możliwe, powinieneś uczynić ten haczyk centralnym punktem projektu. Placing the hook at either the center or very end of the infographic is usually best, so that it grabs more attention. Zazwyczaj najlepiej jest umieścić haczyk na środku lub na samym końcu infografiki, aby przykuwał większą uwagę. Give the most important information the most visual weight, so that viewers know what to take away. Nadaj najważniejszym informacjom najbardziej wizualną wagę, aby widzowie wiedzieli, co zabrać. Here are some examples of well visualized hooks: Oto kilka przykładów dobrze zwizualizowanych haczyków:

Hooks should either be in the center, beginning, or end of the infographic and need the greatest visual emphasis. Hooki powinny znajdować się na środku, na początku lub na końcu infografiki i wymagają największego wizualnego podkreślenia. Cleaning Things Up With Color Link The difference a color palette can make is amazing, especially in the world of infographics. Sprzątanie za pomocą Color Link Różnica, jaką może zrobić paleta kolorów, jest niesamowita, szczególnie w świecie infografik. The right palette can help organize an infographic, evangelize the brand, reinforce the topic and more. Odpowiednia paleta może pomóc uporządkować infografikę, ewangelizować markę, wzmocnić temat i nie tylko. The wrong palette can turn a great topic into an eyesore, harm the brand's image and convey the wrong message. Niewłaściwa paleta może sprawić, że świetny temat stanie się nieprzyjemny, zaszkodzić wizerunkowi marki i przekazać niewłaściwą wiadomość. Here are some tips to consider when choosing colors for your infographic. Oto kilka wskazówek, które należy wziąć pod uwagę przy wyborze kolorów do infografiki.

MAKE IT UNIVERSAL

In Web design, it's always important to choose a palette that fits the theme of the website and that is neutral enough for a diverse group of visitors. Because infographics are primarily shared online, picking the right palette for an array of visitors is equally important. Ponieważ infografiki są udostępniane głównie w Internecie, wybór odpowiedniej palety dla szerokiego grona odwiedzających jest równie ważny. You must also consider what looks good online.

For instance, dominant dark colors and neons typically do not translate well on infographics; neon on black can be hard to read, and if there is a lot of data, taking it all in will be a challenge. Na przykład dominujące ciemne kolory i neony zazwyczaj nie przekładają się dobrze na infografiki; neon na czarnym tle może być trudny do odczytania, a jeśli danych jest dużo, zebranie ich wszystkich będzie wyzwaniem. Also, avoid white as a background whenever possible. Unikaj również białego tła, gdy tylko jest to możliwe. Infographics are often shared on multiple websites and blogs, most of which have white backgrounds. If your infographic's background is also white, then deciphering where it begins and ends will be difficult. Jeśli tło Twojej infografiki jest również białe, rozszyfrowanie, gdzie się zaczyna, a gdzie kończy, będzie trudne. A THREE-COLOR PALETTE IS EASY ON THE EYES

With all of the data that goes into an infographic, make sure that the reader's eye easily flows down the page; the wrong color palette can be a big barrier to this. Choose a palette that doesn't attack the senses. Wybierz paletę, która nie atakuje zmysłów. And consider doing this before you start designing, because it will help you determine how to visualize the various elements.

If picking a color palette is hard for you, stick to the rule of three. Jeśli wybór palety kolorów jest dla Ciebie trudny, trzymaj się zasady trzech. Choose three primary colors.