Evaluation and Reflection

Visual Communication:

In what ways does the visual communication/message of the piece meet the needs of the brief?

I think the way I have put the website together makes it look professional and friendly. The point of the brief was to create a website which looked credible and friendly. The design gives the UAWA a credible identity.

In what ways does the visual communication/message of the piece fail to meet the needs of the brief?

I do not feel that it does fail in any way.

What are the strengths of the visual communication? Why?

The current UAWA site looks amateurish and cluttered. The main strengths of my design are the way in which the information has been set out. The type has been set out in a simple and clear way unlike how it was before. Before it was actually difficult to read; the information was lost in-between the fuss.

The other strengths are the pictures I used. After much evaluation I found pictures which represent the adult industry without being overt about it. The website needs to be available to everyone so it must not be blocked by network sensors. I wanted potential members to see the people in the pictures and imagine that they wanted to join and become a member.

I used textures to add interest and to keep the design looking professional. The point of the brief was to create a website that looked more professional and less casual. I created a website which took all the same information as the current site but I presented it in a trendy and professional manner. My website makes the UAWA look modern and credible.

What are the weaknesses of the visual communication? Why?

People may think the photos are too tame. Perhaps some shock statistics about HIV would convince people to join. A page showing photos of the people who are already members may convince more people to join. It is hard to say what the weaknesses would be. I would have to send my design to some people in the adult industry to see if they thought it needed changing or modifying. Apart from that I must rely on the expertise of my tutors.

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

The main audience for the website would be adult performers and those who work in the adult entertainment industry.  The photo of the woman posing could be misunderstood since people may think the scene depicts a fashion shoot. The UAWA does not represent fashion models.

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

A lot more information could be added to the site. If I worked for the UAWA I would suggest adding information about the different STD’s and how to best protect yourself. Information could be added about how to avoid being exploited.

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 good for this project. I had enough time to get feedback on several different occasions in class. I had enough time to do a lot of research and fully write-up how I made my website.

How was my analysis of the brief?

I think my analysis of the brief was good. The point of the brief was to redesign a current website. So that gave me some guidance as to the best way to proceed. As opposed to having a client who has not already decided which medium they want. The medium was already decided. This was because when I showed everyone (tutors and students) the current uawa.org site, not one single person queried the need for improvements. The main things that needed to be achieved was a design that was uncluttered and that instilled trust in the viewer.

How was my research?

I did a lot of research and I think it went well. I was looking to learn about textures, typefaces and website layouts.

How did I draw conclusions from my research?

I looked for trends so I could draw inspiration. I also looked to see what is being done now in design to see if I could use any of it in my future designs. Sometimes I saw things I wasn’t expecting like in my post ‘Breaking The Rules: Typography In Web Design‘. I wasn’t expecting to see a site where the main titles are partly hidden. This reminds me that trying something new and different can work in some situations.

How did I use research to generate and develop ideas?

I used my research as inspiration. I always pay attention to the backgrounds used on web pages to see if I think the effect looks good or not. Something as simple as the background makes a big difference in my opinion. I always pay attention to layouts and what happens when I click on a button, to see if I like it. I also look at how and where pictures are placed in designs to see if I like the effect. When I see something I like I then try it out as an idea.

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

I spoke to the tutor to make sure he thought my texture and photos were appropriate. If he thought they needed improvement I went away and looked for new photos. The design developed using this method.

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

I experimented by trying to make a light beige coloured texture in this post ‘How I Made The Textures‘ I think I can make this more effective by trying different colours. I don’t know how to make all the types of textures I’d like to use so it would be good to learn this.

I also experimented in Illustrator which can be seen in the post ‘Experimenting In Illustrator – Logo Ideas‘ I think this could be made more effective by sketching out an idea first and then making it into a vector. Just using Illustrator effects doesn’t really work for serious logo design.

In what ways did I show that I had achieved the Learning Outcomes? How can I improve this next time?

I have shown that I have achieved the learning outcomes by making sure I wrote a post every time I received feedback and how I acted on it.

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

I enjoyed doing research as looking at websites is something I would choose to do with my time. I was really happy that I got to use Adobe Muse as now I can finally make a website that moves around the way I want it to without worrying about coding.

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

Doing this evaluation in not particularly enjoyable because it’s quite time-consuming. Fixing all the problems I encountered in Muse was not enjoyable.

At what times did I work best? Why might this be the case? How can I ensure that I work well at all times?

