Side project - The Dollars christmas gig tickets.

I did these gig tickets about a month ago for a local function band. My first bit of freelance work! :D

Had no time to blog about this at all, so thought I would put it on at least before the party! Looking forward to it :)

Footer research

After a long time debating over what to do with my footer, I have done some research into existing footers to help me design one for my voyage project. Footers can be a bit boring so I wanted to create something that looked interesting, but didn't draw too much attention away from the main content of the website. 

One footer I really like is one the website for Lambley Riding Club (click here to view). I really like how on each page the season changes & there are small additions to the scenery. The colours work well with the theme of the website and it adds that artistic touch to each page. 

Another footer I like is that on the website Thin Martian (click here to view). It's not too fancy but it gives a nice feel to the page, incorporating a couple of characters & adding some style to the footer. This seems likes the easiest option to go for considering how much time I have left, so I will probably make something similar to this :)

Voyage Progress

Actually love my javascript home page! :) I prefer this a lot more to the design I had before as it is more personal & is definitely a lot more interesting!

Drawings for my website

These are just the graphics I am going to use to incorporate into my website.

Changes

After much debating over whether my website was good enough or absolute dogshite, I have completely changed my design. After talking to Shaun he explained to me that I should include some personality within my website. After all, this voyage is based on a personal journey, so I might as well reflect on things such as my memories and places I went to! To make it more personal I am thinking of including some hand drawn graphics. I think this will give it a really nice touch.

I am struggling with the javascript elements still, so i'm gonna try and concentrate on that :( Wish me luck!

Voyage - Development

