Design show and tell: 2017 State of Blogging Annual Report

Design show and tell: 2017 State of Blogging Annual Report

– Hey everyone, today’s video is gonna be a design show-and-tell. Now it’s been awhile since
I last did one of these, so if you weren’t subscribed
when that last one happened, basically what happens in these videos is I take a project that I
worked on the design of recently, I show you the end result, and talk you through my design process. And for this show-and-tell,
I’m gonna be showing you what turned out to be
one of my most favorite design projects that I’ve ever worked on and it just so happened to be the first project for my new job. The project is the 2017 Annual Report on the State of the Blogging Industry. Now how this report came
about is that last year, ConvertKit, the company
that I now work for, did a lot of research, they
surveyed over 850 bloggers and asked them a bunch
of different questions about how they work, where they work, how much money they make from their blog, how they make the money from
their blog, why they started, their goals, how they define
success and happiness, a whole lot of different things. Anyway, they took all
that data and made a bunch of graphs and Google sheets
to get some insights from it, and then they wrote a report
that was over 10,000 words long and then came my job, which
was to lay out that report and make those graphs beautiful, make all the information
really easy to digest and consume ’cause there was a lot there. So here is a look at the finished report. This report took the form of a PDF, which ended up being 60 pages,
and also an online version. So this project involved document design, graph design, a lot of
typography, and also web design, so a lot of things that I love working on. One of the main design
challenges with this project was the sheer amount of information
that I had to work with, it was quite overwhelming at first, so like with most things,
I just started small and I took the first few
pieces of information that get displayed, and I
started to create some graphs. Because I wanted to develop a style for the graphs throughout
that could be repeated, so that the graphs would all tie together and they’d look cohesive, but
I also wanted to make sure that things didn’t get too repetitive, which would easy to happen when
there’s a lot of bar graphs. Because this is a project for
a company that already has a brand, that was really
good because it gave me some constraints to work
with so I didn’t have to think about the fonts or the colors to use because they already had
brand fonts and brand colors. So I was able to dive in and start designing some of the graphs. There ended up being a
few different graph types throughout this report, there
was some thick bar charts, both horizontal and vertical, then there was some
thinner line bar charts for when there was a lot
of different variables. There was line charts,
there was pie graphs, and there’s also some where
I used the area of a circle to represent the
percentage number as well. So hopefully you can see from
looking at all these graphs that there is some variety,
but they do still fit together well and look like
they come from the same place. Something else I did when
I was getting really sick of bar charts and there wasn’t
really another graph type that made sense to represent them, was switch to using icons. I did this graph here that
technically a bar chart but the bars were made up
of stacks of money instead and then stacks of users for this one. Consistency is really
important with graphs, not only in the types
of graphs that you use, but also with the key and
the colors that you use to represent things, so throughout this, I tried to use the blue
and light blue to represent the pro and non-pro
bloggers, and I always had, for example, when all of the
segments were represented in a graph, I always had
them in the exact same order so that that makes it easier
to read as you go along. So in each graph that you
see that looks like this, the colors represent the same thing, and that makes it much
easier to understand and also to compare data as well. I don’t think I said yet,
but I used Illustrator to create the graphs, and
then I copy and pasted them into In Design, which
was the design software that I mostly used for
laying out this report. I focused on laying out the PDF first because that was kind of the
end product of this project and then I took the styles from that and applied them to the web
template that I created as well. For the typography of this report, I was really careful to make sure I set up a lot of character styles
and paragraph styles so that all my headings
and body copy or whatever was always gonna be consistent
and the same throughout and using those features is so
important in a long document like this because you don’t
wanna be going through 60 whole pages and changing the
font color, for example, if you find that perhaps
it’s just a little bit off. Because this was such a long document, there was a few design
decisions I made to try and break it up more and help
you keep reading through it, the main one being my section title pages. So on these pages, we have an
introduction to the section and these gradient
backgrounds are only used on the very first page,
the cover of the report, and then on these sections,
so you’re instantly trained to know that, okay,
when I see one of these, some new type of information
is coming my way. Within those sections, though,
I also had some different background colors to break things up. I had this light gray, white,
and also this dark gray. That way, as you’re scrolling through, you’re not just getting bored with seeing the same white background
constantly as you scroll, ’cause things are looking different and things are being
mixed up and so it just keeps your brain a little more switched on when you’re trying to engage
and digest this information. This is a very content-heavy report, so there’s not a whole
lot of decorative elements going on throughout it because the graphs sort of are their own
decoration and they’re their own interesting pieces that I
wanted people to be looking at, but there is one little piece that I added throughout this report, is this dot grid that you first see on
the opening page and then it’s repeated again, sometimes
at the sides of pages when there was blank space
that felt like it could use some texture, and this dot
grid is also behind every graph as well, so giving it
its own frame, I suppose. I just thought it was a nice thing to add to bring a bit of texture to this piece, but without overwhelming it and shadowing the importance of the information. Moving on to take a closer
look at the web version, like I said before, it took
styles from the PDF report, so I didn’t have to think from
the start about typography or anything like that
because all those styles had already been decided,
but there was obviously challenges like the
navigation to think about. I ended up coming up with
this table of contents box, which half overlays the header,
and I’m really proud of it, I think it works really well,
so you can just click through to the different sections in here, and I also really the way it adapts if you’re on a smaller screen size, too. At the end of every page on this report, it was really important to drive people to read the next section, so
it was really easy to get to, so they can just click through from there, and also of course on every page, we’ve got the form to
download the PDF version. I am really proud of this report, I think I had counted that I
designed over 70 graphs for it and that was a lot of
work and a lot of data to be working with, but I’m
really proud of the result, I think it turned out really
well, and it seems like people are enjoying it,
which is really great. If you would like to read it as well, then there will be a link down below, you should definitely go check it out, and let me know what
you think of it as well. I really hope you enjoyed hearing about it and if there’s anything
that I didn’t cover that you would like to
know more background on, then please feel free to ask
down below in the comments, I’d be more than happy to answer. If you like this type of video, as well, make sure you give it a thumbs up so I can know that I should do more of them. Thank you for watching this video, if you are new to my
channel, then welcome, and please hit subscribe because I make new design videos every single week, so hopefully I will see you
next week for a new one. Bye.

