assignment.004

Website Wireframes

Website wireframes, like paper prototyping, is a method used by web designers to visually plan out a design of an interface before actually building a website. Wireframes focus on the structure of the website prior to the design of the website. It illustrates the structure of the site and its relationship to its pages while maintaining consistency throughout the inner pages of the site.

Below is a screen cap of Tutcast.com, a website that makes Adobe Photoshop Tutorials.
Prior to coding and design, a wireframe image would look like this.
The wireframe serves as a stable, simple outline of the structure of the website that functions as a base for developers and designers to reference while building a site. In this website, much of the website that fits "above the line" is taken up by web advertisements and very little of the page is reserved for actual Tutcast content. A redesign could involve cutting out most of space reserved for advertisement and structuring a website focusing more on the video content produced.

Wireframes can be produced both digitally (as shown above, created in Adobe Photoshop) or drawn on paper (an example, being paper protoyping as shown in a video in a previous post). One advantage of paper prototyping over computer generated wireframes may be the ability to illustrate and view many "pages" of a website design at once while being able to physically move around, eliminate, or change pages faster than on a computer graphic program. Below, again, shows a website with a wireframe that does not allow users to interact with the prototype.

















A redesign of this website for 21st Floor Associates would need a more interactive wireframe where people can interact with the links at the top of the page and see where each click leads to. The advantage of doing a paper prototype would encourage this interaction.

This wireframe requires a more interactive prototype for more clarity of direction than the simple wireframe can offer. Paper prototyping may offer a way of designing for functionality rather than just for design structure. The limitations of wireframes, however, are becoming less of a problem while technology allows for more user interaction. Programs like Adobe Photoshop, InDesign or other programs available specifically for wireframes are available to modernize the creation of pre-building phases of website design.

Another tool designers use for the web designing process is the use of a Site Map. While site maps act as a sort of table-of-contents for web pages, it is also used as a planning tool that lists the pages of a website in a format that are organized in a hierarchical fashion. It is used to make sure every page within a website is found by both users and search engines, especially when the website involves flash or javascript.

The next step in a web design prototype could be a comprehensive layout - a mock up of exactly what the website would look like including the design. The comprehensive layout, or "comp" applies to any sort of design projects including magazines, books, or advertisements. It would be in the phase where companies could show clients what a project would actually look like visually instead of just functionally.

Graphical User Interfaces (GUI) are allowing people to interact with a computer in more ways than just typing and clicking such as modern touch cell phones or ATM machines. These programs depend on user-centered designs. It is important for these designs to be tailored to the desired functions that the program requires. Users interact with widgets and a model-view-controller allows for a flexible structure so the GUI can be customized by the user.

Related to graphical user interfaces are interfaces for website management that simplify the process in websites that frequently update or change content such as news websites or online shopping sites. Interfaces for website management allow people, other than programmers or developers, to access and manage the website without having to know any code. It works similarly to the user-friendly ways that Blogging websites such as blogger.com work where users can sign into their account and update posts without having to code the site.

All of these tools are useless without the feedback from any typical user. Wireframes, paper prototypes, site maps, and any other tool used for web design planning are made so regular people, particularly a focus group comprised of the people in the target market of the website, can test the comprehensiveness and agreeableness of the website design. These people ultimately decide if a design is useable or not.

assignment.003

Semantics & the Web

Semantics of the web involves a set of language principles that enables people to program the web to do what they want it to do. It is the idea that information can be translated so that computers may be able to do tedious tasks that humans can program it to do on the web.

Semantics separates presentation from content to make more funtional and attractive websites. This includes the standards and tools of XML (Extensible Markup Language) , XML Schema, RDF (Resource Description Framework) , RDF Schema, CSS, and OWL (Web Ontology Language) that are organized in the Semantic Web Stack and the way data is organized. Semantics are needed for web coding like HTML to work.

Semantics of the web are important to modern web development's flexibility. Aside from its browser and device flexibilities, it also is capable and conscious of handicap access and is ability to adapt. It is important to the programming of websites with broad ranged audiences like Facebook or the development of new programming for new devices like the iPhone.

Some challenges that semantics are met with are the inconsistency of logical contradictions, vagueness of terminology, uncertainty of precise concepts, and deceit misleading consumers. In a New York Times article, writer Patricia Olsen describes a company that uses a "buddy system," or a type of partnering system, that enables programmers to collaborate and become more productive and accurate with their work. This system is preventative for any of the challenges that semantics may bring if only one programmer is writing. It also helps to progress and develop what may be the future in web semantics. On Wikipedia, Tim Berners-Lee predicts, "the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines."

