final web design designs + EVALUATION

http://totton.org/k/asher/

dreamweaver

Index.HTML

Main.HTML

Menu.HTML

digitalart.HTML

stylesheet.CSS

Create HTML files for each page. HTML

Set background image as PNG ( Page properties )

Insert image

Click on image (blue bar) in design mode and link to another HMTL page.

Screen Shot 2017-03-21 at 12.41.07.png

Screen Shot 2017-03-22 at 09.48.53.png

Screen Shot 2017-03-27 at 13.05.11.png

Screen Shot 2017-03-22 at 12.44.52.png

Screen Shot 2017-03-27 at 13.05.50.png

Screen Shot 2017-03-27 at 13.22.53.png

Screen Shot 2017-03-27 at 13.24.16.png

Screen Shot 2017-03-28 at 12.43.18.png

Screen Shot 2017-03-28 at 12.52.08.png

Screen Shot 2017-03-29 at 11.45.04.png

Screen Shot 2017-03-29 at 12.37.01.png

Screen Shot 2017-03-29 at 12.47.33.png

Final Designs

Screen Shot 2017-03-08 at 10.07.31

Screen Shot 2017-03-08 at 10.07.38.png

Screen Shot 2017-03-08 at 10.07.46.png

Screen Shot 2017-03-08 at 10.07.54.png

Screen Shot 2017-03-08 at 10.08.01.png

Screen Shot 2017-03-15 at 11.35.49.png
Screen Shot 2017-03-08 at 10.08.19.png

PEER FEEDBACK

I asked my peers to what they like about my website designs. They mentioned that the scrollbar that I have used is too small, which may affect the navigation of the page, as it is hard to click onto. They also said that the theme of the portfolio all link together creating a good UI as I have used a black and white theme throughout. I have also got feedback on the UI of the designs, where the menu tab will be easier to navigate if it has only one bar, rather than two.  In order to signify that the menu bar  will go back to the menu screen, where as the landing page will have two bars.

Screen Shot 2017-05-03 at 09.59.55Screen Shot 2017-05-03 at 10.00.02

 

EVALUATION

  • There are two working links for Instagram and Youtube
  • There is a bulleted list
  • There is rollovers on the menu page.
  • There is a copyright footer on the contact page.

 

 

 

Screen Shot 2017-06-21 at 14.34.15Screen Shot 2017-06-21 at 14.34.06

When creating my website I wanted the site to have a good UI and UX in which I achieved using  a monotone colour scheme of black and white. The layout of the webpage is easy to navigate as it uses a simple scroll navigation whilst leaving the majority of the space to images of the work that I have completed.

The colour scheme makes the images that I have created, stand out more as it creates a juxtaposition of the contrasting colours. I used photoshop to create the design aspect of the site. I mainly used the text tool and used the ‘source sans pro’ font that I used throughout the site. The font gives the web page a modernistic look which would help my site appeal to the user as it has a good UI and UX.  I have added a few illustrations to draw some attention to the plain background whilst giving the page a theme.

I have made the menu tab disappear on the menu page as there is no use of going back to the landing page. I have put the pages name on the left side of the page to let the user know what the pages name is e.g. traditional art. The user interface of the web page means that there is more space for the work images, rather than having a lot of text on the page. The navigation of the page is very simple, as the images are used as links rather than clicking on individual text headings which means it is much simpler to use.

I managed to get the instagram icon to link to my instagram page. I did this by clicking onto the instagram icon in Dreamweaver and pasting the URL of the instagram page. Due to the interface of Dreamweaver, I had to put a table onto the page in order for the icons not to move everywhere on the page. I then set the table to transparent so it is not visible to the viewer.

 

Screen Shot 2017-05-03 at 09.10.24.png

To get my Dreamweaver site working, I firstly made multiple .HTML pages with a .CSS page in order to set up the web format. Then I set up the background images of the web page into Dreamweaver by using the page properties bar. The background of each page which contained all of the information that I would not need to be interactive. I then imported the images that the web page would need to be interactive such as the menu bars and the final images of the artwork that would be used as a form of menu that would be clickable to the user. When the image had been imported I went to the link option and then linked it with another page that it was related to e.g. Index page to menu page.I then set up the web page on a remote server, so that it was accessible outside of dreamweaver.

 

Screen Shot 2017-03-28 at 12.43.18.png

 

Screen Shot 2017-03-07 at 12.57.23.png

Screen Shot 2017-03-08 at 09.53.56.png

Screen Shot 2017-03-08 at 09.55.13.png

Screen Shot 2017-03-07 at 12.58.13.pngScreen Shot 2017-03-07 at 12.59.22.pngScreen Shot 2017-03-07 at 12.59.29.png

Screen Shot 2017-03-15 at 11.35.49

Screen Shot 2017-03-07 at 12.59.42.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s