IDAT302 – Creative Online Art Platform

My Final Assignment!!

Posted by: siwei on: December 3, 2008

coverpage

Brief Introduction

Posted by: siwei on: December 3, 2008

 Creative Online Art Platform

 

Application of Media in creative context

Brief introduction | one

This section explains the basic elements of this assignment which includes aim, audience, messages, requirements, further considerations, budget and deadlines.

Aim|one

The main purpose of this assignment is to build up a paper based online platform or effective tool to foster and stimulate the presence, exhibition, communication and management of art on the Internet. Another objective is to investigate the design process considering all the stages of development other than technical implementation. Through this hypothetical application, the research and innovation in the field of social technologies and artistic practice will be encouraged. Meanwhile, it provides art galleries with web solutions responding to the concept of Web 2.0, and to provide opportunities to enhance their online presence and networking potential. (IDAT 302  2008-2009, Joasia Krysa, 2008)

Audience|two

Audience refers to a group of people who are interested in this application or may be influenced; for instance, artists, art dealers, art students, and art enthusiasts. These groups of people link with this online art platform in different ways. Artists may want to share their artworks online and communicate with other artists. Students need to learn the skills from other people’s work. Art dealers use this platform to expand their business and art enthusiasts can search for their favourite art works. This platform provides a space for people to share works and opinions. It is the “paradise” for everyone especially the art enthusiasts.

Spirit|three

This paper based hypothetical practice is trying to show a message to everyone that this is a free, flexible, active and enjoyable online platform. Everyone is welcome to join in this big family. People should feel free to communicate with others and the spirit of this platform is friendly and opened.


 

 

Requirements|four

A good website (online platform) should contain the following aspects:

§  A clear and well defined structure

§  A attractive interface

§  Low cost

§  User friendly

§  Steady network

§  Freed to share artwork

§  Easy to manage

§  Technical

§  Marketing

 

Budget|five

The cost of a website is variable because there are so many elements related to the cost. (Toucher Web Design) However, there are three main cost elements involve in the creation of a web site. The first is a minor cost that includes the registration of the domain name and the amount of money need to pay the web hosting company to rent the Internet space for hosting the site. The second is the payment for someone or a company to actually create the site. The third element is the maintenance fee which depends on how often the changes are required to be made to the site when it is complete.

Because this website involves with business processes therefore it requires a business domain name and hosting. Normally, the cost will be about £15 – £20 per month (1&1 Internet Ltd.) which depends on what system you want to choose. This amount of money includes the domain names, e-mail, web space, website building, Booster, marketing tools and security features. However, if this website needs to be achieved by an external web design company, the cost will be hard to predict because it bases on the final design features and working hours. But the total amount of budget should be controlled within £10,000. This will include the hosting fees, design fees and maintenance fees.


 

 

Deadlines|six

It will take about one year to design this website and an extra year to build, test, revise and maintain. Therefore, after two years, it can be accessed by public.

We assume the web site will be designed by an external company, and the task list is shown below:

Initial preparation stage

§  The initial contract

§  The corporate identity

 

Design stage

§  The initial design

§  Design refinement

§  The content

 

Build stage

§  The site build

§  Out for comment

 

Test/Revise stage

§  Browser compatibility testing

§  Validation

 

It’s done!!

Maintenance Stage

The following table gives a more detailed schedule:

table

Research & Case Studies

Posted by: siwei on: December 3, 2008

Research & case studies|two

Sample research for online art platforms|one

In order to understand the current situation and development trend of the online art gallery, I need to do some research in this field before I start to design my own website. Through the analysis, I found out that most of the existing online art platform include functions such as artists’ index, art for sale, join in membership and events. However, there are some unusual functions like exhibitions and magazines.  In terms of structure, most of the website applied the traditional subfield layout. The biggest advantage of this kind of layout is that it makes the content displays very clearly so people can easily find the information they need. However, the problem with this method is that the webpage may seem boring and rigid.  When people are browsing art websites, they may respect something different and attractive; therefore the website designer should spend more time on making the web sites interesting.

