The moods of music

I learnt that music has a massive effect on the overall feel of a video. I realised that upbeat, quickly cut video leaves the viewer feeling happy, whereas the a slow cut video, feels much sadder. The best example of this was to use some oxfam footage of the rice farms, edit it with two different versions. Happy and sad, you can see the results below:

Happy:

Sad:

Hull Open Day

Hull College had an open day for potential students and asked me to take some photographs of the day for the student union to use in advertising, below is the contact sheet:

CONTACT SHEET

I selected a couple of the images that worked well and used the techniques I have previously used, I ended up with a total of three quality images.

The first one was a shot of the classroom, I weaned to focus on the boys looking forward as if they are concentrating, a crop of the image fixed this. I also noticed there were a few ‘distracting’ elements to the image, the boy forefront in the image had a black eye which I was able to lighten up and made the area look a bit healthier, there is a lot of noise out the window so I was able to remove a lot of unnecessary items out side to tidy it up, then i tidied the room up inside by removing sockets on the wall and loose wires which made the image look a lot cleaner and allowed the viewer to focus on the people. The last adjustment I made was to play with the levels of the image, this allowed me to change the lighting to brighter the image as a whole. You can see the original and edited versions below:

original28

The second image was of the Hull College logo printed on a window with a reflection of the church behind it. It was a nice image to begin with but a fees adjustments made it a whole lot  better. Firstly I removed the dirt from the glass, lights behind the glass and unnecessary reflections. Next I played with the levels to allow the logo to stand out even more, and then finally I selected everything but the logo and filled a layer with black, then brought the transparency down to 10% to make the background darker and again to make the logo stand out more.You can see the original and edited versions below:

original

finished

The last image I edited was of the front of the building with the logo on it, again the image didn’t look right so I edited it in photoshop. In this image i removed lights within the building and the used the clone tool to clone closed windows onto open windows making all the windows closed, I straightened the image, cropped it then changed levels on the image to make sure the colours looked right. You can see the original and edited versions below:

DSC_0014

14

The End/A New Beginning – Pageless Design

The final stage of building the site was to open Dreamweaver and actually create the site.  as you can see below, I reached an almost complete site with a html file linked with a css file. As I was working and writing up the alt tags and the meta data I realized that it was limited for the search engines to find my site and that my listing would be compromised due to the lack of these. I thought before I continued, I would research the downsides of pageless design and then decide whether to continue with this design, below is the progress I have made so far.

Understanding the importance of file hierarchy took an important role of setting up the site, I knew that should anyone else need to come and work on this site, they would need to understand what all the files were. Therefore I made sure my files were labelled correctly and tidily. You can see the structure below;

Screen Shot 2014-12-03 at 21.35.37

The site is constructed correctly so that the layout is fully in order, I used Lorem Ipsum as filler text to begin with as that is a fine detail that can be changed in a later stage. The images in portfolio section of the page have a rollover feature so that you can see what the property looked like before the work was done. This was done using a <table> element to allow the images to be laid out correctly on multiple screen sizes. I set up code to allow the user to press the “Contact Us” button on their phone and would automatically start calling from their phone. These were both two things I do think work really well, so these will definitely be staying in the design.

There are two faults I have made so far though, In the .textbox div that overlaps the people on the roof, I have made the mistake of using attributes (position:relative and top:-250px;) This is a specific fault as you shouldn’t use these as it will mean the following content will not follow it’s normal flow, therefore, I must research an alternative method. The same can be said for .textbox2 but this one hasn’t been adjusted to the full extent to be over the top of the image.

This means I need to research an alternative method, which doesn’t break rules of html and css code, my research indicates that an z-index attribute would create a layer over the top of the other sections of the page, this is exactly what I need so I will be researching Z-Index.

This is evidence of the website I created;

DESIGN

1 2 3 4

HTML

html1 html2 html3

CSS

CSS

Wireframes & Designs.

A wireframe is like an architects ‘blueprint’ but instead of a building its of a webpage. It is the general hierarchy of the content, it excludes the images, buttons, colours, style, colour and graphics an focuses solely upon the functions, hierarchy of content and the different scenarios the site can be seen, desktop, tablet and mobile. Much like designing a logo for the first time, you must make sure it works in both black and white. The wireframe is drawn up in black and white, this can be done in multiple ways, there are many resources available for developers and designers on the web but you can also draw on paper, whiteboard or even a mockup within photoshop itself. Due to the simplicity of the concept of making wireframes, they are very quick therefore allows you to create many concepts in a small amount of time.

