Evaluation

What are the strengths of the visual communication? Why?

The main strengths are the photos I’ve used because they are colourful and eye-catching.

What are the weaknesses of the visual communication? Why?

This website won’t appeal to everyone. Some may find it too female orientated.

In what ways could the piece be mis-read or mis-understood by the audience? Be specific about who the audience is.

Broadly speaking the audience is anyone who may find the site using a search engine. The people who would subscribe could be anyone from teenagers to people in their fifty’s or older. I suppose as I made it I can say females in their thirty’s would return.

The pictures in the  animation on the front page do not contain links so you can’t click on it, you can only look at it. That would probably confuse people as generally you can click on sliding pictures. This was not poor forethought on my part. I wanted to have links in the images but I am not a programmer so I was unable to do this.

What signifies or represents anything to the viewer?

I tried to keep the design minimal so it didn’t look tacky. I tried to use typefaces that were friendly but still modern and trendy. I picked the subjects of the articles because I wanted to show that the magazine is on the pulse of today’s culture. I also wanted to show a luxury lifestyle so I showed pictures of exotic locations. I wanted to inspire people so I showed pictures of Coachella which is in California. I tried to keep the design simple because I wanted people to look at the content.

In what practical ways could the piece be developed or improved?

I could make more pages. I think the travel page could have had a gallery to show off more pictures. The beauty page could have had a make-up tutorial. I could add a ‘Video’ button to the menu and have a page of videos. I think there are many ways in which it could be developed. A page about the history of the (fictional) magazine would be good.

2) Reflection of own working practices:

Be very honest with yourself in this section. Please feel free to approach a member of staff for help finding ways to develop skills.

How was my time keeping?

My time keeping was satisfactory but I think I still need to improve on this.

How was my analysis of the brief?

I wrote my own brief and I thought about everything before I started doing it.

How was my research?

My research was useful as I needed to know what should be included on the page. The only thing research couldn’t help me with was how the designs would look when they were opened up in Chrome. I did a lot of research into typefaces which was useful because I like to use up-to-date trendy type.

How did I draw conclusions from my research?

I looked at different sites to see what had been included and what had been left out. I made note of what worked and what did not.

How did I use research to generate and develop ideas?

By looking at the different websites I got an idea of the type of thing I wanted and what I didn’t want. I put down on the page all the elements I wanted in a grid.

How did I use evaluations to help with my ideas generation and development?

Whenever I came up with an idea I asked the tutor for feedback and this shaped the final outcome. An example of this would be at the crit when I showed the tutors and the class my ideas. The tutor said that I should avoid using big paragraphs of text and questioned my use of sentence case for some titles and caps for others. This feedback was helpful and I made the necessary changes.

How did I use experimentation during the project? How can I make this more effective?

I made a brush in the shape of an emerald. I tried to use it in the design for the beauty page. It was fun but I didn’t use it in the end because it didn’t look realistic enough.

What parts of the project did I enjoy most? Why was this the case?

I enjoyed putting the pages together when it worked and the elements looked comfortable.

What parts of the project did I enjoy least? Why was this the case?

Making the roll overs in Dreamweaver was the least enjoyable because if you are one pixel out with the slice tool, sometimes you have to start from the beginning which is really annoying.

What areas inspired me? Why was this the case? How could I follow these up?

Sites like http://palace.co/ really inspire me. This type of site is the reason I want to be a web designer. I want to design like this. I can follow this up by looking at more sites like this. Its helpful and it gives me ideas.

What areas were challenging or difficult? Why was this the case?

Making the animation work was difficult because I put way too many frames in it and my computer didn’t have enough RAM to save it.

How can I go about developing and improving the parts I found difficult?

I think I need to practice making web sites and using Dreamweaver so I could get used to it. This is only my second website so I still find it quite difficult.

Making the Home page

I wanted to try to emulate this design for the front page in terms of the image slider.
untitled
http://www.dazeddigital.com/

Originally I wanted to have an animation with the following images.
beauty
http://www.essie.com/essie-looks/nail-art.aspx

cinque
http://www.kevinandamanda.com/whatsnew/travel/cinque-terre-part-2.html/attachment/cinque-terre-30

http://www.kevinandamanda.com/whatsnew/travel/cinque-terre-part-2.html/attachment/cinque-terre-41

http://www.kevinandamanda.com/whatsnew/travel/cinque-terre-part-2.html/attachment/cinque-terre-27

http://www.kevinandamanda.com/whatsnew/travel/cinque-terre-part-2.html/attachment/cinque-terre-43

