DMA 101: Web Mockup Design

For this project I had to pick an established website as an example and redesign its home page with my own layout and graphics. The only thing will be used on the new redesigned version is the text content from the original page.

Initially, I was interested in using some online store website, but had no particular  case on my mind. So after doing some surfing through the bunch of potential candidates, I picked the one I find attracting in terms of web design and products line as well. “All Saints” –  is a clothing brand based in Spitalfields (London,UK), that’s selling clothing and accessories all over the world not only via store locations, but through the well established e-commerce website  launched in 2006 (Wikipedia). Although they’ve changed their graphic layout slightly just recently, you can see on the screenshot below the way it looked when I started my “mockup” assignment.

original webpage

original webpage

I must say that I find the original design very clean and open, b/w sharp tones work quite convincing and stylish to me. Anyway, I didn’t necessarily looked for the one that is poorly designed, but rather the one I’d consider inspiring to work with. So as soon as I finally felt confident with my choice, the planning began!

As I did some additional research on other websites, I figured the way I want my template to look like. I wanted the visual content presented widely and clean, probably across the whole page so it would catch the user’s attention easily. Although at this point I’ve sensed some similarity with the original piece, I knew that the final concept will be completely different. I decided to put the menu bar horizontally, but in the way it won’t steal the space of the images content. So I started to play with some layout ideas within a wireframe and eventually came up with a potential concept for my web page. Although I knew it might change slightly during the designing process, I had a clear frame for my reference which already made me a half way through. :)

web page wireframe

web page wireframe

Nest step was to begin with creating a web template in Photoshop, determining the sizes and finding some appropriate visual content to work with. As to the template sizes, I decided to go with the”wide screen resolution” friendly sizes, which are 1600 (high) by 1200 (wide), and then divide the main working area onto columns. Since I wanted them to be kind of in hierarchy sequence I decide to use different sizes for each column going aside from the main (larger) one.

layout (draft version)

layout (draft version)

At this point I’m not yet sure about the final choice on visual content, so I placed various of pictures for each column I layered, which have been masked with appropriate sizes. I also placed the logo content to the upper panel area to get an idea how it works with the main content. Since I wasn’t able to find any ALL SAINTS logo vector files on-line, I decided to trace down the original jpeg in Illustrator. Plus, I also added a traced “skull” logotype to the text, which is quite different to the one the company use for the trademark. You can compare those on the screenshots below.

Brand logo (original)

NEW logo process final

NEW logo process final

 

"all saints" logo text tracing

“all saints” logo text tracing

 

Eventually, after placing them through the different stages of designing process I picked one of these skulls for my logo.

The next step after I set the middle section down including the transparent bar menu, for which I used that short video tutorial, was to figure the numbers for the lower section columns. Didn’t take too long with my handy calculator tool.

 

Calculating the bar menu sizes

Calculating the bar menu sizes

Further, after the grid lines were set down, I drew the columns with rectangle tool and added some effects such shadows and stroke to it. Although I changed their heights eventually, the width remained the same. After I figured the names for the columns (by grabbing them from the original website source, to be exact), I named the columns and the main bar menu. At this point I realized that I want to split the navigation menu onto the major category, such as “Shop woman/man” and the other three, which are placed on the right side of the bar in the smaller font and to be considered as minor category buttons. I also placed the categories for a sliding down sub menu, which I also made in transparent way.

Alligning the lower section

Aligning the lower section

Finishing the lower section

Finishing the lower section

On the screenshot above you can see no background due to my failed experiment with gradients. So I removed it temporally until I decide whether I want to apply any effects to my background. You also can see the top menu start to appear such as shopping bag, “search” bar and “sign in” button. I also added the blurry transparent sides with arrows, which eventually will be changed in size and shape. I had a little struggle with these little guys, since I couldn’t figure the right shape and appropriate lines width, or it was simply ugly to leave there. So again, I did some quick research how to draw those nicely with the pen tool and it solved the issue. Can’t express how it feels when you find a solution to some particular problem you were stressing about. And how easy it comes now with the endless source of material out there: just dig in, be persistent and patient and you’ll succeed. Anyway, that another whole topic for discussion. Let’s get back to our template.

As you can see below I started to design the bottom part with “additional information” categories and placed back the background (decided to keep it white and clean). The lowest part will remain pretty clean and open, just a straightforward information links. Besides, I chose to place the social buttons (Facebook, Twitter etc) on the bottom and place the language button to the top to make the look of upper panel more complete.

Untitled

finishing bottom section

finishing bottom section

At the final stage aligning the links in on line, building the hierarchy in fonts and tones just to make the overall layout look smooth. The color variations I tried through out the process and finally decided to stick with the reddish tone of my menu bars. I find them playing well together and providing a little spicy tone to the whole picture.

Here is the last screenshot of the template after the designing is complete. In total it took me about 12 -14 hours during 3 days to finish the project, including the planning and touch ups time.

"All Saints" mockup final version

“All Saints” mockup final version

