Since I already have a solid draft of my Game Design Document, I decided it was time to start putting the website together.
I started with choosing a template from Wix, which I decided I wanted to started from scratch from.
I decided on the strip header layout, which I felt was the closest to the wireframes I designed. I opened it in the Wix Editor, and set to work.
I started by creating all the different pages the website needed. I made all of the GDD pages invisible on the drop-down menu, so that they can be accessed easier from the GDD navigation page.
To start with the web design itself, I altered some of the colours to be easier for me to look at when working on it. These will change later, and were chosen solely for the purpose of being easy on the eyes. These colours also help me feel positive, which will help motivate me to continue working on the website.
I started by changing the menu bar, and site name in the header. I then followed the design I'd drawn out and filled the home page with an image, and organised the text boxes.
I also added a strip matching the menu strip on the footer, which is where a list of pages will be. I then went and changed the menu some more, but changing the colour the buttons go when an option is selected, and when it's hovered over.
Before I did anything else, I opened the mobile editor, which gave me different options for how I wanted certain things configured. I selected that I wanted the header to be on screen at all times, and for there to be no action bar, as it wouldn't be necessary. I also opted for a back to the top button, which will be useful for some of the larger pages.
I then set about finding away to make sure everything was lined up evenly. I didn't yet know about using rulers in Wix, so I instead used a transparent container box to position text and images inside of. I can then align the container box to the centre of the page, which makes everything nice and neat.
The next thing I worked on was the GDD navigation page, which required buttons for each of the sections in the document. I set about designing the layout of these, which I followed from the wireframe I designed.
I went through the process of making sure all of the butttons led to their respective pages, which meant opening the link menu and selecting each page manually. I then coloured them the same as the rest of the website so far to get an idea of what colours I might go for later.
I then, using the container box method, created a few of the GDD pages, with only their titles written out. Since I'm still on the fence on whether I've complete the actual document, I didn't want to put any thing on the website that'll take time to remove.
I instead set about adding in the buttons to all of the pages. The previous page button, the next button, and the GDD return menu button. I realised I wanted the GDD button to always remain in the same place at the centre, so I moved the button on the Game Introduction page.
I then went to all the pages until I'd added all of the correct buttons. I did this by copying the container box, which also contained the buttons. I then changed the labels and moved onto the next pages.
I made sure all of the buttons led to the correct pages by using the preview option the Wix Editor has, which allowed me to use the button as normal.
I then went back to the GDD navigator in the mobile editor, which showed me how the buttons had organised themselves. I corrected this by making them all the same length, which tidied up the screen a lot.
I then did the same thing with the buttons on the GDD pages.
I then edited the the home and about pages to fit better on mobile. The image on the home page, for example, had to be sized down, since it couldn't be in the background like it will be on the computer version of the website.
Lastly, I added some quick text to the GDD navigation page, which gives instructions on how the system I used to flick between pages works.
Next week, I plan to start adding in some of the information that I'm completely settled on into the pages of the GDD, as well as researching into what the best colours and fonts would be for the theme and tone of the website.
Comments