Infographics – Web, Graphics

Understanding the Brief

Screen Shot 2017-03-22 at 13.26.43

Screen Shot 2017-03-22 at 13.26.52

Facts are presented everywhere, they help the human brain interpret knowledge. A lot of time, being creative with facts can help ever further with getting the mind going. The web is full of this, which is why i’ll attempt to solve a web based problem in the time I have for this project.

Time management plan

FACTS mindmap

Above is a mind map created to get my mind going on a range of different possibilities to do in this project. I’m swayed to creating a web design as thats something I currently find interesting and want to gain as much experience as I can doing it. I quite like the idea of doing something to do with wildlife, as i’m an animal lover and there’s a wide range of research resources available to help me along the way with this topic.

I went on the internet and had a look at some different infographics which seemed to be a really interesting way to present information in a fun and colourful way. This could be a good idea to use something like this for my final project, however I think there may be too much information on this style of infographic as well as the topic being too vague, I would attempt to narrow my topic selection down in the future.

Secondary Research

I went onto Pinterest and had a look at what different art styles intrigued me. I took snippets from different infographic pieces to get inspiration for future production and ideas. I put together a mood board to document my findings:

Topic Ideas

  • Marine Wildlife
  • Technology
  • History
  • Student Life

orcas-in-captivity-infographic

 

As marine wildlife was my first choice of topic ideas, I decided to research further into what different infographics are out there on the subject. In this particular once, a lot of information has been packed into a relatively small canvas, which wont help attracting audiences in my opinion, as it’s just too much to look at. The colour scheme is an obvious blue but a bright orange box was placed in the centre of the image, why? To attract the viewer to the main focal point/main fact. 

 

 

Shark infographic

 

Screen Shot 2017-03-20 at 15.22.07

The infographic on the left shows the results of a poll carried out showing the general publics ‘favourite marine wildlife’.  This piece actually helps in my decision of refining my topic idea as it gives me a useful insight into what audiences’ favourite animal when marine biology is is the subject. As Orca’s are often referred to as whales on top of the fact that it would also be an interesting topic, I decided to conduct whales as my main topic.

 

Kinetic Typography

 This music video is a great example of Kinetic typography. It’s obviously an amazing way to attract the audiences attention, as it features seamless transitions as well as some amount of tweening and easing, which polishes off a great finish. The aesthetics of the typography is eye catching, which will be crucial for this project, so I plan to look further into typography in the future as I think it could benefit my final outcome.

Another great example of kinetic typography, this video contains more motion graphics than the last video, which I think complimented the typography to have more of an impact on the viewer. Creating something like this is well within my time frame however I don’t think it would fit in well with my web design.

Infomercials

An infomercial is a form of television commercial, which generally includes a phone number or website. They consist of elevator music, a dominant voice and a product being used. They feel like a typical american product commercial, and would most like be a better fit for a product advertisement video, so I don’t feel this type of piece would fit in well with facts. They’re usually aired at fringe times (late at night/early morning).

Web Research

The Complete History of Social Media

screen-shot-2017-01-05-at-13-52-27screen-shot-2017-01-05-at-13-52-49

This infographic uses Flash to show you a quick overview of the history of social media. Not a huge amount of motion graphics is used in the website itself, however the small amount it’s got is quite fun to use. The monsters hand follows the mouse on each date and states a fact. I think these facts could be displayed in a better way, despite this being a decent idea.

Hungry Tech Giants

screen-shot-2017-01-05-at-14-12-52screen-shot-2017-01-05-at-14-13-00

This interactive infographic is a sortable timeline of acquisitions from five of the world’s biggest tech companies over the past 15 years. At first the website seems a bit much to take in at once, but once I found my bearings I found it to be a really useful and eye pleasing site. I was able to categorise the information shown, and by doing this, I was able to create some aesthetically pleasing circles. This sort of site is really good for attracting and keeping viewers due to multiple things for the subject to look at.

HTML5 & CSS3 Readiness

screen-shot-2017-01-09-at-09-16-09

This interactive infographic is a breakdown of HTML5 and CSS3 support in all the major web browsers up to 2013. It uses nice, aesthetically pleasing shapes in order to get information across to the viewer. Using interactive interfaces entices the viewer to stay on the website.

The Evolution of Web