I hope you enjoyed my “mockup” designing story and might found it helpful for your own web projects. Feel free to ask a question or to share your experience in the comments section.

Cheers!

DMA 155 – Saundscape assignment. “Abduction”.

Here is the soundscape project I worked on in a group with my classmates. We used Pro Tools audio editor and analogue mixer, however we didn’t have much sounds to record for that assignment since we found most of them online. We decided to elaborate on the UFO invaders sci-fi kind of topic and eventually came up with the classic creepy scene in the forest with aliens, spaceship and a human’s abduction. Below you can listen the final result of our two minutes long almost “speechless” story, which took roughly between 8-10 hours to complete. Enjoy!

ufo_contest_shot_by_robby_robert-d4myndx

Abduction

iDMology: Rebirth

“Remember the clear light, the pure clear white light from which everything in the universe comes, to which everything in the universe returns; the original nature of your own mind. The natural state of the universe unmanifest. Let go into the clear light, trust it, merge with it. It is your own true nature, it is home.” – Tibetan Book of the Dead

Listen to my latest podcast on mixcloud:

html5 -102

What Image File Formats should be used for web pages, why (how does compression affect loading?)?

PNG should be used when:

  • You need transparency (either 1-bit or alpha transparency)
  • Lossless compression will work well (such as for a chart or logo, or computer generated image)

JPEG should be used when:

  • Lossless compression will not work well (such as a photograph)
  • Full color is needed

GIF should be when:

  • PNG is not available, such as on very old software or browsers
  • Animation is necessary

Despite myths to the contrary, PNG outperforms GIF in most aspects. PNG is capable of every image mode of GIF apart from animation, and when using the same image mode, PNG will have better compression due to its superior DEFLATE algorithm compared to LZW. PNG is also capable of additional modes that GIF cannot do, such as 24 bit color, and alpha transparency, but this is where you may run into problems on the web. Alpha transparency has compatibility issues with IE6 that are well documented (though hacks exist to get around). PNG modes include (this is just a small subset)

  • Palette colour of 2 to 256 colors (like GIF)
  • Palette colour of 2 to 256 colors, with transparent color (like GIF)
  • True color (24 bit color)
  • True color with alpha channel (24 bit color + 8 bit alpha transparency)

For best compression in PNG for the web, always use a palette mode. If you find PNG files are larger than the equivalent GIF files, then you’re saving the PNG in 24 bit color and the GIF in palette mode (because a GIF is always in palette mode). Try converting to palette mode first. If you find that your PNG files with transparency aren’t working properly in IE6 while your GIF files are, then you are using 24 bit color + alpha transparency in PNG and palette mode with a transparent color with GIF. You will have to make sure that you convert your PNG into a paletted color mode with a transparent color. PNG also has other modes such as palette color with alpha transparency in the palette. Modes such as this cannot be used in Photoshop.

How do you optimize images for the web?

The time a page takes to load is something every designer worries about, or at least is something that every designer should worry about. It doesn’t matter if the layout is nice and beautiful if it doesn’t function properly. Since images can be pretty heavy, this is certainly an issue to keep an eye on. And this is why today there are many tools available for web developers to help with compression of web visual content such as:

or

There are two kinds of image compression, lossy and lossless. Lossy compression means once you decompress the compressed data, you will not get the exact same image as the original. However, this will only be visible at a closer look. Lossy compression is good for web, because images use small amount of memory, but can be sufficiently like the original image. When you decompress a lossless image, you will get exactly the same image as the original. This compression uses greater amount of memory, so at times it may not be good for web.

Another tip:

What tricks and tips can you use to make your webpage load faster?

There are various factors responsible for high or low page loading speed. The following tricks and tips might be effective for each website to increase page loading speed:

1. Don’t use too much Java Script in your pages JavaScript is mainly responsible to slow down your web page loading speed. So, we must be careful for not using more JavaScript in our web pages because it leads to slow page loading speed. Always try to use compressed JavaScript because the uncompressed form of JavaScript takes more time to read by browser.

2. Use small size of media files Big size of images takes more time to open in web browser. So, if you want to make your website load faster, you must be reduce the size of your media files. You can do it by using different photo editing tools like Photoshop etc. If you don’t want to reduce the quality of picture, crop the unnecessary part of picture and upload on your website.

3. Remove blank space from the source code White space or blank space waste your page space. You can remove it to improve your website loading speed. It will take some time in removing the white space from source code. If you have no more time, you can remove blank space by using any HTML optimizer available on internet and can be used online. You can search on Google for HTML optimizer.

4. Enable web page caching Webpage caching is a mechanism to make a temporary storage of HTML pages and images. It means if anyone visits your site, browser stores that page temporary. Caching is also use to reduce bandwidth usage and server load. That’s why the websites load faster after using webpage caching. If you are running a WordPress blog, you can use some of the plugins like WP Super Cache etc. to enable caching of webpages.

