D4DME – Display Selected Recipe

The final addition that I made to our website was the ability to click on one of the recipe titles and be taken through to a more detailed view of the chosen recipe. To do this, I had to create an id based link to the individual recipe.

<a href="selected_recipe.php?recipe_id=<?php echo ($row["recipe_id"]); ?>">
<?php echo ($row["recipe_title"]); ?>

This then linked to the specific recipe page with the corresponding id via this block of code:

if(isset($_GET["recipe_id"])) {
$recipeID = $_GET["recipe_id"];
} else {
$result = GetSingleRecipe($recipeID);
while($row = mysqli_fetch_assoc($result)) {
include 'recipe_large.php';

As you can see, the include function has changed to include ‘recipe_large.php’ rather than the standard ‘recipe.php’. This file contains more information on the recipe and it much larger in screen size.

D4DME – The Database (Part Two)

An entity-relationship diagram (ERD) is a data modeling technique that graphically illustrates an information system’s entities and the relationships between those entities.

After our group lecture on ERD and database design, I decided to have a go at planning how our database tables would look for the Starving Student page. Our website won’t be able to function properly without a solid database structure, so it’s vital that I get this part of the project up and running to make the other jobs easier for my team.


Screenshot of ERD in Word


Screenshot of Database Tables in Word

The USER table contains the same fields as my previous idea on ‘D4DME – The Database’, though I have focused more on the rough design for now rather than trying to make the table in PHPMyAdmin. The RECIPE table is slightly more complicated, as it must have two derivative tables each containing relevant data. As I wasn’t particularly happy with this structure for the database, I decided to email Simon for some advice on what to do next.


Janssen, D. and Janssen, C., 2010. Techopedia [online].
Available from: http://www.techopedia.com/definition/1200/entity-relationship-diagram-erd [2/20/2015].

D4DME – Trial and Error

After having a discussion over Chace’s mock-up for the webpage, I created a page on our wiki to document our discussions (Here). The page consists of screenshots accompanied by an ongoing conversation that we had over Facebook. Whilst the Wiki is good to document our planning and teamwork, it doesn’t provide us with a real-time chatting option that we need to keep in touch when we’re not talking face-to-face. Facebook probably isn’t the best choice and isn’t very professional, though everyone is using it and it makes it easy to keep in touch outside of uni.

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.


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.


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.


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.

D4DME – Meet the Team (Part One)

Today I was introduced to my team mates, Mongkol (Chace) and Kyle. The first task that we have been given in our new groups is to create a ‘Meet the Team’ page.  Chace decided to start work on the design of the page(s) with HTML/CSS. The page initially looked like this:



To get used to the collaborative side of this project, I asked Chase to send me his project files so that I could have a look at his code and make some additions. We identified that it would be a good idea to comment our coding so that we don’t get confused by each other’s work. I suggested that we preface each comment with an initial so that we know who has said what, e.g. /* V: verity made this comment */, <!– V: verity has made this comment –>

Chace had initially created three separate stylesheets for the three pages (Home, About, Contact). To make the coding process easier for everyone in the group, I decided to refine this down to one stylesheet that applied to all of the pages. Whilst it was a nice idea to have different coloured headers on each page, it would make it more time consuming to make changes to all three of the stylesheets, so I suggested that we compile them into one. After this I made a few changes to the HTML to make editing easier in the long run.
One of these was to move the navigation to a separate file and link it in using PHP at the top of each page.



This means that we can make a change to one of the links without having to change it on each individual page.
Aside from this, I had a look at Chace’s CSS and made some additions such as pseudo animations (by using generated code from http://matthewlein.com/ceaser/) and using the drop shadow effects that Chace had made on the main divs.

To save us some time in the long run, I added a few extra lines of CSS to make the website dynamic and scaleable with the browser. This made it so that the content of the page would adapt to fit the size of the window and wouldn’t cut anything out from view when scaled.

The final result of my additions ended up looking like this:





We agreed that it would be a good idea to wait until Wednesday, when we could all meet up, to add content to the page.

Infographic Poster – The Poster


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.


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 Style (Part Two)


After experimenting with the flat design style I realised that it became slightly harder to see everything clearly without the objects merging. To work around this, I thought it would make sense to do some research into existing designs that use flat design and how they are able to bypass the issue. I decided to use a set of printed postcards that I bought at Comiccon last year which represent different locations from the video game Ocarina of Time which is part of the Legend of Zelda series. These prints came in a collection of ten, though I picked the three that I thought made the best use of flat design.


After analysing the three prints I came to the conclusion that using gradients will help me resolve my issue of everything blending into the page. The gradients will create a sense of depth to the illustrations that will help them contrast from one another on the page. I’m not sure whether to use textures, as I do intend to keep my design as simple as possible. I feel that textures would over complicate the design.

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.

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.