I worked best in the evening. I think this was the case because I was at home away from any distractions. I need to aim to do some work everyday so I can break the work up into smaller portions.

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

The Simple Key website was very inspiring. I can follow this up by looking at more designs from sites like The Best Designs.

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

Fixing the problems in Muse was frustrating as I didn’t know if what I was doing was right or not but I got there in the end.

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

I was thinking of doing some tutorials on YouTube to improve my knowledge of Muse.

Do I need to develop certain skills? Do I need these now? Or later?

Yes I need to improve my skills in Muse. I don’t think I need to do this right now but definitely at some point.

Any other points?

I would like to carry on with photography as well as web design as I do enjoy it.

Advertisements

Organising The Root Folder

The root folder contains all the HTML, Adobe Muse files and images I have used. I have organised it in a simple manner.
screen shot

The image below shows inside the Images folder. These are the images that were imported into Adobe Muse.
images

When exporting the website as HTML, Muse prompts for a folder to save all the files in. The folder structure below is what Muse creates to keep the files organised.
screen shot 3

How I Overcame Problems In Muse

The issues here occurred from the 3rd to the 9th of December during the building of the website.

I noticed that while previewing the website in my browser, the page would scroll from left to right like the page was too large. After a while of trying to find the issue it turned out to be a text box I had moved was now jutting out the side of the webpage.

pic too small

Another issue I encountered was with one of my textures. In the image below it shows the texture had gaps on either side.

pic too small 04 12 13

I had to make the image a lot larger, it was made to around 70cm by 70cm.

Here in this next example, there was a small white gap to the left of the texture. All I had to do was increase the size of the rectangle that contained the texture to cover the whole canvas.

white gap

I also had the rectangle for the navigation bar far to wide. It was causing the page to have to scroll when in a web browser. It was simply fixed by resizing it.

problem

Another problem had been with the footer not being flush against the bottom of the page. The reason was that if a text box is dragged towards the bottom of the page it will automatically increase the size of the canvas. I had a text box over the footer so when I moved it to the bottom of the page it would automatically increase. I fixed this by making the footer large enough, so when moved to the bottom it would not change the canvas.

bottom bar 04 12 13

At the same time I noticed that when I previewed the page in a browser the text on the footer would not appear. After a lot of trial and error trying to figure this out, I realised it was being covered by another box, as shown below.

footer issue 06.12.13 3

I was then able to just make the rectangle above small enough to not cover the text.

While further checking the website for issues I came across this gap between the texture and image. It was simple to fix, as I just dragged the top box down.

gap 05 12 13

After I had added in the form for the Contact section, I noticed that when exporting the website to HTML the error shown below would appear. After a quick Google search, I concluded that it was not going to be an issue as the website would not be fully live.

error message 06 12 13

I would normally view the website in Google Chrome. This became an issue when this error began to appear. I initially did a Google search and found the post below on the topic.

http://forums.adobe.com/message/4935032

From one of the posts at the above link, I concluded that the reason this error was showing was because it is not a live website but just a file on my computer. I did find however that viewing the website in Safari was fine so I have been doing so since.

problem no para scroll 09 12 13 1250

At one point during the build I noticed when viewing the page in HTML, the buttons would have a different background colour to the navigation bar. This was even after double checking the colours were exactly the same. To get around this problem and because I had to use an image fill to make them stick at the top of the page, I created a transparent image in Photoshop. I used this as the image fill and that has fixed the problem.

Picture 1

How I Made My Website In Muse

To begin, I opened Adobe Muse and clicked Create New Site.

Screen Shot 2013-12-16 at 18.41.08

As this website will only be 1 page I had to have the height quite large. I initially started with 5000 but during the build I increased this to 6500.

Screen Shot 2013-12-16 at 18.43.03

Firstly, I created a rectangle that would be my navigation bar. This extends across the whole canvas so that it will be full screen in a web browser. I selected fill and added in an image fill to colour the bar.

Screen Shot 2013-12-09 at 18.34.59

Next I added in some text using the text tool. These will act as my buttons.

Screen Shot 2013-12-09 at 18.39.13

I repeated this step and created a button for each page that will be created. I then highlighted them all and set the font and size, trying several different combinations. I settled for Size 18 and Open Sans Light for the navigation bar. I also selected Horizontal distribution space in the align window. This equally spaced the buttons along the navigation bar.

Screen Shot 2013-12-09 at 18.40.56

I used the video below to show me how to make the navigation bar freeze when it gets to the top of my screen.