screen-shot-2017-01-09-at-09-58-12screen-shot-2017-01-09-at-09-58-19

This infographic uses SVG elements, the timeline of browsers and technologies, as well as the growth of the Internet itself.

Plugging In: How Small Businesses Use Technology

screen-shot-2017-01-16-at-11-33-57

This animated infographic uses its animated elements cleverly to show the importance of testing a website with multiple resolutions, browsers, and even operating systems. I feel this website could’ve been built a lot better. In web talk, this isn’t a responsive website. I also feel the interactive part of the website doesn’t work as well as it could have.

Evolution of Insight

screen-shot-2017-01-16-at-11-50-12screen-shot-2017-01-16-at-11-50-31

This is an interactive infographic that tells the story of market research, from the start of the 20th Century all the way up to the 2000s. It’s easy to use and understand, and the graphics used are accurate and aesthetically pleasing. The site’s usability is satisfactory, it responds pretty well with smooth scrolling.

Retail Security Threats

screen-shot-2017-01-16-at-11-57-12screen-shot-2017-01-16-at-11-57-21

This animated and interactive infographic takes you through all the typical parts of a retail store where hackers might choose to try and gain access into the network. I’m not a huge fan of the graphics used. It’s obvious the designer tried to go too realistic, where as simple characters/textures would’ve looked a lot better in my opinion.

Flights Interactive

screen-shot-2017-01-16-at-12-02-04This infographic is an aviation buff’s dream. Not only is it an interactive world map that tracks all the planes and flight routes in real time, it’s also a presentation on the history of commercial flight. The site itself could be easier to navigate, however I think the graphics used in it are pretty nice. The white lines contrast with the blue’s used in the piece to make for nice patterns.

Art Styles

Clean Graphics

clean graphics 1

This piece makes for a really aesthetic viewing, due to the composition used as well as the good colour technique. The only object that has more than one shade of a colour is the main subject, the lighthouse. This makes the viewer turn their eye directly towards it. I think this works really well, so I plan to interpret this style of graphics into my design.

Windows of new york is an ongoing project started and solely designed by Jose Guizar. He uses really emotionally rich colours as well as illusive shading to catch the viewers eye. Guizar describes his love for the project as an ode to architecture and part self challenge to never stop looking up.

Clean Typography

8c0ace28c90be0d8954bd6ff046adda7

Typography plays a huge part in any design, which is why I decided to take a look at some typefaces with the same Art style as my illustrations.  The typefaces on the left instantly gives off a sleek/cool feel, especially the bottom one. This sort of typography could help in attracting more audiences than just normal text, however i’ve never been a fan of this kind of type. The shading on the bottom contains no colour which helps the design interpret a contemporary personality.

93ad9c56da54447960ab068ff4a5c686The Type Scan Alphabet of German graphic designer Tony Ziebetzki is visually striking and uniquely impressive. Intrigued by the boundaries of typographic design and the possibilities of endless format. Something like this is sure to strike attention, from the nice curves to the depth and shading used to give off a 3D effect.

Screen Shot 2017-03-22 at 20.23.04

I think this is a great idea. It’s timeless, classic, contemporary, and minimalistic all in one. The use of negative space within the type gives the audience a sense of breakage, which could entice the audience further. Gaining influence from this piece is essential as its an overall sleek design.
2ca46125851e58a1f944d8592cba837a

Another timeless piece, the texture and serifs set the scene for this visually stunning type. The texture would be a great idea for my influence however the classical theme wouldn’t fit as well.

2 Hour Piece

infgraphic

 

I was presented with the task of creating a full infographic including 3 designs with a time limit of two hours. I decided to acquire more of an ‘outside the box’ fact for this. Overall  I am really pleased with the illustrative 3d form conveyed through minimalistic shadow and shape.

 

 

 

 

“You done really well considering the time limit given. The typography used helps link back to whales as its got nice curves to it”

– Will

Gig Posters

Gig posters are a great way for bands to get across to their fans artistically. They attract attendants for live shows. Gig posters are also a great way for artists to become abstract with their work.

5e1fef7bc3787d402e02a0bd54d2f0e5

The simple illustration and and textures really intrigued me with this design. The red lips and nails contrast really well with the dull blue in the background. I feel a lot more could’ve been done with the typography in this. For example I would’ve used a typeface with more of a dangerous feel to it in order to contrast with the shark and how people feel about them.

 

 

 

 

