I believe i will be more conscious of the design of websites, aesthically, but more importantly in terms of function. I will be more or less likely to shop at sites that are easy to navigate and present me with the information i need in a logical way. You don't have to knock me out w/ artistic grandeur, but i want the site to look professional and thought-out.
in terms of my own designs, i will first present the information and plan the navigation, THEN i will apply clean, unobtrusive artwork.
Tuesday, June 28, 2011
week 4 posts - two websites
website1 - http://www.slate.com/
Slate.com is an online news magazine. It manages a lot of data in a very efficient and functional format. They use switchable banners that you can toggle through, or change change on a timer, so you're presented with a banner for a different article every few seconds, or you can control it yourself. The links are laid out in a logical columnar fashion, categorizing the article across the top, and headlining various recent articles down the center. there's also a toggle to view various ongoing blogs related to the content.
contrast on text is good (use of fonts as well), with a repetitive theme including the placement of banner and box ads along the right column, color scheme and logo.
Using the CRAP method, contrast makes for comfortable reading of text, repitition is evident in the logo, color scheme, and repeated use of selection bars w/ links, and proximity is well used, in that the ads are in a column and centered, the text of the headers and the articles are also well laid out.
website2 - http://morebeer.com/
Morebeer.com is a commerce site for beermaking equipment and supplies. they also sell wine and coffee equipment as well. The site is very well laid out, since they sell quite a lot of different types of items. the links are well laid on on a lefthand column, with the center holding banner ads for specific products (sales, clearances, etc). there are informational articles toward the bottom, and an index if you scroll down.
the use of space is good, in that before you scroll down you're presented with a tangible amount of information that brings up most of what the site is trying to convey. the use of color and contrast makes a bust page less annoying and more useful.
Using the CRAP method, contrast of blue background/white text for the links works well, while the sandy color of th grain the the banner looks good with the dark red logo, repitition is evident in the use of fonts, repeating of the logo, and the uniformity of the links that display items for sale. Proximity works, in that the links are logically grouped and the splash pics are together in the middle of the page, drawing your eye
Slate.com is an online news magazine. It manages a lot of data in a very efficient and functional format. They use switchable banners that you can toggle through, or change change on a timer, so you're presented with a banner for a different article every few seconds, or you can control it yourself. The links are laid out in a logical columnar fashion, categorizing the article across the top, and headlining various recent articles down the center. there's also a toggle to view various ongoing blogs related to the content.
contrast on text is good (use of fonts as well), with a repetitive theme including the placement of banner and box ads along the right column, color scheme and logo.
Using the CRAP method, contrast makes for comfortable reading of text, repitition is evident in the logo, color scheme, and repeated use of selection bars w/ links, and proximity is well used, in that the ads are in a column and centered, the text of the headers and the articles are also well laid out.
website2 - http://morebeer.com/
Morebeer.com is a commerce site for beermaking equipment and supplies. they also sell wine and coffee equipment as well. The site is very well laid out, since they sell quite a lot of different types of items. the links are well laid on on a lefthand column, with the center holding banner ads for specific products (sales, clearances, etc). there are informational articles toward the bottom, and an index if you scroll down.
the use of space is good, in that before you scroll down you're presented with a tangible amount of information that brings up most of what the site is trying to convey. the use of color and contrast makes a bust page less annoying and more useful.
Using the CRAP method, contrast of blue background/white text for the links works well, while the sandy color of th grain the the banner looks good with the dark red logo, repitition is evident in the use of fonts, repeating of the logo, and the uniformity of the links that display items for sale. Proximity works, in that the links are logically grouped and the splash pics are together in the middle of the page, drawing your eye
week 4 posts - page 154 quiz
Website B definitely has the better interface and navigation.
The Links are orderly and logically accessible, plus the page fits in the window cleanly...even one of the links on site A is cut off at the bottom. plus, it's irritating that the products for sale aren't actually available, so the links are really useless.
the information available on site b is everything you need, what tehy're selling, who they are, etc. plus the site will still work even w/ graphics turned off. well thought out and logical.
plus the colors on site A are cheezy and off-putting...you get the sense it was thrown together just to get the links (big purple buttons) on teh page...where as site B is informational, easier to look at, and functional.
The Links are orderly and logically accessible, plus the page fits in the window cleanly...even one of the links on site A is cut off at the bottom. plus, it's irritating that the products for sale aren't actually available, so the links are really useless.
the information available on site b is everything you need, what tehy're selling, who they are, etc. plus the site will still work even w/ graphics turned off. well thought out and logical.
plus the colors on site A are cheezy and off-putting...you get the sense it was thrown together just to get the links (big purple buttons) on teh page...where as site B is informational, easier to look at, and functional.
Monday, June 20, 2011
week 3 posts - the poll
I forgot to blog about the polls... building it was very straightforward, as it's a delivered tool here in the candy store that we call blogger.com... looking through other people's polls, it was interesting to see the different choices people made. I especially like my eggs over medium. :)
Week 3 posts - readability vs. legibility, or what i learned on my field trip
The difference between readability and legibility is, honestly a little on the facile side... MiriamWebster would tell you they're pretty much the same thing. In the chapter, the distinction seems to be whether you're talking about large or small blocks of text. Using a font w/ serifs is OK - apparently - in large blocks of text (though you should think about sans serifs), but shouldn't be used in small blocks, for 'legibility' reasons...
The one point they make is that sans serif looks sand serif make cleaner looking characters for short bursts of text.
Readibility (not legibility now, be careful...) is enhanced by selecting a correct font size (no bigger than 14-18 point for a good sized block of text, no smaller than 8-10). Also, you should be mindful of the length of your lines of text..shorter lines are easier to read than lines that span across the whole page. Also, it's important to keep contrast in mind for your text against your background.
you should never set large amounts of text in script or italics or bold, etc. and not all caps.
This is true for short blocks of text..try to avoid all caps as it's more challenging to read.
I also learned how to make use of proper quotation marks (rather that the default " we get of we're not careful). This can be done by setting the correct code in the source of the webpage, or some software will give you a way to insert them without changing codes. Also, it shoudlbe noted that not all fonts are supported in all environments, so your fancy scripted font may show up as a blocky default. Fonts that are safe in this way are called "cross-platform fonts". The same is true for logical vs. physical styles..logical styles of text (emphasis being an example) could display differently on different platforms. Physical styles (bold, for example) will remain uniform.
There was more detail on type spacing (proportional vs. monospaced... proportional text uses enough space to fit the actual character, monospaced uses the same space for each letter). They have their pros and cons depending on the effect you're trying to reach.
you can also control the defaul test size of your page, and you can layer your design characteristics using style sheets. these can be saved and layered over each other to simplify changes and edits.
Additionally, style sheets allow you to define and reuse sections of formatting that can be reused. Different types of stles are "cascaded" in different levels of priority as follows:
1) Default Browser styles - this is your overall settings, they are overriden in sequence below
2) Imported styles - this is formatting that is stored in an external style sheet
3) Linked styles - these are style sheets that are stored on a different URL and referenced in.
4) Embedded styles - these sheets are placed in a single HTML file that lives on your web site
5) Inline styles - these are small styles often pointed to a sertain paragraph or word.
i also learned how to identfy and read CSS code, used to define style sheets. This will prove helpful when debugging problems on the display of the site and to make sublte changes directly. It should be noted, too, that not all web browsers interpret this code reliably, but the basic commands are fairly standard.
The one point they make is that sans serif looks sand serif make cleaner looking characters for short bursts of text.
Readibility (not legibility now, be careful...) is enhanced by selecting a correct font size (no bigger than 14-18 point for a good sized block of text, no smaller than 8-10). Also, you should be mindful of the length of your lines of text..shorter lines are easier to read than lines that span across the whole page. Also, it's important to keep contrast in mind for your text against your background.
you should never set large amounts of text in script or italics or bold, etc. and not all caps.
This is true for short blocks of text..try to avoid all caps as it's more challenging to read.
I also learned how to make use of proper quotation marks (rather that the default " we get of we're not careful). This can be done by setting the correct code in the source of the webpage, or some software will give you a way to insert them without changing codes. Also, it shoudlbe noted that not all fonts are supported in all environments, so your fancy scripted font may show up as a blocky default. Fonts that are safe in this way are called "cross-platform fonts". The same is true for logical vs. physical styles..logical styles of text (emphasis being an example) could display differently on different platforms. Physical styles (bold, for example) will remain uniform.
There was more detail on type spacing (proportional vs. monospaced... proportional text uses enough space to fit the actual character, monospaced uses the same space for each letter). They have their pros and cons depending on the effect you're trying to reach.
you can also control the defaul test size of your page, and you can layer your design characteristics using style sheets. these can be saved and layered over each other to simplify changes and edits.
Additionally, style sheets allow you to define and reuse sections of formatting that can be reused. Different types of stles are "cascaded" in different levels of priority as follows:
1) Default Browser styles - this is your overall settings, they are overriden in sequence below
2) Imported styles - this is formatting that is stored in an external style sheet
3) Linked styles - these are style sheets that are stored on a different URL and referenced in.
4) Embedded styles - these sheets are placed in a single HTML file that lives on your web site
5) Inline styles - these are small styles often pointed to a sertain paragraph or word.
i also learned how to identfy and read CSS code, used to define style sheets. This will prove helpful when debugging problems on the display of the site and to make sublte changes directly. It should be noted, too, that not all web browsers interpret this code reliably, but the basic commands are fairly standard.
Week 3 posts - niagara falls
In order to take the 8megpixel picture to a state where it's usable on the web, there are a few steps you need to take to manipulate the image.
1) Upload the picture from your camera's memory to your computer hard drive. This is usually done with a cable (USB or something else with letters) connecting your camera to your computer (some are even wireless, but an image this big will take days...). save it to the right folder and don't forget where you put it.
2) open the picture in Photoshop or something similar. don't let the image size on the page fool you...check your magnification level (it's probably 30% or something).
3) make a copy of your picture and save it in the 'native' format (in photoshop, it's .psd). Save it at a bigger size than you're probably going to need...you may want a bigger one later, and you're going to be fiddling with it.
4) using the cropping tool in Photoshop select the part of the picture you want to publish (in this case, the falls without the yokels, the angry drag queen, and the guy with the gray and pink Bermudas). save it again with a different name in case you decide you want the bermuda shorts after all.
5) select the option "Save for Web..." from the File menu. This will bring you to another window where you can select the file format, parameters of this format, and size.
6) select the file format of JPEG (this picture wouldn't lend itself to GIF), pick your quality (better is bigger), make it "progressive" (this will make it less annoying to load on someone's browser if their connection is slow), and pick your image size.
7) The screen will give you a sample view...this will allow you to view the effects od your settings. If it's all good, save your JPEG version of the file.
8) you're done. Go do the lawn.
1) Upload the picture from your camera's memory to your computer hard drive. This is usually done with a cable (USB or something else with letters) connecting your camera to your computer (some are even wireless, but an image this big will take days...). save it to the right folder and don't forget where you put it.
2) open the picture in Photoshop or something similar. don't let the image size on the page fool you...check your magnification level (it's probably 30% or something).
3) make a copy of your picture and save it in the 'native' format (in photoshop, it's .psd). Save it at a bigger size than you're probably going to need...you may want a bigger one later, and you're going to be fiddling with it.
4) using the cropping tool in Photoshop select the part of the picture you want to publish (in this case, the falls without the yokels, the angry drag queen, and the guy with the gray and pink Bermudas). save it again with a different name in case you decide you want the bermuda shorts after all.
5) select the option "Save for Web..." from the File menu. This will bring you to another window where you can select the file format, parameters of this format, and size.
6) select the file format of JPEG (this picture wouldn't lend itself to GIF), pick your quality (better is bigger), make it "progressive" (this will make it less annoying to load on someone's browser if their connection is slow), and pick your image size.
7) The screen will give you a sample view...this will allow you to view the effects od your settings. If it's all good, save your JPEG version of the file.
8) you're done. Go do the lawn.
Tuesday, June 14, 2011
Impressions
Nothing is ever easy...it took until today for me to remember the gmail account I used to create this damn blog, so i had to post all the crap i did over the weekend today, just hours before class, while i'm at work (shhhh).
luckily the linklist thing went OK (though i couldn't find a blog URL for our intrepid teacher and one other person)... people spent time fancying up their links, nice pictures and interesting hobbies...i didn't know Penny liked to ride, and was surprised to find someone dedicated enough to DogFishhead to get inked...very cool. Meanwhile, LoserTom was lucky he even even got back in...
ugh. i need a beer.
luckily the linklist thing went OK (though i couldn't find a blog URL for our intrepid teacher and one other person)... people spent time fancying up their links, nice pictures and interesting hobbies...i didn't know Penny liked to ride, and was surprised to find someone dedicated enough to DogFishhead to get inked...very cool. Meanwhile, LoserTom was lucky he even even got back in...
ugh. i need a beer.
week 2 deliverables
Terminology Worksheet:
Move Tool: This tool allows you to move a selection or a layer by dragging it w/ your mouse or arrow keys. You must make selection unless you want the whole layer to move.
Zoom Tool: This tool allows you to zoom in and out and view your picture at different levels of projection. by selecting the magnifying glass on the tool bar, you can inrement or directly modify the zoom level from 1 to sevel hundred percent.
Hand Tool: This is for moving your entire image within a window. jsut select the hand tool on the toolbar, click and drag to move the imagine within the viewing window.
Eyedropper Tool: This tool changes your foreground color to whatever color you click on. Holding the [Alt] key will change your background color.
Rectangular Marquee Tool:Use this tool to make selections on your image, in a rectangular shape. This changes the area of your image that is affected by other tools or actions to be within the defined shape.
Elliptical Marquee Tool: Use this tool to make selections on your image, in a formable elliptical shape. This changes the area of your image that is affected by other tools or actions to be within the defined shape.
Lasso Tool: This tool allows you to draw selections in whatever shape you want.
Magnetic Lasso Tool: Similar to the Lasso Tool, but this automatically "grabs" the edges of a contrasting imagine (i.e., a red ball on a blue background). it searches for the edges of an image that you're hovering over.
Polygonal Lasso Tool: This works like the lasso tool but allows you to select points to create a shape around whatever you're trying to select.
Magic Wand Tool: Use this to select a color range. It will select the block of color, or transparency, based on wherever you click. In the Options Bar at the top, you can change the Tolerance to make your selections more/less precise.
Selection Brush Tool: This tool allows you to make a selection, then "brush" away parts of it as needed to deselect.
Horizontal Type Tool: This allows you to select a point and type text onto the image. It places your type Horizontally.
Vertical Type Tool: This allows you to select a point and type text onto the image. It places your type vertically.
Horizontal Type Mask Tool: This is used to mask the background image into the type horizontally.
Vertical Type Mask Tool: This is used to mask the background image into the type vertically.
Crop Tool: This tool crops your imagine to the space within the selection box. anything outside the box is gone.
Cookie Cutter Tool: works like the marquee tool, except you can change the size of the selection before cropping.
Red Eye Removal Tool: This tool allows you to select the pupil of each eye and click to remove the red eye...it may need to be done more than once to completely remove.
Spot Healing Brush Tool: This tool is used to fix smal spots in a picture, clearing them out by selcting the tool and clicking on the image.
Healing Brush Tool: this tool is used to clean up broad areas in a picture that show scratches or unwanted marks.
Questions:
What did you learn about graphic design and how does graphic design play a role in our daily lives and activities in both print and web?
Graphic design is used to create the print and web documents, advertisements, and other sources of information that we consume. The design of a document, be it web or print, determines how you gather and respond to the content. The main principles revolve have four aspects: Contrast, Repitition, Alignment, and Proximity (Crap). these tools should be used judiciously to create the correct format and flow to match the content being presented.
What is your understanding of designing for the web vs. designing for print?
Print and web design each have their strengths and weaknesses as methods for presenting content. Web design is cheaper because of the newer technology and it's virtual format (no printing costs, shipping, etc.), more easy to keep current and distribute to a wider audience, and it allows an interactivity that print can not match. Print, on the other hand, is low-tech... you can read it anywhere, carry it with you, and it looks the same to anyone who looks at it, day after day (no need to worry about browser compatibility, server capacity, etc...)
Quiz - page 112:
1) Your corporation has an annual report that must get to every one of it's stockholders.
Print - because when distributing to a wide - but known - audience, that has to be able to recieve it, you can't rely on their access to a computer.
2) You're a graphic artist and you want to relocate from a small town to a big city. You can print up four-color brochures to send to all the ad agencies and studios, or you can put part of your portfolio in the mail, or you can send every agency and studio your web address.
Web - this will allow you to update and add info on the fly while allowing your clients to contact you as well.
3) You're a small software company and every few months you have updates to your software. You need to notify existing customers and find a way to get them the updates.
Web - this allows you a central place to communicate the updates, give them access to download them, and post questions.
4) You have valuable information that your clients pay a lot of money for. But that information changes regularly - sometimes as often as weekly.
Web - similiar situation to the software company, where you need a central place to notify users of changes and grant them access to the updates.
5) You're a teacher/businessperson and you have a great collection of small booklets that are extremely useful for your students/clients. You know the rest of the world would like the information, but publishers complain the booklets are too small and don't want to deal with them. Because your readers' responses have been very strong, you are willing to publish the booklets yourself.
Web - this is a much cheaper and easier way to make the small booklets available to your students/Clients. the date is accessible without the expense of printing, storing, etc.
6) Your sweetheart has decided it is time for the world to recognize the phenominal breadth of your artistic talent. She wants to compile a high-quality collection of your life's work.
Print - this is a one-time publication, probably given as gifts and kept as a keepsake. it's sentimental value leds itself to the book format.
Move Tool: This tool allows you to move a selection or a layer by dragging it w/ your mouse or arrow keys. You must make selection unless you want the whole layer to move.
Zoom Tool: This tool allows you to zoom in and out and view your picture at different levels of projection. by selecting the magnifying glass on the tool bar, you can inrement or directly modify the zoom level from 1 to sevel hundred percent.
Hand Tool: This is for moving your entire image within a window. jsut select the hand tool on the toolbar, click and drag to move the imagine within the viewing window.
Eyedropper Tool: This tool changes your foreground color to whatever color you click on. Holding the [Alt] key will change your background color.
Rectangular Marquee Tool:Use this tool to make selections on your image, in a rectangular shape. This changes the area of your image that is affected by other tools or actions to be within the defined shape.
Elliptical Marquee Tool: Use this tool to make selections on your image, in a formable elliptical shape. This changes the area of your image that is affected by other tools or actions to be within the defined shape.
Lasso Tool: This tool allows you to draw selections in whatever shape you want.
Magnetic Lasso Tool: Similar to the Lasso Tool, but this automatically "grabs" the edges of a contrasting imagine (i.e., a red ball on a blue background). it searches for the edges of an image that you're hovering over.
Polygonal Lasso Tool: This works like the lasso tool but allows you to select points to create a shape around whatever you're trying to select.
Magic Wand Tool: Use this to select a color range. It will select the block of color, or transparency, based on wherever you click. In the Options Bar at the top, you can change the Tolerance to make your selections more/less precise.
Selection Brush Tool: This tool allows you to make a selection, then "brush" away parts of it as needed to deselect.
Horizontal Type Tool: This allows you to select a point and type text onto the image. It places your type Horizontally.
Vertical Type Tool: This allows you to select a point and type text onto the image. It places your type vertically.
Horizontal Type Mask Tool: This is used to mask the background image into the type horizontally.
Vertical Type Mask Tool: This is used to mask the background image into the type vertically.
Crop Tool: This tool crops your imagine to the space within the selection box. anything outside the box is gone.
Cookie Cutter Tool: works like the marquee tool, except you can change the size of the selection before cropping.
Red Eye Removal Tool: This tool allows you to select the pupil of each eye and click to remove the red eye...it may need to be done more than once to completely remove.
Spot Healing Brush Tool: This tool is used to fix smal spots in a picture, clearing them out by selcting the tool and clicking on the image.
Healing Brush Tool: this tool is used to clean up broad areas in a picture that show scratches or unwanted marks.
Questions:
What did you learn about graphic design and how does graphic design play a role in our daily lives and activities in both print and web?
Graphic design is used to create the print and web documents, advertisements, and other sources of information that we consume. The design of a document, be it web or print, determines how you gather and respond to the content. The main principles revolve have four aspects: Contrast, Repitition, Alignment, and Proximity (Crap). these tools should be used judiciously to create the correct format and flow to match the content being presented.
What is your understanding of designing for the web vs. designing for print?
Print and web design each have their strengths and weaknesses as methods for presenting content. Web design is cheaper because of the newer technology and it's virtual format (no printing costs, shipping, etc.), more easy to keep current and distribute to a wider audience, and it allows an interactivity that print can not match. Print, on the other hand, is low-tech... you can read it anywhere, carry it with you, and it looks the same to anyone who looks at it, day after day (no need to worry about browser compatibility, server capacity, etc...)
Quiz - page 112:
1) Your corporation has an annual report that must get to every one of it's stockholders.
Print - because when distributing to a wide - but known - audience, that has to be able to recieve it, you can't rely on their access to a computer.
2) You're a graphic artist and you want to relocate from a small town to a big city. You can print up four-color brochures to send to all the ad agencies and studios, or you can put part of your portfolio in the mail, or you can send every agency and studio your web address.
Web - this will allow you to update and add info on the fly while allowing your clients to contact you as well.
3) You're a small software company and every few months you have updates to your software. You need to notify existing customers and find a way to get them the updates.
Web - this allows you a central place to communicate the updates, give them access to download them, and post questions.
4) You have valuable information that your clients pay a lot of money for. But that information changes regularly - sometimes as often as weekly.
Web - similiar situation to the software company, where you need a central place to notify users of changes and grant them access to the updates.
5) You're a teacher/businessperson and you have a great collection of small booklets that are extremely useful for your students/clients. You know the rest of the world would like the information, but publishers complain the booklets are too small and don't want to deal with them. Because your readers' responses have been very strong, you are willing to publish the booklets yourself.
Web - this is a much cheaper and easier way to make the small booklets available to your students/Clients. the date is accessible without the expense of printing, storing, etc.
6) Your sweetheart has decided it is time for the world to recognize the phenominal breadth of your artistic talent. She wants to compile a high-quality collection of your life's work.
Print - this is a one-time publication, probably given as gifts and kept as a keepsake. it's sentimental value leds itself to the book format.
Tuesday, June 7, 2011
First Post
At the end of the first night of the battle of Shiloh, General Sherman found General Grant under a large oak tree, leaning against the trunk, whittling a small branch. He had been sitting there for hours, avoiding his headquarters, which was full of the screams and moans of injured soldiers.
"Well, Grant...we've had the Devil's own day, haven't we?"
Grant didn't look up, kept whittling in a slow steady pace.
"Yep," he answered, "Lick em tomorrow though."
"Well, Grant...we've had the Devil's own day, haven't we?"
Grant didn't look up, kept whittling in a slow steady pace.
"Yep," he answered, "Lick em tomorrow though."
Subscribe to:
Posts (Atom)