Tutorials

I have begun to look at the possibilities withing the tutorials page

The first page would give you sub menues for different types of tutorials and then by clicking on them you can be given further choice for searches. You can also search on this page for a tutorial if you have one in mind.


You would then be taken to a more in depth tutorial page, which could either be step by step photographs or videos (as shown) Again, the magazine would link back to this through the archive of the tutorials within it, and also any time a move is mentioned on the site it could link back to this so the viewer finds out more.

There could be the possibility for readers and fighters to submit their own tutorials.

Watch fights feature

Through the fighter profile pages you will be able to watch specific fights; These could be owned by the female fighter site itself, or will be embedded directly via various websites / youtube etc;

First you will get mini screen and then (possibly using flash) the ability to scroll quickly throughout the fights to select the one you want with ease and minimum fuss and without boggling the mind with too much information on the screen! Also, for those who want a particular fight, there is the ability to search the fights page...

As described above

After clicking on the fight you want the video will be enlarged

This will allow you to watch the fight and there is a link that will take you back to the profile screen, and alternatively the menu will always remain on the right side of the screen so you wont get lost....

Fighter profile page continued

Few extra links added to the fighter page.

Fighter profile pages

Started to work on the fighter profile page, this is just a rough guide I have a few more ideas

First few pages done

OK, since completing the layout last night I have started to move on a little with ideas for the first few pages I will show in my presentation;

Simple layout for the Female Fighter homepage

A website like this will have so much information that I wanted to keep the front age a simple as possible - rather than keeping it with no information on I decided a good feature would be for it to have a 'snapshot' screen that will go through the menu items one by one and all the top / most recent / relvant information will be displayed there;

The 'snapshot screen' on the homepage

This way the homepage stays simple but will still have snippets of information to entice viewrs further into the website

Examle of the changing information withing the snapshot screen

The above is an example of the latest news headline(s) flashing up

An example of what happens when 'Magazine' is selected on the menu

While the snapshot screen is doing its thing on the homepage, you are free to either click on the screen for more information or click on the menu to the right where further links will be offered (if there is not just a single page)

After the 'current issue' link has been selected and you are taken to the relevant page

On the current issue page you are shown a number of different things; you are given links to specific articles within the magazine that would be on the website (such as the interviews and tutorials) and also links to the fighter profile pages (shown by using their name as a link) There would also be options to buy and subscribe to the magazine.

Further exeriments

Experiments within the layout; links and texts, etc

Even more background amendments

After some 'constructive feedback' on the general layout of the page so far, I have changed the layout idea one last time - I am quite happy with the layout as it is now, and have decided that regardless I need to move on as I am fast running out of time.

Updated version of the layout

The main change is that I have moved the links from the menu to the right. The hierarchy generally is better and the site easier to navigate. It also leaves alot more room in the white part of the page so I can keep most of the pages with the same layout. I have decided also that when the page needs to scroll down, JUST the white part will scroll down and the borders will stay fixed.

Further background images

Just final touches on the background to give it more depth

Further rollover example

Rollover example

Example of what would happen when you rollover the menu options

Basically, when you rolloverthe menu on the left, it will change from yellow to white and the 'rope' sybolising a boxing ring will appear across the page - very obvious and clear to follow.

The further links will drop down from 'chains' which symbolise cages and is a nice images for 'links' aswell.

There is the option if making a flash website that the ropes would 'shoot' out and the dangling chains could sway slightly, however I think that would be over the top... it would depend on the designer I guess.

Homepage: further work

The homepage after I have been working further on the layout and adding links.

I have decided how the links will work, and should be able to show this on the next upload.

Experiment: logo on previous homepage

Just a quick experiment to see how it looks - not final page

Final web logo

Finally managed to get a logo for the site that I am happy with - and it incorporates all the elements I wanted to; ropes to symbolise fighting, the logo from the magazine and also the same 'distressed' and 'swirly' image theme that is going on through the magazine pages.


Final 'website logo' incorporating the magazine style and retaining femininity.

I now need to build the page around this but hopefully the detail and softness in this will balance out the strong lines I will need to keep in the webpages. I think the logo didnt sit right before, and also the page lost some of the 'feminine' aspects that the magazine managed to pull off - this should be the first step to solving that problem.