50 thoughts on “Design show and tell: 2017 State of Blogging Annual Report

  1. This was incredibly insightful, for all I know this sort of project could come my way during my university media job so this was definitely an eye opener 🙂

  2. Wow…you actually made something mundane like data look pretty good….I love it. Better step up my game then 🙂 Keep it up

  3. You've done an amazing job! It looks fantastic… and the website is so clean and makes so much sense… awesome!
    Which software did you use to create the website? Muse?

  4. Great work Charlie I have been asked to redo some old powerpoint presentations, they want them done in google slides and in a document design ( I think that is the same thing)

  5. Really beautiful AND functional job Charli! I rarely find out who the designer is behind popular brand projects. As a fellow designer, I'm always wondering "who did this!?". I saw your video come up in my notifications and was like, "hey! i read that report! Charli designed it! sooo cool!!".

    Thanks for sharing your design process. I enjoyed this video.

  6. love this type of video. what an interesting project to work on. it looked fantastic. I love the dot grid for texture and the menu on desktop. Such good well thought out work.

  7. @Charlie Amazing work! Thank you for sharing your process (tools you've used for various elements like graphs, ideas like adding a dotted grid for texture, colors etc.). Learning a ton watching videos on your channel.

    I've a question. How much time (in terms of days) did you invest in this project to roll it out?

  8. Great work, Charli! 🙂 I love your show & tell videos cuz they always teach me something new and it's just cool to see other people's workflow and maybe pick up on a few handy habits. Thanks for making these! 🙂

  9. Awesome ?? I would also love to know how long the process took? Also did you get feedback from the team throughout the project?

  10. I love when you make these design show and tell videos Charli! It's so interesting to see how a project like this comes together. You did an amazing job, the document and web version are BEAUTIFUL!

  11. Great work! How do you feel about Adobe XD? I'm new to your channel so I apologize if you have already covered this. If you haven't you should give it a try!

  12. I know how you feel with working on annual reports. You did a great job with the document making it visually pleasing. I will check the link for sure for inspiration. Keep up the awesome work.

  13. I enjoyed reading the report… and oh! should have realised it was your work! Well done, it's beautifully designed (I thought so at the time) and this was a great video. thanks! I would love to see more of these show and tells.

  14. This is awesome! I'm doing some document design at the moment & this has given me some ideas to try. Epic work Charlie!!

  15. Im a new sub to the channel and I absolutely loved this video! Im still pretty new to design so it was really helpful to see your design and here the reasoning behind it. I would most certainly love to see more of this type of video! Thanks

  16. Great work, well done! I always wonder, with images like the world map you had in the report do you illustrate it yourself or use a ready-to-use stock image/vector? I never did graphic design professionally but I always worry about having to illustrate everything because I'm not good at drawing. With things like the user icon or the dollar bill do you illustrate it? Also, with the graphs do you roughly estimate how the percentages will look and design it based on that or do you use other graph software to measure accurately and then illustrate yourself? Sorry for the lengthy questions, I genuinely always wanted to know how it works and never knew a professional designer I could ask!

  17. Love learning the process you went through. If you're ever in the states and want to host a design workshop definitely do it!

  18. love your videos just wondering if you or any other subscribers can recommend some youtube channels like this that show design work and talk through the process. thanks 😛

  19. Great video! It's very interesting to hear how you mixed up the graph styles but kept consistency through colors and data ordering.

  20. This video came at a perfect time. I have to design an annual report in class soon (never done one before) it I enjoyed seeing how you tackled it. If you know of other well designed annual reports or inspiration for one please share!

  21. At 3:33 –> 3:43 you say that you designed this with the end PDF result in mind. Could you expand on that please? IE: how does that effect your choices from the initial conceptual planning?
    Also, are you able to shed some light on downloading external pro printers profiles ? As in Adobe Distiller.

    (Cheers sweetie…really appreciate your knowledge sharing)

  22. I love whatt you did with all the data. Kudos!
    I'd really love to see a video on your design process for this or any other publication. Publication design process videos are a rare find IMO

Leave a Reply

Your email address will not be published. Required fields are marked *