fashion
http://www.guardian.co.uk/fashion/gallery/2013/may/07/met-ball-fashion-2013-in-pictures#/?picture=408397878&index=14

http://www.guardian.co.uk/fashion/gallery/2013/may/07/met-ball-fashion-2013-in-pictures#/?picture=408397880&index=15

http://www.guardian.co.uk/fashion/gallery/2013/may/07/met-ball-fashion-2013-in-pictures#/?picture=408397884&index=18

http://www.guardian.co.uk/fashion/gallery/2013/may/07/met-ball-fashion-2013-in-pictures#/?picture=408397888&index=21

music
http://blog.wildpair.co.nz/wp-content/uploads/2013/04/72.jpg

http://music.uk.msn.com/features/coachella-2013-the-best-pictures-from-this-years-festival?page=8#image=23

http://peaceloveshea.com/wp-content/uploads/2013/04/ax112.jpg

http://farm8.staticflickr.com/7071/7075260791_52859b8dc0_h.jpg

travel
http://www.fourseasons.com/borabora/accommodations/?c=t&_s_icmp=mmenu

http://www.fourseasons.com/borabora/accommodations/?c=t&_s_icmp=mmenu

http://www.invogue.am/cc/uploads/2012/04/HL_113_378_12072011_132432.jpg

http://bayzest.com/wp-content/uploads/2013/01/image.jpeg

I did not realise that by the time I had added all the tween frames that the file would be so big that my computer did not have enough RAM to save it.
untitled error

So I took a lot of the frames out. I also borrowed my friends lap top as it seemed to work better on that.

Here are the pictures I used on the bottom part of the front page.
10N03EBLE_large2
http://tinyurl.com/pde7lpn

10N45DGRN_large
http://tinyurl.com/q4pljej

82
http://www.yoangalabov.com/notional

13660257505571285411811073981
http://www.dreamtv.com.tr/uploads/13660257505571285411811073981.jpg

hong-kong-skyline401124159382337821
http://imgboat.com/imgs/2012/09/05/hong-kongan-intoxicating-blend-of-east-and-west-kong-34.png

sti019_stilacosmetics_countlesscolourpigments_encore_800x960
http://www.cultbeauty.co.uk/stila-countless-colour-pigments.html

THE GREAT GATSBY
http://96.125.175.14/~binloe/binlor.info/wp-content/uploads/2012/12/the-great-gatsby-leonardo-dicaprio-carey-mulligan1.jpg

Here I started making the design using a grid. The red boxes are there as a template to follow.
Develop

Here is the final design for the front page.
24 05 13

I opened it in Dreamweaver and began to link up the different pages.
step1

Here I am linking this button to the Photography page.
step2

Roll overs in Dreamweaver

To make the roll-overs I first clicked on the image I was using.
Untitled-1

I then pressed the space-bar to remove the image, leaving a blank space. I then went to Insert > Image Objects > Rollover Image.
Untitled-2

This box popped up. In this box I selected the original image from the images folder created after saving for web in Photoshop. And then the Rollover Image.
Untitled-3

I then had to remember to change the name of the image for each rollover or it would not place the image correctly.
Screen Shot 2013-05-22 at 21.37.29

Making the roll overs – Slicing the front page – Getting around an error message

I absolutely love the roll overs on this site. So I wanted to try to see if I could do something similar.
Roll overs -1
http://palace.co/

Roll overs -1-5
http://palace.co/

I experimented on a random picture. Here I used a Photo Filter to change the colour of the whole picture.
Roll overs

I needed to make sure the alignment was inside and that the corners were miter.
Roll overs1

I then drew a box shape. It took me a while but I achieved the look I wanted and I was happy.
Roll overs2

Here is how the roll overs look on the page. You can also see how I organise my roll over layers so I don’t get confused.
Roll overs2.5

When I’d done all the roll overs I could then start slicing up the pages.
untitled

Using the slice tool I sliced up all the buttons and the animation.
untitled1

I then sliced up the roll overs.
untitled2

I renamed the roll over slices so they will be easier to find later.
untitled3

I then tried to save for web. I borrowed my friends lap top for this as my PC doesn’t have enough RAM.
Screen Shot 2013-05-21 at 19.41.51
At this point an error popped up and I was unable to save for web.

Because I couldn’t save for web after I had sliced the page up for the roll overs I removed some of the frames from the gif as I had already saved this previously.
un 5

I renamed the slice of the gif after I had removed the frames so I could see which was the original.
un 6