research1

research2

Case Studies-FineArtSurry|two

FineArtSurry.com is an international Online Fine Art Gallery bringing the works of some of the country’s best Contemporary Artists. This website has a wide and diverse selection of paintings from the 1700s to the present day. Also, it is a multi-functional website which allows people to browse, buy, sell artworks and communicate with artists.  I analyse this website page by page and pick up some typical pages to do the further explanation.

 

Homepage

 

casestudy1

http://www.fineartsurrey.com/

 

The screenshot above is the home page of FineArtSurry.com. As you can see, this is a comprehensive and multi-functional website. This website cover all the basic functions such as art for sale, artists index, artist registration, press releases and member login, etc. However, this website has some very helpful functions which haven’t been widely used by other websites like language support and newsletter subscription. The language support function enables non-English speakers assess the web pages which directly increase the amount of people who browse this website. Additionally, if people want to get the latest art news, it can be achieved through submit the personal details via newsletter subscription function. In a word, the home page of FineArtSurry.com is simple, clear and user-friendly. 

Art for Sale Page

casestudy2

This is the website’s art for sale page. Instead list all the available artworks, FineArtSurry lets people define the type of artwork they want to browser. The search engine allows user narrow down the scope of artwork in seven aspects: media type, subject, period, price (choose price range), status (for sale or sold), sort by price (High-low/Low-high) and items per page. Through define these elements, website will only display the items which have been chosen and people can save lots of time.

Artists Index Page

casestudy3

This page is very similar to the art for sale page. It also enables people predefine the artists they want to browse. The only difference between this page and the previous page is that this search engine allows people access the whole index. 

Members Login Page

casestudy4

This page divides into two parts: the left side is for the existing members and the left side is for the new members. The whole page is clear and easy to understand. However, the only drawback is this website doesn’t support people login on the homepage which means whenever people want to login or register, they have to enter this page.

Newsletter Subscription Page

casestudy5

The newsletter subscription page lists all the possible items which will help the website define what information the person wants to receive. Those elements include: personal information like name and e-mail address, interests, art types and favorite artists. By submitting the information, the website will receive a report about this person then send newsletters back to the person’s inbox. 

 

Ideas

Posted by: siwei on: December 3, 2008

Ideas|three

Through analyse the above examples, I believe that the 2D website will be the best choice for me because they are clear, user friendly and well organised, for instance, Fine Art Surry. Online art platform is a place to share sparkling ideas and artworks therefore people will expect some different web pages. Therefore I will put an attractive flash on the main page to let people get interested in this web site.

For the rest of the pages, I will design them in the traditional way; the idea of the site will be similar to Fine Art Surry and Saatchi Gallery.

For each of the page, there will be a navigation bar on the side which allows people access the other sectors easily and quickly. The main space of the page will be the content for each sector. For example, if the page is about artworks from a same artist, then the main space of the web page will be filling with different artworks.

However, although the rest of the pages will be simpler compare with the main page, for different group of pages, the theme will be slightly different. For instance, the style and colours between artists and artworks will be different; the registration page and message board will also be different.

Website Features

Posted by: siwei on: December 3, 2008

Website features|four

As it is mentioned in the aim of this project, this proposal is aimed at provide art galleries with web solutions responding to the concept of Web 2.0, therefore it is very necessary to understand the concept of Web 2.0 before decide the features of Art Era.

This principle is first raised by John Battelle at the first Web 2.0 conference, in October 2004. Web 2.0 is demonstrated through several principles which are listed below:

§  The Web as Platform

§  Harnessing Collective Intelligence

§  Blogging and the Wisdom of Crowds

§  Data is the Next Intel Inside

§  End of the Software Release Cycle

§  Lightweight Programming Models

§  Innovation in Assembly

