Category: Semester 2

This is what the header looks like for my website, It may not be the final design however i do really like the way it looks and it took me a fairly decent amount of time to get it to this stage.

So in order to create this i had to first start with a green rectangle which is the background of the header. Of course this is going to be in my theme colour! After this i tried to place my GymScn logo on top of it, however with the small height of the rectangle the logo was so small that it got lost in the design. So i did some digging and i found that a lot of websites use an added shape in order to fit a circular logo in for instance. So i decided to give this a go, and i found the result was perfect for what i needed, i found it difficult to add a circle in there however. this was because if i imported it as an image it was slightly blurry and very noticeable and i couldn’t find a circular tool in Muse. So in the end i had to create a square and then round off the edges until it looked like a circle. A bit of a long route but i got there in the end!

Next came the headings in the middle, and i knew i wanted three to create some symmetry in the page. This was actually quite easy to do and all i needed to figure out was how to edit each layer with a certain amount of clicks. After working out how many clicks i needed to do to get to the text layer i could then easily edit the font and size and get rid of the original background colour. As mentioned previously i wanted to either add the social media links in each separate page or put them in the master page, i ended up going with the later as i found it suited the theme more, so i used the set of icons that i had create earlier on and linked them up to real web pages of each social media site.

Finally i wanted to add an element of the master that stuck to the corner of the browser, i found this tool to look really good when the background of the button is slightly opaque so that you can see behind but not fully. You can see below what i mean:

The way it sticks to the top corner is a really nice feature because that is a very important page of the whole site, its the page where people sign up and if they don’t find it because theres so much else on the page then i will be losing customers.

So i have started to create some images for my website for certain things that are key to the site such as variations of the GymScn logo to paste in places and small custom logos for things like social media page links. I wanted to make these myself because then i can create a set that completely suit the theme of the site.

GymScn logo variation for site:

2 sets of social media links:

I could have easily gone on the internet and found some small logos that would have suited my theme but i felt making them was the proper way to go about things rather than using someone else’s work on my site.

I am not sure where exactly i would like these logos to go, i know i want the GymScn one to go on the header of each page (which means it will be added the the master page?) And possibly i may add the social media logos in a specific slot thats visible on each page or i may add them in on each page separately to wherever suits that specific page best.

Upon starting to handle Muse and creating a site plan i have already found how similar it is to other Adobe applications such as Photoshop with the drag and drop features and the tools which are very similar if not identical in cases.

I have started by creating a site plan with 5 pages, these are: Home, GymScn, Achieve Greatness, Contact and Profile. GymScn will be a page that should feature a map of all the different GymScn locations and should also have some images of the QR codes on some of the machines in a gym to give a representation of what it would look like.  The Achieve Greatness page will feature inspirational pictures and some text advertising why GymScn helps you to keep motivated, waste less time and other important feature of the web application.

Firstly i have created my actual website and set up a folder system that i can now put all of my images and other items than need to be imported into the website in one place. This is also where the Muse folder is, this is not only for my organisation but also for the computers organisation as i had heard before that websites tend to run more smoothly with less errors if there is a proper folder system.

Now comes the simple task of actually creating the whole website! I expect this will take up a lot of my time and i will keep checking in here to update bits of info on what is going wrong and right and what i need to change.

Looking back i remembered that for my R+D i had made some mock ups of what i wanted my website to look like, not in terms of colours and content but rather the layout and the symmetry. Here are those mock ups for  a refresh.

now when its coming to making my website for real i have a few things that i wanted to be included into it, there was a list i posted on this blog before, and this is that list:

• Top left hand corner logo
• Scrolling header images
• Blue, black and white colour theme
• Relevant images embedded in different shapes opposed to the default rectangle
• Rollover navigational bar
• Small graphics alongside text
• A variety of bold, italics, capitals and underlined texts.

By keeping to this criteria i will know that i have kept all of the same elements that the top brands of the gym and fitness world seem to have on their websites. I’d like to call them the staple website needs.