Once I had renamed the slice I saved for web, I then opened the html file it produced in Dreamweaver. I clicked in the image I wanted to replace (the gif).
un 7

I then clicked the folder below to change the target file. I selected the original gif (not the one I saved second).
un 8
I then opened the file in Chrome and the animation worked fine.

Making the Gallery

I saw this gallery on the dazed digital website. Its intuitive and the pictures are huge which is great.
dd
http://www.dazeddigital.com/

So I went to the simple viewer website and downloaded it.
SV
http://www.simpleviewer.net/simpleviewer/

I clicked install.
untitled1

I clicked continue.
untitled2

I clicked new gallery.
untitled3

I started adding all the images. It took quite a long time and adding all the labels was quite tedious.
untitled6

I searched the internet and tried to find lots of good pictures.
0_6522b_ae2c8bc8_orig
http://img-fotki.yandex.ru/get/6310/141128800.5d/0_6522b_ae2c8bc8_orig.jpg

jacksparrow3
http://www.movieforkids.it/wp-content/gallery/annie-leibowitz-disney-dream-portraits/jacksparrow3.jpg

311-al-dp002-535213324
http://photos.be.com/private/photo/hd/7777/private-category/311-al-dp002-535213324.jpg

PENELOPE CRUZ PROMOTES DISNEY PARKS
http://penelope-cruz.net/gallery/albums/userpics/10001/60944_Alison_1103041448_001_122_67lo.jpg

Queen Latifah as Ursula by Annie Leibovitz for Disney Parks
http://s50.radikal.ru/i128/1103/6d/cf830788f64f.jpg

Disney Parks Unveils New Disney Dream Portraits by Annie Leibovitz
http://cbskymx2.files.wordpress.com/2012/01/109733271_10.jpg

1044429469
http://images.sports.cn/Image/2007/11/12/1044429469.jpg

1252555502_belosnejka-1rachel-weisz
http://vvw.ru/uploads/posts/2009-09/1252555502_belosnejka-1rachel-weisz.jpg

Rachel_Weisz_by_Annie_Liebovitz_for_Disney_3_
http://www.topfox.tv/pic/rachel_weisz/540899_rachel_weisz_scaled.jpg

99607514083362993272
http://nbaimg.com/images/99607514083362993272.jpg

DY-DIS-M19680-A
http://www.turinews.com.mx/home/wp-content/uploads/2013/01/DY-DIS-M19680-A.jpg

664815-2012_disney_parks_photoshoot_by_annie_leibovitz___culver_city__california___june_20__2012
http://media.screened.com/uploads/0/900/664815-2012_disney_parks_photoshoot_by_annie_leibovitz___culver_city__california___june_20__2012.jpg

ceQkItlu4GeV
http://img2.fengniao.com/product/31/193/ceQkItlu4GeV.jpg

disney_beh_02
http://s271.photobucket.com/user/ArtDomino_6/media/January%2025/disney_beh_02.jpg.html

Julianne-Moore-Dan-Michael-Phelps-1800x2880
http://db2.stb.s-msn.com/i/23/56E7CAD5B4D5FF2CC7CDA29A4C7C6.jpg

147138_909994
http://www.d-log.nl/data/image/abc_media_image/2012.12/147138_909994.jpg

147140_f3eefe
http://www.d-log.nl/data/image/abc_media_image/2012.12/147140_f3eefe.jpg

Prince-Philip-David-Beckham
http://www.insidethemagic.net/wp-content/uploads/2011/03/Prince-Philip-David-Beckham.jpg

Russell Brand Appears as Captain Hook in New Disney Parks Dream Portrait by Annie Leibovitz
http://s3.sdr-files.buscafs.com/uploads/news/photos/news_photo_27780_1344006209.jpg

rba102102LARGE
http://parksandresorts.wdpromedia.com/media/disneyparks/blog/wp-content/uploads/2012/08/rba102102LARGE.jpg

scarlett_johansson_disney_company_models_stairways_cinderella_blue_dress_annie_leibovitz_1600x104_High Quality Wallpaper_2560x1600_www.wallpaperhi.com (4)
http://sadpanda.us/images/400708-XBP3XW4.jpg

tumblr_mh4jlurohh1qd6k8yo3_r1_1280
http://chinabambi.files.wordpress.com/2013/05/tumblr_mh4jlurohh1qd6k8yo3_r1_1280.jpg

WvRZD8I
http://i.imgur.com/WvRZD8I.jpg

ジェシカ·ビール-8-1800x2880
http://img607.imageshack.us/img607/2208/wheredreamsrunfree.jpg