5. Use content distribution network (CDN) Content Delivery Network is a large distributed system connected through multiple servers spread in multiple data centers across Internet. CDN can make heavy-multimedia and JavaScript pages load quickly. Content Delivery Network (CDN) is suitable for big and financially strong companies because of it’s expensiveness.

6. Keep CSS files small If your CSS file is over 75KB, that will tend to slow down the speed of your webpage. When running a smaller website, be sure to keep the file size below this number. If you require to exceed this capacity for alrger website, it would be smart to update the code regularly so that you trim down the unneeded parts. Alternatively, you can always just pay a website designer to do this job for you.

How can you use images in css, show us examples?

CSS allows you to adjust how the image displays on the page. This can be really useful for keeping your pages consistent. By setting styles on all images, you create a standard look for your images. Some of the things you can do:

  • Add a border or outline around the images
  • Remove the colored border around linked images
  • Adjusting the width and/or height of the images
  • Add a drop shadow
  • Rotate the image
  • Change the styles when the image is hovered over

Giving your image a border is a great place to start. But you should consider more than just the border — think about the entire edge of your image and adjust the margins and padding as well. An image with a thin black border looks nice, but adding some padding between the border and the image can look even better.

  • img { border: 1px solid black; padding: 5px; }

    It’s a good idea to always link non-decorative images, when possible. But when you do, remember that most browsers add a colored border around the image. Even if you use the above code to change the border, the link will override that unless you remove or change the border on the link as well. To do this you should use a CSS child rule to remove or change the border around linked images:

    img > a { border: none; }

    You can also use CSS to change or set the height and width of your images. While it’s not a great idea to use the browser to adjust image sizes because of download speeds, they are getting much better at resizing images so that they still look good. And with CSS you can set your images to all be a standard width or height or even set the dimensions to be relative to the container.

Here is an example of using CSS background images fro bullets:  

HTML
<div id=”navcontainer”>
<ul id=”navlist”>
<li id=”active”><a href=”#” id=”current”>Item one</a></li>
<li><a href=”#”>Item two</a></li>
<li><a href=”#”>Item three</a></li>
<li><a href=”#”>Item four</a></li>
<li><a href=”#”>Item five</a></li>
</ul>
</div>

CSS
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(images/arrow.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}

How To Add a YouTube Video to Your Web Site and video in html5?

Steps to embedding a video the website:

1. Get the embed code in the code mode

Go to the page where your video is displayed in YouTube. You should be able to find the “Embed” code for the video. This is the code that you will insert so that the video will appear on your web page.Select the code, and copy it to your clipboard. That is, after selecting the entire block of text in the “Embed” box, click “Edit” on the menu bar and select “Copy” on the menu that appears.

2. Open your web page in Dreamweaver

Now start Dreamweaver, and load the web page where you want the video to appear, and click the spot on the page where the video should be placed. The blinking text cursor should appear in that location.

3. Insert the youtube embed code in

The simplest way to insert the YouTube code is to switch to Dreamweaver’s “Code” mode, which allows you to see the actual HTML that is produced by the editor for your web page. To do this, click the “View” menu, and then select the “Code” menu item on the menu that appears. The screen should switch from the visual layout displayed by the “Design” mode to show you the “raw” HTML for your page. Since you have already positioned your cursor at the place you want the movie/video clip to appear, all you have to do at this point is to insert the code you copied earlier. To do this, click the “Edit” menu and select “Paste” from the menu that appears. At the bottom of the page, in the Properties panel, you should see a button labelled “Refresh”. Click it. Switch back to the “Design” mode by selecting “Design” from the “View” menu. Although you won’t be able to view your video clip in Dreamweaver, a placeholder box should be visible on your page. If the position of the box is not satisfactory, for example, if the video is placed on the same line as an existing line of text, you can move that text away by simply hitting the ENTER key (or RETURN key if you use a Mac) after positioning the cursor at the beginning of the text in question. Once you’re satisfied, publish your page onto your site and test it by visiting the page with a web browser.

Adding a video to HTML5:

With your .html file open, we will add our simple <video> element. Somewhere in the <body>, add:

<video src="sample.mp4" id="movie" controls height="360" />

Noticed, we defined three attributes in our <video> tag: src, controls and height. The src attribute is where the video file is located. The controls attribute determines if the play/pause, time, volume, etc. controls show up on the page. Since we defined the controls attribute, the controls will be visible. We also defined the height attribute. In addition to the attributes we have defined, you can add the remaining attributes to the <video> tag.

  • Autoplay: the video will begin to play once page is loaded
  • Loop: continuously loops the video after it is finished
  • Preload: determines if the audio should be loaded when the page is or not. Note: this attribute is ignored if the autoplay attribute is specified.
  • Width: sets the width of the video player

That’s it! We added a video to the webpage.

How do you optimize video for the web?