I also created physical designs with colour and images to help me visualise and decide which one would be best. I used colours that would best portray the business based upon the colour research, to provoke certain emotions in the user.

Here are my three wireframes & their physical design…

Number 1.

Wireframe-1

Mockup-1

This wireframe gives the user something relate to, it tells the story of someone who comes home to discover their roof is leaking, then called acorn roofing to get it fixed. You get to see as as user the result of using the company, this tries to my brainstorm researching the sales techniques, having interested the user, now at the end of the page, a telephone number to contact the business. This method works in theory but comes across as cheesy, childish and unprofessional. I decided not to use this as my design.

Number 2.

Wireframe-2

Mockup-2

The most professional and easy to follow wireframe, this is the one i decided to take through and actually design as a final website. It gives the user what it wants, a description of the company, confidence with using their services because of previous customer’s comments on the work that had been done and finally the contact details. This wireframe cuts to the chase and gives the user what it wants.

Number 3.

Wireframe-3

Mockup-3

Very similar to wireframe number 2 in the sense that it is designed to cut out clutter and give the user what it wants, its style is also very similar. The drawbacks of this wireframe is that the ‘above the fold’ section of the site is simply an image with the logo and contact details which doesn’t particularly entice the user to scroll. The contact section of this page seems to be quite messy also.

References:

http://en.wikipedia.org/wiki/Website_wireframe

http://webdesign.tutsplus.com/articles/a-beginners-guide-to-wireframing–webdesign-7399

http://uxmovement.com/wireframes/the-importance-of-tying-personas-to-wireframes/

http://wireframes.linowski.ca/wp-content/themes/darwin/images/PersonaTemplate.pdf

Selecting the Logo

The Selection Process

I decided to create the website logo to make it look truly professional.

These are the initial designs that didn’t get chosen:

MOCKUPS

It was a tough choice turning down some of these ideas as they were designed to represent a roofing company, middle right looked to clip-arty, second one down on the left didn’t work as you shouldn’t have gaps in a roof, so having a gap in the logo just was a silly idea. While I thought it was a good idea to have a visual with the text, I didn’t think any of them worked enough and that they all overcomplicated the design therefore I chose this design;

Final Logo

Composition rules of Photography

There are many composition rules within photography that help look an image look professional, you always need to consider these when taking photographs.

The rule of thirds

This is basic photography and can even be seen in modern smartphones, a grid is placed onto the screen consisting of two horizontal and vertical lines meaning there are 9 equal sized sections. The aim of the rule of thirds is to get the important element of thew image either on the lines or where they cross.

Balancing Elements

When taking a photo using the rule of thirds you will sometimes realise that there is a large portion of the image that looks empty, if you fill that space with something else, it will make the photo seem more interesting.

Leading Lines

Lines within images are great because we are naturally drawn to them, so as a photographer you can use this to your advantage by allowing the lines to lead to the focus of the image.

Symmetry & Patterns

As human beings we find beauty in symmetry, as found in a New Mexico State University study which “utilises a program called FacePrints, which shows viewers facial images of variable attractiveness. The viewers then rate the pictures on a beauty scale from one to nine. In what is akin to digital Darwinism, the pictures with the best ratings are merged together, while the less attractive photos are weeded out. Each trial ends when a viewer deems the composite a 10. All the perfect 10s are super-symmetric.” By taking advantage of this in photography, you can create beautiful images.

Viewpoint

Placing importance on the angles we take our images from is a good skill to learn as it can lead to some more abstract pictures. When taking an image I should take note of what angles I could take the shots at, be that with height, distance etc.

Background

If an image has a background that has a lot going going on, it will distract from the focus of the image,simply changing an angle and getting a plain background can help the focus of the image stand out.

Depth of Field

To create an image with a great sense of depth, you must understand the elements of a foreground, mid ground and background. These can create a feel of scale and depth by itself. By using objects in each section for the depth, it will allow the viewer to understand the scale much better. You can also create an element of depth by blurring the background, this can be done by

Framing

You can create a natural frame within an image, placing certain objects around the edge of the image you create a focused image which will draw the attention to the part of the image with most importance.

Cropping

Cropping is a very important tool to use as a photographer as it allows you to delete unwanted details to reduce noise, making sure the focus of the image is all the viewer can see.

References:

http://www.photographymad.com/pages/view/10-top-photography-composition-rules

http://legacy.jyi.org/volumes/volume6/issue6/features/feng.html

Featured Image -http://designyoutrust.com/wp-content/uploads/2013/02/photography-rules-are-made-to-be-broken-1.jpg