Project Two: Reflection

I think at the beginning of this project I was on a roll with the designing and coding of my website. I wanted to spend all my time working on it but now I am just over it. I find it hard coming up with ideas and then not actually being able to code it because it involves stuff we learn more next year. I am glad I still managed to create myself abit of an image gallery even though its not at all like what I originally came up with in my mind. I am happy with how the overall website looks. I think it is very user friendly and easy on the eyes which I think is really important. Things I would do differently is probably have a drop down menu at the top so you know what each menu contains and carry my icons on the homepage on through to other pages. I think if I was to do this again I would take a more sketch/ hand drawn kinda approach to it, just to create abit more of a connection to the fact it is a handbook for art, design and media students. I would have also liked to have had an animation of a moving truck going across the different pages, that you could click on and would link you to a page that tells you what to do if you are moving house, Just to be abit funny.

Project Two: Testing in other browsers

I have tested my website in Safari, Google Chrome and Firefox and it mostly works how its suppose too.

My main problem has been that Safari doesn't load the hexagon shapes on the home page but the other two browsers do, unless Google Chrome isn't running its latest version. My image gallery did work in all the browsers but has now decided not too as mentioned in a previous post. It works sometimes and not others.

Apart from those two things everything works perfectly. I have noticed that when I run the website on a desktop computer elements on the page like the bottom 'hexagon bar' and 'main headings' aren't aligned on the page where they should be but when you open it on a laptop they are all in the correct place. This only happens sometimes too and only on some of the pages.

Firefox has proven to be the most reliable browser for running my website.

Project Two: Final Touches

Over the last week I finished the last of my web pages and spent today checking all my links and making sure everything was consistent throughout the pages. I managed to apply a white page border to each of the pages which was cool since that was part of my original design. I ended up using the following code to achieve this.

#contanier

{

margin: 0 auto;

background-size:contain;

border:20px solid white; 

height:100%;

background-color:#EAEAEA; /*grey*/

font-family:'Roboto', sans-serif;

font-weight:300; /* roboto light */

}

The code highlighted in red in specific to the border. When you zoom in and out on any size screen the border remains the same.

Here is a screen shot of how it looks on a laptop screen. 

I also added in an extra table under the calendar heading of key dates I thought were important to have as a 'quick view' without having to download the wall planner I provided.

 

I was having problems with my sitemap page it was opening up differently depending on the size of the screen I was using. I realised that I needed to add a div specifically for the text that sat inside the 'main content' div. This worked and solved my problem. I also ended up just making the div margin: 0 auto; to make it inline with the heading. This has meant that some of the options go onto another line like shown above. I don''t think that matters though. It is quite normal for it to look like that on sitemaps.

Project Two: Image gallery revised

Today I re did my image gallery using some Java script. My original gallery wasn't able to be used in Google Chrome. I have now completed my image gallery. I had to use some code "javaScript=:void(0)" to stop the page linking to the top every time I clicked on a thumbnail. Everything was working perfectly in both Google Chrome and Firefox while at WITT today but when I came home and opened it on my laptop the images would no longer load with the "onClick" function but would if I changed it to "onmouseover". It makes no sense why this is happening. I have made sure that I am using the latest versions of each of the browsers. I am going to check tomorrow at WITT to see if it still works on the computers there using the "onClick" otherwise I will just change it to "onmouseover". Frustrating!!!!

Project Two: Website page border

Originally when I designed my website I wanted to have a 10mm white border around my whole website page. I didn't want it change either when the user zoomed in or out. I managed to get the border looking right on my computer but realised it wont be the same on computers with bigger screens. At the moment I am trying to figure out how I can do this. I have applied a border using the border code but I want to figure out how I can apply it so that when you zoom in and out it adjusts it self accordingly and still has that same border. Apart from that I think my website is finished I just need some people to test it and see if they pick up any mistakes or recommend changing / adding something.

Project Two: Student gallery page

I have finished making my image gallery. The way it works it that when you click on one of the thumbnails it will show that image in the 'main' container. I have just selected a few images from the courses available and given the students name who created the work, what level of study and what paper it was for. I would imagine this image gallery to be updated each term or semester with relevant work relating to the papers on offer during that semester.

The only problem I have noticed with the image gallery so far is that it doesn't work in Google Chrome but it does in Safari and Firefox. This is annoying because in Safari all the hexagons on the homepage don't appear in Safari but they do in Google Chrome and Firefox. So I think at the moment Firefox is the only browser where my whole website runs correctly. I have checked all the browsers to see that I am running the most updated version as this had been the problem previously but I am running the latest version of them all. Hopefully it just requires me adding a piece of extra code. 

Project Two: Student gallery page progress