Creating optimized videos for the Web takes a number of coordinated steps. First create a clean, noise-free video with the minimum amount of zooms, pans, and background detail and movement as possible. Then prepare your video for compression by cropping fuzzy edges, adjusting contrast and gamma, and delete any unnecessary frames. Finally compress your video with a high quality compressor like Cleaner. Use the data-rate formula (W*H*FPS/29000) as a starting point, and always use a 2-pass VBR and a multiple of 10 times your FPS for your keyframes. How do you optimize sound for the web and incorporate it in your web page? Optimize Web audio by creating small files while retaining acceptable sound quality.  The factors that impact file size and quality are:

  • sampling rate,
  • sampling resolution.

Sampling Rate

The sampling rate, measured in kilohertz (KHz), is set when sound is digitized.  It affects the audio range by defining the highs and lows of the digitized sound.  Higher sampling rates generate better quality sound and larger audio files.  Some types of sound, such as narration, do not depend on high and low ranges for better quality and can withstand lower sampling rates. The sampling rates typically used to digitize sound are:

  • 8 KHz,
  • 11 KHz,
  • 22.050 KHz,
  • 44.1 KHz,
  • 48 KHz.

Sampling Resolution

Sampling resolution (i.e., bit depth) is set when the sound is digitized and defines how much range the audio has in highs and lows.  Higher resolutions result in larger files and higher quality audio files.  Lower sampling rates and resolutions introduce noise (e.g., hiss, buzz).  Evaluate individual elements of the sound to identify the lowest sampling resolution that can be used without creating unacceptable noise. The following sampling resolutions are possible for digital sound:

  • 8-bit mono,
  • 8-bit stereo,
  • 16-bit mono,
  • 16-bit stereo.

Tips and Hints

Start recording audio using the standard CD quality sampling rate and resolution (i.e., 44.1 KHz at 16-bit resolution).  Use digital audio editing tools to process the sound and then, resample to 16-bit, 22.05 KHz or lower if the sound quality is acceptable. Halving the sampling rate reduces the file size by half. Changing the resolution from stereo to mono also halves the file size. Dithering adds noise and is more obvious in files with silences between sounds such as narration or dialogue.  It works best on files with rich, full music.

Embedding sound into the web page:

Embedding sound is tricky. You have to choose between a method that works but is not valid HTML or a method that isn’t valid, but doesn’t work on most browsers. Here is a step by step tutorial:

  1. Open your Web page in an HTML editor. Your editor must have the ability to edit the source code to follow this tutorial.
  2. Start with an object element:

    element, add an embed element:

  3. Add the following four attributes that are the same as the parameters to the object:
  4. Add the correct MIME type for your sound file into the type attribute:
  5. Add the pluginspage attribute so that people who don’t have the correct plugin for your sound file can go download it. For WAV files, I recommend QuickTime:
  6. When you’re done, your HTML should look like this:

Tips:

  1. Don’t validate your Web page with the embed tag. It won’t validate because that tag is not part of the specification. But only Safari supports the object tag for sound.
  2. Check out the embed tag for additional attributes. Many of them you can use as parameters on your object as well.
  3. I recommend always setting the controller=”true” attribute. That way, if someone doesn’t want to hear sound on your Web page, they can turn it off.

For the most accessible (and valid) sound, just link to your sound file.

<a href=”eureka.wav”>Eureka sound file</a>

That gives your customers the choice to listen or not.

What are some of the dos and don’ts of web design with media?

Here are some tips to make sure your site maximizes its potential and doesn’t fall foul of some common mistakes on the Web.

Top tip: most important is that you take time to think about what you want your site to achieve, and then spend even more time planning how the structure and content will fit together. This is the first step towards creating a winning Web site.

1. Use valid HTML and CSS – validate your code to make sure your pages are likely to be displayed in a consistent and accurate fashion.

2. Check your site in several browsers – your site may look fine while you’re making it, but that may not be the case on other browsers. Check your site in as many browsers as you can before you publish it for the world to see.

3. Keep your graphics small – don’t keep your visitors waiting while huge images load on the page. Take a look at our information on optimising images for the Web.

4. Keep your text short and focused – Web users’ attention spans are quite short, so don’t bore them with reams of text. Use subheadings, bulleted lists and highlighting to make the text more appealing.

5. Make navigation easy – if your site has more than a few pages, give visitors an easy way to move around the site. Use a simple navigation menu system at the top or left of the page.

6. Use the right colours – don’t be garish with your colour scheme, and remember that your text should contrast well with the background – a light background and dark text is the classic way to go.

7. Make hyperlinks obvious – make sure that visitors know which parts of the page they can click on to move to other pages. Hyperlinks should stand out from normal text.

8. Make the text big enough to read – don’t use a small font just so you can cram in more text. Use a size that’s comfortable for most people to read, e.g. 14-point text.

9. Don’t use pop-up windows – many users will have set their browsers to block pop-up windows, so don’t force them on your visitors.

10. Provide an FAQ – think what the main reasons are for people to visit your site, and try to answer any common questions in a single, easy to reach place.

What resolution should you design for?