8f13e8bac49b5359f1ebf4e69d280413

 

One of the more meaningful gig posters, the emotion through this would connect with the audience more than the art itself. The black fist contrasts with the vibrant red background, and the block text makes for this nice poster to stand out.

 

 

 

 

gig-poster-jose-gonzalez-shave-gig-poster-1_large

 

This abstract design is aesthetically pleasing due to the interesting patterns on the face. I’m not sure the blue background works with the subtle red on the face, and the vibrant red on the hand. I do however think the shaving foam works well on the face. In my opinion, the type face gives off a ‘groovy’ feel, which I personally wouldn’t have gone with.

 

 

 

gig-poster-designs-10

 

The geometrically based design is sure to catch an eye with the eye pleasing colours and aesthetically pleasing shapes. A nice print texture is used on the top of the piece. The main focus of the design could be seen as framed too, by the compelling dark grey background. The type interlinks with the design which makes the piece seem more thought out.

 

 

 

Gig Poster Inspired Piece

gotye-inspired-gig-poster

I decided to create an infographic based on one of the gig posters I researched. I wanted to show influence as much as I could on this design. I liked the textures used on the Gotye poster so I decided to use some nice print textures in my own style. I created the stars by using a print texture. I used the threshold tool and invert tool as well as the eraser on with smoothed edges and a low opacity. I like the effect this gave and think it worked really well and conveyed what I wanted to.

whale-spider-diagramweb-terms

 

 

 

 

 

 

 

 

 

 

Web Design Ideas

whale-web-1

 

This is a quick doodle of a web design that complements nice geometric shapes with wavy natural shapes.

 

 

 

 

 

 

Wireframe Designs

whale-web-2

 

whale-web-4
Some simplistic designs, minimalist influence to please the viewers eye.
whale-web-5
These are more intricate designs with more to them. This would engage the viewer more and offer more interactive elements.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

whale-web-7
An idea influenced on web design term parallax

whale-web-3I decided to put my idea into illustration. I thought the wireframes would work well with a parallax design with the whale graphics scrolling down the page at a slower pace than the background. The fishing line works well compositionally to split the information into two.

“I’m a fan of the parallax based design you done as it with give the viewer a smooth experience.”

– Randall

Typography

whale-type-2

 

 

For my pieces typography is just as important as graphics and information to connect with the viewer, this is why I decided to sketch out some designs. I used perspective 3D, block text, and my own design of type. I went on to create some image typography that worked quite well in the style I did it, so I continued to experiment;

 

 

 

whale-type-1

I designed more image typography in the shape of an Orca due to my last designs working well. I experimented with the different spaces and discovered that the negative space worked better coloured in than the type. The use of black and white colouring is obvious for complimenting the subject. I felt that by making the lines thicker between the type would make for a more realistic viewing so I carried this out in the development process of the design.

whale-type-3

type-digital

 

Digital Whale Illustrations

In order for my final web designs to be possible, I had to start constructing some of the missing pieces. I got my facts together and set out a selection of certain whale species’ to create for my final design. I used the pen tool to create most of the larger objects, and the paint brush to add in detail like shading. I used a range of colour to create a clean style of graphics and intricate shading to give more of a 3D feel to the design.

Overall I’m really pleased with the illustrations. They all follow a specific art style and have a really contemporary feel to them, which I feel is great for attracting audiences. I was limited with colour as whale’s are monochromatic, however I made the most out of what I had and managed to create some nice illustrations.

“I particularly like the detail you’ve put into the Blue Whale’s chin. I think this really works, and helps the illustration bang.”

– Jordan

Beluga WhaleBeluga Whale

I’m pleased with the digital illustration I created of the beluga whale, as it follows the art style I’m fond of and contains aesthetic value. If I could change something with this it would be the mouth, in my opinion it’s too prominent.

Facts I could include:

  • Beluga Whales love music
  • They can swim backward
  • They can use bubbles to communicate

Blue Whale

Blue whale

My first and more favoured illustration, the blue whale. Obviously the actual animal isn’t as vibrant as my illustration, but this is something I like about it. I used a range of blues to attract the eye. Tools like the pen tool and the brush helped me create the aesthetics of the whale.

