Final Project

Click Here for Final Project!

Ideas for Future Class

The idea of pairing computer science and design students is a good opportunity and would give students a feel for what a "real job" in the industry would entail, to a degree. I think in doing this though, the project should be started a lot earlier in the semester because it will take more time and work than our individual design projects did.

As far as improvements for the class, I agree with Ivana's suggestion of giving more class time to do work. This would especially be necessary for the collaborative projects because otherwise it may be difficult to find convenient time outside of class for both students to work together. And more one on one student-professor interaction would be more helpful as well. A sequence of web design classes or at least a follow up class would be great too (Web Design I, Web Design II, etc).

Assignment 10

Final Design Proposal: Fox News

The Original Site: http://www.foxnews.com/

The Fox News website has so many problems that I don't even know where to begin. It's ugly, disorganized, excessive, and manages quite well to appear boring. The heading is bothersome right off the bat for a couple of reasons. The logo is too inconspicuous and subtle and left aligned while there is a bunch of other mumble jumble that follows it. This needs to be simplified and enlarged. And I think a simple color scheme would go a long way in benefitting the appearance. There is no consistent organizing principle. Instead, each section is laid out differently, which adds to the disorganization.

The placement of information is too random and needs to be categorized better. The information factor is good and Fox News is probably my favorite news website, it just happens to be the most misshapen in so many ways. The two main factors that I want to change are the appearance (which includes color and layout) and the organizing principle, which doesn't seem to exist right now.

My Proposal:

First off, I made the logo and heading more prominent but simple. The original had the logo aligned to the left side of the page and very small. I centered the logo against a red background and put a 'Search' bar to the left and space for an advertisement to the right. I have no problem with the original logo and don't think that it needs to be redesigned.

I simplifed the tabs that are right underneath the heading. I kept about seven of the main categories (ie. World News, U.S. News, Entertainment, Sports, etc.) and then created a 'More' tab to include less significant tabs (ie. SciTech, Health, Lifestyles, etc.). The original layout of the tabs was extremely excessive with two rows. The entire second row included television programs on the Fox News channel, which I incorportated into one section on the main homepage. I also added color, making the main page color a light gray and then utilizing mostly red and blue.

Website Content (Homepage):

To present the main headline stories, I created a large box that would be left aligned directly underneath the tabs. The box is divided down the middle with three main stories presented on the right and a photo on the left to coincide with the story that the user clicks on.

Then I created separate boxes underneath this section for each of the different categories listed in the tabs. I made the six main categories larger and more prominent (World News, U.S. News, Entertainment, Sports, Business, and Politics).

Underneath this section I created a 'Special Features' section where news and features can go that don't belong to a specific category or need to be easily noticed. And underneath this section, I included boxes for the tabs that are less prominent (ie. Opinion, Lifestyles, etc.)

Along the right side of the homepage, I created boxes/sections for Fox News shows (as previously mentioned) and Videos & Blogs. I don't feel that these categories need to be very pronounced as most visitors probably don't visit the site for these sections. However, they still need to be presented.

This layout simplifies the problem that I have with the original layout. Instead of trying to fit as much information as possible onto the homepage, the information is presented in a simpler manner. When the user clicks on a link or a specific section, they will be routed to a secondary page that will contain the bulk of the information for a specific category. And I have designated small sections of the homepage for advertisements, which are obviously necessary (though irritating) because they are being paid for.

I will probably create a template for the layout of a secondary page once the user navigates away from the homepage.

Assignment 9

Redesigning FoxNews.com

So I made a few changes from last weeks prototype (see screencap in my previous blog). I redesigned the page in Indesign instead of MS Word. To begin with, I changed the heading. My problem with the original was that the logo wasn't prominent enough and it was just way too busy with needless information. For now I've kept the current FoxNews logo. I'm not sure if I'm going to redesign it or not. The current logo is not bad, it was just too inconspicuous.

I simplified the tabs going across the top. There were way too many, two rows of them on the original site. I still have to work on inserting information in certain places (ie. the entire second row was Fox News television shows, so I think I will create one tab strictly for shows). But the tabs look less busy now. I need to decide/clarify what will go into the 'More' tab but I want to condense some of the information from the original page. For instance, Scitech and UReport do not necessarily need to be main tabs and can be added to More.

