D4DME – The Website Design

As discussed in our first group meeting today (Here), Kyle and I decided to do some research into logo and icon design for our website. This is mostly Kyle’s area, as I said that I didn’t mind working on the PHP to start with if he wanted to work on the design (though I decided to give Kyle a hand as there isn’t much I can contribute until Chace creates the base code for our website). Chace was in charge of creating a mock-up of our first design idea, so in the meantime I decided to play around in illustrator to make a logo. My logo is only going to be a place holder, as Kyle is working on some more detailed designs for the actual logo.

The working title for our website is ‘Starving Students’, which is going to be a quick and easy recipe site with different filtering criteria aimed at students. This gave me a few ideas to start with, based mostly around how to represent the idea of students and food.

Untitled4

Screenshot of Illustrator

After doing a quick Google search for ‘student icon’ I found that the student hat was the most widely accepted icon to represent students. I decided to make a simple vector of the hat. My initial idea to integrate food into the design was to include a knife and fork somewhere alongside the hat, so I tried out different positions.

Untitled5

Screenshot of Illustrator

I decided to go for the top left design, as I thought that the cutlery fit nicely underneath the hat and didn’t take up any unnecessary room.

Untitled6

Screenshot of Illustrator

The last addition to the logo was a circle backdrop with a thick border to contain the icon. The colours of the logo are not final, merely place holders until we have a design for our website.

Advertisements

Infographic Poster – The Poster

Untitled3Untitled34

As stated previously, the first change to be made was the colour of the mountains. I agreed with the feedback I received saying that the greens blended in to the poster and didn’t stand out for themselves from the water. This is also why I decided to add a strip of brown at the bottom of the hill to represent more clearly the flow of ground water, as it proved difficult to see the strip of water whilst it overlaid the green of the grass. It also looked too similar to the river flowing in the same direction, so I wanted to clear up any confusion.

The most major change that I made to the poster was my attempt to make the piece come together as a whole rather than feeling segregated. By having the key (which represents the change in water states) beneath the title, the poster felt split into three different sections which had a negative impact on the composition as a whole poster. To remedy this, I decided to move the key to the bottom so that it was not splitting the title and cycle apart. The poster, however, still felt split between the title and cycle image, so I decided to move the sun up into the top right corner and have a group of sun rays extending over the whole poster. I feel that this brought the poster together as one image rather than three separate sections and that it looked a lot more professional.

The final change that I made to the final design was on the actual cycle itself. There were various snippets of feedback from my class mates and friends about things I could include/take out that would make the cycle more obvious. The first of these was the most obvious; I was told I should include actual rain and water vapour connecting to the clouds to show the cycle in action. This was a simple task. The next was that the arrow leading to the tree confused the cycle slightly, as plant uptake of water I not part of the major water cycle (one of my friends said that if I’m representing plants on there then why aren’t there humans or animals drinking water as well?). It made sense to remove the arrow in order to keep the focus on the primary water cycle. The last major change was trying to make the ‘snow melt’ on the mountain more obvious. I did this by adding streams of water falling from the drooping chunky of snow into the mountain pool.

After finishing all of these changes, I believe that my poster is at a professional standard of work. I am pleased with the end result and look forward to hearing what my seminar group think in our class critique. Of course, there is always room for improvement, and I am sure that I would be able to make my poster much better if I had a longer time to work on it. However, I am satisfied with the end result and think that it has improved greatly after all of the feedback I have received.

Infographic Poster – The Design (Part Three)

The next stage was to create the actual main body of the poster. My initial idea was to break each part of the cycle up into individual sections like one of the infographics I looked at before, though I soon realised that would make it seem too literal and would remove the poster element from the design. So instead, I decided to create a basic scene that contained the primary part of the water cycle (that being evaporation, condensation, rain, river flow into the sea and repeat).

UntisdfghjktledThe initial scene without any prompts for a cycle turned out quite nicely. When receiving feedback from my peers, however, I realised that the green hues of the grass and mountains didn’t work particularly well with the blues of the water and sky, as they experienced the same problem as I had earlier (blending of colours). I had originally changed the mountains to green so that the didn’t look out of place with the grass, though I plan to change them back to a browner hue so that they compliment the blues of the colour scheme. (This change will be shown in the next post, however, as I had actually made more progress on the poster before changing quite a few details as a result of feedback).

Untitled3This is how the poster looked after every part had been pieced together. At this point, I was happy to have a complete poster, though the feedback I received from several people on how to improve it was very useful. My next post will contain a side by side comparison of the before and after as well as a commentary on what has changed and why.

Infographic Poster – The Design

I now feel ready to start developing my design ideas for the poster. It seemed only logical to start with my ideas for the ‘title’ part of the poster, as this would be the only section that included text. I wasn’t able to acuratly portray my design idea in my sketchbook, though the rough layout is there.

SAM_1214

