First, I'm going to place a link to my website in my Facebook page so my immediate friends can see it, many of whom are Witt students already and may take interest in looking at it, because I learned things I didn't know before while making it just by looking at the information I was told to put on the site.
I have a workmate who's not on my Facebook but is starting the Certificate in Creative Graphics soon, so I could give him the link to the website, see what he thinks, and also see if he'd pass it on to some of his other schoolmates who are starting the same course as him very soon.
I could give the link of the website to the Twitter accounts of both the main Witt one and the Witt Art one, because you never know who may be looking at those, and potential new students are to be found in those territories.
There are plenty of ex-students who probably have Facebook or Twitter accounts who'd be happy to share the link on their sites. I could consult with tutors about prospects in that area and many of them probably would have friends or family who are also budding artists who'd be interested in taking a course at Witt and would benefit from the information on the website.
I could take out a small ad in the newspaper or maybe even the online version of the newspaper if it's free.
Tuesday, 26 November 2013
Bug, Spell Check and Written Reviews.
In a bug check prior to launch, I realized that my rollovers still weren't completed, and with little confidence in the image sprite technique (I must practice this at a later date since it's now industry standard) I consulted Philippa and she agreed that it was OK I used the Dreamweaver function for making rollovers, which would add javascript to the code. I tried this and it worked quite well, and because the images are small it worked fast. I made a separate javascript folder so that the code wasn't in-line cluttering things up, and this went by without too much fuss.
I uploaded a draft site before I checked for spelling, but once the site was up I could see there were spelling and grammar mistakes so I continued to work from my pen drive and took each page into Microsoft Word by copy and paste to see what that came up with as it's usually pretty accurate apart from some USA English issues. Through this method I became satisfied that all of these errors were fixed.
I did another bug check and there were still some issues that I overlooked before uploading the draft version. The first of these was the campus map on the home page was too low-res and was difficult to read. I solved this by replacing it with a clearer, better campus map that was provided to us in the resources. The end of the paragraph under "Computers and Printing" on the services page was lacking a full-stop. In the library section the link in the first paragraph should've been the word 'here' linking to the site to match all the other links on the site. On the "Emergencies" page the first list is not an unordered list like the rest of the lists on the page and is just done in the p tags with text, so I changed that to an unordered list. On the 'Questions' page I still hadn't coded the form to write and send a question properly so I changed it to a text link to my personal email instead, and I also coded the email addresses to the staff table, as I hadn't done that yet, and removed the tutor Donna's name from the Arts Head of Discipline section as it had gotten in there somehow.
After that I was confident the site was thoroughly bug-checked and all problems in bugs and spelling were solved. Now I just have to reupload. I approached my cousin and father for written reviews of the site as it was in it's first uploaded state, and this is what they wrote:
"I found the contents of the website informative, with all text being presented in a clear and legible manner. It was well spaced throughout the length of the pages and any links were distinguishable from the rest of the text, making it easy to find forms and other information.
I uploaded a draft site before I checked for spelling, but once the site was up I could see there were spelling and grammar mistakes so I continued to work from my pen drive and took each page into Microsoft Word by copy and paste to see what that came up with as it's usually pretty accurate apart from some USA English issues. Through this method I became satisfied that all of these errors were fixed.
I did another bug check and there were still some issues that I overlooked before uploading the draft version. The first of these was the campus map on the home page was too low-res and was difficult to read. I solved this by replacing it with a clearer, better campus map that was provided to us in the resources. The end of the paragraph under "Computers and Printing" on the services page was lacking a full-stop. In the library section the link in the first paragraph should've been the word 'here' linking to the site to match all the other links on the site. On the "Emergencies" page the first list is not an unordered list like the rest of the lists on the page and is just done in the p tags with text, so I changed that to an unordered list. On the 'Questions' page I still hadn't coded the form to write and send a question properly so I changed it to a text link to my personal email instead, and I also coded the email addresses to the staff table, as I hadn't done that yet, and removed the tutor Donna's name from the Arts Head of Discipline section as it had gotten in there somehow.
After that I was confident the site was thoroughly bug-checked and all problems in bugs and spelling were solved. Now I just have to reupload. I approached my cousin and father for written reviews of the site as it was in it's first uploaded state, and this is what they wrote:
"I found the contents of the website informative, with all text being presented in a clear and legible manner. It was well spaced throughout the length of the pages and any links were distinguishable from the rest of the text, making it easy to find forms and other information.
The navigation bar at the top of the site was very obvious, which made it easy to find information relating to particular topics quickly. Font size on all of the pages was appropriate and readable, and bold headings made it easy to find relevant information at a glance.
The overall look of the site was balanced and clean, with good colour scheme/contrast and a functional design."
And:
"I have looked at the assignment Aaron has completed and I have found it clear, concise, and informative. The map is done well and so is the information given about the course content.
I liked the colour of the main paper as well it wa easy to read and did not distract from the content contained."
So I was quite happy with those two written reviews. Now all I need to do is reupload the final version.
Content, Coding Continued...
The amount of content available continued to grow, so that process was ongoing. I was able to stick to the paper prototype suggestions mostly. The only real changes I made there was the absence of a 'back to top' button, because the pages weren't really long enough for this to be a very useful feature. However, in the future if I do make a page with long content, making a back to top button that follows the user as they scroll much like the Tumblr button would be something I'd like to look into the making of.
I also decided instead of putting a calendar on the home page I put the campus map instead. I did this because the calendar with specific dates for Witt students was a big PDF document. I could've saved this into a jpeg but I would've had to scale it down a lot for it to fit on the page and that may have affected legibility.
I was having an interesting time with some of the coding at this point, adding lots of things in like email links, hyperlinks, tables and other stuff. I also had some difficulties as I hadn't made an image sprite for the rollovers yet, so the menu wasn't at it's finished state. I also had some trouble with the way the logo (which people would click to go back to home page) was set up, and I was trying to make a special div clickable which made a lot of area clickable that wasn't just the logo. To counteract this I changed it a bit and put the image inside another logo div just for the logo, positioned it with margins and instead of making it just a part of the 'header' div gave it it's own div and made the logo image directly clickable on the HTML, which solved the problem.
In general though, coding was going quite well, once a small compatibility issue with IE introduced me to the "If IE" code thanks to Philippa. As the content got larger, the need for longer pages became an issue, so I increased the length of the content div from the 1024px it was before. But for this to work I also needed an image that would tile seamlessly, and at this stage I wasn't quite happy with the way it looked anyway, so I took just the sunset part of the photo I used before, but kept the original colours and combined two different parts of the image and vertically flipped one, so they could always keep tiling if need-be and transition seamlessly. Because the image was also distinguishable now I turned the opacity back up and this also increased the visibility of the text I thought. This was the new background for the content part of the div.
With space no longer an issue I could continue putting content in freely.
I also decided instead of putting a calendar on the home page I put the campus map instead. I did this because the calendar with specific dates for Witt students was a big PDF document. I could've saved this into a jpeg but I would've had to scale it down a lot for it to fit on the page and that may have affected legibility.
I was having an interesting time with some of the coding at this point, adding lots of things in like email links, hyperlinks, tables and other stuff. I also had some difficulties as I hadn't made an image sprite for the rollovers yet, so the menu wasn't at it's finished state. I also had some trouble with the way the logo (which people would click to go back to home page) was set up, and I was trying to make a special div clickable which made a lot of area clickable that wasn't just the logo. To counteract this I changed it a bit and put the image inside another logo div just for the logo, positioned it with margins and instead of making it just a part of the 'header' div gave it it's own div and made the logo image directly clickable on the HTML, which solved the problem.
In general though, coding was going quite well, once a small compatibility issue with IE introduced me to the "If IE" code thanks to Philippa. As the content got larger, the need for longer pages became an issue, so I increased the length of the content div from the 1024px it was before. But for this to work I also needed an image that would tile seamlessly, and at this stage I wasn't quite happy with the way it looked anyway, so I took just the sunset part of the photo I used before, but kept the original colours and combined two different parts of the image and vertically flipped one, so they could always keep tiling if need-be and transition seamlessly. Because the image was also distinguishable now I turned the opacity back up and this also increased the visibility of the text I thought. This was the new background for the content part of the div.
With space no longer an issue I could continue putting content in freely.
Div Map, Visual Design/Typography and Start of Content.
I then began work on the div map. I knew from the outset the sort of structure I'd need, with a main container file for everything, a div for the content at the bottom. The header div was a bit more complicated because it had the main header div with a div for each button in the menu thereafter. I then used the rainbow technique which I'll leave preserved in the CSS so I could tell where each thing is at a given time. This left me free to set each thing to the size I needed it and I could see it. I was very grateful for the rainbow technique because it really did make things a lot easier.
I then started piecing together the visual part of the design so it wasn't just rainbows I was looking at. The header was done, and that was easy, so I revisited the colour palette and tried to create the visual design for the rest of the page. This is what I came up with for the background, with the main headers and information to sit on the orange-brown 'canvas'.
The background photo was of a sunset with scattered clouds that I took myself but I turned the hue to green to keep in line with the colour palette. I turned down the opacity to show more of the image behind, otherwise it was hard to distinguish what it was. The green bar above was just the header with the background 'rainbow technique' on it.
For the web typography I decided I wanted to use a websafe font from the start - not because I was too lazy to search for a different one, but because I thought the idea of using a websafe font to create a good-looking website was an interesting challenge. I made some tests using lots of different websafe fonts, and in the end I chose Palatino Linotype. I thought it was the most appealing of the websafe fonts and was also very legible. Looking at it I don't see it as a 'boring websafe font' even though it's quite simple. I had trouble getting the font to work at first, but that's because I chose "font" in CSS when I needed to choose "font family", and after that it worked.
I started putting in the content but at this stage there wasn't too much to put. The home page statement was easy to do and I personally added a bold word each time a page name popped up in the paragraph to give viewers an even further indication of what lay on the page. Most of the services were availlable as were the library information and frequently asked questions, but the assignments and emergencies page just had the home page text as placeholder at this stage.
I then started piecing together the visual part of the design so it wasn't just rainbows I was looking at. The header was done, and that was easy, so I revisited the colour palette and tried to create the visual design for the rest of the page. This is what I came up with for the background, with the main headers and information to sit on the orange-brown 'canvas'.
The background photo was of a sunset with scattered clouds that I took myself but I turned the hue to green to keep in line with the colour palette. I turned down the opacity to show more of the image behind, otherwise it was hard to distinguish what it was. The green bar above was just the header with the background 'rainbow technique' on it.
For the web typography I decided I wanted to use a websafe font from the start - not because I was too lazy to search for a different one, but because I thought the idea of using a websafe font to create a good-looking website was an interesting challenge. I made some tests using lots of different websafe fonts, and in the end I chose Palatino Linotype. I thought it was the most appealing of the websafe fonts and was also very legible. Looking at it I don't see it as a 'boring websafe font' even though it's quite simple. I had trouble getting the font to work at first, but that's because I chose "font" in CSS when I needed to choose "font family", and after that it worked.
I started putting in the content but at this stage there wasn't too much to put. The home page statement was easy to do and I personally added a bold word each time a page name popped up in the paragraph to give viewers an even further indication of what lay on the page. Most of the services were availlable as were the library information and frequently asked questions, but the assignments and emergencies page just had the home page text as placeholder at this stage.
Sunday, 24 November 2013
Beginning Header
Using the palette from earlier I began to look at the menu. For some reason I was inspired by this music cover in terms of the blue with stripes of different shades and the look of scratches on it.
So I went into Photoshop and tried to imagine my own interpretation of that. This is what I eventually came up with just as an idea inspired by that.
I then looked at buttons and knew that keeping them blue was the best option as it would unify the header, so I put a simple blue gradient on them and then a blue-purple one on every second one. It's very subtle and must be looked at closely to know the difference but would look different with just the same scheme for each button. It's also in line with what I researched because the websites with favourite design in recent times had very simple menus with minimal variation. The colours also worked well because the text could easily be seen in either black or white with the rollover images I'd created out of the normal menu. This was my chance to explore lots of different fonts (since they were images) without worrying about compatibility.
At this stage I also decided to shrink the size of the site from the most popular of 1366x768 to 1024x1024 because even though there was a lot of information I didn't anticipate that there'd be quite enough to justify having a page as long as 1366, and the huge amount of spaciousness on the trendy websites I'd researched was one element of them that I didn't particularly like. The right amount of space is good but I also like my websites a bit more compacted. I also don't know this for sure but I'd imagine a smaller website would be easier to view on a phone or tablet as well.
The header was almost done. I'd saved the Witt Art logo from the resources folder and had to figure out what size to make it and where to position it in the header exactly. For horizontal positioning centre, in between the first button and left side of the page seems good, but vertically I wasn't sure. One one of the sites I researched the logo hung down almost to the bottom of the header and the buttons stayed at the very top of the page. I remember this particular look struck me as quite visually nice, so I decided to go with this.
So I went into Photoshop and tried to imagine my own interpretation of that. This is what I eventually came up with just as an idea inspired by that.
I then looked at buttons and knew that keeping them blue was the best option as it would unify the header, so I put a simple blue gradient on them and then a blue-purple one on every second one. It's very subtle and must be looked at closely to know the difference but would look different with just the same scheme for each button. It's also in line with what I researched because the websites with favourite design in recent times had very simple menus with minimal variation. The colours also worked well because the text could easily be seen in either black or white with the rollover images I'd created out of the normal menu. This was my chance to explore lots of different fonts (since they were images) without worrying about compatibility.
At this stage I also decided to shrink the size of the site from the most popular of 1366x768 to 1024x1024 because even though there was a lot of information I didn't anticipate that there'd be quite enough to justify having a page as long as 1366, and the huge amount of spaciousness on the trendy websites I'd researched was one element of them that I didn't particularly like. The right amount of space is good but I also like my websites a bit more compacted. I also don't know this for sure but I'd imagine a smaller website would be easier to view on a phone or tablet as well.
The header was almost done. I'd saved the Witt Art logo from the resources folder and had to figure out what size to make it and where to position it in the header exactly. For horizontal positioning centre, in between the first button and left side of the page seems good, but vertically I wasn't sure. One one of the sites I researched the logo hung down almost to the bottom of the header and the buttons stayed at the very top of the page. I remember this particular look struck me as quite visually nice, so I decided to go with this.
Subscribe to:
Comments (Atom)