Web page resolution is a big deal. Many sites that teach web design have written about it, and depending upon who you believe, you should design pages for the lowest common denominator (640×480), the most common resolution (800×600), or the most cutting edge (1280×1024 or 1024×768). But the truth is, you should design your site for the customers who come to it.

  • 800×600 is very common
    Many website design guides recommend designing websites for 800×600 resolution. While this resolution is more common on the web at large, this may not be the case for your customers. If you’re planning on redesigning your website, take a few weeks to analyze your browser statistics to determine the most common resolutions used by your customers.
  • 1024×768 is a lot more common
    Screens are getting larger and 1024×768 is the other popular size to design for because many designers have monitors that support this natively. But this resolution can be fairly hard to read for many people. A 14-inch laptop monitor might support 1024×768, but the text is virtually unreadable. And laptops are very popular.
  • 1280×1024 and larger are less common
    Mostly you’ll see these larger resolutions on desktop computers, or high-end laptops. But often at these larger sizes, the customers aren’t browsing full-screen. So designing a site that’s wider than 1000 pixels is going to cause horizontal scroll bars on most screens.

How to handle screen size based on resolution:

  1. Determine who views your site
    Review your web log files, or put up a poll or a script to determine what resolution your readers actually use. Use the real-world browser size script to track your readers.
  2. Base your redesigns on your customers
    When you redesign your site, build it based on the facts of your website. Do not base it on statistics of “the web” or what other sites say. If you build a site that fits the resolution your customers use, you’ll keep them a lot happier.
  3. Test your site at various resolutions
    Either change your own screen size (Change Your Windows Screen Resolution or Change Your Macintosh Screen Resolution) or use a testing tool.
  4. Don’t expect your customers to change
    They won’t. And placing restrictions on them just encourages them to leave.

Designing for mobiles?

Here is a few tips for a web developer to keep in mind when it comes to deal with designing for mobile devices:

  • Design with a fluid layout, min-width: 320px

There are two factors that make this a necessity. First, mobile device screens are so small that you really need to utilise all of the available space. Second, there are a lot of different screen resolutions out there. The only way to utilise all of the space available on different sized screens is with a fluid layout.

  • Turn off auto-scaling

Mobile devices will assume your website is optimised for desktop computers unless you tell them otherwise. Add a viewport meta tag to the head section of your HTML to set the width of your website to match the width of the display, render with a zoom level of 100% and prevent the user from zooming in/out.

  • Make clickable elements big enough for a fingertip, ≈44px²

Your mobile visitors don’t have the accuracy of a mouse – they are often using their fingertips on a touch screen. Don’t make them put their fingers through a pencil sharpener just to click your button! Apple has said that the average finger tap on an iPhone is 44px by 44px (in your high res Photoshop doc that will be 88px by 88px), so aim to make clickable areas at least that size. This doesn’t mean you have to design gigantic looking buttons. Just add some padding to your small buttons to enlarge the clickable area.

  • Don’t use hover states

Today’s touch screens can’t detect when a finger is getting close to touching, so the concept of rollovers does not apply. On the iPhone your :hover style will actually display on click and then remain on screen even after the user takes their finger away, which can be really annoying. So the rule is – don’t use :hover in your CSS or mouseover in your JavaScript.

  • Create icons for your site

Hopefully users will really love your site and add it to their home screen for easy access. Don’t ruin the mood with an ugly default icon!

  • Reduce load time by using CSS3 instead of images for gradients, rounded corners, shadows, etc.

Depending on the devices you are targeting, CSS3 can be an excellent option for mobile design. With old school web design techniques, a button with a gradient and rounded corners might consist of 9 separate image slices, a bunch of nasty non-semantic markup and a hefty amount of CSS. With CSS3, you can create this:

  • Use an HTML5 doctype

Not all browsers implement HTML5 features, but they will still accept an HTML5 doctype.

<!DOCTYPE html>

Using this doctype declaration will allow you to display HTML4 elements to all browsers, and then add in additional functionality for the browsers that support HTML5.

  • Make your site operate offline

Your visitors won’t always have a fast Internet connection. If you’re designing the type of site that will have return visitors, consider leveraging the client-side storage capabilities of HTML5. It can be as simple ascreating a cache manifest file that tells the browser what files it needs to cache for offline access. A more advanced option is to create an SQLite database on the client with JavaScript.

  • Include an option for your mobile visitors to view the normal website

Detection scripts can get it wrong, or a user might simply prefer not to use the mobile optimized interface. So my final tip is, always offer users a way to switch back to ‘normal mode’.

Sources:

http://stackoverflow.com/questions/392635/website-image-formats-choosing-the-right-format-for-the-right-task

http://webdesignledger.com/tips/tools-and-tips-on-how-to-optimize-images-for-the-web

http://inobscuro.com/tutorials/optimizing-images-for-web-35/ http://allusefulinfo.com/5-easy-effective-tricks-to-make-your-website-load-faster/

http://hamohama.wordpress.com/2011/11/14/tricks-and-tips-you-can-use-to-make-your-webpage-load-faster-hasan-brian/

http://css.maxdesign.com.au/listamatic/vertical05.htm#