disney-dream-ads-annie-leibovitz-09
http://daveallen1992.files.wordpress.com/2012/10/disney-dream-ads-annie-leibovitz-09.jpeg

whoopi-goldberg3
http://gatofucsia.com/wp-content/gallery/annie/whoopi-goldberg3.jpg

Annie-Leibovitz-s-Disney-Dream-Portrait-Series-disney-1361379-2000-1300
http://images1.fanpop.com/images/photos/1300000/Annie-Leibovitz-s-Disney-Dream-Portrait-Series-disney-1361379-2000-1300.jpg

Here is how the gallery looks. I’m really happy with it. I talk more about the gallery in the post about making the Photography page.
untitled7

I opened the gallery in Dreamweaver and switched to split view. I then clicked above the gallery script as shown below.
gallery button

I then clicked on Insert > Image and selected the cross picture that I will be using as a button.
gallery button2

gallery button3

gallery button4

Next I clicked on the image I just inserted and on the link button shown below and selected the photography page.
gallery button5

I also did the same on the photography page, linking the image to the gallery as shown below.
gallery button6

To get back to the Photography page you click on the X.
x gallery
I’m really happy with how the gallery turned out and I hope others enjoy seeing the pictures.

Organising the root folder

Here I have shown how my website Root folder is organised in a simple and structured manner.
untitled

Inside the Root folder is a folder called gallery which contains the gallery made in svBuilder.
untitled2

To keep the Root tidy all images used in the website are located inside this folder called images.
untitled3

Making the Beauty page

The idea for this page started quite a while back and comes from my love of make-up. I sent this email out containing a lot of photos of emerald make-up. I was interested to see if anyone else liked it. Most did.
email

I looked up the Pantone site to learn more.
pantone
http://www.pantone.co.uk/pages/index.aspx?pg=21055

They have a swatch you can download for Photoshop for FREE which is great.
download
http://www.pantone.co.uk/pages/index.aspx?pg=21055

I looked at lots of photos on Google image search. It was difficult to choose between them. Even though they are all beautiful, I couldn’t use all of them. Here are the ones I didn’t use.
148991_383026141744110_1063742694_n
https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/148991_383026141744110_1063742694_n.jpg

full
http://theglossy.sephora.com/articles/362/making-faces-sephora-pantone-shocked-winged-line?stm_cat=How-To&stm_prods=yes&stm_type=image

full (2)
http://theglossy.sephora.com/articles/344/?stm_cat=&stm_prods=no&stm_type=image

full (5)
http://theglossy.sephora.com/articles/345/?stm_cat=News&stm_prods=no&stm_type=image

full (4)
http://theglossy.sephora.com/articles/378/?stm_cat=&stm_prods=no&stm_type=image

green-glitter-eyeliner-closeup1
http://chromachameleon.files.wordpress.com/2012/11/green-glitter-eyeliner-closeup1.png

emerald_pantone color 2013
http://3.bp.blogspot.com/-dpgLMkqTOBU/UOB7UIUP88I/AAAAAAAAJbs/v4RLpZvC0DM/s1600/emerald_pantone+color+2013.jpg

s1481068-main-Lhero
http://www.sephora.com/color-theory-shadow-block-P378346

s1306208-main-Lhero
http://www.sephora.com/product/productDetail.jsp?keyword=1306208&skuId=1306208&productId=P280408&_requestid=102191&om_mmc=oth-tum-012313-product-urbandecay-247glide-onshadowpencil-emeraldcarroll#

victoria-justice-golden-globes-makeup-01
http://www.teenvogue.com/beauty/celebrity-beauty/2013-01/victoria-justice-golden-globes-makeup/?slide=1

make-up-for-ever-eyeshadow-iridescent-lagoon-green-168
http://i.beautylish.co/lT-W7qB5MYr8bp9I6oidhQHCAcI/bb_p-81/make-up-for-ever-eyeshadow-iridescent-lagoon-green-168.jpg

s1510155-main-Lhero
http://www.sephora.com/product/productDetail.jsp?keyword=COLORSMASH&skuId=1510155&productId=P378140&_requestid=101012&om_mmc=oth-tum-022813-colorsmash

18
http://coloroftheyear.sephora.com/collection/glitter-strobe-eyeliner-set

34 (4)
http://coloroftheyear.sephora.com/collection/color-cube-lid-liner-stain

34 (3)
http://coloroftheyear.sephora.com/collection/color-sculpting-kabuki-brush

34 (5)
http://coloroftheyear.sephora.com/collection/mini-graphic-effect-lacquers