For the ‘Water’ part of the title, I want to try and incorporate a tap into the ‘t’ so that a drop of water can be falling out of it. I also want to attach arrows to the ‘Cycle’ part of the title so that both key words follow a pictorial theme and blend in with the rest of the poster.

Untitled (2)After playing around in Illustrator, I decided to add a rain-cloud to either side of the title, as well as some sun rays behind the text to bring the colours together. After showing my designs to a few of my friends, they told me that the word ‘Water’ looked strange because there was too much of a gap in-between the ‘t’ and the ‘e’, as well as saying that the ‘t’ didn’t look like a tap until I pointed it out to them. I want my poster to be as clear as possible, which means the title, being the first thing that my audience will see, has to be clear.

idea one

My first solution was to try moving the letters closer together and have the water drop overlap the ‘e’ instead of falling into empty space. This didn’t work for two reasons: the first was that the drip blended in to the ‘e’, as the colours were too similar in hue, and the second was that this didn’t solve the issue of the ‘t’ not looking enough like a tap.

titleMy next solution to this was to change the letter that was meant to be the tap. The ‘r’ was a much better letter choice, plus that also meant that there would be no awkward spacing in-between letters. This removed the center alignment of the title from the page, though that was a small price to pay for making the title much clearer. I also removed the question from the title, leaving it as just “The Water Cycle”, as I received feedback from one of my seminar leaders that the question made the poster feel far too literal.

Infographic Poster – The Ideas

After producing a mindmap of the main terminology used to describe the water cycle, I thought it would be a good idea to start sketching some illustrations that could represent each stage of the cycle. Whilst sketching, I tried to think of ideas that could be represented in flat design (or similar) so I aimed to keep the designs relatively simple. This actually proved challenging with certain keywords, as I found it difficult to think of one, simple image that could sum the whole process up in flat colour.
SAM_1203

Although at this point I had only drawn a small amount, I was curious to see how I might produce these ideas in vector form. Working with vector software is something I am fairly new to, so I thought it would be a good idea to start playing around in Illustrator. Having missed the Illustrator workshop due to being ill, I am experimenting with the software to see what I can and cannot do before looking into Lynda.com tutorials.

Untitled-1 As a test, I decided to try and create the mountain sketch that I produced to represent ‘snow melt’ on the water cycle. As you can see, the outcome looks quite a bit different to the sketch, as it is less symmetrical and the shading is at a different angle than originally planned. I realised that this was because of how I manipulated the anchor points of the snow, which caused it to spike off in random directions rather than a clean cut across the top of the mountain. However, I have to say that I actually prefer this, as it looks more like a mountain rather than a rounded triangle with a white tip. I wanted to keep the design as simple as possible, though I am aware that the mountain could be mistaken for something else. My class mate remarked on how it reminded them of a dorito, so I will need to refine the design idea before using it in my actual poster.

As for using Illustrator, it is apparent that I need to experiment a lot more with the software before I will be able to start producing my ideas in a decent quality. In the meantime I plan to do some more research into design styles that might make flat design look a bit more engaging.

Infographic Poster – The Style

Today we were introduced to the idea of ‘flat design’ in our PAL session. Flat design is a very basic style of illustration that looks professional for things such as web design and posters. Logos in particular are making a move towards flat design, such as the symbols for apps on android and apple.

With a limited range of shapes and colours, the above image is still very easy to decipher. You can clearly interpret what everything is meant to be, as everything is front facing regardless of its actual position in reality.

Create a Long Shadow in Flat Design With Adobe Illustrator

I particularly like the drop shadow on these symbols. It creates a theoretical third dimension to the designs even though they are completely flat. The symbols are also slightly offset from white in order to soften the boundaries between them and the coloured backgrounds.

As I am going for an ‘easy to understand’ approach with the water cycle, I think that flat design would look appropriate for my infographic poster. Most flat designs are created as vectors in software such as Adobe Illustrator or free to use software like Inkscape. As we are required to produce our poster in vector format, I know that flat design will be a good place to start.

We have 24/7 access to the Mac suites on campus so I intend to do some experimentation with this style of design to get the hang of using it for my final piece.

Infographic Poster – The Topic

After taking a look at the different topics, I decided to go with “How does the hydrologic cycle (also called the water cycle) work?”. I thought that this would be the most challenging out of the list due to the fact that there is no data to base my poster upon. For this topic I have to explain how water is cycled on the earth and the factors that affect it without the use of text. To set the project in motion, I decided to create a mind map on the hydrologic cycle and how it works.

SAM_1201

As there are quite a few factors to the water cycle, I plan to create my poster in a way that everyone will be able to understand it. As I plan to make my poster easy to follow (but not to a point where it is childish) I have decided that my target audience will be secondary school students. As of yet, I have a vague idea of what my poster might look like, though I intend to play around in Illustrator to see if my ideas are plausible. It can be difficult to replicate an idea in vector-based software, so my main challenge will be learning how to use the software to create my poster.