Tuesday, July 19, 2011

Week 7 post - web site project and reflections of the class experience

This class gave me a solid grounding in the concepts of design as they apply to the web and modern media. I got a good understanding of Photoshop and built some new skills which will be very helpful with photo manipulation either for personal projects or web design. I liked how the class built up to the final project where you were able to exploit your new skills and get a feel for modern web building tools, both direct and online (web1.0 and web2.0).

The two websites I built (Expressions 4.0 vs. weebly.com) came out looking quite different. Using the templates available is the biggest reason for the differences, since they differed and were the basis for the sites. Expressions allows a lot more leeway in terms of design and development, and Weebly allows a very streamlined method of drag n dropping all of your content right into place. It doesn't have as much flexibility (though there is an area to add custom HTML), but that's not really the point here...it's set up for the easiest experience to a passable site, and it does that very well.

My initial storyboard actually ended up to be pretty much on target...my content and sitemap stayed the same, the only real differences being slight in relation to the template i chose. The Weebly site was a little further off, stylistically, but it still matched up w/ content and navigation.  

Monday, July 11, 2011

week 6 posts - my review of the "w" sites, and a mention of accesibility vs. usability again, even though i did that last week (the sucking up continues...)

I took a look at the web sites recommends, Webnode, Weebly, Wix, and Webs. I decided if one of them did not start with a W, i would have picked that one... apart from that, I think they're all useful and usable (and accessible, i imagine), but i will probably use weebly because it seems to allow a little more creativity in a personal site than the others...each seems to have it's specialties, though, and i think you'd be OK with any of them. I would have to really get in and try building something to know for sure...for now i just browsed around because i's been a long day and i'm tired and cranky and need a cigar.

accessibility and usability remain that same thing in terms of the words... but, as is common in the web-world, they have arbitrarily chosen to give them different meanings in thsi context. Usability has to do with the design and function of the site...is it understandable and useful to it's purpose without irritating people with bad content and links that send you to oblivion? Accessibility refers to the ability to use a site if you're accessing it via tools that aid with disabilities.

week 6 posts - summary of what I have read, continued...and something about storyboarding, because i'm trying to suck up to my teacher.

Apart from the book, i also read the Diigo postings about storyboarding. i thought the articles were useful to breakdown the creative process of concieving and laying out a site, which is a good way to get things organized before you just start throwing up pages. Plus, it gave me a good idea of what the teacher wants to see on paper tomorrow night in order to get my first chunk of that big 90 point jackpot that is the website project.

storyboarding is definitely a good way to lay out your site once you've decided what you're building it for. It allows you to visually work through the presentation of your content so that it's logical and orderly. It's easy to lose sight of your reader's path through your site and to be irritating.

week 6 posts - summary of what I have read

the chapters (13 through 15)  in the Non-Designer's Web book were very useful for setting up and maintaining my website. Chapter 13 supplied some quick tips regarding soem creative uses of tables to help align text and integrate in into graphics. There were also some photoshop tips for enhancing pictures and managing text to make it more readable (especially small fonts). There were also some tips for managing how pictures load on pages more efficiently as well as slicing graphics which allows you to do funky things with parts of a picture seemlessly. Funky is generally good, as long as it doesn't include anything flashing or tossing out disco music (that wasn't from the chapter). some additional photoshop tips were thrown in and some cool stuff about rollovers and image-swaps (which are also funky. No Disco). They also gave a little intro about Flash.

chapter 14 talked about testing your website and fixing the crap you did (like including disco music). it gives a good primer about different ways to test your site both on and offline, as well as in different browsers (because they will look different).

chapter 15 talks about actually publishing your site via upload. it kind of beats the topic to death, in my opinion. it's not that complicated after all. it does giev some helpful warnings about how refreshes work...that could be a source of frustration if you don't know what's going on.

Tuesday, July 5, 2011

week 5 posts

The reading gave a lot of "baseline" detail about what a website is, and the components that go into creating one. it discusses the general pieces needed and how they work together, the differences between tables and frames, for example, and an overview and explanation of the use of frames. Additionally, it talks about how to go about setting up the website so that it's easier to develop and manage...organizing your files and folders, right down to suggestions on naming conventions, etc. we also got a little update on key terms like how browsers work, how to go about getting server space for your site, and the rudiments of working with domain names.

as to whether it's a good thing that anyone can create a website, that'd be a no. it's like anything else, really. some people are better at it than others, and teh results vary pretty widely depending on the material you're trying to incorporate in your site, and your goals, along with your skills and experience (or lack thereof).

Having a web site built and maintained by a pro is always going to be the best choice, whether or not you happen to be to pro in question. if you're going to raise the site yourself as a learning experience or as a cost cutting measure, you may be a digital picasso...but more than likely you get what you pay for.

Usability and accessibility are again terms that people like to differentiate to no real purpose (remember readability and legibility?). but in this context, usability apparently refers to the "look at feel" of the site, and whether or not the buttons and links all work and are relatively intuitiver to get around with. Accessibility in this case has more to do with people who have to use alternate methods for accessing the site (the blind or disabled, for example), and whether your site is equipped to accomodate them.

Tuesday, June 28, 2011

week 4 posts - will i be more critical

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.

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

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.

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.  

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.

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.

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.

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."