colour scheme research

art design school website research

 http://www.mediadesignschool.com/


http://www.brit.croydon.sch.uk/page/default.asp?title=Home&pid=1


http://wittart.co.nz/


http://www.arts.ac.uk/


http://www.gsa.ac.uk/


http://www.rca.ac.uk/


http://www.ruskin-sch.ox.ac.uk/


http://www.ucreative.ac.uk/


https://www.cca.edu/


 http://www.sva.edu/


http://www.artcenter.edu/accd/index.jsp


https://www.academyart.edu/


http://art.yale.edu/    (bad website)


http://www.aaart.edu/ 


http://www.otis.edu/

Update on website

Below is the updated HTML code for the new evoke website.

Below is an update of my CSS code.

Below are screenshots of the new evoke website.

my new evoke website

Below is my design in illustrator so far.

 Below is my HTML code. (Will be posting more updates on my code as website is not yet complete.)

Below is my CSS code (Will be posting more updates on my code as website is not yet complete.)

Below are screenshots of my new evoke website so far.

If you do see any problems in my code or ways you think can improve my website please leave a comment it will help thank you.

Reflection on what I have learned

Through this project I have learned quite a bit about how to code a website. I now know more about the history about the web and how the web works. I now have more knowledge of how to build a proper website not only HTML but also CSS. I have now learned how to use CSS to improve my website and i have also learned more about colour choices as my original website colour choice was bad.

Simple menu, videos

Simple menu:

To make a simple menu you need an unordered list, with each item in list having a link to each page of the website.

<ul>
<li> <a href="index.html"> HOME </a> </li>
<li> <a href="linkhere"> ABOUT </a> </li>
<li> <a href="linkhere"> BOOK NOW</a> </li>
<li> <a href="linkhere"> CONTACT</a> </li>
</ul>

Video:

Before HTML5, there was no standard for showing videos on a web page. Videos could only be played with plug-ins (like flashplayers).

To show a video in HTML, use the <video> element:

<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

Auto play a video:

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>

Image optimization

What is optimizing images for the web?

The images you create in programs like Photoshop and Illustrator look amazing but often the file sizes are very large. This is because the images are made in a format which makes them easier to manipulate in different ways.

With file sizes upwards of a couple of megabytes per image, if you put these files on your website it would be very slow to load.

Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains.

Images hold data other than just the pixels we see on the screen. This data can add unnecessary size to the image which leads to longer load times as the user waits for the image to download.

In terms of cost versus benefit optimizing your images should be near the top of your page speed optimizations if you don't have them optimized already.

How does it work? 

In simple terms optimizing your image works by removing all the unnecessary data that is saved within the image to reduce the file size of the image based on where it is being used in your website.

Optimizing images for the web can reduce your total page load size by up to 80%.

There are two forms of compression that we need to understand, Lossy and Lossless.

Images saved in a lossy format will look slightly different than the original image when uncompressed. Keep in mind that this is only visible at a very close look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image.

Images saved in lossless format retain all the information needed to produce the original image. For this reason these images carry a lot more data and in return are a much large file size.

We also can optimize images for the web by saving them as the appropriate dimensions. Resizing the image on the webpage itself using CSS is helpful but the issue is the web browser will still download the entire original file, then resize it and display it.

Can you imagine take a poster size image and using it as a thumbnail? The little 20px by 20px image would take as long to load as the original poster, when we could just be loading a 20px image the whole time.

 http://gtmetrix.com/optimize-images.html