After I developed my web design on paper I started to make mock ups in Photoshop before using Adobe Muse. When I was making the sizing for the website, I went to a website called https://mydevice.io/. This website tells the size of your screen and also tells the sizing for other monitors, iPhone and iPad. 1920 pixels will be the main website I will be working out but will also do other sizes to make a responsive design.

Screen Shot 2018-01-30 at 11.17.08

photoshop

In Adobe Photoshop I started to create the background, buttons and choose the appropriate font. I developed my initial ideas further in order to improved the overall design and the layout of the website. My next step was to make the four pages, which where planned as home, about, work and contact. I exported all the assets separately ready to use in Adobe Muse.

I made a new website in Muse where I can add more pages. I made four normal pages by the plus icon and then a master page by the plus icon at the bottom. A master page is a universal page, which if you place an assets on this page it will show up on all the other pages on the website. This is good for headers and footers.

Screen Shot 2018-01-30 at 11.10.24

I created the buttons and footer in Photoshop. The buttons are separate .pngs so I can make hyperlinks for them later.

wip 1

Screen Shot 2018-01-30 at 11.22.59

We can view the website in a browser by going to File > Preview site in Browser to see working hyper links to other pages or Preview Page in Browser, which will just show one page for the website.

Screen Shot 2018-01-30 at 11.28.30

Here is my first mock up made in Photoshop, which I made in Adobe Muse:

Work page draft 1

Video:

It has a nice design but text and other assets appeared quite big and I should make them smaller. Header and footer will need to be more developed, as well. There were some errors with the first draft of the website but I have overcome those problems.

In addition, I added videos, more images and a slideshow to the website. For the slideshow I used a widget in Adobe Muse to create a working slideshow. When placed in the website you can set up working arrows and a close buttons. When previewing the website we see that now you can click on one of the images which pops up and you can also click the arrows to go thought the other pictures.

Screen Shot 2018-02-01 at 12.25.43

There is also a widget for YouTube videos, twitter and Facebook to be placed on the website page. For YouTube videos I had a existing show reel, which I used and also I would like to include a gameplay demo of Rogue Blade, which in my view is very successful.

To enhance further the website layout I decided to create a footer to make it look smarter. I made a new banner, which is a bar with my Squidmaker logo. I also added links to go quickly to other pages, social media links and the name of the website and year.

footer.png

This footer was inspired from another website that I researched which works out well for a footer but Adobe Muse didn’t cooperate with it and there was a error with the banner when in preview mode in the browser.

Screen Shot 2018-02-21 at 14.55.27

I had to cut the footer feature and develop it more. I changed the footers text and icons into another colour so it contrasts well with the white colour of the social media icons.

Screen Shot 2018-02-21 at 15.03.20

To add on, I tried the same design of the footer in dark blue colour. I do like more the second outcome and I decided to kepted it for the final version.

The header needed lots doing to it. The buttons and text where too big and the title/logo can’t be defined easily from the viewer. I changed the colour scheme of it and reformatted sizing, etc which lead to the better layout design.

Header

This screenshot looks better but would need more development in terms of font sizing. I have to make the title of the website bigger.

Here is a showcase of draft two:

https://www.youtube.com/edit?o=U&video_id=SnahX1kbYR4

My final version of the website I neaten the website up and added more pictures to make a nicer looking website. I included a picture of me on the About page and text to present myself to a clients. I also resized some of the text font and changed the boldness to fit with the website layout.

 

 

 

Advertisements