Minor Project 0

I have gone through a lot of the articles and they look really useful for people learning about CSS3

http://www.1stwebdesigner.com/css/must-read-css3-tips-tricks-tutorial-sites/


I found this article to be particularly interesting. It is a cheat sheet with all the coding options with CSS3. For someone who is not very familiar with CSS it is nice to see its capabilities.

http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/

Minor Project 26

I have decided to implement the sidebar item from Andy Clarke's more advanced CSS techniques. A side bar is a good way to apply additional content to support the main item on a website. I think Brendan and I's website could benefit from the incorporation of one on selected pages.

Minor Project 20

1. Site ID: The CNN logo is clearly established in the middle of the of the large red banner
2. Search: The search field is also clearly on the right side of the banner
3. Sections: The sections are well defined although the banners for each section are a little small
4. Page name: CNN
5. Local navigation: The navigation is well established right below the large red banner.

Minor Project 3

What is "Transcendent" CSS? (2 points)

Transcendent CSS is a method to advance CSS use to deliver new and engaging experiences to users over the web. It is meant to better link the visual and technical components of a website.

Post a link to two examples of what you find to be inspirational design (2 points)

http://www.ign.com/
http://www.hulu.com

Why is accessibility "design" and not merely a feature? (2 points)

Website design along with just about every type of design involves making the designed item as easy to access and use. This is to streamline the item(website) so the user can get the most out of the it.

Identify a principle of "Transcendent" CSS and discuss its importance (2 points)

Use CSS wherever possible. Browsers defaults cause browsers to display website differently. By using CSS you better preserve the look and feel of your site as well as prepare it for changes that future browsers my have with it.

What is the significance of Nate Koechley's Yahoo Network Developer Document? (2 points)

Koechley's Network Developer Document submits that browsers are not going to display websites in the same way. Someone using a device like a Blackberry will view a website very differently compared to someone using Firefox/PC. The adaptive nature of Transcendent CSS allows us to design sites which can offer the best experiences to all users.

Minor Project 25

http://mywebspace.quinnipiac.edu/bcappe/IHC/Index.html

Minor Project 24

The current website for The Institute for Healthcare Communication is extremely drab and not friendly in the least. As a matter of fact we'd consider it quite the opposite of friendly. The top banner depicts doctors and various situations, though is typically monochrome to match the often drab color scheme. This makes the scenes look similar to something in a horror movie, especially the welcoming sites red scheme. In order to make the site more welcoming we need a color scheme which isn't reliant upon one single color per page. All photographs used should be used with full color.

I understand the sites creator most likely wanted something professional and sophisticated, thought I think it is possible to achieve said look without sacrificing its visual appeal. The site is geared towards the professional because they are more heavily reliant on the quality of their health care. I think if the site maintained it current layout it wouldn't be so bad, but needs to be updated with a blue color scheme (it's a peaceful, sterile color which fits the theme of medicine) and a more Web 2.0 upgrade.

Text on the current site tends to run too long horizontally and needs to be more centered and compact (this is typography 101). The animation banner at the bottom is kind of distracting and unnecessary. We think a sideshow banner would be more appropriate or perhaps a scrolling banner, but would prefer to nix animation at all. We'd like to keep the current menu system however update it to a nice blue/white color scheme.

Information is key here. We need information to be accessible for the medical professional. Everything needs to be easy to locate so that people are wandering through endless information. By placing a large amount of our content on the main page we get rid of the need for useless navigation by the user. We aren't worried about making the page "content-heavy", as this site isn't geared towards your average "web-surfer". It is meant for people intended on viewing the site and accessing some of its information.

A clean look using clean looking colors (blue, grey, white) and typefaces (helvetica).

Minor Project 22

My partner and I will probably implement most of Kurg's guildlines.

The guildlines mostly deals with useability and these issues for the most part can be dealt with by testing items and bouncing ideas off one another. We will have to cater to Web users who are not like my partner and I, so we will test our ideas with parents, piers, etc. We will have to understand that there is no average web user and design the site so it is assessable to a broad demographic.

If there is a strong disagreement on a certain item we will have to talk it over extensively and analyze which will work better to reach the user and deliver the information. If one of the ideas does not prevail than we will have to seek a compromise.