Next, I set the final motion marker to the top of the bar in its current location. The Initial motion is 1x or normal scrolling speed and the final motion is 0, which will not scroll. That way, when the top of the screen reaches the bar It will stop scrolling and freeze in place. This had to be repeated for each text box that I am using as buttons.  I discovered that an object needs an image fill to be able to change the scrolling options, so I created a transparent image to use for the fill on the text buttons.

Here I show the motion marker, circled in red.

Screen Shot 2013-12-16 at 19.38.13

I clicked fill. Here I can adjust the motion marker more precisely.

Screen Shot 2013-12-09 at 19.12.25

The images below show the navigation bar as it is at the top of the web page.

Screen Shot 2013-12-10 at 18.29.08

This image shows the navigation bar as it freezes at the top of the screen when the page is scrolled down.

Screen Shot 2013-12-10 at 18.30.09

Next, I created the boxes that will be filled to create the background textures and images. This also allowed me to create the parallax scrolling effect on the website. I created a new layer that will allow the boxes to be in the background. I used the rectangle tool to draw the top box filling the whole canvas (this will make the background full screen).
The image below shows the empty box.

Screen Shot 2013-12-09 at 19.01.36

I added the image fill using the picture I had selected.

Screen Shot 2013-12-11 at 18.15.10

The image below shows the settings that I used. The fitting is set to scale to fill, this will make sure that no matter what the size of web browser is used it will always fill the screen. The position is set to centre.

Screen Shot 2013-12-11 at 18.33.12

This is how it looks once the fill is complete.

Screen Shot 2013-12-11 at 18.19.43

For each block of text I will be placing a texture behind it. This will be followed by an image and another texture and repeat. For the first section I drew another rectangle and filled that with a texture as shown below.

Screen Shot 2013-12-11 at 19.00.43

I then created another rectangle underneath and added an image fill using the settings as in the previous two boxes.

Screen Shot 2013-12-11 at 19.13.36

I repeated this process for rest of the website.

Screen Shot 2013-12-11 at 19.19.45

Next I added the settings for the parallax scrolling effect. I used the video below for reference on how to achieve this.

Firstly, I selected all of the boxes that contain my background images and textures and clicked on the fill window. I set the scroll motion for the initial motion and final motion to zero. This means that the images within the boxes will stay static when the page is scrolled down. The boxes however will scroll with the page, giving the parallax scrolling effect.

Screen Shot 2013-12-11 at 19.28.39

Now back at the top of the page, I added in the welcome message and title of the website. I inserted the updated logo using File > Place.

Screen Shot 2013-12-11 at 20.00.59

Using the same methods as above, I began adding in the content for the rest of the website.

Screen Shot 2013-12-11 at 20.13.14

I added a form onto the contact page. This was a very simple process and it almost fully automated. I navigated to Object > Insert Widget > Form > Simple Contact.

teddy

My cursor then changed as below. I clicked on the page and I was able to re-size and move the form into the correct position.

Screen Shot 2013-12-18 at 20.25.01

Once it was placed and the correct size, I could go into the settings and adjust these to my preference. I added in Work Address and BC CAPTCHA.

Screen Shot 2013-12-18 at 20.25.31

Once that was completed I decided to add in a map on the contact page. After researching online how to add in the map. It turned out to be as simple as copying the embed code and pasting it into Adobe Muse and arranging it where it was needed.

This link leads to the video I watched.

http://tv.adobe.com/watch/learn-muse/html-embedding-in-muse-maps/

Screen Shot 2013-12-11 at 20.24.02

After copying the embed code from Google Maps, I pasted it into Muse and it generated a preview which I could place in the correct position.

Screen Shot 2013-12-13 at 18.29.18

Next I created the footer for the website. I drew out a rectangle and placed it at the bottom of the page. To create a shadow effect I added a gradient to the fill of the rectangle. To create the gradient you just select gradient instead of solid and adjust as desired.

Screen Shot 2013-12-13 at 18.34.37

Below is a screenshot of the finished footer. I added a text box with my name and the year.

Screen Shot 2013-12-13 at 18.41.16

I created some social network buttons to add to the top and bottom of the pages. I got the vectors from this website:

http://creativenerds.co.uk/freebies/large-glossy-social-media-icons/

http://www.yukaii.com/blog/2008/09/icon-set-popular-blogging-platforms-links-social-networks/

