Website third and final drafts

My final draft for my website has been completed. It can be viewed below.

fitnesse website

As you can see, I’ve changed the dimensions of this website to fit the actual dimensions that were needed. This has given it more a landscape view. I’ve also decided to scrap the use of the women as images for classes on the home page and replaced them with a sleeker use of slightly transparent green squares with icons. I feel like this makes the website seem more mature, which would hopefully appeal to an older audience. I also used icons at the top of the page that were brighter and fresher than the previous ones, with the use of yellow fitting in nicely with my colour scheme.

I also found a good background that I feel finally works quite well with the website itself. I changed the opacity of this image so that it didn’t stand out quite so much, which I think makes the website not seem as cluttered as previous designs. Overall I like this design the best, and I feel like it reflects the client’s ideas of a non-stereotypical gym for women. However, I would have liked to have used female icons but unfortunately it was incredibly difficult to find icons that had a matching set of female icons that could be categorised under ‘gym’ and so I had to stick with male ones.

This article also includes the three other pages that I created to go with my home website page, as well as the adjustments I made to two of the pages.

The first draft of the pages are included here, along with the final draft beside them. The last picture does not have a final draft because I wanted to show the two class photos together so I made them essentially very similar.

Screen Shot 2016-04-22 at 03.36.29fitnesse website page 2

 

Screen Shot 2016-04-22 at 03.37.37fitnesse website page 5

fitnesse website page 4

As you can see although the overall layout of the before and after images of the first class, know as ‘Balance’ are quite similar (as I was very certain from the beginning what kind of look I wanted these classes to have based on my research and the final design of my home page), I didn’t come up with the idea to have the arrows scrolling through photos of the women exercising until later. I included these then in every image I used because I thought it would be a nicer idea than to have a gallery button so that the photos that women wanted to see would be separated nicely into categories. I also decided to include a timetable button at the bottom of the screen so that if women were interested in that particular brand of class they could see when it would be advertised.

When it came to the ‘Team’ website page, I was unsure to begin with of what to put in as a photo. Originally I was going to use an icon based photo, because it was very difficult to find a photo that depicted staff at a gym, especially staff that were only women. However after much research I found the photo that I have used, which does feature one man. I also was unsure of what to place as a background and did consider using just a plain background for this page, but then felt that it would not work well with the overall consistency of the website itself. Therefore I chose a photo that represented the outside of the gym, and lowered the opacity so that the actual text would be easier to read. I also included a motto at the bottom of the page so as to remind customers of the gym’s real focus: to encourage women’s fitness.

 

Website third and final drafts

Website second draft

I decided to scrap my previous idea of my website after talking with my class, as it turns out that the website dimensions I had been using in my previous post were actually wrong. However, before I found this out I had designed another website which you can see below.

fitnesse 2nd design

Aside from the fact that the dimensions of this website aren’t right, I’m not 100% sure on this design anyway. I like the use of the boxes more than I do of the circles of the previous website design, and I like the use of lines to seperate these, but I’m unsure again about the background of the website. I do like the contrast between the green and the white, as well as the use of the orange because I feel like it stands out nicely and is therefore quite noticable. I’m not sure about the use of the KG Eyes Open font that is used in the ‘Fitnesse’ text as a use for the entirety of the ‘classes’ font; perhaps it would work better just under the ‘classes’ title.

Again, as I said in the previous post, I kept the women in pictures to indicate what classes, but I’m not entirely sure they work. Maybe using icons would be simpler and easier to navigate, or would look more appealing to an audience. Now that I’ve thought about it, I feel like it might be quite childish to use actual images rather than icons. This is something I will change in my next website outline.

Website second draft

Website first draft

fitness website final

This is my first attempt at a draft of my website idea. I went with a longer style of website, using the idea that it might be a one page sort of scrolling website, where there would not be a lot of images to click on, but rather where the user would scroll down on their mouse to access the rest of the website that they couldn’t see.

I chose the paler green to contrast the darker green and gold-orange as a background because when I tried to use an actual image as a background it made the website feel very cluttered. I think the reason for this was because of the images that I had already chosen; as they were already in place and the main images that the audience first noticed, placing another image behind that made it feel as if there was too much to look at.

I’m not entirely sure on this design because I feel that it looks not “gym” enough. I know this is almost an ironic echo of my earlier post where I said that some websites are too gritty and stereotypical and that I was trying to avoid doing this, but I don’t think I’ve quite got the balance of an actual gym website yet. I think what I need to do is somehow get a background of a actual gym images behind the ones of the women, but to do this without making the website seem cluttered as mentioned before. I do like all of the images of the women because it highlights the fact that this is a female-only gym, and I like the idea of much of the website being focused on images — I just need to find a way to not make it as cluttered.

Website first draft

Website research

Next I looked at gym websites to gain an idea of what exactly a gym website looks like and whether there were any similarities or differences that I could use or avoid.

gym website 1 gym website 2

 

gym website 3gym website 4

 

Some of the similarities that I noticed that I will try to avoid are the dark backgrounds and the black theme that seems to be included in many of the websites. I think the reason why this is included is to make the website seem gritty and tough. Although women can be gritty and tough, I don’t want to emulate this in my website because I feel like that’s a stereotype that is quite strong and I want to avoid that. I don’t think it’s necessary to show gyms to be tough either.

The layout of each of the websites are quite different. The one that I like the most is the first one. I like the idea of it being quite a simple design with the four squares being used. The rest of the websites seem quite cluttered to me, which I don’t feel is rather appropriate for a gym website. The last website seems like there isn’t enough in it, so I need to find the right balance between having a lot in my website and not enough, which I think might be quite tricky to get right. I also like the background of the first website, which I think makes it a lot more interesting than plain black backgrounds seen in some of the other websites. Maybe even a plain background with actual colour would work better.

 

 

Website research

Font and logo final draft

Taking into consideration my ideas on the last post, I decided to change my logo by actually just using the triple spiral in its entirety. Because I also wanted to use more of my gold-yellow colours in the actual brand, I also changed the colour of it so it would suit more. This is what the final logo looks like.

Screen Shot 2016-04-21 at 14.06.16

 

I kept some of the whiteness of the background in the swirls because I felt it made it stand out more. I also already knew that I wanted to have white in my background for my website and for my mockups because the colour worked better than when it was tried with black or grey for example, which I unfortunately did not get a picture of.

Screen Shot 2016-04-21 at 14.19.23

This was my final design for my logo and font placed together. The font that I came up was a combination of handwritten font KG Eyes Wide Open which I discussed a post or two ago, and the serif font Lucida Bright Regular also discussed a few posts ago. The reason why I chose these two fonts was because I liked the curve of the KG Eyes Wide Open better than the previous font choice as it fitted closer together with the Lucida Bright Regular and made it seem more natural. I like the contrast between the orange triple spiral and the dark green of the font, which is the same colour used in the Lucida Bright Regular a few posts ago. This green reminds me personally of richness and fertility, which I like because it links with the triple spiral and the idea of the three different types of women, all of which link to fertility and Mother Earth. I think this is quite appropriate for a female only gym, as it signifies the idea of power and a force of nature, which I think would appeal to my target audience.

 

Font and logo final draft