http://webdesign.about.com/od/csstutorial/a/using-css-with-images.htm

http://www.thesitewizard.com/faqs/youtube-video-dreamweaver.shtml

http://www.microsoft.com/web/post/adding-video-to-your-website-using-the-new-html5-video-tag

http://www.websiteoptimization.com/speed/tweak/video/

http://it.toolbox.com/blogs/enterprise-solutions/optimizing-web-audio-21762

http://webdesign.about.com/od/sound/ht/htsound.htm

http://help.virginmedia.com/system/selfservice.controller?CMD=VIEW_ARTICLE&ARTICLE_ID=3052&CURRENT_CMD=SEARCH&CONFIGURATION=1001&PARTITION_ID=1&USERTYPE=1&LANGUAGE=en&COUNTY=us&VM_CUSTOMER_TYPE=Cable

http://webdesign.about.com/od/webdesign/a/aa123002a.htm

http://labs.thesedays.com/blog/2010/07/16/10-tips-for-designing-mobile-websites/

Assignment 5 Formal Essay – Digital Art

In art, truth and reality begin when one no longer understands what one is doing or what one knows, and when there remains an energy that is all the stronger for being constrained, controlled and compressed.

                                               Henri Matisse, form “Constraints and creativity in digital the arts” by Linda Candy, University of Technology, Sydney NSW 2007 Australia E

 

One of the major directions of New Media art practices is digital art. It is being a part of the scope of contemporary arts such as virtual art, computer robotics, interactive art and biotechnologies, which are all using new media technologies in their creative processes. The very first artworks created in this field began with the progress of computer technologies and the new possibilities brought by its development, which in turn led the beginning of the era of digital arts. This article will discuss how do the digital art technologies being refined, utilized and applied in the world of contemporary art in our days, as well as how does it evolve and what are the issues related to this field of art today.

Before I started my research I had a notion of digital artworks like media products, prints, graphic design or computer animation created by machines and the software it uses, but I never thought of it as such a specific and the same time a broad segment of new media. Therefore, my understanding of digital arts in general was mixed with other practices of new media field. I also, for instance, would not consider contemporary electronic music as a part of digital art scope. The picture of digital art was based mainly on the media products and technologies it was made by, for example digital camera producing digital video thus it creates a digital art. But according to Bruce Wands in “Art of the Digital Age” digitized text data or raw video/audio records are not usually considered as digital art, but could be modified by digital technologies and the software into the digital artwork, such as visual effects added into the film scene. Manipulating and transforming raw media sources by digital technologies would be considered as digital art works. Therefore taking a picture with a camera, whether it’s analogue or digital, and modifying it with computer software such as Photoshop, in order to produce a visually altered graphic work or use as a part of a computer project such as 3D piece in video game, would be considered as digitally produced artwork.

Generally, being a part of new media, digital art encompasses a wide range of digitally produced arts from visual art to sound producing. Considering the digital visual art movement, probably one of the basic directions in digital art field, it had an impact on all areas of the previously existed visual arts such as sculpture, drawing and painting. Although all of these analogue arts are highly developed and practiced widely in our days, digital technologies opened a new way to experiment and produce in the world of art. After it’s been launched back in 50’s-60’s and started its way of changing the visual and sound reality, the whole world far beyond the art edges has started to change drastically. In our days there are no limits in creative possibilities of digital technologies used in visual and audio practices. From 2D computer graphics based on raster graphics, to 3D technologies employing vector graphics and more complex digital installation art, visual modeling and shape transformation knows no limits today. Gradually, so called “digital art revolution” by JD Jarvis, an American digital media artist and founder of “Dunking Bird Production”, gave the birth or enhanced heavily some of the highly developed digitally based industries in our days such as visual effects in movies production and video game industry.

Visual arts is a huge part of digital media field today. The very first signs of it in form of storytelling tool has started to appear as early as 30000 years ago on the walls of Chauvet cave. Its ancient inhabitants attempted to express their visual imagination through the drawing art by using a charcoal or a stone shard. Unconsciously, they have started the inevitable process of visual art development, which subsequently appears in later civilizations, such as Early Egyptians, in forms of hieroglyphs and eventually becomes a starting point for writing and literacy in later centuries. Depicting events as a supporting part of the stories was a part of tribal storytelling in the early society. Such traditional way of conveying a story was evolving through the centuries up to the era when communication and education through the visual content jumped on the totally new, yet undiscovered level of possibilities of printing production. As printed press appeared with technological progress back in 14th century it automatically gave a born of a new form of visual art, later called graphic design. Since then, the art of visualization had its impact on different segments of social life and evolved in various ways. Artists of visual craft were exposed by technological progress during the centuries and the art was evolving and changing accordingly. From painting and mosaic, to printing and architecture, and subsequently generated a photographic art in 19th century. These analogue technologies were the beginning of the new form of two dimensional visual art, which e creates a motion picture art. All these advancements in visual arts during the past eras have been refined by its developers along with technological evolution up to our days where the most classical concepts of the traditional arts are being combined into a new sophisticated form of digital art.

