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.

My image of the internet.

Coming sooooooon

Dan Saffer: 'Interaction design is an applied art' DP3 discussion task. (DD)

I came across this article when I was creating my visual essay last year, so it's nice to know that Dan is quite well known & people are picking up on how good he is at his job.

The article can be found by clicking here

This interview really highlights how important it is to learn as much as possible while I have the chance to. When he was at university, he talked about how all of the technical language & knowledge was taught to him, and he found it useful as he never would have imagined himself piecing something so technical together. It seems as though Dan is really focused and passionate about what he does, which is a really good vibe to have especially when I will be applying for jobs soon. Following his path by attending all of my lessons and doing my own personal studies, I think I will get just that little bit further than others and will hopefully be successful when it comes to job interviews/working with clients.

With the current explosion in the smartphone market, applications have become more and more widely used within today's society. Applications are linked to interface & interactive design which seems to be a key area to concentrate on, as Dan highlights they are very intertwined. Without good interface & interaction design, I would probably fail as a web designer.

By the time I have completed my course at NTU, web design aspects would have probably changed dramatically. Technology is forever sprinting forward and it can be hard to keep up if you're not being taught what's new & current. Dan said this at the end of the interview:

"The way to become a great designer is to learn as much as you can and put what you've learned into practice by designing a lot. That's all!"

I think this just shows that in order to be successful I need to take my time and learn what it is people want so I can create websites that people would love & use often. There isn't really any point in me going into this design field if I wasn't prepared for a challenge.

I really like how Dan gives a few tips as to what you shouldn't do. People tend to think that web design is really easy & anyone can do it. Dan clearly states that there is more to interaction design than just sitting there and sticking something together. It will take a lot of time, effort, creativity, perseverance, endless cups of tea & possibly putting up with some awkward clients. Obviously it isn't that easy to do, becuase one of Dan's principles he follows is "If it was easy, then everyone would do it". Well said Dan! 

Got a little side project :D

I've been asked to design some tickets for a christmas gig for a local function band :D I know christmas seems ages away but the tickets need to be sold in advance! I'm gonna get them done for the end of next week. This is a great opportunity for me to get a taste of graphic design! :) Development & pictures to follow later on in the week.

"Your time is limited, so don't waste it living someone else's life. Don't be trapped by dogma, which is living with the results of other people's thinking. Don't let the noise of others' opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary." - Steve Jobs

DP3 Seminar work (DD) (SB)

For our seminar with David & Shaun we were asked to do a task. For David to review a website & for Shaun to find 3 interactive medias that we liked. So this post is gonna kill 2 birds with 1 stone.

Interactive 1 - BooBahs children's website

This website is an interactive entertainment website for pre-schoolers based on the BooBahs TV programme. The age range that the programme normally is aimed at is 3 - 5 years old. What is particularly good about this website is that there is no text at all. This makes it easy for children to use as they can't read at all or can read very little.

Every aspect of the website is interactive, full of different sounds, movements & activities to do. Everywhere you click it leads to a different page with something different to do. The fact that it is so diverse and has all of these interactive components helps to keep the children entertained. The use of bold, bright colours also adds to this effect.

The above image is the home page. As the cursor rolls over different components, different sounds can be heard and different animations occur. The coloured spots at the top of the page all lead to different pages with different activities to do. This also goes for the characters & the present in the centre of the page. 

The image above is an example of one of the activities available for children to do. Even though the website looks like it's been made by a bunch of fairies on crack, i'll definitely give it 10/10 for practicality!




Interactive 2 - Plants vs Zombies Application

Plants vs. Zombies is a tower defense action video game developed and originally published by PopCap Games for Microsoft Windows and Mac OS X. The game involves a homeowner using many varieties of plants to repel an army of zombies from "eating their brains". I have this application on my iPhone and I can honestly say it's a guilty pleasure. I love the range of different characters involved & that each level is set in different environments. Not only is there the main game, there is also a series of mini games that incorporates the same characters. A new aspect to the game is the Zen Garden, where you can grow your own plants & sell them in order to make money faster to buy new plants/tools. 


The App itself is very easy to use. You get a tutorial in how to play the game when you first play it and the same goes for the mini games. I have spent many hours on this game & I can say it is definitely one of the most entertaining! 

Thanks to this little gem of a game, I now know how to survive a zombie apocalypse. I'm just hoping plants evolve on time!


Interactive 3 - Mauricio Studio

This is the online portfolio for Web Designer & Illustrator Mauricio Guimaraes. I love how he incorporates both of his practices into one webstie. As soon as you go onto his website, you can immediately see what he is capable of. Even though it has been built in flash and can sometimes take a while to load, I think it is a well thought out creative website. You can navigate around the "map" to find the different parts of his site. If you have difficulty finding things then there are links at the bottom of the screen. The theme, style & colour scheme is kept throughout the website & the text is legible. I think the text could do with being a little bit bigger & the navigation around the map is a bit slow. All in all, it helps to express what Mauricio is all about & is a good way to present a work portfolio. 

New year, New start, New Projects!

I am so excited about starting back at uni :D First week has been pretty good, I just can't wait to get stuck into the projects we get set!