Dreamweaver

My experience with Dreamweaver was more difficult than I had imagined. I hadn't used the program since my high school web class; however, I thought I would pick it up faster. The things that I had difficulty with was starting and sync-ing CSS sheets with the HTML and linking extra HTML websites to the main index page. After completing the assignment, I found that style sheets can be confusing if styles are applied to more things than I intended for them to (for instance, the whole page instead of a single line of text.

Dreamweaver, I have discovered is an easy program to play with and learn just by experience. I need more help figuring out how to link to internal pages and I would also like to know how to position things more precisely along the page.

assignment.002

Paper prototyping is a method popularized in the 1990's used to help design and test the user interfaces of a website. The method involves creating rough hand-drawings or paper models of the design and is used to provide a good source of early-round comments and feedback on the usability of the design. It, quite literally, is taking a webpage to the "drawing board."

Prototypes are created by drawing or printing individual elements on paper that are cut out and placed on another piece of paper that is drawn to be the computer screen. With enough creativity, prototypes can model many website functions such as drop down menus, multiple pages, or scrolling.

Usability testing involves a human test user to "click" around the prototype and a human facilitator acts as the computer to simulate what the webpage would do with each move. The facilitator's role is to be extremely knowledgeable about the user interfaces of the website. Some issues that usability testing can catch are confusing concepts, poor terminology, layout problems, missing functional requirements, design preferences, priorities, or issues relating to the company beyond the user interface.

Benefits of paper prototyping include a low-cost version early in the design that allows for easy and more critical modification. It also encourages everyone involved in creating the website to be hands on in the creative process.

Problems with paper prototyping include no actual tangible progress in the coding and creating of a webpage. It is an extra step in the process to emphasize feedback and creativity. It also can occasionally misrepresent the look and design of the page if the prototype is too rough.

Jakob Nielsen's article comments on the reality of paper prototyping: designers rarely use paper prototyping and managers feel as though it's and expensive and time-consuming option. People assume there is no value in doing something so simple. In Nielsen's experience, he believes there are significant useability problems that can be caught early on in the design process by creating paper prototypes. He believes that the eaProxy-Connection: keep-alive
Cache-Control: max-age=0

ier the changes, the more significant the benefits will be as far as ability to make significant changes and also cost to make these changes.

I found the Wikipedia article on Paper Prototyping fairly thorough in explaining what paper prototypes are and their purpose in web and software design. It pulls a lot of information off of Carolyn Snyder's website and book about paper prototyping which also digs deeper into the benefits of using paper prototypes.

I found a few videos on Youtube demonstrating paper prototypes in their testing stages. Some were more advanced than others; however, the video below is a good rough example of how paper prototypes can function.

----

My prior experience with HTML consists of minimal interaction with the Dreamweaver applications and HTML manipulation when changing graphics and content on a webpage that has already been coded. I have a good working knowledge of basic HTML tags and how to implement them.

Dan's Web Tips break down HTML tags into to basic types: logical tags which represent the structure and meaning of a document, and physical tags that represent specific visual effects which are intended to be reproduced in a precise manner.

The use of only logical markup was what the original implementation of HTML consisted of. Logical "constructs whenever they fit the meaning you're trying to convey." Tags like <*b> <*header> or <*h1> to block of header content and <*strong> tags to signify boldface text belong in this group of HTML.

Physical markup includes tags that achieve particular visual effects that don't fit into the structural meaning of logical tags. It can be looked at as the type of tag to complete more specific visual tasks. Instead of using a logical <*strong> tag to bold text, a physical tag would appear as <*b>. Physical tags can also greater define text size, color, and type.

The Glossary of WWW/HTML terms lists common HTML markup that can be used in web coding. It outlines terminology commonly used as well as certain tags and their uses.

Questions that always hinder me from advancing at my own HTML skills usually revolve around the ordering and positioning of certain HTML tags. This usually is most critical when I try to attempt to understand HTML mixed in with other markup such as CSS and any other language that may follow different rules.

assignment.001

My name is Ashley Elise Espenilla Crisostomo and I am originally from Duluth, Minnesota. I am currently pursuing a B.S. in Business Administration with a double concentration in Entrepreneurship & Marketing and a specialization in Communications & Media Management. While much of my professional experience is within the music or television industries, I have a lot of experience with design, advertising and marketing within these fields. I have interned for Sony BMG's Epic Records' Digital Media Marketing department working directly with musical artists producing official website designs, banner ads, digital downloads, and any other digital creative need. I most recently interned at NBC's Bravo TV network in the creative design department assisting with both print and digital design for any of the network's advertising campaigns. My goal after graduation is to work within a creative advertising firm, particularly with new or digital media.


