On this post I’m going to talk about the process I went through when creating my website. So I started off by choosing the size of my website. In tutorials that I have done with Tim before the standard sizing is usually 960 x 500. Wanted to include 12 columns in the document as I had used them previously with Tim and also I had learnt to use the software using these many columns. With all the setting in place it was time to start making the website. Now previous research about the web design theory about using silhouette and shapes rather than fine detail really went out of the window and looking back I really regret not doing this as it could have save me so much time and considering I ended up doing 4 website documents this would have been an easier method. So with the first website document I made I had many difficulties with layout and how it looked in preview, actually this problem continued through the making process.
So here is the basic plan for my web design, showing all the pages I want to include and how access them when editing. I know I have mentioned this in a previous post but when you start making a website in muse, if you want something to be included on every single page making it continuous then you must have it on the A- master page otherwise it will only appear on the chose page. So for this design I wanted to have the Social media links and icons at the bottom of the page in the footer (this is where I had lots of difficulty), and I wanted the menu bar at the top of the page at all times to navigate you around the website. So this is what my A-master page looks like with the navigation bar at the top and the social media links at the bottom. I have got four sections to my website Home, About, Contact and Gallery. Through my research I discovered that this layout for websites was quite popular and worked really well. To get the social media icons to actually link to the correct social media page this included adding hyperlinks from each assigned page.
This is how I added the hyperlinks, you copy and paste the URL into this hyperlink box while selecting the icon that you want it to link to. You can also link icons and symbols to other pages within the website itself like about or portfolio. The hyperlinks worked really well and I had no bother at all setting them up and getting them to work. However what I did have problems with were the actual icons and spacing that appeared at the bottom of the page in the footer section.
So on the home page (Where I added my Logo), this is how it turned out when you view the design in preview. The Social media icons were too near the logo in the centre of the website and there was also too much white space at the top above the logo and no matter what I did to try to fix this problem I just couldn’t get it right.
When that was showing in the preview, this is what was showing when I was editing it. It looked completely normal. I looked all over the internet for solutions and Tim tried to help me as well but neither of us could find out why it was doing this. We tried changing the six elf the document, changing the many setting in site properties however none of this made any difference and in the end it stopped working all together. We think It just crashed or it had some sort of virus thing so I decided that the thing to do was start a fresh as I wasn’t too keen on the design anyway.
However little did I know that I was going to have as much trouble with this document as the last. I made the document exactly the same size however this time the social media icons appeared halfway up the page and moved the logo into the wrong place. I found this again really difficult to correct as I wasn’t too good on the software as I had only just learnt how to use it. I went back to the A-master page and tried to correct the errors but I was unsuccessful.
This also happened when I was trying to correct the other error with the website. Nobody knew what was wrong or how I could resolve this problem to again to my disappointment I had to start again as I just found fixing this problem impossible and I was wasting valuable design and making time. (This was the master page and the image above was on the home page). So for the second time my document for the website had crashed. I still don’t know what was causing this to happen I looked it up but I couldn’t find a solution so I created another website.
So this time I thought I would change the document size as I was also having problems with the viewing in the browser as the document was too small. I upped the size to width 1170 and the hight 500, I thought that this might stop the constant problems I was having. Apart from that I only made one other minor change which was turning the sticky footer setting off, I did this because I thought this might stop the footer ending up in the middle of the page but part from that I decided to keep the rest of the settings the same as it seemed to look okay before hand.
This was another design I came up with but till including the new designed logo. I got the yellow background pattern from adobe assets which is were you can get royalty free images and use them in your own design. I really liked this image so I decided to use it in my website. However what I found that the yellow was too bright against the black so what I decided to do was add a white square over the image but turn dow the opacity so it just muted the colour yellow. What then also did was change the menu bar from black to grey and then I made the text black as white didn’t stand out very well. At first I really liked this design and continued on with the rest of the website. This was the home page and I wanted to continue this theme onto the other pages within the website. The pastel coloured background would be great to apply text and images on top of.
I had almost finished the website and as I was making it I just wasn’t happy with the way it looked and the whole style of the website. In the end I thought that the yellow texture background did not work at all and it distracted you from the information on the page. I didn’t like the layout of the pages and the least favourite bit of the website was the portfolio page. I didn’t think this showed off my work in the best possible way, and considering that this project was to display our work and advertise us as graphic designers that this defeated the whole objective. I spent hours trying to fix it make it the way I wanted and it was making me frustrated and upset. I then remembered the layout theory and about using shape and silhouette and how this can help with design and layout. I took this into consideration and decided to keep the website but again start a fresh and make a new one with a clear head. I also did a bit more personal research about the style and aesthetics of the website rather than layout, I decided it was time to go in a different direction and try something different to see if that made a difference.
This is the plan for my last website design. This is the finished copy of my website but by showing you the plan it shows all the pages and a glimpse of what the design looks like.I’m going to add screen shots of my website below however I was going to add a video of the screen showing how the website worked in a browser unfortunately WordPress wouldn’t let me as I would have to pay and upgrade my blog so instead I will add screenshots.
I really like my web design, I think it looks clean, smooth and easy to read and understand. It clearly shows my work and makes it clear that I am a Graphic Design student. Even though I really like my website there is always room from improvement. I’m going to go into more detail about my final design in other posts talking about, aesthetics, practicality, accessibility and much more.