Facts I could include:

  • Largest animal on earth
  • A toddler could fit into a blue whales blowhole
  • A blue whale’s tongue weighs more than an elephant
  • Blue whales can swim up to 30 miles per hour

Humpback WhaleHumpback Whale

Another favoured illustration, the humpback is of the darker coloured whales. This allowed flexibility with shading and helped give a more contemporary and clean look.

Facts I could include:

  • Humpback whale songs are audible up to 20 miles away
  • They have separate blowholes for each lung
  • Humpback whales have blonde hair

 

OrcaOrca

One of the more aesthetic illustrations, the Orca. This is one of the most famous marine animals on the planet, so it’s sure to attract a wider range of audiences. This is why I chose to to to include it in my range of whales. I used the feather edges tool on the whales patterns to give it the smoothed edges look.

Facts I could include:

  • Killer whales eat sharks
  • They have no sense of smell
  • They sleep with one eye open

 

Narwhal

Narwhal

One of my only illustrations that features colours from the opposite saturation spectrums; the Narwhal! I used a wide range of greys to create eye pleasing shading, to give audiences a more pleasurable viewing.

Facts I could use:

  • The tusk is actually a tooth
  • Closely related to the Beluga
  • They can weigh up to 1.5 tonnes

 

Experimentation

I wasn’t too sure what program I wanted to use to make my infographic web design as I, so I decided to have a look on the internet to see if there was anything that could point me in the right direction. I wanted to create an interactive infographic as most websites have them, as they seem to draw the audiences attention, As is have the Adobe Creative Cloud, Adobe Edge Animate seemed to be the best option as it would save time with installations, and adobe are know for good UI.

Now that I had my software usage figured out, I had to come up with a quick idea; and the first thing that popped into my head was an Orca diagram, and as the user moves their cursor over certain parts of the body, the specific name would pop up. Now I just had to create some aesthetically pleasing sections on my orca illustration.

https://www.sitepoint.com/designing-interactive-infographics-adobe-edge-animate-cc-2014/

anatomylarge

Screen Shot 2017-03-22 at 21.36.39

Screen Shot 2017-03-22 at 22.18.08

My next step was actually making the interactive infographic, so I exported all layers as PNGs.

Unfortunately my PC crashed during the production process of this infographic and all of my work was lost. I was too far into the project and restarting would’ve ran me off course from my time management plan

“It’s a shame your PC crashed and you lost all of your work because even as an infographic on it’s own this piece could work really well.”

– Michael

Final Production Process

Software Usage

When deciding to on what software I wanted to use, I wanted to pick something user friendly as i’m fairly new to stuff like this. After doing some research, I found out that Adobe Muse is a widely used software in the world of web designers.

Screen Shot 2017-03-23 at 02.05.41

 

Evaluation

Screen Shot 2017-03-23 at 02.15.49

I thought my final piece was quite successful working as a simple one page scroll website. Contemporary design is booming which is good, as this is my favourite style of design. Referring back to my research I wanted to keep the graphical elements in it simple besides the whales, in order to try and attract the audiences eyes to the focal points of my composition. I think this worked well, however on another day it might’ve been a good idea to go with a different graphical style and work down to the last pixel.

Whales are known to be monochromatic, which is why I invested heavily into tone with my work. I used a wide range of shading with the colours I used in order to entice the viewer further and hook them onto the composition. The shape of my illustrations is rather ‘curvy’ which could give the audience a sense of comfort in their viewing. I think this is good to help the viewer interpret the research in a better environment compared to other styles of work that could make the viewer feel on edge.

Typography played a huge part in my project as its a great way to get your message across to the viewer, as well as to get certain things stand out. I wanted to keep my contemporary theme, so I decided to use a nice sans serif font to appeal to the future as well as the past.

If I got to do this project again I would definitely experiment with using different animations and techniques on my web page to help mesmerise the audience with interactive elements. I think my website could be really powerful if I maybe added some sort of sound as well like music or foley, this would hopefully engage the audience a lot more and make it more exciting.

Overall I think my webpage works for what it’s created to do. I developed a specific idea to grab the viewer with simplicity and cleanliness. The facts are displayed clearly however I probably could’ve done more with them. One of my main focuses for this term was developing my digital illustration skills, which in my opinion I nailed with my range of whales. I definitely plan to use Adobe Muse in the future as it was a great and easy experience, which is why I plan to test myself in the future.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s