Minor Project 21

Minor Project 19

The layout for normal/general pages. /\
The layout for the home page. \/

Top Banner example:
http://osc.template-help.com/wt_25547/index.html
Layout example:
http://www.annapolisathleticclub.com/club/scripts/home/home.asp
Templates:
http://templates.entheosweb.com/Medical.asp

Minor Project 17

Nike's website has a really nice layout. the navigation is really easy to use and the content is extremely easy to access, It does not take much thought at all. http://www.nike.com/nikeos/p/nike/en_US/?l=nikestore,pdp,_pdp,cid-1/gid-119175/pid-114068

This MIA website gives you a headache. the pages do not follow similar formats and the navigation is not consistent. http://www.miauk.com/


What does satisficing mean?
Not choosing the best option, but one that simply does the job.

Name a convention in web design that is your "friend" explain why.
consistent navigations is a convention that makes a website a whole lot friendlier

Do you agree that making choices mindless makes a site easy to use?
Yes, it is always best to make your sites so the viewer does not have to put a lot of effort into it. The viewer could easily skip your site and move to the next if they were not finding your website easy to navigate.

Omit needless words. Why?
Yes, as part of an efficient website there does not need to be a lot of verbiage. A website should offer up the meaty content without a lot of effort.

Happy talk must die. Why?
The viewers are there for the content. Using happy talk just wastes their time.

Instructions must die. Why?
If any part of your website requires directions, you should go back to the drawingboard because there are many ways to present content in simple and intuitive ways.

Minor Project 16

The Institute for Healthcare Communication's website has got a few thing right but otherwise there are many things that I will be looking to change when I redesign it. I like how most of the pages don't require to you to scroll to get the information. I dislike the use of the animated banner, it makes an awkward space toward the bottom of the page, between the banner and the footer. I also dislike the off page links in the main navigation. I would like to put less items in the navigation by putting more content on each page. The content of each page will have its own well defined space to help to promote a professional look.

When I redesign it. I would like to see intelligibility set as the primary goal. The information should be displayed in a logical manner, which means it will have a prominent navigation as well as pages that feature similar layouts. I will also use color, weight, spacing, scale and font to give the text a reasonable hierarchy. Secondly, I would like to give the site a nice aesthetic look. For this site, I was thinking a white, blue and green color scheme would work best. White is often used in hospitals and on the packaging of cleaning supplies because it gives off a feeling of sterility. White is also used to to give things a look of professionalism. Blue is a primary color and will make the page pop. It also has a claiming effect. Lastly green because it it is often associated with nature and good health.

My work flow will include:

Design Brief
Information research/structure(site map)
Grey Box planning
Prototypes with photoshop
Insertion of images and dummy text.
Apply real text/images
General testing/tweaking
Presentation to the client
Revision/additional testing

Minor Project 15

Where do you find inspiration?
I often find inspirations through the various media I consume.
(Websites, movies, TV shows, Music, etc.)
Do you use mood boards or scrapbooks? Yes or No? Why or why not?
I don't uses mood boards or scrapbooks. I have the equivalent, digitally, where I save the things I find particularly inspirational.

Site Stills

Minor Project 6

• Comment on what David Siegal did in 1997.
  
• 
  
• David Siegal invented HTML as a method to visually lay out websites. Distributing content through tables was restrictive in that designers became contingent on visual layout of the page. It was a solid advancement in the way sites were produced, but as time goes on designers have found other methods that don't impede the presentation of the site as much.
  

• What's wrong with <>
  
  elements?
• 
  
• <>elements were meant to replace the cells within a page, but they increase the size of the file, and errors within the page are much more likely.
• 
  
• What is the "naked structure"?
• 
  
• The naked structure is displayed when the cascading style sheets are removed from a web page. Viewing a page while it is "naked" will give you all the content of the page without any of the visual content impacting it. This is a good reminder for designers to place page content above visual layout.
• 
  
• What significance of lists?
  
• 
  
• Lists are useful because they are a convenient way for designers to arrange the content on a page that is logical and understood by everyone.
  

Minor Project 10: Site Map

Minor Project 11: Static Home Page