Finally have my wireframe sorted. Really struggling on what content to include! :(

Voyage - Wireframes

To help me get ideas for how I want my website to look I have made a few wireframes up.

I like the idea of having a javascript navigation and some form of interactive map, so I think I will combine these ideas along with a simple wireframe as I don't want to over complicate my website.

Constantine & Lockwood design principles

The principles of user interface design are intended to improve the quality of user interface design. According to Larry Constantine and Lucy Lockwood in their usage-centered design, these principles are:

• The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.

• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.

• The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.

• The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.

• The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.

• The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.

Voyage - brainstorm

To help gain some inspiration as to what to do for my Voyage project, I did this brainstorm. Completely forgot about scanning it, so it's a tad late!

Voyage research - Cruise website review (thomas cook cruises)

The Thomas Cook cruise website seems to be made up of 2 main divs, with floating images & a separate header & footer. The colour scheme is very similar to the other 2 cruise websites I have already reviewed, so maybe I need to consider using the same sort of colour scheme for my website? 

The navigation of all 3 websites have been pretty consistent. The navigation is situated at the top of the page and the offers are displayed directly below it to help draw attention to them. Rather than having a drop down menu from each link, all the links are set out which essentially makes it easier to find what users are looking for. This would prevent the users getting frustrated and make the website easily accessible. 

The footer is slightly different to the other websites' as it doesn't contain as many links to different pages. This makes the website a lot more simple to use and prevents any confusion the user may encounter when trying to find something specific. 

Voyage research - Cruise Website Reviews (Royal Caribbean)

On the home page of the Royal Caribbean website, there is a large banner at the top that is animated. This shows a series of images to do with the cruise's activities. This animated aspect really stands out and immediately draws your attention to the top of the page. This is also where the offers are displayed to help draw customers to them. 


The colour scheme is very similar to the P&O website, using a lot of blues & yellows that would be associated to the sea and sun. 

The navigation situated at the top of the page involves a drop down menu just like the P&O website. The navigation is well set out, easy to follow and easy to read. This type of navigation seems popular so this may be something I need to incorporate into my website.

The footer shows all of the possible links for the website, and also contains some further information such as contact information & legal information. This small print can be very important, and I feel that it is not made clear enough on websites such as this one. 


Unlike the P&O website, there is no social networking links. Social networks have become increasingly important with businesses. I may benefit from incorporating some form of social network link so this will be something to consider when I am adding content to my website.

Nokia UK - Nokia Lumia Live. Nokia lights up London with an amazing 4D projection and deadmau5

Just another great example of what we can do with modern day technology. This event was to celebrate the launch of the Nokia Lumia 800. Amazing!

Voyage research - Cruise Website Reviews (P&O)

To help me gain more inspiration for the design of my website, I have decided to analyse 3 existing cruise websites. These are P&O, Royal Caribbean and Thomas Cook.

This is the home page for P&O. I really like how the main container is centered in the middle of the screen with the blue gradient background behind it. Immediately I think of the sea when I see this type of background, so this could be something I could incorporate into my website. The image located at the top of the home page is really eye catching and contains an offer which would help to drive sales. 

The links at the top of the page have a drop down menu which leads to different areas of the website. This is a good way of linking pages as it is very clear & people can easily find what they are looking for. To make it even quicker, a search bar is incorporated into the home page in the top right corner. 

The footer of the website contains a majority of the links that are within the navigation at the top of the page. There are also links to their facebook, twitter and youtube pages. I think these social networking links need to be made more prominent so that people can find them easier. Maybe add them to the top right corner of the page so people can see them as soon as they get onto the website?

On all of the pages also, there is a fixed DIV to allow users to give website feedback. I think this is a really good aspect of the website as they can make improvements to the website to make sure the usability of the website is up to standards. 

Moodboard for voyage

Because I am basing my voyage project on a cruise, I have decided to make a moodboard of cruise/holiday related things to help me gain inspiration.

What is Voyage?

Voyage is: "A long journey involving travel by sea or in space."


So how is this going to fit in with my project?


In July, I went on a cruise around the Italian Mediterranean. I thought this would be the perfect subject to base my voyage project on. I want to make it sort of educational, so that people can learn more about the culture, landmarks & traditions in each country.

 

Rockstar games presents - GTA V

I NEED AN XBOX.

http://www.rockstargames.com/newswire/article/19461/grand-theft-auto-v-trailer.html

Loved GTA San Andreas, and seeing as GTA V is set in SA, I need to play it!

Graphics looks amazing, as per usual.

Massive Kudos to Rockstar!

The history of the Google Doodle.

I was looking through all of the past google doodles and found it quite interesting. It was nice to see how the graphics have changed over the years and how the amount of doodles per year increases as each year goes by! Take a look!

http://www.google.com/logos/index.html


This doodle was my personal favourite (click image to view)

Weekly website review - Week 4

Website of the day for the 1st November 2011 - The Google Puzzle

FINALLY SOMETHING IN HTML5! :D


This was a chrome experiment with HTML5, which was very similar to the HTML music video "The Wilderness Downtown" featuring Arcade Fire's single "We Used To Wait". 


The concept of the game is that Google has lost one of it's letter o's and you have to complete the game to get it back. I really love the way each of the windows are set out and how the game is displayed.


It's easy to use, has clear instructions and even saves your progress! I think this is a really nice experiment with HTML5 and I hope google plan on doing more with it!

Colour schemes

So for my voyage website I've had an idea of basing it on my cruise I went on in July. Thinkin of making is educational so people can sail around the med visiting the places I went to & learn more about the country, culture & famous landmarks.

When I think of a cruise, I immediately think of the ocean, so greens & blues would be a pretty obvious colour scheme to use. However, I want to make it quite cartoony & animated so I'm thinking of creating some form of map, almost like a typical treasure hunt pirate map. The bottom colour scheme shows the main colours I would incorporate into this website design.

I need to do some more research into voyages and see if I really want to base it on the cruise I went on.

Colour - logo redesigns (SB)

As a seminar task I have been asked to redesign popular logos just to see how colour effects them. What I tried to do was investigate colours that create a completely different mood, colours that don't work well together and colours that wouldn't be suitable for companies. I think when it comes to branding, colour is really important. The colours need to suit the consumers, go with any ethnic backgrounds & follow their target market. For example, Barbie is directed towards female children and the colour most directed to them is pink. Food logos are also very important because if you use the wrong colour, it may give off the wrong impression. You wouldnt want to make a bread logo in different shades of green because green can often be associated with mould, urgh.

JQuery

Syntax	Description
$(this)	Current HTML element
$("p")	All <p> elements
$("p.intro")	All <p> elements with class="intro"
$("p#intro")	All <p> elements with id="intro"
$("p#intro:first")	The first <p> element with id="intro"
$(".intro")	All elements with class="intro"
$("#intro")	The first element with id="intro"
$("ul li:first")	The first <li> element of each <ul>
$("[href$='.jpg']")	All elements with an href attribute that ends with ".jpg"
$("div#intro .head")	All elements with class="head" inside a <div> element with id="intro"

Event Method	Description
$(document).ready(function)	Binds a function to the ready event of a document (when the document is finished loading)
$(selector).click(function)	Triggers, or binds a function to the click event of selected elements
$(selector).dblclick(function)	Triggers, or binds a function to the double click event of selected elements
$(selector).focus(function)	Triggers, or binds a function to the focus event of selected elements
$(selector).mouseover(function)	Triggers, or binds a function to the mouseover event of selected elements

Function	Description
$(selector).hide()	Hide selected elements
$(selector).show()	Show selected elements
$(selector).toggle()	Toggle (between hide and show) selected elements
$(selector).slideDown()	Slide-down (show) selected elements
$(selector).slideUp()	Slide-up (hide) selected elements
$(selector).slideToggle()	Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()	Fade in selected elements
$(selector).fadeOut()	Fade out selected elements
$(selector).fadeTo()	Fade out selected elements to a given opacity
$(selector).animate()	Run a custom animation on selected elements

Function	Description
$(selector).html(content)	Changes the (inner) HTML of selected elements
$(selector).append(content)	Appends content to the (inner) HTML of selected elements
$(selector).after(content)	Adds HTML after selected elements

CSS Properties	Description
$(selector).css(name)	Get the style property value of the first matched element
$(selector).css(name,value)	Set the value of one style property for matched elements
$(selector).css({properties})	Set multiple style properties for matched elements
$(selector).height(value)	Set the height of matched elements
$(selector).width(value)	Set the width of matched elements

5 Design Principles - Seminar task (SB)

"Individually search the web for websites whic display the five design principles detailed in the handout".


Alignment, Repetition, Contrast, Proximity & Balance.


Alignment - ?????


Repetition - Choccywoccydoodah


Not only is this company my absolute favourite cake & confectionary company, I also love their website. On each page of the website the big red banner on the left hand side of the website & the big logo is displayed. The colour scheme is kept very consistent throughout & the same font is used for each title on different pages.

Contrast - Toopix Creative


I really like the contrast of the black background & then the main div being white. It really makes the main information stand out. However, because of this black background the links at the bottom of the div are hard to identify.

Proximity - Vie At Home


The main div is quite central & small, so all of the main things on the home page are within close proximity of each other. This may make it seem messy however, each seperate part is set within a box so it is clear to see where things are.

Balance - Aardman Animation Studio


I really like how centred this website is, giving it a good balance. The animated characters in the centre show what Aardman are all about and I really like the animated navigation at the top.

Weekly website review - Week 3

Today, The FWA's website of the day is ALDO, a shoe brand. This website isn't the company's main selling website, it's more of a promotional website which I find quite confusing. 

And yet again, we have ANOTHER website that is Flash operated. The amount of times I've seen that HTML 5 and CSS 3 is taking over is starting to seem a bit silly. It seems as though people can't move away from Flash! There's not a lot wrong with it, but the website did take a while to load because of it being flash. Honestly, think people should look into HTML 5 more!

Okay, so the whole idea of the website is to try and promote some sort of offer. There are 3 games based around the products and if you win every game you get 15% off your next purchase. Just by playing you can get entered into a prize draw for a life time's supply of shoes.

I think it's a really quirky way of trying to promote the offers, but not everyone will know about the site so it is essential they advertise it on their main website, in stores, flyers etc. 

There is a link in the top right hand corner of the screen so that when you click on it you can just view the range of shoes available. I think this isn't very practical because they then have to find another website, find the same pair of shoes and then buy them if they want to. I think the link to view the collection should be replaced with a link to the main website.

This is a screenshot of one of the games. I think it's a really nice way of seeing what's available from them and the experience is totally interactive. 

Even thought the website is meant to be interactive & all that, there isn't really a lot to be interactive with. You click on a few things to pick them and then everything is done by flash. It gets a bit boring as you go further on so it may lose people's interest.

I like how the links are all positioned along the bottom, keeping them close together & easy to find. However at times, I think it is a bit hard to read them. I have no idea what relevance the white tiger has to the brand, so I just think it's a bit weird. This website gets 7/10 :)

Here's one for you.

Shorthand coding. (GL)

For Giselle's next seminar we've been asked to look at shorthand coding. Shorthand coding makes the CSS style sheet a lot easier to read & a lot shorter.


Colours
Hexadecimal colours consists of 6 letters or numbers that corresponds to a single colour. The 6 letters/numbers represent 3 colours, Red, Green and Blue. Each set of numbers/letters identifies how much of red, green or blue there is in a colour. If there are colours for example that are made up of 3 pairs or is 6 letters/numbers of the same then the colours can be shortened to just 3. For example:


#FFFFFF - white can become #FFF
#000000 - black can become #000
#FF0000 - red can become #F00

& so on & so fourth.


Margin & Padding
The code for margin & padding consists of 4 values that stands for the top, right, bottom & left. The values work in a clockwise order hence top, right, bottom then left. Rather than writing out something like :

margin-top: 1em ;
margin-right: 0em;
margin-bottom: 2em;
margin-left: 0.5em;


It can be replaced with:

margin: 1em 0 2em 0.5em;

The 0 doesn't need em after it because 0 is 0 and the em part will be ignored anyway! This is also the same principle when it comes to the padding.


Borders.
Borders can also be shortened to help make the css style sheet easier to read. Let's say for example the border has the following code:


border-width: 0.25em;
border-style: solid;
border-color: #FFFFFF

It can be shortened to:

border: 0.25em solid #FFF; (hexadecimal codes can be shortened remember!)


If you want to put a border around a set of text, to make the box you use the same principle as with the margin code. So it would be as follows:

border-width:1em 2em 3em 4em;


Backgrounds
Codes for backgrounds tend to get quite long winded. So if your code for your background looks like this:


background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;


It can be shortened to this:


background:#f00 url(background.gif) no-repeat fixed 0 0;


Fonts
From looking at the codes above, it seems as though they all follow the same pattern. Font codes can be shortened too.


font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

shortened to:

font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

Weekly website review - Week 2

I have decided to review the website that is site of the day on the FWA. I will do this over the next few weeks just so that I can see why those websites are sites of the day!


Nespresso - Dhjana


This is FWAs site of the day for today. It's a website for a coffee brand from a number of countries including Brazil & Costa Rica.


As soon as you go onto the site it has animated aspects to it, and you can immediately tell it is built in flash. The start page tells you a bit of information about the brand.

The coffee bean then disappears into the background which turns into the ground and a tree grows from the ground. I really liked this aspect of the site as it is quite interesting & is a nice connection to the main content of the site.

The first page you get to introduces the company. I think the navigation on the right hand side could be a lot more clear & maybe more decorative to fit in with the theme of the site. The pages are bright, eye catching & have animated aspects to increase the interactivity of the site.

When you click onto a link, even the loading bar fits in with the theme of the website. I think it's really clever and I like the way the little leaves represent how far the loading process has progressed.

On this particular page, the text on the right had side has no scroll bar. It moves according to the movement of the mouse when you roll over the text. I really liked this method of replacing a typical navigation bar, however people may find it is a bit difficult to control & the mouse may get in the way.

Overall, the website is very consistent & the theme is followed throughout all of the pages of the website. I find the graphics quite interesting & the way each part of the website is on a different part of the tree is a nice touch. I'll give this site 8/10 :)!

DP3 Seminar work - class selectors

In todays seminar I learnt some new ways of adding css rules to certain aspects of my site. I was quite surprised as to how easy it was to code just one thing to make it different to everything else. I always thought coding would be really long winded but really, it isn't!


A particular type selector I liked was the em selector. This can be applied to any tag so that it has the css code of the em selector.

Class selectors help to single out bits of text you want to make different, but may have the same tag. For example, Two lines of tags may start with the <p> tag, but to make one line blue, and the other have no style code you would apply the class selector to one p tag.

<p class="big">This text would be displayed according to the class "big" css code.</p>
<p> However this will not, because it has no class selector added to the p tag. </p>

You can also combine classes which I didn't know you could do! So as shown below, one sentence is bold in font type, and also has padding. Say the class selectors are called bold & padding it would be written as; 

<p class="bold padding">

 Tags such as <h1>, <h2>, <h3> etc all change the size of text. This is particularly good when creating headers for pages for example. However, sometimes you may want to use the same size h tag, but for them to have different characteristics. Class selectors can also be added to these tags to help define different headings!

Slightly off topic, I also learnt that using em as a measurement rather than px is a lot better. 1em = 16px but em is the standard measurement so it is best to use this so that devices such as mobile phones can display the website correctly. A px to em converter should be used when wanting to size things up such as divs & content boxes.