http://graphicdesignjunction.com/2011/02/vector-icons-60-free-social-bundle-vector-icons/

The screenshots below show how I edited them to fit my own website.

I opened the file in Photoshop and used the magic wand tool to select the inside of the B.

Screen Shot 2013-12-13 at 18.51.38

I then navigated to Select > Inverse.

bebo make

Once I had the background of the image selected I hit delete to remove it.

Screen Shot 2013-12-16 at 17.56.21

Below is the finished image. I experimented with using black, but settled for white as it fit more with the look of the webpage.

Screen Shot 2013-12-16 at 18.00.06

I repeated this process for the other social network buttons I am using.

Once these had been created I went to File > Place.

Screen Shot 2013-12-16 at 18.07.29

I navigated and selected the file I had just created.

Screen Shot 2013-12-16 at 18.10.18

The cursor in Muse then changed as shown in the image below. I just had to click anywhere on the page to place the image.

Screen Shot 2013-12-16 at 18.10.31

I could now move and re-size the image as I wished.

Screen Shot 2013-12-16 at 18.13.05

I followed these steps again for the other images and placed them along the footer. I used the horizontal align function again to space these correctly.

Screen Shot 2013-12-16 at 18.16.00

I had planned on only having one set of buttons on the page but after feedback I decided on showing them at the top of the page also. These would not stick to the top of the page like the navigation bar but disappear as the user scrolled the page down.

Screen Shot 2013-12-16 at 18.16.08

To make the buttons function, I added a hyperlink to each one.

At the top of the image below you can see the hyperlink box.

Screen Shot 2013-12-16 at 18.22.14

I clicked on this and pasted in the link for the Facebook page.

Screen Shot 2013-12-16 at 18.22.25

Now when a user clicks on this image, it will take them to the Facebook page.

Screen Shot 2013-12-16 at 18.21.44

I added the links for the other images.

To add the links for the navigation bar, I didn’t need to use hyperlinks as everything is on one page. I decided to use Anchors instead. This creates a smooth scrolling effect when clicked.

To add an anchor, I selected the anchor symbol:

Screen Shot 2013-12-16 at 18.28.38

Once selected, the cursor will change as below.

Screen Shot 2013-12-16 at 18.30.06

To place the anchor I clicked on the page and it prompted me for a name. I used the name of the buttons so it was easily identifiable.

Screen Shot 2013-12-16 at 18.30.27

I clicked OK and the anchor was placed on the page. I then finalised where I wanted it to be. Wherever the anchor is on the page is where the user will get scrolled to.

Screen Shot 2013-12-16 at 18.30.34

I added in the other anchors, making sure they were placed correctly. When the page scrolled down I only wanted to show one texture on the screen.

Here, I clicked the Leadership button and the page was scrolled down to the correct section only showing the texture for leadership.

Screen Shot 2013-12-16 at 18.36.58

Photos I Used and Leadership Information

The purpose of this post is purely to give the references as to where I got my photos and information from.

The people in these photos are being used purely as models and are not actually members of the UAWA and I am not saying they are part of the adult entertainment industry.

northstar-1
http://bryansides.com/wp-content/uploads/2012/09/northstar-1.jpg

ariel-studio (2)
http://firstlivestudio.files.wordpress.com/2012/08/ariel-studio.jpg

Colourful-Condoms-resize
http://www.eddystone.org.uk/wp-content/uploads/2012/05/Colourful-Condoms-resize.jpg

IMG_7339
http://finite-films.com/wp-content/uploads/2013/09/IMG_7339.jpg

casual-films-shoot-u662-fr
http://www.lafilm.com/sites/default/files/casual-films-shoot.jpg

istock_000008233795medium-man4-908x1024
http://www.love-nutrition.com/wp-content/uploads/iStock_000008233795Medium-man4-908×1024.jpg

middle-aged-business-man-suit-laptop-8082636
http://thumbs.dreamstime.com/z/middle-aged-business-man-suit-laptop-8082636.jpg

Leadership page information from:
http://www.therobblackshow.blogspot.co.uk/
http://www.blogtalkradio.com/latenightrobblack/2013/12/05/the-rob-black-show
http://en.wikipedia.org/wiki/Rob_Zicari
http://en.wikipedia.org/wiki/Extreme_Associates
http://en.wikipedia.org/wiki/Xtreme_Pro_Wrestling
http://en.wikipedia.org/wiki/Tom_Byron

I have used Wikipedia since the brief does not specify that the information must be factional. Indeed the brief specifies that some of it could be fictional.