34 (6)
http://coloroftheyear.sephora.com/collection/prismatic-glitter-false-eyelashes

Here are the photos I did use.
makiyazh-foto-15
http://makeuprule.com/images/2013/december-2012/makeup-1/makiyazh-foto-15.jpg

aqua-cream-22-hi-res
http://toyarosie.files.wordpress.com/2011/09/aqua-cream-22-hi-res.jpg

full (1)
http://theglossy.sephora.com/articles/340/making-faces-sephora-pantone-universe-?stm_cat=How-To&stm_prods=yes&stm_type=image

medium (1)
http://theglossy.sephora.com/articles/380/?stm_cat=&stm_prods=no&stm_type=image

s1481050-main-Lhero
http://www.sephora.com/color-theory-shadow-block-P378345

For the column on the far right hand side I made a little link showing four emerald nail varnishes.
chinaglaze

http://www.beautezine.com/wp-content/uploads/2012/07/China-Glaze-Safari-2693.jpg

OPI

http://www.hairhousewarehouse.com.au/~/media/Images/Products/OPI/OPI%20NLH45.ashx?w=450&h=450&thn=1

ciate
http://a.bimg.dk/node-images/321/6/2048x-u/6321958-smaraccent.jpg

NUBAR
http://cdn2-b.examiner.com/images/blog/EXID24042/images/nubar_emerald(1).jpg

Here is how it looks.
23 05 13

For the hair link I, by chance, found this amazing looking tong. I’ve never seen one like this before.
28-best-bet-curling-iron (1) - Copy
http://pixel.nymag.com/content/dam/fashion/daily/2012/12/28/28-best-bet-curling-iron.jpg

I put the photo into Photoshop and cut out this really unusual part.
28-best-bet-curling-iron (1) - Copy
I used the eyedropper tool to get the lovely purple aubergine colour from the tong.
untitled

I used it to fill the background. A dark background was needed otherwise the white tong is lost on the background. Here is how it looks.
T3 23 05 13

I wanted to have an actual emerald on the page. I thought I would try to make a vector. I found this.
untitled555
http://findmyrock.com/2012/10/15/how-to-properly-decide-on-diamond-shape-cut/

I found a close-up.
untitled5555
http://www.royalbijuterii.ro/en/gold-jewelry-and-white-gold-jewelry-diamonds/

I put the picture into Photoshop and inverted it.
untitled55555 untitled555555

I then put that image into Illustrator and used the image trace tool. This gave me the paths and I then coloured it using a emerald to transparent gradient.
23 05 13 illustrator

I then put it into Photoshop. I used my class mates (Alex Greenhead) post on making and using a brush to remind me how to get the brush to perform as I wanted it to. Check his blog out on the link below. (He has just made an amazing brochure.)
untitled1
http://alexgreenhead.wordpress.com/2013/01/26/music-realising-the-designs-part-1/

Here I am experimenting in Photoshop. It didn’t work as well as I thought it would because the shiny part was transparent. So it looked a bit messy and unrealistic.
stone2

Trying again here. It doesn’t look any better.
stone3

Finally realised I need to get rid of the transparent part. Made other small changes.
stone6
Untitled-7
Untitled-8

This is better! Now its working and looking a bit more realistic.
stone4

Trying to get a design together.
stone5

It doesn’t look as good on the screen as it did in my head. It’s not really working.
stone5

Decided to have just one gem in the corner. Its enough.
Untitled-9

Looks better with a gradient.
Untitled-10

Placed all the pictures and text on the page.
Untitled-11

Decided to give up with my vector and used a photo of a gem. Have to say, this photo looks so much better!
Untitled-12

This is where I, by chance, found the picture of the gem.
pantone page
http://www.pantone.co.uk/pages/index.aspx?pg=21055

I put the image into Photoshop and took away the background and voilà!
11262012_cotyslideshow_01

Looking at the design so far (below), I thought people might be confused with the way I’ve placed the text so I decided to rearrange the design.
21 05 13

Here, at least, people will understand the flow of the text and not get confused.
22 05 13
I am happy with this design and I think its successful. I didn’t have any time to get feedback from the tutor on this page like I did with the others. I did, however, make my own evaluations as I went and I have outlined the changes I made above.

I ended up moving the picture of the eye-shadow away from the gem to see what it would look like. I think this looks good but I’m now confused about the flow of the text. I think people prefer to read starting on the left so I think I’ll stick to the design above. I think I need to ask my tutor to explain in what order it is best to place text on the page as I’m obviously not sure about it.
23 05 13 - 05 54