jbuttr20’s blog

This class has almost served as a “history” class, since the web is so young. We have surveyed a variety of styles that can be associated with specific eras of the web, but each continues to have a place in the present in some way. From basic HTML tables to the flexibility of CSS and on to the endless possibilities of Flash, I feel like this class has provided a great snapshot of how most things are done on the web. Also, working with flash, we see how broad a project can be. It is obvious why larger design houses employ people dedicated to programming and others for design, and even dedicated groups just for testing and debugging. Overall, I think this class has provided an understanding on what tools to use for specific projects on the web, and why they are appropriate. In this constantly changing landscape, it is important to be aware of as many variables as possible and make decisions that are appropriate for the specific goal of a project.

I agree with the author’s views on research in the article “Visual Decision Making”. While statistics can be generated when analyzing eyetracking and other measurable elements of web interaction, there is certainly an element of trust and security that is provided by the overall visual tone of the site. My favorite example of this is a camera retailer that operates online. With an address registered to a vacant garage in New Jersey, they operate online by selling cameras at prices well below any of the competitors. When you order a camera, they contact you after you pay to tell you the camera does not come with any of the accessories traditionally in the box, and then they try to upsell you those items, all the while making a refund difficult. Sometimes items received are even from other countries with menus that are not available in English. How do they get away with this so often? By operating dozens of websites, all with different names and visual styles, that all point to the same place. The point is this: ALL of these websites have design that seems credible, constantly convincing people that they are in a safe environment. The visual aesthetic of a website equates to buyer trust, clear and simple. As consumers, we need to remember that every web page is simply pixels on a screen, and images & text can be manipulated by anyone around the world to create a hoax with minimal effort. To use the web as a purchasing tool, you need to have a whole new awareness of how safe, successful business transactions are done.

As a designer working in the field, I don’t worry about personal copyrighting. Most clients I work for have their own views on protecting their material that I adhere to for them, but as designers in the digital age, we produce so much that it would be impossible to police the web to look for anyone using our work. And if we were to find it, would it be worth the trouble to pursue them legally? I can understand, of course, larger companies taking measures with copyrights and confidentiality agreements, but my personal goal is to simply contribute to design as a whole. I don’t want to be famous, I don’t care if my name is known. If someone were to use a piece of my work, I’d be happy that it was being seen by more people - as long as they weren’t blatantly stealing my work and selling it. I look at it the same way I look at doing “extra free” work for clients, it’s something that is ultimately insignificant that will help with visual communication, which is want I want to do.

I’m not the kind of person that steals or re-purposes other’s work personally, so maybe that is why I’m so lax about it. Also, with all the tools so readily available, it is easy to replicate any other work on your own, while putting your spin on it. Don’t imitate, emulate. If you need a specific shot for your work, you can find hundreds if not thousands of reference photos online. Gather them, research. Then get a camera, because they even come on cell phones and keychains these days, and shoot a picture yourself that attempts to capture the elements that you found to be successful in the reference work you researched. It’s easy, and it makes it yours.

Online video has certainly changed my life. You have the flexibility to watch your shows any time you want to, with less commercials than tv, and often at better quality. For instance, ABC doesn’t come standard in HD to my house, but I can load the ABC video player and watch LOST in HD. Same thing for south park. Comedy central’s digital feed isn’t HD, but I can to go SouthParkStudios.com and watch HD episodes from any one of their seasons, including current shows. To utilize this on an HD TV, you’d need some kind of computer hook-up, but I just use my laptop to go in to the HDMI of my plasma HDTV and it looks fantastic.

In the future, I see more and more video content going online, or the migration to the web occuring from the end of cable providers. If comcast can offer a DVR digital HD box, how far are they from dumping a browser in there that has a TV friendly OS, and shipping it with a keyboard… or even a QWERTY remote? I don’t think that is far off, and I think it will be the solution to keep those service providers relevant. After all, not everyone in the general public would know how to hook up and operate an effective media center and integrate it in to their home network.

I think that flash can be suitable for a portfolio site for many professions. As always, think of the end user. If you are targeting an audience that is web- or flash-savvy, a flash site can obviously convey creativity and content in ways that HTML simply cannot. And as far as Jon Jones’ complaints involving the drawback of not saving images from flash portfolios, I think anyone hiring designers should be capable of doing a basic screen capture. Sites like http://www.karimzariffa.com provide easily accessible content and contact info is easily available. Nice use of flash for a portfolio site.

Of course there are instances that go overboard with the flash. Plenty of them, especially from flash users who don’t have much design sense and try to make up for that by using flash as a crutch. This is also done on a professional level. Take for instance http://www.martinanderle.de - very neat flash programming on the background, but how does it relate to the site? It seems to clutter things more than impress, and becomes an annoyance as you try do jump in to the content.

Sites like http://www.bio-bak.nl are great examples of  immersive user experiences that can still get some work across, but they can fall short when something as simple as contact info can be hard to find from the view of a perspective employer.

If you are going to use flash, be careful. Think about what the ideal interaction for your site would be from all angles before executing.