Constant Evaluation – Looking at Connotations

I did some research and found out that the film studios for the adult industry are based in different locations. http://tinyurl.com/ydda544 I tried different photos at different stages through the project. I thought I would try this picture:
miami
http://www.sixt.de/fileadmin/files/global/modules/branch/US/miami.jpg

I thought it would look great but when I tried it out in Muse, it didn’t work. The bottom of the picture was fine, as shown below but as soon as you scrolled up there was too much blank blue sky. Although there were no particularly problematic connotations, it still didn’t work well.
pic not effective 04 12 13

I really like this picture of Las Vegas but it is so flashy and eye-catching I decided to swap it with another one. I didn’t want people to think the site was about what Las Vegas is famous for i.e gambling, shows, hotels, clubs.
las-vegas-strip-1920x1080
http://www.mrwallpaper.com/wallpapers/las-vegas-strip.jpg

The tutor and I agreed that this picture did not have any particularly problematic connotations. I really like this picture but I decided to swap it with another. I made this decision after receiving feedback from the tutor about looking for photos with people in them. The tutor said that since the site is about a union it should have people in at least some of the photos.
08 12 13 replace picture
http://www.mrwallpaper.com/wallpapers/Railway-Los-Angeles.jpg

I liked this photo but again there are no people in it and its meanings are too wide. This photo could be about a plethora of things; hiking, plants, weather or geology.
Nevada-desert-rocks-mountains-red-rock-canyon_2560x1600
http://best-wallpaper.net/wallpaper/2560×1600/1211/Nevada-desert-rocks-mountains-red-rock-canyon_2560x1600.jpg

The other problem I noticed was that when only the bottom half of the photo was showing it just looked like a bunch of dried up, dying weeds. So the photo had to go.
plants 05 12 13

Since the tutor and I wanted to see more people in the design, I put this picture in.
DKelson_Hi (1)
http://www.creativeplanetnetwork.com/the_wire/wp-content/uploads/2013/01/DKelson_Hi.jpg

I decided to swap this photo for another since I feel like the man in the picture might be mistaken for a representative or leader. I think it’s the fact that the man is making direct eye contact that gives off the wrong connotations. I don’t want the viewer to want to ask ‘who is that?‘ I need the pictures to be a bit more understated and anonymous so that the viewers can imagine that they want to join. I do not want to draw attention to this one individual.
head

A friend sent me this article to read. When I saw the picture I immediately realised that I could use a similar picture.
news article condoms idea 07 12 13
http://www.dailymail.co.uk/news/article-2519759/Porn-industry-shuts-AGAIN-star-tests-positive-HIV.html

I found this one. I’m glad I found it because it provides a pop of colour and its very relevant to the whole reason why I’m making this site. The connotations of this picture are safe sex which is the whole point of the union; to try to stop people catching HIV.
Colourful-Condoms-resize
http://www.eddystone.org.uk/wp-content/uploads/2012/05/Colourful-Condoms-resize.jpg

Photos I Considered But Didn’t Use

I looked at a lot of photos. Here are a few I didn’t end up using.
6509896313_0ca8240f23_o
http://farm8.staticflickr.com/7152/6509896313_0ca8240f23_o.jpg

OLYMPUS DIGITAL CAMERA
http://www.jansphotoblog.de/wordpress/wp-content/uploads/2013/05/Studio-setup.jpg

SFarr_Hi
http://www.creativeplanetnetwork.com/the_wire/wp-content/uploads/2012/10/SFarr_Hi.jpg

9-46 Sleeping with the enemy liiving room-2
http://4.bp.blogspot.com/_meAn67jJEs0/TNyQx1gPqYI/AAAAAAAACcU/lVAsTqI75e4/s1600/9-46+Sleeping+with+the+enemy+liiving+room-2.jpg

MG_3536
http://clerestoryproductionsblog.com/wp-content/uploads/2013/11/MG_3536.jpg

Feedback In Class: Social Media Icons

I went into class to get some feedback. I presented the tutor with these two options. I asked which he thought would be the best. Here is the first one. As you can see the buttons are at the top.
top

Here is the second one. As you can see the buttons are at the bottom.
bottom

The tutor said it would be best to have them at the top and bottom and I have to admit, I hadn’t really considered that. He explained that since the site is one long page, it’s a good idea to have them at both the top and bottom so the viewer can avoid scrolling. I have taken his advice!