But digital media art today, highly influenced by dynamically developing technologies, becomes more than just art even a decade ago. Since the portability and advantage of new digital devices become more sophisticated and accessible to general public, the art itself becomes more socialized and interactive in different ways.

         For instance, back in 80’s one of the first series of powerful computers were introduced to the public in New York and one of them, Amiga 1000, was used by Andy Warhol to create digital picture of Deborah Harry right on the stage in front of the public. The very first experimental digital art was created by using demo software Pro Paint in real time and the results worked impressively on the crowd. ( Reimer, Jeremy, 3-4)

After nearly a few decades later such visual art can be done simply by a few clicks on our smartphones by anyone with a minimum knowledge on media technologies. Thus the art itself had to shift accordingly with the technological progress. Digital artists today do not constrain themselves simply by dimensions of visual presentation, but rather combine a few modern technical aspects in order to produce more experimental, defiant and crossing boundaries artwork. Since the complexity and advantage of the tools available for the artists today gives an enormous technical freedom, only imagination is a limit in creative process. Therefore the potential of such collaboration of digital technologies and arts being exploited on different perceptual, communicative and aesthetic levels. As an intricate example of combination of science, sound events, software processes and visual objects could be the installation by the artist group Knowbotic called “Naked bandit/here, not here.” A great representation of new media art created in a way of interacting with audience, in abstract, weird and mysterious appearance. Just as a new technologies look to the public before they get used to it. I guess such unique and progressive way of creativity brings that type of digital art on a highly intelligent level. Where audience pushed to ask questions, get exploded by new and inspiring experience.

      “Media art today engages with the world in more concrete ways than it did 10 years ago. The earlier obsession with the newest tool and the latest technical advance has been replaced by a critical application of media and digital technologies and the exploration of their social impact and cultural meaning. As digital technologies are becoming more commonplace and widely integrated, an explicitly artistic—rather than purely curious.” (Andreas Broeckmann, 10-11)

 In contrast to the area where complexity of human ideas coming from analogue realm brings sophistication into their digital artwork, another form of computing art is constrained by using only the computer coding technique to generate a digital image art. This absolutely exciting and complex form of art is based on fractals which are being manipulated by mathematical codes that are generated by computer program. This fractal-generating programs allow artist to create an expressive two dimensional visual surface which could be modified by applying non fractal imagery during the post-production process. The self-generating continuing patterns used in this technique creates an absolutely unique visual forms ever existed in the world of art. In general, such form of digital art is totally depend on computers software and technically could not be developed before the digital technologies arrived. The fact that fractal art does not use any analogue based platforms in order to generate a creative process, but only relies on computer coding, brings up a notion of totally new generation of art, based on non-human factors, but rather machines. That concept is fundamental in the whole movement of digital art in our days. Such kind of self- generating modern art in some way blurring the key edges of the classical art creating concepts.

Talking about the concepts and the limits in the world of digital art, it would be inappropriate not to mention the peculiar issues caused by technological potential of digital tools. The new generation of digital artists facing the unlimited freedom of opportunities brought by technologies, but such unlimited abilities may reduce the focusing aspect of an artist by a broad range of suggested applications and their advantages. Thus the concept of constraints in creative process is widely practiced in artistic environment. It principles based not on strict criteria or rules, but rather on defining the specific set of rules applied to a certain creative style or approach individually by the artist.

       For example, artists who are practicing digitally generated visual art, find the concept of constraining in their creative process as an essential thing. Such a case when the artist using a computer code or an algorithmic software to produce the art piece, he deliberately narrowing down the range of potential possibilities suggested by the program. Since there are infinite numbers of the instances generated by the computer code, the constraining approach is the way to filter and determine the best satisfying result for the artist. Again, there is no general pattern to apply and every artists finds his to apply such theory in his practice. Finding the true nature of the underlying structure of particular project is what the whole concept about. (Linda Candy, 366-367)

Defining the specific set of constraints helps artist not just focusing on the idea that he intends to express in his work, but rather to refine it and hone his unique creative style which would be recognized specifically in his works. Besides, the set of rules helps to shape the implicit structure of the potential project, focusing attention on developing and digging up the inner entity of the idea itself. The concept of setting constraints within digital arts practices implies development of understanding the enhancing aspects of new media arts in general and how do they influencing the movement of contemporary art.

As the technological landscape changes dynamically today, the art which is created by digital tools depends directly on upgrades and inevitable progress in computer industry. Thus the issue of preservation and saving the existing works of digital art has been arisen by artists and curators of digital art field so susceptible to technological change. In order to keep contemporary art works alive and preserved for the future generations, activists facing the range of practical, theoretical and methodological problems related access, function, context and meaning of digital art. The other issues such as representation, restoration and access are also create challenges for the museums of contemporary art.

