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.
Sunday, 27 October 2013
Layout Choices, Continued Research and Paper Prototype Results
I began with a wireframe of what the paint splatter idea could possible look like, with the circles in the menu being the splatters.
But I soon realized my heart wasn't in this idea. Even though it would fit the 'art' theme, I felt more inclined to go more with the simple and clean layouts of the galleries of best web design that I'd studied, which had very simple menus. I also thought that would suit an education/information site better than paint splatters, which would look a bit informal and immature. I also spoke with Philippa in regards to the Facebook, Flickr, Youtube logos and she suggested that they may not be needed as they're already on the Witt Art website, so I removed them from the design. With all this in mind, this is the next wireframe I'd come up with.
I also began experimenting with colour palettes, since I didn't know what sort of colours I'd be using. Since I love blue and wanted to have that in the menu, I decided to start with that and see what it came up with. By choosing the accented analogic option, it came up with four colours.
I liked the look of these, particularly the middle 'original' hues, so decided to go with this colour scheme. Using the colour palette was very helpful as it gave me some direction where the colours could go. I also looked at the other combinations besides accented analogic but thought they were a bit too on the plain-looking side. The accented analogic, particularly the orange, added a bit of spice to the colour scheme and looked good, I thought. I decided not to add it in but now knowing what the colour scheme could be and with the starting sitemap completed I decided to work on the finer details later and enter paper prototyping stage.
I tested the paper prototype on my Mum, who is a relatively frequent internet user who is slightly outside my target market but also a good test subject as ensuring the website is easy to understand for all ages means I've succeeded in making it user-friendly and there's always a small chance that some from my primary target market also have varying experience levels with using the internet.
My prototype was mostly successful, but some suggestions were made. Her first was that there'd be an option to go back to the top on the side of the page (the way I'd imagine doing this is putting one like on Tumblr which follows wherever on the page you are). This would've saved her hitting the back button or scrolling right up the page each time she wanted to go somewhere different. It's also easy to hit the 'home' or 'backspace' buttons on the keyboard but she wasn't used to using these and to not have to move a hand away from the mouse would be a good feature.
She told me she personally would've put the library part of the services section to a new page entirely because she wouldn't have searched under the 'services' section for information on how to reference.
The home page was also rather empty so I suggested perhaps moving the 'course and pathways' and 'timetables and calendars' information to the home page might be a good idea, and she agreed. One of the first things people wish to know in a handbook would be when the important dates (like hand-in dates) fall, so this seemed like a good change to make.
She said that the simple locations of the menu and other things made it mostly easy to understand, so in that way I succeeded with my choice in choosing a very simple layout.
I liked the look of these, particularly the middle 'original' hues, so decided to go with this colour scheme. Using the colour palette was very helpful as it gave me some direction where the colours could go. I also looked at the other combinations besides accented analogic but thought they were a bit too on the plain-looking side. The accented analogic, particularly the orange, added a bit of spice to the colour scheme and looked good, I thought. I decided not to add it in but now knowing what the colour scheme could be and with the starting sitemap completed I decided to work on the finer details later and enter paper prototyping stage.
I tested the paper prototype on my Mum, who is a relatively frequent internet user who is slightly outside my target market but also a good test subject as ensuring the website is easy to understand for all ages means I've succeeded in making it user-friendly and there's always a small chance that some from my primary target market also have varying experience levels with using the internet.
My prototype was mostly successful, but some suggestions were made. Her first was that there'd be an option to go back to the top on the side of the page (the way I'd imagine doing this is putting one like on Tumblr which follows wherever on the page you are). This would've saved her hitting the back button or scrolling right up the page each time she wanted to go somewhere different. It's also easy to hit the 'home' or 'backspace' buttons on the keyboard but she wasn't used to using these and to not have to move a hand away from the mouse would be a good feature.
She told me she personally would've put the library part of the services section to a new page entirely because she wouldn't have searched under the 'services' section for information on how to reference.
The home page was also rather empty so I suggested perhaps moving the 'course and pathways' and 'timetables and calendars' information to the home page might be a good idea, and she agreed. One of the first things people wish to know in a handbook would be when the important dates (like hand-in dates) fall, so this seemed like a good change to make.
She said that the simple locations of the menu and other things made it mostly easy to understand, so in that way I succeeded with my choice in choosing a very simple layout.
Monday, 21 October 2013
Major Project: Week 1 Research
One of the major motifs that remained in my mind to use as the visual design for the final project was the idea of paint or ink splatters, particularly in the menu section of my site, so one of my first searches I used in researching the target market and graphic design was to search for plaint splatters used in a graphic design context so I could work out what sort of paint splatter image style I liked and didn't like and what sort of styles had been done the most so I could avoid them in order to keep my style as original as possible. I wanted to use paint splatters first because it's an art department handbook and paint splatters signify art in an obvious way and it could look effective if done right.
(if these pictures are not showing up they can also be found in the "Graphic Design Research" word file.
Image 2: A PS3 theme from psu.com
For target markets, it's in my experience that the vast majority of applicants are young people in their late teens or early 20s up till about the age of 30. Because it's not a kid's or young teens site it should be quite formal in most respects overall since it’s an information site, but since it’s an art
department site it should have some controlled elements of fun and modernism. The target market are not too old to enjoy a strong visual presence but it's also important that the information isn't overpowered by it. So for that reason I've decided to keep the paint splatter theme to mostly the menu and keep the information sections relatively formal.
I went to www.thebestdesigns.com to see what they had there, as keeping up with web design trends isn't something I usually do. I took some screenshots of particular ones that caught my eye.
(if these pictures are not showing up they can also be found in the "Graphic Design Research" word file.
What really struck me the most of all these was how relatively inconspicuous the menus were in terms of sizing and colours. Simplistic and obvious placement of the menus has also remained in fashion. The key to these web page designs is mostly simplicity. The most surprising part of these web designs for me was that they seemed to indicate the placement of the page titles in the middle of the page as having come into fashion (with logos remaining in a simple place up top). Because the purpose of my website is education-related, I'll probably be less adventurous with the title placement, keeping it near the top of the page as in the top screenshot. I can perhaps take inspiration from these in terms of the menus however, with the wide space between the logo and the menu, and the simplicity of the menu in terms of colour palette.
I found out the most popular resolution for web is 1366x768. This seems a good resolution to test out the idea of having a lot of space between elements of the page.
Subscribe to:
Comments (Atom)