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.
Tuesday, 17 September 2013
Background Image
The lovely background image used in my blog was not created by me. The author is unknown but the title of the image is Guitar HD and I found it at this address.
Reflection On Project
There are a great number of things I've learned from the first part of Web Media. I'd taken the class before, so not everything was completely new information but I was pleasantly surprised how many things were.
1) I learned, first of all, the names of the men who invented the internet to begin with. Almost daily use without knowing the history behind it seems rather ignorant, so this was a good way to introduce the course and set the tone for a lot of learning in the coming weeks.
2) In this class my memory was refreshed with some HTML tags that I'd forgotten about such as heading tags, and tags to make text bold. Most main headings on website are images, but to know the heading tag is still handy in case there are parts of your website that are text only. I also re-learned meta tags, which help search engines find the site, and where to put them.
3) I learned about the Southern Cross cable which is one of the main internet sources for New Zealand, the South Pacific and a small part of the Australian east coast.
4) I learned more about div mapping and how this is an industry-standard method of creating the structure of a website. Unlike past methods of using tables, divs are good because they have no dimensions and are invisible unless otherwise configured in CSS. Adobe Dreamweaver has a handy visual aid in the design view that allows you to see a div container in the form of a dotted line. But I also learned that the design view in Dreamweaver can contain inaccuracies and that it's best to use the rainbow technique (making each div a different solid background colour in CSS to determine if they're working as they should be.
5) Today I remembered how handy the comment function in HTML could be. In div mapping, it became very handy for marking down easily the start and end of a div. In HTML, if there are a lot of divs used within one container it can be a bit confusing. On this note it's important when creating IDs for each div that they're typed in the same way to avoid confusion - I've learned that lower-case, no numbers and the 'camel technique' for more than one word is the best way to go.
6) I learned something completely new in Illustrator called the slicing tool. This essentially lets you click and drag any section of an image open in Illustrator and save that one part separately from the rest of the image. Even though that can be done by also cropping in Photoshop or another program, the slicing tool is specifically for this purpose and allows you to do it in less time. I'll almost certainly use this tool in the future.
7) Most of the other things I learned were some code tricks to make your website more interesting, mostly the correct code for adding forms and using a single image for all your menu's roll-overs (a technique whose existence I wasn't aware of). I've also become a bit more comfortable using margin tags. Float tags are still a foggy area for me so I may need some help with these in the future but all in all I've learned a lot of useful techniques which will undoubtedly help me in creating my main website.
1) I learned, first of all, the names of the men who invented the internet to begin with. Almost daily use without knowing the history behind it seems rather ignorant, so this was a good way to introduce the course and set the tone for a lot of learning in the coming weeks.
2) In this class my memory was refreshed with some HTML tags that I'd forgotten about such as heading tags, and tags to make text bold. Most main headings on website are images, but to know the heading tag is still handy in case there are parts of your website that are text only. I also re-learned meta tags, which help search engines find the site, and where to put them.
3) I learned about the Southern Cross cable which is one of the main internet sources for New Zealand, the South Pacific and a small part of the Australian east coast.
4) I learned more about div mapping and how this is an industry-standard method of creating the structure of a website. Unlike past methods of using tables, divs are good because they have no dimensions and are invisible unless otherwise configured in CSS. Adobe Dreamweaver has a handy visual aid in the design view that allows you to see a div container in the form of a dotted line. But I also learned that the design view in Dreamweaver can contain inaccuracies and that it's best to use the rainbow technique (making each div a different solid background colour in CSS to determine if they're working as they should be.
5) Today I remembered how handy the comment function in HTML could be. In div mapping, it became very handy for marking down easily the start and end of a div. In HTML, if there are a lot of divs used within one container it can be a bit confusing. On this note it's important when creating IDs for each div that they're typed in the same way to avoid confusion - I've learned that lower-case, no numbers and the 'camel technique' for more than one word is the best way to go.
6) I learned something completely new in Illustrator called the slicing tool. This essentially lets you click and drag any section of an image open in Illustrator and save that one part separately from the rest of the image. Even though that can be done by also cropping in Photoshop or another program, the slicing tool is specifically for this purpose and allows you to do it in less time. I'll almost certainly use this tool in the future.
7) Most of the other things I learned were some code tricks to make your website more interesting, mostly the correct code for adding forms and using a single image for all your menu's roll-overs (a technique whose existence I wasn't aware of). I've also become a bit more comfortable using margin tags. Float tags are still a foggy area for me so I may need some help with these in the future but all in all I've learned a lot of useful techniques which will undoubtedly help me in creating my main website.
Seventh Class: 11/9/13
Today was the final in-class lesson, and our main objective was to complete functionality of our own mock websites, in particular fixing the menu. This is where I ran into problems because I strayed from the original Evoke idea of having the menu near the top. Philippa advised me (rightly so) that having the menu only at the bottom is a bad idea, and so I created a menu in the header div and will in future start from that idea - the menu of course doesn't have to be just horizontal or vertical - there's certainly room for experimentation - but having a menu at the top is crucial for good functionality.
I also added a form to the website. This wasn't easy code to remember off the top of my head but I had a bit of help from Philippa's example and copied the code into my own file. The form was just a simple single-row box to type a comment or question and send to my email instantly. Many more sizes can be used for forms but I will explore those later for my main website as I need to.
After the mock websites we explored a way to make good-looking menus by using rollovers. For this, Philippa had downloaded an example from the internet that we could use the code from but change the image links, sizes and other things as we saw fit. This was again hard code to retain, so using past examples will be needed if (and probably when) it will be used on my own websites. This was also a technique I'd never seen or knew existed - I thought rollover images were always created by linking to another separate image file rather than a single one.
I also added a form to the website. This wasn't easy code to remember off the top of my head but I had a bit of help from Philippa's example and copied the code into my own file. The form was just a simple single-row box to type a comment or question and send to my email instantly. Many more sizes can be used for forms but I will explore those later for my main website as I need to.
After the mock websites we explored a way to make good-looking menus by using rollovers. For this, Philippa had downloaded an example from the internet that we could use the code from but change the image links, sizes and other things as we saw fit. This was again hard code to retain, so using past examples will be needed if (and probably when) it will be used on my own websites. This was also a technique I'd never seen or knew existed - I thought rollover images were always created by linking to another separate image file rather than a single one.
Monday, 9 September 2013
Sixth Class: 4/9/13
Today's class we continued what we did last week by creating our web-pages we'd designed in the last class using some code based on the Evoke website from a few weeks ago, but also adding and changing our own when appropriate. For example, I removed the top menu from the original Evoke design and replaced it with a header instead.
We also learned some new tricks like adding an email form to the site and we also learned of small freeware plugins we could possibly use on a future website that would allow for some additional functionality, since our websites at the moment are mostly 'static' websites, which is good for beginning but as we gain more experience we may desire some more interesting tricks.
We also created our 'about' pages and were shown how to link them back to the home page. for the next class we will fix our bottom menu sections, which at the moment are not fully developed.
We also learned some new tricks like adding an email form to the site and we also learned of small freeware plugins we could possibly use on a future website that would allow for some additional functionality, since our websites at the moment are mostly 'static' websites, which is good for beginning but as we gain more experience we may desire some more interesting tricks.
We also created our 'about' pages and were shown how to link them back to the home page. for the next class we will fix our bottom menu sections, which at the moment are not fully developed.
Tuesday, 3 September 2013
Fifth Class: 28/5/13
Today, instead of recreating a ready-made design (ie. the Evoke Website) we had the task today of designing our own pretend website based on a topic of our choice. After brainstorming and researching a topic of choice (in my case tennis coaching) I discovered there was a drought of websites on this topic with good or interesting design, and in general there were few individual tennis coaching websites in New Zealand - most of those in existence related to larger clubs.
I then had to do some thumbnail sketches of what my home page design could be. I decided to do it quite similar to the Evoke Website with just some minor changes so I wouldn't have to recreate too much code from scratch. After some experimentation I also came up with colour schemes (this isn't too hard for a tennis-related website) and fonts to use in the site and designed an 'About' page for the site.
I then had to do some thumbnail sketches of what my home page design could be. I decided to do it quite similar to the Evoke Website with just some minor changes so I wouldn't have to recreate too much code from scratch. After some experimentation I also came up with colour schemes (this isn't too hard for a tennis-related website) and fonts to use in the site and designed an 'About' page for the site.
Monday, 2 September 2013
Fourth Class, 21/8/13
Today's class was very educational because we learned how to take our site model using div tags and actually place real images in there. First we used the 'rainbow' technique to make every div a different background colour - this ensured that we could correctly set the size of each different div tag to match the size of the images we'd be using. I also learned using this technique that because each div is represented with clear colour that allows you to determine whether or not the div tag is correctly working, there's no need to use the split or design view in Dreamweaver at all and this is the only technique you need to use.
This lead us into Adobe Illustrator where I learned a new skill called the slicing tool, which basically allows you to drag a field around a piece of an image you want to separate (think along the lines of using scissors to cut out each part of the images on the web page you want) and then save for web similar to Photoshop.
The end result was what could be a real website, and I will find this tool very handy to use in the future - making a Photoshop or Illustrator page draft of the website, slicing the images you want and resizing the div containers seems a very easy and smart way to go.
This lead us into Adobe Illustrator where I learned a new skill called the slicing tool, which basically allows you to drag a field around a piece of an image you want to separate (think along the lines of using scissors to cut out each part of the images on the web page you want) and then save for web similar to Photoshop.
The end result was what could be a real website, and I will find this tool very handy to use in the future - making a Photoshop or Illustrator page draft of the website, slicing the images you want and resizing the div containers seems a very easy and smart way to go.
Tuesday, 20 August 2013
Third Class, 14/8/13
In today's web design class we learned about page layout and how to use <div> tags to create a structure for a simple website. This was very helpful information. Not only was I reminded how to use <div> tags but I also was reminded about using comments in the HTML which don't show up on the web page. I also learned some helpful pointers on how to easily identify the end of each <div> tag with a comment saying 'end of ___ tag'. This will make it far easier to create a website structure in the future.
I also discovered that the split view on Dreamweaver shows a dotted outline of the <div> tags so you can see how they are laid out even when you can't see it in the browser window. The split view doesn't give an accurate view as it 'invents' spaces in-between the <div> tags that aren't really there, so I wouldn't use this much - only for confirmation that I've put all of my <div> tags into the right places.
I also discovered that the split view on Dreamweaver shows a dotted outline of the <div> tags so you can see how they are laid out even when you can't see it in the browser window. The split view doesn't give an accurate view as it 'invents' spaces in-between the <div> tags that aren't really there, so I wouldn't use this much - only for confirmation that I've put all of my <div> tags into the right places.
Tuesday, 6 August 2013
Second Class, 7/8/13
Today was another educational web design class. We first learned a simplified version of how the web works. I had a limited knowledge but this went into a bit more detail and I learned some things I didn't know of before, like the Southern Cross cable, which is one of the main internet sources in New Zealand and the rest of the Pacific.
We covered some basics of HTML today as well. I was anticipating knowing all of the tags we covered already, but was helpfully reminded of Meta tags. I knew of them existing but wasn't sure exactly where these were supposed to be put into an HTML document.
I also revived an old Twitter account for this class. I haven't managed to update the design of the blog to something more attractive but I'll do that hopefully before next class. I'm going to set myself the task to look through some art magazines and maybe scan or take some photographs of design ideas I find interesting in order to get some inspiration for the design of my own blog.
We covered some basics of HTML today as well. I was anticipating knowing all of the tags we covered already, but was helpfully reminded of Meta tags. I knew of them existing but wasn't sure exactly where these were supposed to be put into an HTML document.
I also revived an old Twitter account for this class. I haven't managed to update the design of the blog to something more attractive but I'll do that hopefully before next class. I'm going to set myself the task to look through some art magazines and maybe scan or take some photographs of design ideas I find interesting in order to get some inspiration for the design of my own blog.
Tuesday, 30 July 2013
First Class, 31/7/13
Today was our first web media class and we watched a segment of a video which discusses the history of the web. I found this interesting as it featured statements from the actual inventor of the world wide web, Sir Tim Berners-Lee. I've used the internet for many years since I was in primary school but never in all that time learned or even took notice of who invented the technology I was using.
The video alone wasn't quite enough to embed the name of Berners-Lee in my brain so I did a quick Google search for 'world wide web inventor' and another named popped up - Robert Cailliau, a Belgian who according to Wikipedia proposed the hypertext system which Berners-Lee named the 'world wide web' and co-authored the proposal for it's funding.
Whether or not he appeared later in the video I'm not certain, but given that it was a joint project it's interesting that Berners-Lee was credited on the video as the primary or sole inventor rather than a co-inventor. I also thought it was funny that the video featured statements from Stephen Fry, who's an actor not associated with important computer or internet-related companies like Bill Gates, Steve Wozniak or Mark Zuckerberg.
I also set up my class blog on Blogspot today. I originally was going to call it 'Aaron Bell Music', but thought "why limit myself to one arts topic?" and changed it immediately to 'Aaron Bell Design', a much more generic term that could include many things. I chose only a simple default layout and haven't changed it in any way yet, something I'll do over the course of the week. Since I enjoy a rock and roll style, both in music and general design in other websites I'll mostly likely do something in that vein. A good example of a website in this category is The Rock FM website, with it's primary use of black and red with some grey detail in the background to give some variety. I'd aim to be more creative and not feel too restricted by the 'rules' of that style however. I will start looking for more ideas throughout this week and hopefully have a good customized theme soon.
The video alone wasn't quite enough to embed the name of Berners-Lee in my brain so I did a quick Google search for 'world wide web inventor' and another named popped up - Robert Cailliau, a Belgian who according to Wikipedia proposed the hypertext system which Berners-Lee named the 'world wide web' and co-authored the proposal for it's funding.
Whether or not he appeared later in the video I'm not certain, but given that it was a joint project it's interesting that Berners-Lee was credited on the video as the primary or sole inventor rather than a co-inventor. I also thought it was funny that the video featured statements from Stephen Fry, who's an actor not associated with important computer or internet-related companies like Bill Gates, Steve Wozniak or Mark Zuckerberg.
I also set up my class blog on Blogspot today. I originally was going to call it 'Aaron Bell Music', but thought "why limit myself to one arts topic?" and changed it immediately to 'Aaron Bell Design', a much more generic term that could include many things. I chose only a simple default layout and haven't changed it in any way yet, something I'll do over the course of the week. Since I enjoy a rock and roll style, both in music and general design in other websites I'll mostly likely do something in that vein. A good example of a website in this category is The Rock FM website, with it's primary use of black and red with some grey detail in the background to give some variety. I'd aim to be more creative and not feel too restricted by the 'rules' of that style however. I will start looking for more ideas throughout this week and hopefully have a good customized theme soon.
Salutations
This blog will document many things including my current art and design works, music-related things and other arts-related things I find interesting. Enjoy!
Subscribe to:
Comments (Atom)