This is the work flow I would use in order to isolate each design obstacles and come up with the best solutions to make a quality website.

Work Flow:

Design Brief

Thumbnail sketches

Content research/information architecture

Wireframes

Site Map & Navigation flow charts

Writing for the Web(navigation, labels, heads & copy)

Prototypes using Photoshop

A working prototype/mockup using Photoshop, Fireworks or Dreamweaver

Addition of placeholder pages/images/dummy text

Replacement with actual content

Usability testing
Revisions/final testing

Finish site/client presentation

Minor Project 8: Grey Boxes

Minor Project 4: Design Brief

I chose to make a website for the Nicaragua Alternative Spring Break.

There is no reason a simple informational site like this should have a navigation system that is even remotely confusing. I would like to stress simplicity/intelligibility above all. The secondary objective is to provide the site with quality aesthetics; but these two objectives go hand in hand with creating a site that is both effective and approachable.

For the sake of simplicity, each page will feature a similar layout, so the viewer can locate the necessary information contained within each page with very little effort. Each page will be themed with its own tertiary color, which will also be reflected within the navigation. This will assist with making the the site more logical to navigate and it will also support the aesthetics of the site by giving each page its own unique look. Each page will contain a considerable amount of photos elements. This will give the pages diversity as well as make the page more pleasant to view. The photos can also portray the trip in ways that text can't. When I go through all the information and decide which pieces of information are going into each page; I may decide to add a sub navigation within certain categories, but seeing how this could farther complicate the site, I will try my best to organize each section with visual hierarchy so that each item of information is clearly defined and contained within its own space.

I have some pretty solid ideas as to how I want the many elements on my page to look and behave. I hope I can achieve the goals I have set for myself because I believe it has the potential to become a fantastic website.

Minor Project 2: Student Website Critique

I chose Alison Ambrosi's website to critique from the websites about Quinnipiac's alternative spring break trip

1. Describe the "look and feel" that governs the web page/web site.

The design of the site is relatively simple, for the most part, the information is logically distributed among the various pages, which are all easily found with the above navigation. Each page consists of a main photo element followed by the main text content of the respective page. There is also a side bar on each page which provides additional images and bits of information. I feel like the site's heavily reliance on images goes a long way to express to the visitors what the trip was like, and it gives future students who go on this trip an idea of what to expect.

2. Comment about how the use of the formal elements of design support (or do not) this "look and feel" as it applies to: color-contrast and harmony; selection of images; the color key of those images; color for information architecture; type family choice and type setting; use of white space (negative or empty space), spacing in general and the use of graphic elements such as rules etc.

The site generally makes good use of the space it is given. The two main colors(pale yellow and blue) of the color scheme are not the colors I would chose, but they work. The third color should be rethought. The darker yellow does not go very well with the pale yellow. The darker yellow is actually the theme of the "About" page and when you compare it to the green, red or bright yellow-orange of the other pages it is evident that it is a weak color choice. The dark yellow is also used in the navigation.

3. Comment about the layout of all the web pages of the entire site. Does the design of the basic page architecture (header, body, footer and other elements) create a over all unified design?

The pages of the site have some elements that are inconsistent. All of the pages have the information contained within neat white boxes and colored banners which colors follows the theme of the page. The "About" page has its first grouping of information without a white background or colored banner, which looks out of place when all of the other content on the site follows a different format.
It is also bothersome that there is no clearly marked link to go back to the home/splash page.
This is especially troublesome because there is a page that can only be navigated to from the home page. I feel like both of these pages deserve a spot in the main navigation; they could take the places of the "ASI" and "Blog" links because these links belong in an "additional information" section, plus they are a little confusing because they take you to 3rd party sites.

4. Comment about the following if it applies: visual hierarchy of elements and of type and how it promotes readability.

With the exception of the "About" page, every page follows a logical visual hierarchy that makes use of both text and color. These pages all have a main colored banner which states what the subject of the page is. Sub categories use similar banners, but they are smaller and use different text. This system allows people to quickly understand how the information is laid out on the page within the first second of of viewing.

5. Does the web page work? Is it successful? Why or why not?

The site undoubtedly has its flaws but it contains elements of a successful site. It has a simple navigation system and it is very informative with logically placed photos and text.