As Rick Reinhart noted, digital and media artworks have questioned “traditional musicological approaches to documentation and preservation because of their ephemeral, documentary, technical, and multi-part nature and because of the variability and rapid obsolescence of the media formats often used in such works. It is not feasible for the arts community to keep the original equipment and software in working order over the centuries and industry has no incentive to continue producing old parts or to keep all new equipment backward compatible indefinitely (Perla Innocenti, 472)

It is obvious that digital art is relatively new and yet novel form of art that requires a new suite of methodologies in its preservation. Traditional conservation practices focusing on a physical matter of an art work, where contemporary art forms are more complex and required more comprehensive approach. It’s important to preserve the identity of a digital work in appropriate conditions maintained by the museums and art collectors.

As it was suggested by Pip Laurenson, Head of Time-based Media Conservation at the Tate Museum, such identity may be considered as a collection of artwork which contains the artist’s instructions, approved installations intended to act as models, an understanding of the context in which the art was made, and the degree to which the artist specifications reflect his or her practice at the time the art was created.( Francis T. Marchese, 303)

 Thus accommodation of such art works in museums required regular maintenance and consistently upgrading system, as well as technical support and supplementary materials which would be related to particular art piece. Facing all this complications, the new inherent regulations and practices are introduced and employed in most of well-known asylums of modern art such as Whitney Museum’s AirPort or New York’s Museum of Modern Art.

Summarizing the picture of modern digital art today is equivalent of the attempt to depict the whole universe in one constrained frame. It is obviously fresh, very diverse and developing form of art which are very exciting and promising factors. Considering how many existing mobile tools are available in this field simply for everyone, it’s no surprise that digital art literally flooded our modern world and at some pint it’s hard to determine where the boundaries for such art movement are and how critically distinguish quality work from mainstream. I guess this is a natural side effect of the digital reality we are living in, which in fact gives us so much opportunities to express ourselves and create today. The art that current technology invites demands new artistry, new expressions, and perhaps even new forms of art. The art which is asking questions and provokes spectaculars, leaving a space for imagination. And that what I find the most fascinating about it: to live and experience in the era where something that never existed before appears almost every day. Something that unites all people in the world and help to understand each other on the new level of comprehension founded by symbiosis of technologies and arts.

 

Bibliography (cited and annotated)

   George F. Hurlburt, Jeffrey Voas, “Storytelling: From Cave Art to Digital Media”, IT Professional, (Volume:13 , Issue: 5), Sept.-Oct. 2011, 4-7.

This article describes the evolution of visual form of arts from ancient times with primitive techniques up to first printing technologies and to modern days, where digital technologies dictate new conditions for media arts and blurring the boundaries of it distribution. Jeffrey Voas and George F. Hurlburt show direct connection between the “wall art” back in Stone Age and the visual media on Facebook wall in our days referring to tribalism from the ancient times. They also suggest that contemporary digital art potentially may supersede traditional printing media. But also arguing this assumption, by exemplifying the case with radio and television, assuming that digital media will “overtake the printed page as dominant form of portable knowledge.”

Andreas Broeckmann , “Digital culture, art, and technology”, Browse Journals & Magazines, MultiMedia, IEEE  (Volume:12 Issue:4) Oct.-Dec. 2005, 9-11.

The article discuss the influence of developing technologies on contemporary society and artists who link themselves and develop within that movement. It touches on social aspects which are being involved in the new media artistic practices and how the new forms of such digital art expressing the social related ideas. Broeckman elevates topic on shifting in social segments and art aspects after technological breakthrough, and how specialized users become general public users. He also discuss how contemporary media artists refining the principals of digital art by widely applying experimental and critique approach.

Linda Candy, “Constraints and Creativity in the Digital Arts” Leonardo, Vol. 40, No. 4 (2007) (pp. 366-367)

In this article Linda Candy describes the conceptual issue of modern digital art where the endless possibilities of digital tools could become a destruction in the creative process. She suggests that the artist, in order to fully employ the potential of the tools he used and adhere to the concept of the artwork he creates, must apply self-defined constraints during the creative process. By focusing on underlying structure of the project within the framework of generated constraints the artist eventually able to define his personal creative space and ultimately achieve his artistic style. She concludes that enhancing such constraints throughout the collaboration with technology by using programming language would be essential for digital artist in nowadays.

Reimer, Jeremy, “A history of the Amiga, part 4: Enter Commodore”, Arstechnica.com. (October 21, 2007). . Retrieved June 10, 2011.

Anzovin, Steven, Fractal Compaction”, Compute 14.1 (Jan 1992): 88.

Alice Kelley, “Layering techniques in fractal art”, Computers and Graphics (August 2000), 24 (4), pg. 611-616 

Perla Innocenti,Preventing Digital Casualties: An Interdisciplinary Research for Preserving Digital Art”, Leonardo, ISSN 1530-9282, Volume 45, Issue 5, 2012, 472 – 473

Francis T. Marchese, “Conserving Digital Art for Deep Time”, Leonardo Volume 44, Number 4, (August 2011), 301-308

Wands, Bruce,“Art of the Digital Age”, Thames & Hudson. (2006). 10–11.