In my past experience with web design, I have found that online video or blog tutorials that present the material in a step-by-step manner most useful. In my own research, I find that there is a clear separation between graphic design of a website and learning how to technically put the site together and that "students" tend to have to bridge the gap between the two. Theories tend to fall into either category with the way information is presented on the internet.

.eduGuru's article "The Online Game is Changing" presents a view that challenges the traditional way of learning through a "brick-and-mortar" educational system. This includes both physical universities that students may attend and earn a degree from and now online universities that provide the same service but through an online venue. The article cites websites such as StraighterLine which offers free or competitive prices for online education. It challenges the education business model in general - and suggest that if successful, could change the face of a financially struggling educational system. For teaching web design, the availability of free tutorials, blogs and articles for this information enables people who do not go through a technical educational program specific to web design to still become competitive in the industry.

For both graphic design and web programming technology, I find that the internet allows for just about anyone to create a website for the purpose of teaching and creating tutorials. While the .eduGuru article would challenge that these sites "cheapen the quality of education," they also open the door for people to self-teach in a fast-changing industry. Websites like Tutcast or Deke Online present video and blog formats for presenting and organizing materials. Many times, the internet also allows for a collaboration and discussion of ideas and theories for design. Websites like Social Studies: Educating Designers in a Connected World compiles lectures, tutorials and articles that professionals write for educational purposes. What I like about this website and similar websites is that information is consistently updated to the changing face of technology and design, and that there is a lot of content since it has many contributors. While the actual purpose of the website is to compile and archive presentations given at this particular conference, many of the lectures can be found in video form available to the public.


001. Urban Outfitters (bikes)
When I think of an attractive commercial website design, I think of the Urban Outfitters website. I like the Urban Outfitters online shopping site because it is extremely stripped of color, and as a result, easy to navigate. All drop down and side bar menus are clear and simple. The search option is in plain site on the home page and seems to work fairly successfully, giving more specific options to narrow down the search. While Urban Outfitters has an appealing website design, it's the "Bike Shop" section of the site that I am particularly attracted to. The website is built so you can customize bikes to your liking with an extremely easy to use visual and is built for easy purchasing. The design is attractive enough of an incentive to make consumers want to buy the product.

002. 1010Wins (Information website)
1010Wins is a website compiling news information from CBS. The website is organized such like a blog that updates most recent news stories at the top. The stories on the front page are all integrated chronologically; however, a menu bar at the top allows for readers to organize stories by category which helps to easily navigate the site. The search bar can be found at the top of each page, and functions fairly coherently within the site. I chose this website because, while it is built like a blog similar to the New York Times or CNN websites, I dislike the header designs and the colors that the website uses. It makes the site seem more like an unreliable news source similar to the likes of Perez Hilton or Gothamist.


003. Ken Rosenkrantz (personal design portfolio)
I chose Ken Rosenkrantz's personal design portfolio website because I think it is exactly what a portfolio website should be: simple, attractive, and easy to load. The purpose of the site is to highlight the work of Ken Rosenkrantz and it is successful at doing just that. Aside from his portfolio designs, the site has nothing to distract from what the designs are supposed to show and all information is laid out on a single page with no need for search. Everything loads quickly and properly and the necessary information such as contact information and resume are easily located.

004. Tutcast (Adobe Photoshop tutorials)
Tutcast.com is a website dedicated to producing video tutorials for Adobe Photoshop techniques. The website is layed out like a blog, linking each updated post to a YouTube page where each video is located. The purpose of the site is to compile each video in an easy to view, attractive manner where the most recent videos are at the top of the page. The search bar uses the Google search engine to search through the videos on the site. At the top of the webpage, there is far too much ad space that takes up almost the entire screen before scrolling. I chose this website because it follows the trend of basing the website design like a blog and it successfully does so due to the simple purpose of the website: to post and organize videos. Aside from that, the website is relatively unattractive and far too busy for just archiving videos. In a recent Twitter update, the owner of the website commented about needing to redesign the site.

005. Glenn Jason Hair Design (personal promotional website)
Glenn Jason is a hair stylist that operates out of his own home. He is an entrepreneur that needs a website to self-promote in order to generate his own business. I chose this website because I think it isn't effective in promoting what Glenn Jason actually does. The website art is attractive; however, there is no menu to see a porfolio of his work. All of the text is virtually unchangeable without redoing all of the art. Overall, the website doesn't achieve the purpose of promoting Glenn Jason as an attractive hair stylist despite the nature of the art on the website.