Flash is an amazing tool used to deliver ideas that otherwise would not have close to the same voice or presence on the web. They have been at the forefront of incorporating usable video in to design on the web, which has completely revolutionized the workflow and status for larger studios. Many of the large-scale flash projects, usually launched in conjunction with specific campaigns for larger companies, now have production budgets that include full video production in numbers that far exceed those allocated for microsites a decade ago. Web companies now need to have video production capabilities, and understand how to properly and functionally integrate that video into their website. Also, since these campaigns have short life spans, we see larger companies churning out these high-level microsites as often as several times each year. This is beneficial to the web and design community as well as the consumer, as the user experience is greatly improved and interest can be generated. None of that would be possible with flash. Although we have seen mobile platforms struggle to integrate flash for obvious reasons, it is clear that it is only a matter of time before flash is integrated. Flash keeps the web exciting, and has married “quality” to “creativity” and “functionality”. From the codecs to the flexibility (animation to 3D microsites), it is an amazing program that has been a voice for creatives of all types.

When it comes to designing website for mobile devices, as is the case with any web trend, it helps to look at what the “big guys” are doing for some insight. Many websites that are upkept regularly and have any sort of staff now have alternate versions of their website for mobile devices. The iPhone seems to be the defining factor in many of these sites, as they are formatted to fit perfectly in the iPhone screen and perform more like an iPhone app than a scaled-down version of the website.

If designing a single website that is going to function on computers and mobile devices, there are several things you need to plan for. Flash is not supported on many mobile devices, so it is best to stick with HTML that is as standards-compliant as possible. The more basic the design, the better. Also, with the new eruption of mobile browsing, there is an emphasized focus on compressing and optimizing graphics to account for slower mobile internet connections. Any video content should be planed with mobile platforms as well. Flash/FLVs have little or no support on many mobile browsers, and even Quciktime and other popular video formats have performance that can vary from device to device.

Web typography faces a variety of issues, some of which have been present for years, and others that bring new challenges previously unseen. Even the classic problems are complicated further by the new medium. For instance, it is a challenge to design type for presentation to a viewer who could be on a wide range of equipment, varying from a cinema display or a large television to a mobile phone. Unlike print, where designers understand a defined space with which they have to work, web typography needs to be flexible above all else. Assumptions must be made before the design process even begins. Screen size, existing branding and the target audience must be determined. Also, web designers are limited to certain font sets or “families” which vary from machine to machine when using selectable HTML text. If you were to tell a print designer 15 years ago to design a type-based layout without committing to a specific font or even a project size, they would tell you that the lack of information would make it near impossible to start the project.

Another classic web problem that becomes even more complicated with technology is visual hierarchy. Early on, web seemed to adopt problems typically associated with terrible 2D layout as their standard. Everything was screaming, wether it was using size, underlined type, bold type, layer after layer of sub-headers, blinking or crudely colored type, or an array of alternative “attention getters”. This results in visual exhaustion and confusion, because if everything is screaming at once, nothing is heard.

I strongly feel that visual clarity on the web has been “learned” by the users. For instance, take the most popular search engine used, google.com. If you were to look at a page displaying google results for the first time from a traditional design or typography perspective with a completely fresh mind, it would be confusing and terrifying. Multiple rows of options, different colors, weights and point sizes, lengthy coded urls sprawling below paragraphs which seem randomly indented, videos, images and maps mixed with links… It would seem like a train wreck. However, since we all use this format and have become accustomed to it was web users, it seems clear as ever to us. And if anyone as a designer were hired to develop a visual style for a new search engine, they would be a fool not to look at google as a reference for what the average web user is able to digest. The web is constantly evolving, and we as users are in turn constantly evolving our personal “filters” so we can focus on our task at hand and block out the other dozens of levels of content that are available to us on virtually every page.

Typography on the web needs to be flexible and clear, always presenting the user with the options you think will be most helpful to them at the moment, and subduing the other options as to not confuse users. Simplicity is often the key here.

I took a look at several sites of different types to see how they handled the sizing issue. All sites were tested in firefox and safari on apple computers and an iPhone (safari).

Site 1: HUGE site, very public. Google.com’s search functionality. They use a “liquid layout” which only needs to be 700 pixels wide to access ALL functionality from top to bottom. Everything moves smoothly when the site window is increased. On an iPhone, a specailly formated version of the site appears and works flawlessly.

Site 2: Web agency - nclud.com. Always interesting to see what web designers do to appeal to customers. This site works well, it is always centered and has some subtle gradations that make it look nice even when scaled way up. The content of the site is around 933 pixels wide, so it is assumed that users are running a monitor at a minimum of 1024 x 768. The site worked in both browsers, and a handy mirco-site was built for the iPhone - seems to be the standard these days.

Site 3: Immersive experience site - www.adidas.com/uk/outdoor. This site used extensive flash and video. The content was about 990 pixels wide, which seemed like a strange size. This site also worked fine in both browsers, very consistant. On the iPhone, there was simply nothing to see since There is no flash player. Rest of the site looked fine though (links at the top, bottom).

Project 1 can be found here:

http://www.litteritcher.com/goodbrush.html

The sitemap is here:

http://www.litteritcher.com/sitemap.jpg