I may have googled every possible term related to web design, but these are a few of the pages which proved helpful in building my site.
http://www.yourhtmlsource.com/stylesheets/csslinks.html
http://www.cryer.co.uk/resources/javascript/html5_fun_with_bullets.htm
http://www.stickmanlabs.com/accordion/
http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm
http://www.hotscripts.com/listing/accordion-menu-script/
http://issuu.com/
And a little scholarly help from:
Sklar, S. Principles of Web Design. Fourth Edition. 2009.
Thursday, May 28, 2009
1 Page Rationale
The re-design for IdN’s website is up and running.
http://uts.universalfavourite.com.au/thu/kelly/
The website has five main pages which show the functionality of the site. These pages are:
* Home page
* Magazine - Current Issue
* Magazine - Feature Article
* Sign In page
* Subscription page
Although the site plan includes additional functionality and content, these pages were chosen to display the look and feel of the site and the average users experience.
Home Page (http://uts.universalfavourite.com.au/thu/kelly/index.html)
The home page is designed to be the gateway to all other sections of the page and to give a first time user a snapshot of the content offered by the site. The main content on the homepage is an assortment from the current magazine, video, news and competition sections of the page. The structure and design of this page is consistent over all pages, with main elements positioned to enhance usability. A colour-coding theme has been applied to help with site navigation, with each menu item on the main nav having a :hover feature, and this hover colour corresponding to a coloured bar beneath the IdN banner. This bar changes to the respective menu items’ colour when the user visits a page.
The large menu is also enhanced with a javascript accordian menu, which helps to conserve the look of the menu while allowing extra information to be accessed easily.
Magazine - Current Issue (http://uts.universalfavourite.com.au/thu/kelly/idn_mag.html)
This section of the site is probably where the most traffic would occur, so headings and information are short to grab attention. The print magazine content is displayed in sections - features, columns & regulars - and images of magazine spreads are used to peak interest. The user can quickly browse through and see something that interests them and click on the image or “More” link to read further.(click on Feature: Hands-On!)
Feature - Articles (http://uts.universalfavourite.com.au/thu/kelly/idn_mag.feature.html)
The article page shows how the average user would read an article online. There is an image of the article spread and all or some of the written content. This article is not complete, but users that are signed in would be able to access the “More” link in the article. This is where it becomes obvious that users who “Sign Up” or who are subscribers have full access to website information.
Sign Up (http://uts.universalfavourite.com.au/thu/kelly/idn_signin.html)
This page shows the front-end html mock-up for advanced functionality forms. These forms have been styled keeping with the theme of the site.
Subscribe (http://uts.universalfavourite.com.au/thu/kelly/idn_subscribe.html)
If a user has not signed in/does not have a subscription they do not have access to all of the website’s content. If such a user tries to access this content they will be directed to the subscription page. This page explains the added benefits of subscribing and also has a form to fill out and payment options for subscribing.
These sites demonstrate the vision for the IdN website re-design and some basic and advanced functionality. On a full site further functionality would include the Video section with embedded video, a plug-in to view the magazine spreads in fullscreen, the ProShop where past issues, books and gear could be ordered and connection to a heavily updated newsfeed and blog.
http://uts.universalfavourite.com.au/thu/kelly/
The website has five main pages which show the functionality of the site. These pages are:
* Home page
* Magazine - Current Issue
* Magazine - Feature Article
* Sign In page
* Subscription page
Although the site plan includes additional functionality and content, these pages were chosen to display the look and feel of the site and the average users experience.
Home Page (http://uts.universalfavourite.com.au/thu/kelly/index.html)
The home page is designed to be the gateway to all other sections of the page and to give a first time user a snapshot of the content offered by the site. The main content on the homepage is an assortment from the current magazine, video, news and competition sections of the page. The structure and design of this page is consistent over all pages, with main elements positioned to enhance usability. A colour-coding theme has been applied to help with site navigation, with each menu item on the main nav having a :hover feature, and this hover colour corresponding to a coloured bar beneath the IdN banner. This bar changes to the respective menu items’ colour when the user visits a page.
The large menu is also enhanced with a javascript accordian menu, which helps to conserve the look of the menu while allowing extra information to be accessed easily.
Magazine - Current Issue (http://uts.universalfavourite.com.au/thu/kelly/idn_mag.html)
This section of the site is probably where the most traffic would occur, so headings and information are short to grab attention. The print magazine content is displayed in sections - features, columns & regulars - and images of magazine spreads are used to peak interest. The user can quickly browse through and see something that interests them and click on the image or “More” link to read further.(click on Feature: Hands-On!)
Feature - Articles (http://uts.universalfavourite.com.au/thu/kelly/idn_mag.feature.html)
The article page shows how the average user would read an article online. There is an image of the article spread and all or some of the written content. This article is not complete, but users that are signed in would be able to access the “More” link in the article. This is where it becomes obvious that users who “Sign Up” or who are subscribers have full access to website information.
Sign Up (http://uts.universalfavourite.com.au/thu/kelly/idn_signin.html)
This page shows the front-end html mock-up for advanced functionality forms. These forms have been styled keeping with the theme of the site.
Subscribe (http://uts.universalfavourite.com.au/thu/kelly/idn_subscribe.html)
If a user has not signed in/does not have a subscription they do not have access to all of the website’s content. If such a user tries to access this content they will be directed to the subscription page. This page explains the added benefits of subscribing and also has a form to fill out and payment options for subscribing.
These sites demonstrate the vision for the IdN website re-design and some basic and advanced functionality. On a full site further functionality would include the Video section with embedded video, a plug-in to view the magazine spreads in fullscreen, the ProShop where past issues, books and gear could be ordered and connection to a heavily updated newsfeed and blog.
Process Diary Time...
Things I have learned...
Building the website:
Don't use tables! I found this out the hard way, consulting advice from various websites and my "Principles of Web Design" book on how to build a website using tables. Looking at my wireframe layout it seemed like using a table to structure the main content and divisions of the page would be best, but this turned out to be very wrong and extremely limiting. I found out that tables in Dreamweaver do not react the same way that they might in InDesign, and I ran into countless problems with alignment issues, spacing, and basically building my page structure. After working through these problems and finding out some tricks to get around this - I came to the realization that I had done everything wrong. At this point restructuring my page using the correct div's turned out to be too challenging, so I continued with using the tables. Never again.
Re-working Javascript:
Although loads of HTML code and javascript code are available on the web, it isn't as easy as cut and paste if you want to customize it. For my website I used a large vertical navigation and wanted to implement drop downs. I found out that using a Javascript accordian menu would help me to acheive this. Finding the right script and editing it to my specifications was very difficult. First I had to figure out how to create :hovers for each menu item, which meant seperate CSS styles for each. Also going back to issues with the tables, I found out that you must leave ample room to include the drop downs in the layout, because even though they are hidden one the script is run, the rest of the page has to account for this exrta information. I believe this was the greatest problem for me related to tables and javascript, and why the menu took so long to figure out. Firstly since it was a vertical drop down and I had information planned for directly beneath the menu, I had to make sure that this information wouldn't 'shift' each time the accordian menu was expanded. To do this I had to place the nav in one row and all the other info in another, and to get the info below the nav to align where I wanted it, I had to create a negative margin. This was the only way I could figure out how to place the info how I wanted it, although I'm sure there is a better way to do it.
Building the website:
Don't use tables! I found this out the hard way, consulting advice from various websites and my "Principles of Web Design" book on how to build a website using tables. Looking at my wireframe layout it seemed like using a table to structure the main content and divisions of the page would be best, but this turned out to be very wrong and extremely limiting. I found out that tables in Dreamweaver do not react the same way that they might in InDesign, and I ran into countless problems with alignment issues, spacing, and basically building my page structure. After working through these problems and finding out some tricks to get around this - I came to the realization that I had done everything wrong. At this point restructuring my page using the correct div's turned out to be too challenging, so I continued with using the tables. Never again.
Re-working Javascript:
Although loads of HTML code and javascript code are available on the web, it isn't as easy as cut and paste if you want to customize it. For my website I used a large vertical navigation and wanted to implement drop downs. I found out that using a Javascript accordian menu would help me to acheive this. Finding the right script and editing it to my specifications was very difficult. First I had to figure out how to create :hovers for each menu item, which meant seperate CSS styles for each. Also going back to issues with the tables, I found out that you must leave ample room to include the drop downs in the layout, because even though they are hidden one the script is run, the rest of the page has to account for this exrta information. I believe this was the greatest problem for me related to tables and javascript, and why the menu took so long to figure out. Firstly since it was a vertical drop down and I had information planned for directly beneath the menu, I had to make sure that this information wouldn't 'shift' each time the accordian menu was expanded. To do this I had to place the nav in one row and all the other info in another, and to get the info below the nav to align where I wanted it, I had to create a negative margin. This was the only way I could figure out how to place the info how I wanted it, although I'm sure there is a better way to do it.
Wednesday, March 11, 2009
My First Blog Post
Here is my first submission for UTS 87539.
The design magazine used for this analysis will be International designers Network,
IdN magazine. This particular publication was chosen because the current online delivery of the magazine,in my opinion, could benefit from a design, organization and content overhaul.
Four competitor websites are identified and listed below.
CMYK
Eye
Empty
Creative
The design magazine used for this analysis will be International designers Network,
IdN magazine. This particular publication was chosen because the current online delivery of the magazine,in my opinion, could benefit from a design, organization and content overhaul.
Four competitor websites are identified and listed below.
CMYK
Eye
Empty
Creative
Subscribe to:
Posts (Atom)