Unit 12: Computers in Art & Design
Introduction Into computers in art & Design: In this unit I will be creating a portfolio of evidence to demonstrate my understanding the importance of computers & web design in modern day photography.Tasks expected for completion in this unit are:
Research into websites and critically analyse the based on relevant criteria & my personal opinion
Secondary tasks
Create a webpage using HTML and Build a tutorial website using Dreamweaver
Main task
Construct own personalised fully functioning website
Web research
For this task I plan to research online websites and critically analyse them based on their aesthetic, fitness for purpose and mechanical quality, I good website is visually easy one the eyes with a cohesive layout while also being smooth in its page loading, transitions and is completely functional however the site also has to have something that draws me in, an attraction or something that makes the site stand out as something special.
saber scorpion homepage: http://www.saber-scorpion.com/
Saber Scorpion is a portfolio forum which also operates as a shop and social hub, the primary purpose of the site is to act as the personal website of J.R.Stebbings to display & sell his graphic novels, books, lego creations & decal designs. The site also acts as a social hub for Fans of J.R.Stebbings and those with similar passions like lego & general geekdom where Instructions & tips for building and drawing also exist, this sort of content primarily attracts young male teens & any adults with similar interests. As well as being a social media platform the site operates as an online shop for the distribution of lego resale and custom Instructions & decals for lego minifigs while also housing & selling the comics & novels created by the sites owner. As for payment method the site uses the payment services PayPal, RomanCart and also allows you to pay through an Amazon.com account. The site is surprisingly deep in size with long webpage and a huge number of hyperlinks leading to webpages which have been lying without update for many years.
The site itself has existed since the early years of the web and its age truly does show, back it '05 the site would have been more than adequate but there are strain marks where the site has been adapted to the modern web page layout, however the site is relatively consistent in its colour palette of a sandy creams , deep reds & the use of black. As an old website it is for the most part stable especially on newer computers however on older systems there is a small lag time transitioning from page to page and at times images do struggle to load when scrolling and pages transition. As for other pages on the website, the way that they connect the links is very odd with the menu or hotbar links still in an cold configuration with different configurations depending on the age of the individual webpage however these do follow the same or a similar style as each other and fit the atmosphere & aesthetic of the site but the actual layouts lend to frustration with it being easy to click the wrong link since the menu buttons are so close together and have very small hitboxes. The site uses a variety of different fonts for different uses with the main fonts used being a small yet bold font which is easy on the eyes of the reader while the site also uses a collection of comic book inspired fonts which are creatively used and strongly appeals to the sites target audience and fits in with the theme and business of the site. The backgrounds mostly consist of single utilitarian colour, with a sandy colour being used on most newer updated pages which contrasts well with the reds and blacks present in the text and page fuff details while an image acts as the background of the menus helping to merge the hotbar with the rest of the site. Any other images can for the most part fit with the traditional page layouts however there are pages where image sizes are random and can exceed the page borders & don't always properly transition with the text which can be invasive in the user's viewing experience. There are adverts on most the pages in the form of mostly random banner advertisements but these ads don't interfere greatly with the way the site works, there are some site relevant ads but these are on selected pages for the purpose of advertising to the target audience. The only obvious interactive graphics are the hotbar buttons which highlight a bright yellow around the font when hovered over, this small level of interactivity really gives life to the site along with a image of the sites mascot of the site transitioning in a cycle between different stages of being processed into a final image. The site itself could truly benefit from a complete overhaul as the current site seems to be stretched in its use however tweaking the sites mechanics may be counter productive but changes can be made to improve all elements of the site as its age means it's mostly out of date, if the site went through extensive aesthetic and mechanical adjustments it could be far more suitable to use in a modern web client. A few good bodge fixes would be to fix the layout of the homepage hotbar and to spice up the homepage of the site as the lack of content of updated news doesn't do the rest of the site justice.
Tise site has a lot of charm to it despite its multitude of flaws, it harks back to a time on the web that many have long since forgot that I'm personally very fond, could there be improvements to the site? definitely, but should it? Any great changes to the site could jeopardise its char with the ability to find early renditions of the site on its current iteration is truly fascinating but since this is by all accounts is a working & supported website there will be many updates to the site as time goes on. In the end I love this site even if it is for its novelty factor as a old multi use classic website of the mid To Thousands, the fun aesthetics and the generally usable mechanics of the site come more as a welcome bonus of what I find as an enjoyable experience.
CAC; Clone Army Customs Home: http://www.clonearmycustoms.com/
Clone army customs is a site that's designed to be a webshop for the sale of custom made & tailored starwars figure that are compatible with lego which has been trading since the mid 2000's, the site still reflects its age & design philosophy from the time of its creation in the form of simplicity.
The site is composed from the top as its header title, a menu bar which has icons & links to News page(home), shop, links, FAQ, Cart & the additional links for Events & Newsletter. The target audience is for a young male audience how fit the niche of a fanatic lego star wars troop collector who can order custom not-lego products off the site using Paypal as the primary payment method. The site though having a large archive is quite small with its simplicity and lack of adjacent webpages with 3 key pages & additional product pages for when purchasing an item.
As for aesthetics, its a simply designed site with a simple geometric structure which mostly consists of picture links of products, as a site it is a highly effective look. The site operates quite well but there is evidence of stuttering when the one banner add loads in & image Icons can also take longer to load than others. The toolbar is simple and clear letting for easy site navigation to other pages which themselves work in the same way. The fonts used in keeping with the site are simple & clearly distinguished on the utilitarian use of back as the background, the use white, blue & grey as the additional colour elements means that they are clear and are enhanced on the black background. All the images fit into the geometric layout of the site and they also are taken in a similar format showing a extra level of consistency throughout the site. A single banner ad is present between the toolbar & the main page structure, this add consists of gaming & lego related subjects so it merges well into the theme of the site. The interactions on the site consist of highlighting icons and words that the mouse can interact with, these primarily being the product photo icons so you can tell clearly which item your mouse is hovering over.
As for possible site improvements, a modern site layout may be beneficial and reversing colors of font to black & having a white background, however there doesn't seem to be anything that needs majorly updating or adding to the website. I personally like this site, if not for bias then for the sites simple, slim aesthetic theme which makes using the site a truly pleasant experience.
Autograph ABP Homepage
Autograph ABP is a specialist photography website celebrating black photographers
london based gallery organization who collect and sells vintage & limited photograph
options of exhibitions, events, shop, news, archive, learning, info, about,
A large catalog and archive of prints & portfolios
appealing to a well off middle class+ collector and enthusiast demographic
payment through paypal, amazon*
Aesthetically standard yet effective using cut line effect & mimicry of image arts style
runs smooth with very few instances of slowdown
small effective navigation bar and buttons, clear to use for most
clean white background, toned grey footer
Image come off a little overdense in geometric placement
no external ads
scrolling images and dropdown text
Improvement, better image placement
BHphotovideo home
BHphotovideo is a online visual recording equipment site which business wise is trading products while also overviewing the product. the target audience is anyone interested in photographics equipment, from photographers, cinematographers or just general enthusiasts, and payment options are primarily through online means like paypal, the site has a large archive of possible product options making the site of a rather large size.
Aesthetically the BHphotovideo site is minimal with very little in terms of style or visual interest instead going for a more of an industrial efficiency style
BBC Home: http://www.bbc.co.uk/
The BBC or british broadcast simple ergonomic site, drabe with colour breaking up what seems to be monotone but is very effective and adaptable depending on the aesthetic need and changes of what newsworthy. The bbc website is a multimedia platform which primarily serves new and online streaming of radio & TV with a universal branching audience with a pandering to the british & international Populares. The product is information in type and digital access on the web payed for by taxation, to maintain a empire of information it the bbc website archive, the site has existed for well over a decade and all information is cataloged for online retrieval.
Aesthetically its a mixed bag, at times its simple and fit for purpose while at others it is stunning and vibrant to fit themes and narratives. For the most part from what I can tell it that the BBC site runs silky smooth with very little evidence of stuttering, buffering or major slowdown. Button & toolbar layouts are massively varied however all are created in a very clear format showing a lot and thought and care went into developing the site at its current state and will likely evolve sleeker and more effective over time. As for backgrounds, for the most part the defaults are white & black however there is so much diversity its difficult to summarize however most are selected to fit a theme and purpose the same way that images vary and see their uses to fit scenarios & narratives which all change on a daily basis. As a News media network direct advertising aren't allowed however there may be a presence of native advertising however this would be unlikely. There are countless interactive elements throughout the site with scrolling galleries of images & information to button highlights and descriptions, you name it the BBC site likely has it somewhere.
Improving the site would be a question of more consistency in image and background aesthetic but for a continuously evolving new site this is a rather unrealistic request but if anyone had the talent and resources it would be the BBC. I have mixed feelings about the site personal as it feels a wee bit sanitized and corporate, but it does work as a very effective site and definitely works as an aesthetically pleasing experience to use even if I find the site a bit unnerving at times.
MocPages homepage: http: //www.moc-pages.com/
Mocpages is a old 2002 Free to use, lego fans forum and image portfolio archive which operates to this very day, Its primary operation is for the uploading of images to share one's lego creations with the ability to chat & comment on people's creations which brings AFOL's & other lego fans of all ages together on a single online platform creating a huge user base with millions of pages & groups dedicated to all facets of lego & fandoms.
Aesthetically its rounded and simple with a generally complementary aesthetic's however after the homepage the backgrounds in colour can vary with users having a small level of control over the aesthetic of their pages however the background themes and colour suite the site's purpose.
The site works stably however there can be significant buffer times on older pages in the site or on pages with a lot of images and I personally witnessed slowdown on a few occasions when transitioning from page to page or when adds tried to load onto the pages but for the most part the site worked well.
Improvements would be mostly to deal with optimisation issues, I personally like the site, its aesthetically pleasing and for the most part its easy to use.
Flickr starting screen: https://www.flickr.com/
Flickr is an Image hosting websites which is used to create online photographic portfolios which operates business wise by providing the space for a free 1000gb of image storage. The potential audience is almost limitless with anyone interested in photography or of images of any subject* could find or post what the want & with this massive collection of millions of active users the site is almost limitless in size and scope.
Athletically the site is simple, clean & clear with a very utilitarian aesthetic which is highly appealing
Dragonframe homepage: http://www.dragonframe.com/
Dragonframe is a site which sells equipment around the primary product on the site, named Dragonframe is a software used for the process of creating stop motion animations & is for the use of professional or aspiring professional stop motion animators. The site boasts a large archive showing where the dragonframe software has been put into use and the companies associated with said projects, the products can be purchased using online payment methods like paypal.
Aesthetically the site is clean and crisp using a utilitarian white background with an easy to use page and button layout, easy to read font and appropriate well placed images. The site Mechanically works very smoothly with very little sign of stutter, buffering or slow down while using the site even when using Videos on the site.
The site overall is very stable and consistent void of any clear need improvement however a larger navigation bar could be successful and inclusive for those hard of sight.
Griffon hoverworks webpage: http://www.griffonhoverwork.com/
Griffon hoverworks is a site that acts as the online headquarters and sale room for the Griffon Hoverworks Ltd, a hovercraft company descended from British nationalised company, British Hovercraft Commision which itself preceded Saunders Roe Aviation firm. The site describes its history, product and service options for defence & security, commercial & private ownership and how to contact for further information. The products and services are focused towards large specialised groups how could utilise hovercraft, for instance Military's & PMCs. The site is relatively small in size but gives a large amount of information on their products and services along with a small amount of space put towards accolades and history of the company.
Aesthetically the site is fit for use but nothing exceptional, it primarily is a working site which is pleasing to look at but doesn't distract from purpose and themes of the site though the site can function very stiff and visually flat. Functional & mechanically the site runs very well if not for the stiffness in page transition and the odd cases of page slowdown especially when on pages with the slideshow interactive graphics. Fonts on the site work & suit purpose even if they seem a little basic at times and background colours of white on blue work well with the theme and business of griffon hoverworks. Images used give a clear image of the business of griffon hoverworks and are used to depict the company's product line and history.
The general aesthetic of the site could certainly be Enhanced for the current site is slightly drab with a vague dullness that carries throughout the site & a small amount of optimisation could be done to the site however the site on the whole works well and I personally found it interesting even if the visuals detract from the experience of using the site.
Space Jam Webpage: http://www.warnerbros.com/archive/spacejam/movie/jam.htm
this is an almost prehistoric site in terms of the internet's timeline, Its a site that has to be seen to be believed, a site left dormant and untouched since 1996 making the site just over 20 years old.
My Favorite site: The best site is not a clear cut choice for I find that I like most sites for different traits and elements that each web page brings which defines them, overall I like the Dragonframe & CloneArmyCustoms(CAC) sites best & both for similar reasons, Simplicity with both sites have a lack of clutter which is the strength of CAC, and a very aesthetically pleasing aesthetics which dragonframe excels at with its minimalist art design style. Both sites function well and both also are fit for purpose with Dragonframe having a far greater size than that of CAC. Site wise Dragon frame overall seems to be me favorite website with the way it funct
Part 2: Writing Basic HTML: HTML or HyperText Markup Language is a form of Markup Language that creates a distinguishable text language for creating web pages and web applications. The Html code dictates the way objects and text appear in a web page, using Html as a blueprint allows for a browser to interpret the coded commands for you and display the them as a Web page.
On Mac
Starting & creating a website by coding using HTML:
Open textedit as a new file (Notepad on windows systems)
To set the basic layout of a website start with creating the website parameters starting with <html> at the very top and to close the page </html> with the / closing the applied code started between the < >. To create a core for a web page between the Html parameters input a <body> & its close </body> just before the </html> & and between the body Type a Introduction to the page "Battle Rock Online". Save as & name the file "battle Rock" before launching a browser, choosing file & open then select you "battle rock" file then Ok & open to see how the webpage looks on the browser.
Starting & creating a website by coding using HTML:
Open textedit as a new file (Notepad on windows systems)
To set the basic layout of a website start with creating the website parameters starting with <html> at the very top and to close the page </html> with the / closing the applied code started between the < >. To create a core for a web page between the Html parameters input a <body> & its close </body> just before the </html> & and between the body Type a Introduction to the page "Battle Rock Online". Save as & name the file "battle Rock" before launching a browser, choosing file & open then select you "battle rock" file then Ok & open to see how the webpage looks on the browser.
Next create a new paragraph under intro sentence and write "welcome to the dwelling of a mad man"... ( five spaces on the space bar)... "& the bringer of your worst frustrations" all on one line then save and Open on your web browser/ refresh page.
... & it displays the text but fails to create a new paragraph or add the 5 spaces? what has happened is that the browser is programed to ignore paragraph returns & the extra empty spaces while only prioritising & honoring HTML Elements however with a wee bit of code this can be easily corrected.
To actually create a Paragraph it must be defined with <p> to start of a paragraph and a </p> the close of a paragraph, once the paragraph is defined add spaces by putting the HTML code entity to act as a space tag, typing the entity five times like so creates the five part space in between the sentences in the defined paragraph .
To format the section of font "Battle Rock Online" in Larger font & Bold using an <h#> tag with a #number <h1> to <h6>, in this example the selected text was <h1> Welcome to the dwelling of a mad man </h1> with a </> at the close of the selected Bold text. Formatting an inline section of font to create Italics a <em> ... </em> tags are used & to create a Bold the <strong> ... </strong> tags are used, together when used to effect in a webpage they will be shown <strong><em> & The bringer of your worst frustrations </em></strong> giving this section of text a Combination of Bold & Italic inline effect.
For structure of a webpage from the Root<html>, <Body> & <Head>, To add a Head to the web page between the HTML add a <head> tag & a </head> entered a space under the open head, between the head open & close create a Tab Bar Title for your website using the HTML code tag <title>...</title> around the selected text allows it to be seen on the webpages tab.
When you want to find how the HTML of a website on a Mac using "View" & "Developer" allows you to see the HTML coding of any website to see how it functions & and on a Windows operating systems left clicking on a webpage & use the "Inspect" to view the coding while still using the page.
(using the 1996 website for the movie space jam as a Demonstration of webpage HTML)
The software dream weaver can utilise HTML format to build a web page as well as its premade element that can be used to create a website page, which is quicker and easier to use than HTML.
HTML, XHTML, and CSS: Visual QuickStart Guide, 6th Edition, Elizabeth Castro, (Peachpit Press, 2006), ISBN: 0-321-43084-0 HTML and XHTML Pocket Reference, Jennifer Niederst Robbins, (O’Reilly, 2006), ISBN: 978-0-596-52727-3 Head First HTML with CSS & XHTML, Elizabeth and Eric Freeman, (O’Reilly, 2005), ISBN: 978-0-596-10197-8
Task3: Using Dreamweaver
Dreamweaver is a software which is part of the adobe cloud in the same vain as Photoshop, lightroom or flash software programs. Using this program makes it easier to create a structured website without depending on html coding while also giving a more visual representation of what your constructing.
Pt1
once dreamweaver is open select a new site option and save the page by the name index into the assigned great Artists site files with the Image & Text folders.
saving the files all together in one folder makes it simpler to access while using dreamweaver
pt2
The process of making the table for a general website layout by inserting and modifying an inserted table so that the rest of the page can fit into the template
starts with Insert>table,
Insert the following values
Resizing the header to height of 50
the body has a height of 400
upper footer set to 60 pixels
lower footer set to 80 pixels high
first column from left to right is set to the width of 155 pixels
second column set too 600 pixel
3rd column set to 200 pixels
merging the 2nd & 3rd cells on the top row
all sells in upper footer row merged
merge 2nd & 3rd cells on lower footer
Inserting a table into 1st column of the 2nd row down to act as the navigation for the site with each cell acting as a button
inserting a table with the corresponding values
Inserting a table into the 2nd column on the 4th row to be the selection of arts displayed on the site
Inputting the following values
Increasing the table size to fit the cell
Basic page layout
P3
Inserting the title text for the great artist webpage for the heading & for the buttons
creating the sites coloured background & setting up the site text
copy the body & create each button as its own web page structure as a HTML using the link option in the properties panel
on link category of page properties remove the underline and add a Rollover to the buttons/links
centralising the sight around the middle table
save the button webpage HTML's so each file will be visible in the website folder
have each Htmlfile open in dreamweaver in the Tabs bar
start on the index homepage & insert the assigned large image file & repeat the process for each page
once all images are placed ... save & test site
P4
Insert all the small images for each page were they are assigned and add the swap image rule behavior onto every image so it swaps the displayed image on the center with the full size version of the image selected, repeat for each webpage.
copy and insert the correlating text into each web page and resize it all to fit
layout, structure & content all complete, save.
P5
When creating the interactive graphic make sure each image can swap with its assigned image while also allowing for the process to be able to be reversed for every image on each webpage.
Repeat for each image of the other of the 8 images
My Version of The Great Artists Website
S O M E Great Artists: Dreamweaver task
During the process of creating this site I was able to replicate the instructions given and make the working tutorial website which actually worked when opened through Google Chrome.
This is comparing the dreamweaver files to the working webpage on google chrome
The name of the file I used to save & store all the files for creating the site
each element & webpage dreamweaver file IN the folder
The site running off the files in the folder
Each of the following images are screenshots of each one of the working webpages on each artist
evaluation
This was interesting to see how a possible website could be made from scratch using professional software and by the end of the process of creating the website I had made a working product but due to time pressure I did make a few avoidable mistakes concerning the placement of the wrong images in the wrong place, other than that the site was functional & mechanically fine.
(only works on a PC with the "Cliff" folder)
Final Task: Produce & select you own images for your site
Sites for website building:
There are a number of online services which allow you to use tools create your own website online.
Weebly
Wix
CSI Media
Google (free domains)
you pay to register for a domain through you can quickly build a website with one of the google partners like Squarespace, Wix, Blogger, Weebly or Shopify. Obviously there are costs to all of these except in one form or another excluding Blogger.
WIX: Personal Website
Using Wix to create my personal website to host my Image portfolio, you start by choosing a template for your site, me choosing to start from scratch them I went through a number different possible colour palette before settling with tones of pastel greens. I then created a Menu bar for navigation to additional pages & I preceded to give each one a purpose, Inserting one into a galley, another a about slideshow & another as a means for others to contact me.
Starting template
The blank slate to create a website from
choosing colours for backgrounds
Uploading images to be chosen later
Creating a menus for navigation
Adding & editing images
creating a contact page
Intro page demonstrating each of the additional pages & possible themes for the site
creating an intro slideshow & testing other themes
Testing if videos could be added to slideshows ... they can.
<This next few images are self explanitory>
Homepage intro slid which greets viewers of the site
Addable Media options
^demonstrating the ability to upload Images & Videos^
selecting images to be in the gallery
the final layout of the gallery
Links to other social media
Test previewing the site before Publishing
The website has been published with all the necessary features but the site is currently unfinished with its current layout being more experimental in nature rather than a finished fully operating site, there are also flaws that I noticed when moving from a Mac to a PC operating systems with changes in page margins & layout.
THE WEBSITE:
http://cliffordjbancroft.wixsite.com/battlerock
UNIT EVALUATION
Through the course of the Computers in Art & Design unit I learnt the fundamentals & concepts of creating a website by analysing the dynamics of existing webpages by evaluating and critiquing the strengths & weaknesses of a large selection of sites with a variety of different themes and purposes. I next went back to basics by looking into the fundamental building blocks of a website by looking into HTML coding & trying my hand at constructing a basic webpage just with the RAW HTML code. Next I used Instructions to create a copy of an existing site using the adobe software Dreamweaver, with this I got to grips with the process with creating a semi professional looking website layout with multiple accessible web pages & dynamic graphics. The final task was to analyse web creation services and to test your skills and find a way to create a fully working website which can be accessed online via hyperlink, I used the online web creation services Wix to make a usable online Portfolio for my photography course which worked for the most part.
I feel I gain a large bounty of knowledge & transferable skills which will be useful for this digital age, with my understanding of web design greaterning immensely and its usefulness as a tool for a budding photographer to gain a access to an online base of operations for one's portfolio & contact location for taking commissions and for operating a successful business.
Bibliography:
Using Dreamweaver ( Instructions on USB + https://moodle.cityofbristol.ac.uk/moodle/pluginfile.php/113479/mod_resource/content/1/Dreamweaver%20CS5%20Tutorial.pdf )
<WEB HYPERLINK "for self">
http://editor.wix.com/html/editor/web/renderer/edit/9eae4dda-14a2-467d-a080-5af7fbf8ec9e?editorSessionId=8B1274AC-215F-44A2-A9BC-C418E54EEB8E&metaSiteId=3a6e7656-b3b3-483b-8006-05de2cee13d1&uaToken=JWE.eyJhbGciOiJBMTI4S1ciLCJlbmMiOiJBMTI4Q0JDLUhTMjU2Iiwia2lkIjoiTXo2aHhUdVcifQ.b03ktRlleS_gY_zVs3p4GL8JCgihYmWQCPBWuLEpRuKpLuRCHWQNjw.vIIE9tCS0xeSNyA4eC5QVA.A7N_FJxIkLTG8NpR9P6i0v8HmXmCBtMrGQxQVml1ddSwqrViv9VEjInpAj_kxNTX-qx9tqlweczj1h88TFh0bz9X4j84uqEtHoe0EVHmsHK15pslBpUW2mXBsTeE28b2IJy34pY1cwATV8kgKnG5ehv1lcy6-pu6y269ggH0I68.27NxU4S52FVqyMABQo-r1w
MEMO's
Website general information overview:
- What business does the website conduct?
- What is the content?
- Which target audiences is the site designed for?
- What is the Websites service or product it advertises & sells?
- What is the Payment method?
- What is the general size & depth of the website?
Website analysis & evaluation on aesthetic and functionality:
- Dose the website look aesthetically pleasing?
- Do the web pages transition quickly or is there lag time/ it it Optimised?
- Are the connected web pages suitable & pleasing to use/ toolbar & adjacent pages effective?
- Does the font suit the sites purpose & compliment its aesthetic?
- Dose the background colour palette fit for purpose & enhance the sites content?
- How do the images fit the web layout & are they at a healthy viewing size?
- Does the site have Advertisements on display & What sort of ad is it & are they Website relevant?
- Does the site have moving or interactive graphics & parts to the website & do they benefit or hinder?
- Which possible ways could the site be improve?
- How do I feel about the site & to what extent do I like or dislike the website?
Final Evaluation:
Which one of the 8 sites I have critically analyse I would call my favorite & why?
Which one of the 8 sites I have critically analyse I would call my favorite & why?
No comments:
Post a Comment