For the actual news content, I revised my previous design a little. I kept the idea of categorizing information into separate boxes (ie. Entertainment, Sports, Politics) but I got rid of the scroll box within each box and instead just added a few 'Top Story' links, then a link to continue to a second page that contains all of the information for that section. And I kept my original idea with the main top story box. I think I will design a general template for the secondary pages, once the user clicks away from the homepage.

Along the right, in about the middle of the page, I added two columns for FoxNews TV shows and Videos & Blogs. The original site had them scattered sporadically and in places that they just didn't seem to belong. It was quite bothersome. I just wanted to collect them into one spot for people that actually visit these places.

Along the bottom, I added a 'Special Features' section for news and stories that don't necessarily fall into a specific category. I need to add links to the bottom of the page (ie. Home, Contact, FAQ's, etc.) and I may add links for all of the tabs across the top.

My main goal in redesigning this site was condensing the information without losing it. The content of the site is good, it's just laid out in a way that makes the site appear excessive and disorganized. So I think the box layout is a good start. I also colored it up a bit, which I think it could use. The original site just appears boring, on top of the disorganization. There are also a few design flaws/technicalities I need to clean up but I think this is the direction I'd like to keep going in.

Assignment 8

My Proposal for Redesigning Foxnews:


I want to:
-simplify the content (or at least the appearance of it)
-develop an better organizational scheme for the homepage content (categorize with boxes)
-dispose of excessive elements (tabs, videos, size of ads)
-add a touch of color
-eliminate second row of tabs but including them all under one main tab of "FoxNews Shows" or something to that effect
-eliminate the sections of Videos and Blogs by including them under a tab along the top (maybe include a small box that randomly chooses a video and a blog to display on the main homepage
-make the tabs bigger by utilizing more of the page for news and less for ads
-give option to choose color (like on aol homepage, small color swatches at top right of page)
-perhaps have one large main box, with three main stories that "tear away" (similar to NY Post)
-change the heading, similar to layout/design of The Onion page, with logo centered and tabs underneath, spaced out, in one spaced out looking row, and also NYmag with logo centered and search tool to the left

One option that could work would be to have a main box with important news stories and then have boxes that categorize information by subject (ie. sports, finance, entertainment, etc). These boxes would contain all of the information for these subjects and would allow the user to scroll up and down within each individual box, almost as if each box were a website within a website. This will fix the current problem of the inconsistent layout for each section.

I want to make the page light gray. Then, in each individual section, I want to make the header a maroon box with the text in white or gray lettering.

The heading needs to be more prominent. I would like to make the the heading larger, center the FoxNews logo, and add a search bar to the left of this. The tabs could be placed underneath this, in their simplified manner (condensing the current second row of tabs into one tab).

The ads along the right side of the page also appear extremely prominent and I feel like they are obstructing the content of the site and its appearance. While they can't be taken away, they need to be minimalized in size.

Basically every tab that runs across the top is also its own section on the homepage, which I feel is unnecessary. Also, the Faces & Features section is needless and can be done away with (I feel) without harming the site. It is essentially another Entertainment section.

I feel like this is a good start, although there is so much potential work to redesigning this messy disorganized site.

:::::This captures the basic idea of what I mainly want to do, which is condense the information on the site without getting rid of it. Many more changes to come however, I just wanted to map out my plan on paper and see how it worked and go from there:

Assignment 7

Websites I'd Like to Change:

http://www.empirecoffeetea.com/
While the informative content of the website is good, I just don't find it very aesthetically pleasing whatsoever. First off, I would get rid of the initial page that says "Enter Site" and make the second page the homepage. I'd like to change the layout of the second page to something that's a little more boxy and symmetrical looking. I like the idea of the Bomb Site homepage with the table/grid like layout. I'd also like to change the color scheme to include warmer tones like browns, reds/maroons and so forth. And I think the font needs to be a little spicier.

With the pages where you can actually purchase products (Tea, Coffee), the appearance is pretty bad. It serves its purpose and doesn't make buying super difficult. However, its unappealing how you have the option to purchase with the illustration in the middle of the page and also with the tabs aligned to the right. Not sure yet how I would simplify this but it needs to be changed. On the Specials page, I despise the conspicuous white box under the image with the product description. The information should be kept there but displayed in a different manner. And the Gift Baskets page is all out of sorts in spots, where it looks like some products have been tabbed over a notch. This would work if the product was a connected to the one above it but in most cases it is not.

The information on the website is pretty good, I think it just needs to be arranged differently. The Buying Guide, About Empire, and Cool History of Coffee sections are good informative factors for the overall site they just need a little rearrangement (not completely sure about this yet though). The overall page just needs a better header as well.


http://www.foxnews.com/
This site is a little boring in appearance and although the information factor is pretty good, it can be repetitive. Sometimes a news story will appear in three different places on the homepage which can be a little annoying. I think the website could use a simple color scheme also, no more than two colors. The page needs something to liven it up a bit. MSN is a good example of a simple color scheme, using two light shades of blue. I think a hierarchy setup with the news stories would work better, with one major story taking up a large box then working down from there. I also like the idea of dividing the page in two, with the left side being a bit bigger. Then I would include the bigger news stories with images. In the right column I would just list the smaller news stories as links so the viewer can click on them for more information.

Assignment 6

Computer Database

A computer database is basically a compilation of information stored in a system in a manner that makes it easily retrievable. A database operates like an online filing system and stores data categorically to make retrieval simpler.

"Traditional databases are organized by fields, records, and files. A field is a single piece of information; a record is one complete set of fields; and a file is a collection of records. For example, a telephone book is analogous to a file. It contains a list of records, each of which consists of three fields: name, address, and telephone number. "
[Source: http://www.webopedia.com/TERM/D/database.html]

I found the above explanation easy to understand in terms of how a database works. I was able to derive a good visual in my head from this description of how a database is structured and how it categorizes and maintains information.

Assignment 5

Basic Elements of Web Configuration

In trying to understand the basic computer and web terminology, I must admit I'm finding it all a bit complicated, excessive, and overwhelming. Here, I tried to assemble the best understanding of the basic elements and components of web configuration and proper functionality of a website. And I added a couple of diagrams which helped me gain a little better of an understanding of some of the terms.

One of the largest features is a web server, which is essentially a computer program created to acknowledge and read HTTP requests and respond to these requests with HTTP content which usually include HTML (web pages) and linked objects such as images. A web server could also be classified as a computer that is set up to host Web pages. So if someone types the URL http://www.fandango.com/ into their computer, a web server will locate this information in the W3C and send the information to the computer/person that requested it.

File Transfer Protocol (FTP) is a simple and secure means of exchanging files over the Internet. The most common way that FTP is utilized is by downloading files from the Internet, such as music and pictures. Just as with a typical Website (an HTTP site), an FTP site stores and organizes information and offers the creator the option to make their site public or private. It is often difficult or impossible to upload FTP files on a Web browser. Often an FTP Client is required for uploading and downloading FTP files, which is basically software that is designed to transfer files back and forth over the Internet between two computers. A typical FTP Client design is composed of two panes and looks like this diagram to the right. The left pane illustrates the files on your computer while the pane on the right side shows the files on the opposite computer.

A Domain Name System is a system created to apply names to computers, services, and basically any resource involved with the Internet. A DNS is a great organizing principle that associates various information to domain names given to participants as a means of identification across the Web spectrum. It doesn not depend on a users physical location. The naming system is basically an easier way to name computers' numerical addresses and make them more personified and identifiable. I found this bit a little too complicated to really fully grasp.

A chmod allows a user to set permissions for certain files on ones Web server. Such permissions vary and allow certain individuals access to certain information. For instance, permissions may be set that allow only the owner to view files while others can be set to allow a certain group or everyone access. Permission codes are set up with corresponding numbers that range from 0-7, with seven allowing the most access. The following diagram gives a better understanding of how the numbers and permissions correspond to allow access. The number 0 essentially grants no permission while 4 grants permission to Read only, and the number 7 grants permission to Read, Write and Execute a file. So the number 777 allows for the most access by anyone while number 700 only allows the owner access to a file. This was perhaps the easiest aspect of Web configuration for me to understand. Why can't all of the codes and instructions be this simple?


Sources:
http://en.wikipedia.org/wiki/Web_server
http://www.ftpplanet.com/ftpresources/basics/htm
http://en.wikipedia.org/wiki/Domain_name_system
http://www.pageresource.com/cgirec/chmod.htm

Assignment 4

1: Experimenting with Dreamweaver:

So I was able to create SOMETHING in Dreamweaver. I did not however attempt to recreate my blog, I sorta just created my own page (on graffiti) to experiment and see what I was capable of. It took me about an hour and a half to two hours total to formulate my masterpiece. I was able to figure out out how to change the background color of my site, which was one of my questions last week. I have no clue how to put a picture of what I've created into my blog so I guess it will be a surprise (good or bad, probably bad) in class tonight. So I was able to use divs to insert pictures and text and all that good stuff. I used a 1 row, 3 column table to insert pictures as well. And instead of inserting a background color I inserted a picture for my site background. All of the pictures I used are from the internet though, not my own. All in all, this experience was a little less frustrating than the last but the prospect of creating a legitimate webpage is still overwhelming to me.



2: Elushika's Comment on my blog:

While she didn't suggest any changes for my blog, I would like to see if there's a possible way to resize my picture because Blogger resizes it (I assume because it's too big). Maybe this is something I could do in Photoshop.



3: Comments on other blogs:

I commented on the following classmates' blogs: Michael Goncalves, Ivana Morgan, & Kristin Cardo.



4: Reading Assignment-Fonts & the Web:

The average web surfer may not care what font they are reading when they visit a website. But this is a very important detail to many if not most designers. Typically, without web embedding tools, when someone visits a website the font would automatically change to a default setting on that particular computer and in most cases would not display the original font intended by that website's designer.

Well, such creations as WEFT (Website Embedding Font Tool) and sIRF (Scalable Inman Flash Replacement) are programs that are meant to allow fonts to travel with their webpages to different computer screens. The overall purpose of these tools is essentially to embed fonts into a webpage to ensure that people see that page exactly as the web designer intended for it to be seen. This is important because it allows designers to maintain their typeface of choice and not have to worry about it becoming all discombobulated once their site is out there for the world to view.

Assignment 3

Self-Education Week

Semantic Web

So in preparation for this weeks guest speaker, I've been trying to read up as much as possible on the Semantic web. It's pretty complicated and intricate stuff. Essentially, the idea (I think) is to develop a database where semantics, or symbols, can be developed and stored to include every single possible person, place, or thing in the world. Once these semantics are developed, web searching will be easier and faster, I suppose. The development of this information is intended to be done on an international scale so that searching for anything in any language is made easier and more organized. The idea of the semantic web and all of its embedded coding is supposed to look something like this diagram.

Ok, maybe I get a little better of an idea. But my self-educating process started to become overwhelming and complicated because I felt bombarded by the semantic web terminology. All of the 3 letter terms like URI, RDF, XML and so on began to form a huge blob in my mind and nothing made sense. Then again, I have little to no background on HTML and all of the website producing information. So I'm just gonna try not to think about how complicated this all seems and be a sponge during the guest lecture.

Question for Guest Speaker: Is there a projected time frame for which the Semantic Web is expected to be launced (a year, a decade) or is it more of a matter of making gradual changes to the existing web over time?



Dream Weaver

After last weeks lecture and demonstration of the fundamentals of Dreamweaver and a little self experimentation, I was able to repeat all of the procedures myself. Now, I do mean the very basics of Dreamweaver, like inserting text in the body, changing the font type and color, and dragging a picture into the body. I was able to remember how to do these things pretty quickly, not overly complicated stuff.

I was not ambitious enough to attempt to figure out how to actually turn what I've created into an actual webpage. This is something I am very interesting in learning to do however. Something I would also like to learn how to do is insert links in the webpage in order to categorize and break down information. For example, if I create a website for clothing, how do I create/insert the link or information into my Dreamweaver document in order to allow someone looking at my website to click on a link for Shirts? And how do you insert a background color (say I want my page to be purple, maybe with yellow polka dots)?

Okay, maybe I'm getting a little ahead of myself here. Again, I become overwhelmed by the answers to these questions so I'm going to leave it at that for now. Must practice.

Assignment 2

Paper Prototyping


After reviewing and considering the process of paper prototyping and what it entails, I have concluded that designers are less concerned with cost-cutting and failure of their product than they could potentially be. I say this because paper phototyping seems to be consistently shunned by designers when it is essentially a cost effective, time-saving, usability testing technique. This is the result of our technology driven world, where the most fitting motto seems to be "out with the old, in with the new". It seems to me that we would rather spend money on the most current technology to develop a website, software, hardware, what have you, than use an age-old process that's proven effective and costs virtually nothing. Well, apparently it just isn't cool to be cheap, or old.

Okay, so paper prototyping essentially involves building an interface (ultimately the surface of the product, the finished look) from scratch and without the help of current technology. The designer can test user friendliness by having an actual 'user' determine the usability rating. If it seems the product is too difficult for the average person, changes can be made to the design before it is launched to the public. All the while saving money by not using expensive technology to develop the interface and time, by being able to avoid creating and putting forth a product that will fail before it can be tested by the average consumer.


I like to think of paper prototyping as the vintage approach to designing. The thought of vintage clothing and comic books is appealing to us, for the most part. It's stylish. So why can't the same idea carry over to paper prototyping, instead of dubbing it as old and outdated? Why can't we feel satisfied and even dignified that we have the ability to create a design that is the same, and perhaps better, with few inexpensive resources than the most prime and current ones? It is almost as if it feels wrong to be doing so.


I also like to equate paper prototyping with the question: why is a new Yankee Stadium being built? Not because the "old", or current one is unusable and dilapidated. The stadium simply is not as new as it could possibly be so it's unacceptable. It's a relic, its walls are shrouded in history but its age renders it as being in need of renewal no matter what its state.

Essentially, with the option of paper phototyping, designers are ultimately deciding: do I want to use a method that's proven effective, saves money, and allows for changes to be made before being launched to ensure client satisfaction or use the most expensive design techology and take my chances on failure? Seems like the decision should be a no-brainer but [shrug]. If only paper prototyping could be thought of less as the approach your grandmother used to design, the process could prove to be an exceptional design tactic.

Assignment 1

After brainstorming about the creative elements and informative content of various websites, I've compiled the following list of five that I find to be appealing and affecting and also what elements some of them could benefit from.

http://www.nymag.com/ This is the website for New York Magazine. At first, the site may appear extremely busy because most of the information covered in the magazine is on the front page, similar to The New York Times homepage. After a visit or two, it seems less overwhelming and the reads are worth it. The articles cover topics from fashion to politics to art and the writing is witty yet intelligent. The site and topics are appealing to a fairly large demographic, roughly 20-50 year olds, with blogs and articles about entertainment, economics, fashion and politics in a not-overly-political tone (I enjoy the articles for the most part and I'm not big on politics in general). The photography and graphics are also usually pretty interesting within the articles and on the homepage as well. To me, the site has a cool vintagey sort of feel, artsy in a comic book-like way.

http://www.feedyoursoulbusiness.com/ Feed Your Soul is a New Jersey based homebaked cookie company. The website has a very appealing simplicity to it. First of all, the designer used soft colors like browns, pinks and yellows which give the website an overall warm, inviting feeling (you can almost smell the cookies baking in the oven). The website is easy to navigate and organized very well. The tabs running across the top are perfectly informative and quickly point you in the right direction. The use of images of the actual products can be very enticing as well. And they truly make a darn good cookie!

http://www.themudtruck.com/ Mud is a popular self-described "gourmet street coffee" that is particulary popular in the lower east half of Manhattan. There are the Mud trucks, which commence mostly in the East Village, and there is a cafe there as well. This is the website based on the product. The graphics, and the logo in particular are well designed and the photos are creative. Again, I like the color scheme for this site. The designer utilized mostly warm subtle colors. Just looking at it is enough to give me a craving for a nice steamy cup o' joe. This site allows you to purchase products, view/listen to music from their cafe, and offers witty coffee "facts" (Buying a cup of coffee for the entire line is like God had just descended and bought a cup of coffee for the whole world.) The design offers subtlety along with a nice artsy, creative appearance. The principal downside to the website however, is that it doesn't offer much information as far as their products. No menus, nothing really on what the cafe offers, or special types of coffee can be viewed. So I'd say I specifically like this website for its creativity and art and not its information factor.

http://www.foxnews.com/ This is a good news site. It is simple and easy to navigate, albeit a little boring. And sometimes several news stories will appear in a few different locations on just the homepage. Not a huge deal and I don't feel like it takes away from the informative content or the overall appearance of the website (which is basically white with a couple small images) but it's just something that I notice in visiting it daily. I think the overall site could use a bit more color so it doesn't appear so bland, but nothing over the top.

http://www.empirecoffeetea.com/ Forget Starbucks, Empire Coffee is my java spot. There are two locations, one in Hell's Kitchen and one in Hoboken. The website is informative as far as their products, the company's history, and even the history of coffee. To me though, the website is not very aesthetically pleasing. I am not really a fan of the colors, I would use more warm tones like brown or maroon/dark red to correspond with the image/feeling of coffee. And I feel the the content is all cramped into the middle of the homepage. It would have a better appearance if it was more spread out, perhaps larger images, and maybe more of a boxy layout instead of the weird swervy design that the information is laid out in.