Onwards and upwards.

Initial layout issues

I really like the idea of using ropes - they tie in nicely with the subject and also as shown you can include menus in them and also they would be a good place to have adverts (as they are used to advertise on in real life!)

However, something was really not sitting right with the layout of the my first attempt and I think the answer lies in the title - so I am now playing around (again in rough) with some ways of sitting the title within the ropes better;

Hopefully this will work better; once I am happy with the layout I will work on the ropes and the look as a whole.

I am thinking of maybe making the title and the ropes one and the same - we'll see how it goes but by the end of the day I need to be moving on to the next stage of the process as there are only a few days left.

Home Page ideas

I have started playing around with ideas for the homepage and how it will look, using different elements from within the magazine.

This utilises elements from the magazine such as the colours, type faces and the skewed box look, as well as the general background.

Alot of work still needs to be done on this, but it is a short project so I need to be pressing on with the next stages soon.

Site Background

As mentioned before alot the important elements I want to keep are both the magazine colours and also the general look of the magazine. I have been having very quick experiments with how the actual purple background should it on the site - if it is used at all.

There is the option to have the standard centred page style...

There is also the possibility to have the page positioned the way alot of the pages in the magazine were, about 3 quarters dark background and the other white - this would follow on from the look quite well

There is also the option of gaving the whole background in the themed style of the magazine.

Also, the background could stay white and use the colours and themes within elements of the magazine.

The site will have alot of information on so I think a key thing for me to keep in mind will be balancing the amount of information with the busyness of the site - alot of these kinds of sites are quite messy and I am aiming to keep this as clean and accessible as possible.

These are not at all what the final layout will look like, I am just trying to get an idea of placement in my head.

Web Template

We were advised that when showing images of how things will look on the internet to always use a template with the address bar at the top.


This is a screen grab of an internet address bar with the web address typed in.

This will be the template I use for the rest of the mockups.

Initial Website Map - sketches

I have sketched out and stuck on my wall the initial map for the site. As my project develops I will be adding to this and moving things around so for now it stays as a rough sketch;

Initial sketches of the basic web structure - I have not yet gone in to details for the menus or decided how much information will be on what page

The sketches include what I think could be attractions to this site (such as the opportunity for live streaming and downloads) and the kind of information that the site will hold.

Getting Started

We have been advised that the first thing we should do (apart from set up a blog which obviously I have done) is to begin to research websites we like for influences.

I decided however before I did this that I wanted to get a clear starting point for what pages I will be making - the website would be a huge one so I just need to show examples of what it could do. There is not alot of room for much more than that as we only have a week before we get the final feedback and start preparing for the presentation.

One of the most important parts of the Female Fighter magazine was the overall look; the colour scheme and the themes used. It's important that although the structure of the website will be vastly different to the magazine, the look should remain the same. The site and the magazine should belong to each other.

So, I have started out by beginning to look through the magazine and decide what is vital, and have started to map out the website (which should be documented up here later today) for now, rather than stick the whole magazine up here I have made a 'mood board' of elements I want to keep; colours. font types - basically the general 'feel' of the magazine;

The moodboard for the original magazine, showing important design elements that make the
magazine unique.

The original magazine did its job in that the design gave a nice balance between showing the 'toughness' of the sports (with the images used, strong font types for headlines and the distressed backgrounds) and a more 'feminine' feel with the colours used, the softer font types and embellishments.

Welcome to Female Fighter

This is a blog I am setting up as part of a project for my Graphic Design course.

The aim of this course is to come up with an internet based solution for a magazine concept I previously came up with for the first part of this course.

My concept is 'Female Fighter'; a fightsports magazine aimed primarily at women. I chose this theme as the subject is one that am heavily interested in, and as far as I am concerned there is a big gap in the market for this. The popularity of women fighters is growing worldwide; although (perhaps understandably) there are many who do not support it, or will 'entertain' the idea but not take it seriously.

My goal is to design a platform that promotes women in the fight scene seriously and offers fans of the sport the chance to learn and gather information. I hope this is what I manage to achieve!