I have started making a student gallery for the website. I tried using the code that I was given in class but was having trouble trying to remember what each part did and what code I was suppose to use since it changed quite a few times. Instead I did some research and found a tutorial on how to create a basic image gallery. It is very similar to the one that we originally drew up during class time. I need to put images in it though to test it actually works. I also have to still put the code for the gallery on the actual imagery gallery page as I have been building it in a separate file currently. This is what I have so far..

Project Two: Students page progress

This last week I have been working on the 'students' page for my website. I have managed to get everything linking so that when you click on one of the timetables it opens in a new tab and you can view and download it in PDF form. I have also attached the wall planner that I made and just need to add a couple more bits of text and it will be finished. Here are some screenshots of what the page looks like.

  

 

Project Two: 2014 Calendar

I have decided that instead of using just the calendar provided that it would be cool to have a wall planner instead that students can download and use. I have made it an A3 size and included all the key dates on it.

Project Two: Support and location page progress

Today I completed the 'support' and 'location' page. On the 'support' page there are a couple of links. One of the links takes you to the library website and the other allows you to open, view and download a copy of the instruction manual for the 'beast'. I thought the code for that would be a lot more complex but it was just like adding an image to your code. For the location page I have embedded a google map of where the WITT campus is and I would still like to add some code that allows the user to click on the image of the map down the page further and it open in a new tab at a larger scale.

Final support page:

Final location page:

Project Two: Courses and contacts page progress

I have been working on both the courses and contacts pages. I originally just had the contacts table as an image and thats it but I thought that it would be better if you were able to click on the email for the different staff and it open your email, so I have removed the image and coded the table instead. All the email addresses now will open your email. The courses page just follows the basic layout I have been using for all the pages.

Final courses page:

Final contacts page:

Project Two: Home page changes

Today I made some changes to the home page. I have made the fonts more chunky as the thinner version of the font didn't relate as well to the other image icons. I have also replaced the flickr link for the facebook link instead and replaced the information symbol for the 'about us' page to the WITT logo as I think this will be more recognisable. This has mean't I have had to change the icon for the link to the main WITT website, it is now just a WWW. When you hover over the hexagons a yellow caption box will appear too, telling you what it links too.

Something else I have finally managed to figure out is how to link something to a specific part of a webpage. I have used this feature for some of the hexagons and will add it to the site map so when you for example click on 'timetable' it links you to the students page but takes you directly to the part of the page where it has the information about timetables. 

I got the code for this from http://www.yourhtmlsource.com/text/internallinks.html.

Project Two: About us and Site map page progress

I have started coding the additional pages for my website. So far I have done the Site Map page and the About us page. I have linked them both to the home page. So they are both working correctly.

About us page:

I thought this page looked abit boring as it didn't have any colour apart from when you hover over one of the links, so I added the little hexagon bar that I made to use as a divider on the other pages and just placed it at the bottom of this page. I think doing this also has helped keep the pages consistent. 

Site Map page

For the Site Map page I have given everything a pink hover. So you can either click on for example  "Support" and it will link you to the page or you can be more specific and click on for example "After hours access" and it will take you to that part on the "support" page. I am yet to create the links for all of them. I will do that at the end once all the pages have been made. I also have decided to keep the options under each of the page headings purple but I might change them to black as well I haven't yet decided which is better. The screenshot only shows part of the page too. 

Project Two: Home page progress

I have been working on my home page. I have managed to get all the icons sorted for each of the hexagons as well as give them each a hover. The page has all the correct colours now too.  For the hexagons I used the classes "orangeone", "orangetwo", "pinkone", "pinktwo" etc. "One" representing the first rectangle, "two" representing the second rectangle. This mean't I didn't have to go through and give every single rectangle of every hexagon a different name. I could just do it according to the colour.

I have decided to use the menu that runs across the top of the page. I might still change this later on though. I had abit of trouble getting the menu to sit in the right place and making everything evenly spaced. I also figured out how to get the font working that I wanted to use. It was all just a matter of copying some code from google fonts and placing it in the HTML. 

Because I have broken the menu up into two parts like shown above I realised that the right menu takes up slightly more room as it has more letters than the left side. This has mean't that something won't quite be evenly spaced. I have decided to not make the logo  "margin: 0 auto" and instead just move it to make it look like it is in the middle of the two menus. If I don't do this there will be a really big gap on one side of the logo compared to the other. 

Final menu:

I have given the menu a hover as shown above. It is the same pink I used for the hexagons. I wanted my menu to have an underline but instead of leaving the "text-decoration" on I have used "text-decoration:none;" and given them a "bottom border." This way I can control the weight of the line and the space between the line and the word. 