§  Software Above the Level of a Single Device

§  Rich User Experience

 

web-20-meme-map2

Figure 1: Web 2.0 Meme Map

(Source: http://www.oreillynet.com/oreilly/tim/news/2005/09/30/graphics/figure1.jpg )

The figure above shows a “meme map” of Web 2.0 that was developed at a brainstorming session during FOO Camp, a conference at O’Reilly Media. It is very much a work in progress, but shows the many ideas that radiate our from the Web 2.0 core.

Overall, the summarization of the core competencies of Web 2.0 are: service, not packaged software, with cost-effective scalability; control over unique, hard-to-recreate data sources that get richer as more people use them; trusting users as co-developers; harnessing collective intelligence; leveraging the long tail through customer self-service; software above the level of a single device; lightweight user interface, development models, and business models. (Tim O’Reilly,  September 2005)

 

To put it simply, Web 2.0 means users participate with the process of website creation, and the website should maximize the user experiences. Associate with this particular website, the features should be more involved with the users, enabling them to create their own context rather than set up a frame and ask them to follow. The features of Art Era are displayed below:

 

 

User Registration|one

 

This feature not only allows existing members login to the website, but also allows new member register with the website.

“Forget password?” feature > If the member forget the password, then they can get the password back via e-mail.

“Remember me ” feature > This feature enables Art Era record login information therefore users can login the website without type in the username and password.

 

User management|two

 

User management is a special design for Art Era’s members. The detailed features are listed below:

“Display of number users, online users” feature > Allows user view the number of current users and who is online.

“Online status setting” feature > This is links with the first function which allows users choose their online status. If users don’t want to be visible, they can choose “appear to be offline”.

“Edit account” feature > Users can change their personal information via this function such as display name, display picture, date of birth, login password, security question/answer, display language, e-mail address, etc. Additionally, because this website involves the online transaction, therefore the financial information will be the most sensitive part in the database. When users are trying to access the financial information, the website will pop-up a new window and ask user to type in the answer for a confidential question. Besides, user can edit their personal details, however if the page is idle for more than 2 minutes, then an auto logout function will come into event.

“Messages management” features > This feature enables users receive/sent/edit their short messages which means users can contact with artists/art dealers/art enthusiasts via online short messages. This feature also promotes the users’ privacy.

“Self expandable friends/contact list ” feature > Users can add or delete people from the list. They can also add pictures and comments for each person if they want.

“Basket” feature > Allows people view the history data and current order status.

 

Art Associated Modules|three

 

“Art News/Events/Exhibitions” feature >List if all the news and events happened recently and all the upcoming exhibitions. Also give detailed introductions for these exhibitions. The feature links automated RSS feeds and manual data input.

“Art Galleries/colleges ” feature > Introduce the famous art galleries and art colleges around the world. Give name, address, contact information, map, and detailed introductions such as characteristics, styles, etc.

“HTML Newsletters and automated e-mail function ” feature > Send to the members who are willingly to receive news e-mails. The website has automated tools which can fill in the recipients’ addresses and content on itself. This function is particular useful when there is a new art gallery going to open or a big art event occurred.

 

Interactive Image Gallery|four

 

“Browsable Categories” feature > Include artists’ name, artwork title, year, size, collection, price and all of the other basic descriptions. People are allowed to predefine the categories they want to browse. The name list will be based on the alphabet.

“Photo/Image management” feature > Users can upload or download the arts and photos from the website and the information associates with them. For instance, title, artist, gallery, year and price, etc.. Art Era also allowed users tagging these photos. Users can also delete their uploaded file if they want.

“Art vote system” feature > This feature links with Web 2.0 principles. People are allowed to vote their favourite paintings. There are five levels: one is the lowest (worst) and five is the highest (best). People can also add comment below the art works or send messages to the artists and this function will be linked with the “Messages management” feature.

“Search Engine” feature > It plays a very important role in the whole website because it not only allows users search within the website but also enable them search based on other search engines like Google, Yahoo and Flickr.

 

Help section|five

 

Help section include the all the questions what may be asked by the users and the scope covers every section of the website. On the top of each page, there will be button which links with help function. If the user’s questions cannot be solved they can always send an e-mail to the support department and get some help.

 

Online Transaction/E-commerce|six

 

“credit card/debit card/Pay pal” feature > People can buy art using credit card/debit card/pay pal and pose questions to seller. Once the transaction is successful, people will get a customer reference number and invoice. The information will be stored in the database as the proof for sale.

“POS” feature > Point of sale system tracks sales and print invoices and inventory

“Contact and Feedback Form” feature > System will automatic create a feedback form which include all the sale information in it. Another purpose for this form is people can give comments so we know which part of the transaction process need to be improved.

 

Maintenance|seven

 

“Troubleshooting” feature > During normal operation, error information is gathered to allow for successful debugging and maintenance of the website.

Design

Posted by: siwei on: December 3, 2008

Design|Five

Mindmap|one

 

online-art-platform1

Because the limitation of the space and the size of the website, I will divide the website into different sectors and create Flow Diagram for each part. The order for the Flow Diagram is: main page, login page, my basket page, artists, artworks, art news, art exhibition and art galleries and magazine. 

Main page

 main 

Login Page

 

login

 

 

My Basket Page

 

my-basket

 

Artists Page

 

 artist

 

 

 

Artists Page

artworks

 

Art News Page

news

 

Art Exhibition Page

exhibition

 

Art Colleges and Magazine Page

colleges-magazine

 

Software/Computer Language|three

There is a number of software can help design this website which include Dreamweaver, Flash, Photoshop, 3D, FrontPage and Fireworks. Photoshop and Fireworks focus on still image design; Dreamweaver and FrontPage are more useful on web page layout design. 3D is for creating 3 dimensional animations or images and Flash is the most common software for flash design. Whether the website is interactive is mostly rely on how good the designer utilizes Flash.

Besides, the web languages also play a very important role in the design process. The common web (computer) languages associate web designs are: HTML, SHTML, XML, ASP, ASP.NET, JAVA, JSP, PHP, VB Script. Meanwhile, this website normally links with database, therefore Oracle, SQL and other database language are also very important.

 

 

User Interface Design & Storyboard

Posted by: siwei on: December 3, 2008

User interface & Storyboard|Six

Enter Page

 

enter-page1

This is the enter page for Art Era. I use a wooden board as the display area and put all the quick links on it. Therefore if users want to enter a particular sector they just need to click the link. Or, user can clink “ENTER” button enter the home page.

 

 

Main Page

main-page1

 

This is the main page for Art Era. As you can see form the picture, the main page is made up by two sidebars and a main display area. On the top of the page is the search bar which allows users retrieve the information they need quickly and efficiently. This home page has a very obvious advantage which is that the two sidebars clearly layout the main function of this website. Users can easily understand what type of information they want to access. Besides, if user put the cursor on each button, there will be a suspended text box which gives the brief explanation for each of them. So it help them gat familiar with this website even quicker. User can also participate/navigate through upload their own art or photos. Art Era provides opportunities to users, let them share their works and opinions with other people include the top artists. These functions will be well explained in the message board section.

 

Image Gallery  

 image-gallery1

This is the image gallery page. Art Era enable users pre-define what type of art they want to browse so it greatly saves users’ time. The artworks will be displayed by thumbnails. If user is interested in a particular art, he or she can click the thumbnails in order to get more detailed information. For each of the painting, people are allowed to vote. Besides,   there is a discussion area below each painting so people can share their ideas about that painting. Meanwhile, users can send message or e-mail to the artists if they have further questions.


 

Login/Register

register1

People can enter the login page by clicking the “Login” button on the left sidebar. The login page include “forget password” and “remember me” feature. Therefore users don’t need to worry they will forget their password anymore. Non-members can sign up by using either the bottom or left side hyperlinks.

 

Online Transaction 

 

online-transaction1

 

The online transaction feature requires user fill in the form which is shown in the image above. People can pay through many different ways such as Pay pal, telephone, credit card and postal. If people choose to pay by card, then they need to fill in the blanks on the bottom of the page. After they fill in this page, there will be another conformation page which layout all the information that the user just filled in. If user notices any mistake, they can always go back to the previous page by click “Back” box. Once user finished all the steps, a congratulations page will appear. That page contains a customer reference number and an invoice sheet. Users can print out the invoice if they want. However, if the page is idle for more than 2 minutes, then an auto logout function will come into event.

 

Message Board 

 message-board1

Message board is an open area which allows different person share different opinions. Everyone can join in and it is a very good place to make new friends. As it is mentioned in the main page section, if any one got any problems about the website or art, they are always welcome to leave their questions here. And other users who know the answer will give them help. This section is very similar to Wikipedia which allows people participate. This is the reflection of Web 2.0.

 

 

Evaluation

Posted by: siwei on: December 3, 2008

evaluation|Six

 Evaluation – provide an objective write up of your design process, how your approach is effective, potential improvements/alternative solutions. Also consider the level to which you investigated each stage of the process – could you give your paper based design to a developer to implement it – what information is missing, how could you provide that information?

The evaluation process is a mechanism for ensuring the website achieves its goals. There are a wide variety of ways to conduct the evaluation. For this particular case, this process will include the following aspects:

§  Standards

Ensure that designs meet appropriate standards for consistency, accessibility, usability, etc. Consistency refers to the website has harmonious style and layout for each web page. As can be found in the design section, Art Era keeps the similar style and layout among the whole website. Therefore it achieves the consistency. Accessibility focus on how easy to access the web pages which is mostly based on the content of the web page and the layout. Art Era user friendly because it covers all the common aspects that the users may want to know and list them on both sides of the web page. Because Art Era provides quite a lot of information therefore we can say the website is relatively usable. 

§  Alignments

Ensure the design meet business goals. Art Era is an online art platform which dealing with artworks. The website includes e-commerce and online transaction function.  Artists can sell their artworks and art enthusiasts can buy their favorite artworks online. Therefore, we can say this website basically achieves the business goals.

§  Effective methods?

Through using the software and web language provided in the design sector, the designer should be able to create interactive and useful website. However, it is mostly depends on how well the designer handle these tools.

§  User participation

This is a very important part of this website because the one of the ideas of this website is to provide a free space for people to share ideas and communicate with each other. In order to meet this goal, Art Era provides the message board, online short message and other similar functions. These features allow users participate into the website.

§  Understand and meet user’s expectation

User’s expectation include: gain enough information, free to talk, up-to-date news and so on.  In order to meet user’s expectations, Art Era put lots of efforts on providing sufficient information for users and keeps the information accurate and up-to-date. However, it is impossible to include all the information appeared on the Internet therefore some users may not find the information they need. That is why Art Era will provide search bar which allows people retrieve information from other websites.

 

However, there is still a number of drawbacks exists. This report hasn’t provided sufficient information for the content of every single page therefore the developers may meet some problems when they are trying to build up this website. Besides, Art Era is supported by database system. But this report doesn’t give enough instruction for the structure and content of the database. This is another problem. Apart from that, the report just give a roughly idea about the schedule and cost for this website. When developers are setting up this website, the real data may be different.

References

Posted by: siwei on: December 3, 2008

references|Seven

Tim O’Reilly, (2005), What is Web 2.0, http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=1, [Access date: 30 November 2008]

IDAT332 Assignment

Posted by: siwei on: December 2, 2008

This blog is for my final assignment of IDAT332 module.

The content within is solely my own, unless otherwise stated; or duely referenced.

Follow

Get every new post delivered to your Inbox.