I have also given a hover to the link "Site Map" on the footer. Everything on the page has been linked correctly as well. Some just don't work as the page doesn't exist yet.

Final footer:

Final home page:

Project Two: Hexagon icons

I have gone through and resized all the icons I will be using for the hexagons so that they fit nicely within the rectangle. I have also resized them smaller so that I can use them for the hover. 

Project Two: Coding the homepage

I have started coding the homepage. I managed to get so far with the hexagons and then didn't know what to do next. I couldn't seem to figure out how to make the top rectangle the one that has the image. I then realised that I just needed to rotate the rectangles in a different order. Once I had hexagons I found that I had two that weren't inline with the rest but all I had to do was make the main div container wider. The measurements weren't quite matching up and this is why I had that problem. Below are some screenshots of what I ended up achieving.

In the above screenshot I have each rectangle as a different colour to help see which colour is acting as the top rectangle and then I just added in a background image to that same rectangle.  

In the above image I have gone through all the code and given each top rectangle a different class name and then in the CSS I have started to change the background images so that each hexagon has a different icon rather than the same in all of them. The text isn't quite right yet I still need to figure out how I get my font to work that I have chosen from google fonts. I also haven't added a menu yet because I am still undecided which menu I should choose.

Project Two: HTML and CSS hexagons

Since I am using hexagons on my home page I will be using this tutorial http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3 . Not all the code is relevant and I will have to add in some of my own. The main thing is that I have good labelling and commenting so I don't get confused about which rectangle is controlling which part. I haven't shown this in my website designs but I would like to create a hover for each individual hexagon. When you hover over the hexagon the icon will get smaller. The colours will all still stay the same colour though.

Project Two: Hexagon website designs

I found this really cool link that has a whole lot of different websites that have used hexagons for their design. There is a real mixture but it is just interesting to see how the different websites have incorporated hexagons. http://designbeep.com/2012/07/31/showcase-of-websites-using-hexagons/.

Project Two: Div map

I have done a div map in illustrator for each of my web pages. The home page will have more div's for the hexagon part but I am using a tutorial to help me make that part. 

Project Two: Website Designs

Overall I wanted the additional pages to be simple and just really easy to navigate and read. I have edited out a lot of the text to kept it as minimal as possible. I tried putting the hexagons with an opacity in the background on the additional pages and it just didn't look right and made the content hard to read. I instead have decided to use them with a horizontal line as a horizontal bar to break up the different sections on each of the pages.

Home Page:

I still haven't decided yet which home page I am going to use but for now I am using this layout, just so that I could continue to design the other pages. 

Students Page:

I haven't decided if I will put in actual images of the timetables or if I will just do links to them like I have shown above. I will see how I go and see what it looks like once I start coding.

Student Gallery Page:

I plan on getting a range of photos of work from right across the different courses offered and cropping them to fit it the above boxes and then when you click on one, have it open into slideshow mode where it will display the photo in its actual size and state the course/paper/student who made the work. 

Courses Page:

Support Page:

Location Page:

Contacts Page: 

Project Two: Site map

Project Two: Home page design developements

I ended up choosing to use the hexagon design rather than the other concepts I did in illustrator. I thought the hexagon style layout would be abit more challenging for me. Here are a few variations of what I have come up with for the homepage using the hexagons. I really wanted to keep the design as simplistic as possible. All the colours I have used have been picked from the web swatch in Illustrator. I have also decided to use the font 'Roboto' which is available on Google fonts. I am going to use this for everything on my website and save the font I designed myself for something else. It just didn't really look right when applied to the rest of the webpage. 

Sketch of  the layout I am now going to develope.

Variation one:

I like the idea of having the menu either side of the logo at the top and keeping the footer as minimal as possible. I decided that having just words in the hexagons was abit boring so I have done half words, half icons and when you hover over each one a full description of the link will appear. 

Variation two:

I still like the idea of having a hidden menu that opens on a new page like the example I found in my research. I have done a couple of variations below to show what the menu could like when it is opened. I really like the one with the hexagons in the background. I think it helps show consistency and of course repetition. 

Variation three:

After thinking about it some more I have decided that having the menu options in the footer is not the best idea for my design because then people might think that all the options are in the hexagons too, when they are not. then again maybe it doesn't matter if it all fits on the screen without having two scroll down for ages to get to the menu in the footer. 

Variation four:

Tried a different colour scheme. Not really feeling this as much as the others. 

Variation five:

I think I like this colour scheme the most. It's just brighter and I think will appeal to a wider audience compared to the soft colours in the very first examples. I have also done an example below to show what the hexagons as a background would look like in these colours. 

Variation six:

Using the above layout I just wanted to see what it would look like using colour for more of the outlines rather than lots of block colour. I can't decide what I like more at the moment.