A little something interesting i staggered up
Today i was surfing the web as you do, and what should i come upon but a paint website. How ever this was no ordinary website it had the exact same background as the MEDIA NOVAK website i evaluated two entries back. The web designers page with the coloured dye bursting from the sides of the page. Somethings a bit fishy here, either the web designing company (media novak) has designed this page and been so slack as to use the exact same image as their own web site or the paint web page (Tetralux stores) have stolen it from the media novak or its a video cycle found on the web some where that they have both used the list goes on any how i'm probably dramatising it all a bit. See what you think for yourself Paint site and the http://www.medianovak.com/
My Web Page
when creating my web page i was going to have my blog button linked to a blog spot page but i didn't like the difference in style compared to my web page and i also didn't like the fact that once in the blog the menu disappeared and the only way off getting back to my site was through the internets tool bar. I found that customising a page (on my website) to look some what like a blog worked much better for what i wanted. I was also able to add a google search down the bottom of the blog page making it easy for viewers to look up an artist i mentioned in my blog spill.
Evaluating Media Novak website
Description
Media Novak is a creative design agency that specializes in web design, online marketing, graphic design and visual identity solutions. We started our company with some basic ideals - offer our customers exceptional design, while delivering a positive customer experience. These ideals have helped grow our business and drive customers to our door.
http://www.medianovak.com/
The web wants to show of what there company is capable of as they specialize in web design their page must be jaw dropping inorder for clients to get in contact with them. In saying that the website doesn’t have any contact details. The menu mouse sensitive, scrolling up and down as you move your mouse up and down. All 12 Categories open onto the background with out taking you away to another portal. Once a categories is open the menu disappears and all you need to do to go back to the home page is to click the cross on the right side of the page. The website is very quick and easy to use. It is also a floating design allowing and size window to view the web page. It’s a bit too basic for my like and I’m not really a fan of the dull colours, could be a bit more interesting as it is a website for web design and visual communications. The visuals don’t immediately communicate to me that this is a web design busyness
Scientific
Media Novak is a creative design agency that specializes in web design, online marketing, graphic design and visual identity solutions. We started our company with some basic ideals - offer our customers exceptional design, while delivering a positive customer experience. These ideals have helped grow our business and drive customers to our door.
http://www.medianovak.com/
The web wants to show of what there company is capable of as they specialize in web design their page must be jaw dropping inorder for clients to get in contact with them. In saying that the website doesn’t have any contact details. The menu mouse sensitive, scrolling up and down as you move your mouse up and down. All 12 Categories open onto the background with out taking you away to another portal. Once a categories is open the menu disappears and all you need to do to go back to the home page is to click the cross on the right side of the page. The website is very quick and easy to use. It is also a floating design allowing and size window to view the web page. It’s a bit too basic for my like and I’m not really a fan of the dull colours, could be a bit more interesting as it is a website for web design and visual communications. The visuals don’t immediately communicate to me that this is a web design busyness
Scientific
Evaluation of Alex Dukal's site
The guy's an illustrator so his site has to:
Show his work, be interesting and personal.
It doees both these things really well!
The graphic design (CSS) is designed around Alex's work, with a book layout and just enough pixels used to give the site background its ragged, rich vibe.
I love the way his portfolio page is laid out to suggest we are looking at the works in a book or even his journal.
The layout is a simples portfolio template with the 5 typical vategories been
- Home - An illustration of Alex's work and A News and Flicker category.
- Profile - Small illustrations that become larger with a click
- Blog - regularly updated with links to his Portfolio, Flicker, Shop, Netvibes and Facebook (menu bar disappears when on his blog page so the only way to head back to the home page is by clicking the internet back button.)
_ About - A short book layout about hiscareer and achivements and links to his blog.
- Contact - listed on this page is his Home, Email and MSN addresses, as well as a quick link to his email.
I really like the simple layout to his website one which i would like to use in my own. To see his site for yourself click Alex Dukal
Show his work, be interesting and personal.
It doees both these things really well!
The graphic design (CSS) is designed around Alex's work, with a book layout and just enough pixels used to give the site background its ragged, rich vibe.
I love the way his portfolio page is laid out to suggest we are looking at the works in a book or even his journal.
The layout is a simples portfolio template with the 5 typical vategories been
- Home - An illustration of Alex's work and A News and Flicker category.
- Profile - Small illustrations that become larger with a click
- Blog - regularly updated with links to his Portfolio, Flicker, Shop, Netvibes and Facebook (menu bar disappears when on his blog page so the only way to head back to the home page is by clicking the internet back button.)
_ About - A short book layout about hiscareer and achivements and links to his blog.
- Contact - listed on this page is his Home, Email and MSN addresses, as well as a quick link to his email.
I really like the simple layout to his website one which i would like to use in my own. To see his site for yourself click Alex Dukal
The Sagmeister webpage
At first glance the site is very busy. Not in the sense that it is packed full of info and images but simply by the moving pattern in the background which is most obviously the theme carried through out the websites links. For example when we click on the 'OLDER WORK' and the NEWER WORK links they take us to another menu with the same pattern but with colder gray colours.
This interchanging pattern immediately tells us that this is a kwerki artistic webpage. The big bold letters and buttons makes it possible to read the menu through the busy background. When the mouse is run over the buttons the get flattened and once clicked on the sink back, very groovy they idea for the buttons reminds me of a keyboard. The same style of buttons is carryed through out the website as navigation tools with a right and left button to take you to the next page and a back button to take you back to the menu. In all a very intuitive and seamless navigation system with a more complex design. The site is a folio of work aimed at students and employees. There is no advertising for anyone else but himself. This site is a site to which you would visit once every 6 months or so as there would not be much change in a month. The site is very fast to load and the design is flexible with a floating design so that different window sizes can see the same content/image. All round very good design that suits its purpose.check it out yourself
The Web Design Process - Checklist
1. Planning & Analysis – facilitate a discussion with your client about the site
(you may need to independently research some information for them).
a. What is the web site for?
b. Who will use it?
c. How will they access it?
d. What do they want to see / know?
e. What capabilities does the site have to have?
2. Content & Structure
a. Develop a structure diagram for the site – decide how the site will be
organised:
i. What needs to be on each page?
ii. What categories will be required?
b. Assemble some preliminary content for the site (this is usually the client’s
responsibility, but may require stock images.
3. Procurement
a. Based on your planning develop an implementation strategy, decide upon a platform on which to develop the website.
b. Testing – using the content developed earlier, develop a “wire frame” site, so that the structure of the site can be verified with the client.
c. Develop a visual style for the site.
4. Authoring & Testing
a. Complete authoring of the content of the site.
b. Test the site for browser compatibility and verify all links
c. Test the site on a range of users (about 5) to test its usability and
effectiveness.
d. Check the SEO (search engine optimisation of the site)
5. Marketing & Training
a. Host the site
b. Train your client on how to maintain and add to the site.
Market the site by adding to search engines, industry bodies etc.
c. Integrate the website with other marketing strategies.
Web typography notes
1) Web trpography is a bit tricky at times as the computer can only use fonts installed in the users computer due to the traditional HTML browser. So the common fonts we get are;
Arial/ Helvetica and san-serif time/times new Roman, or mono space Courir/ Courier new as the lowest common denminator.
2) Licensing - many font foundries only provide their fonts with strict licensing conditions. You can distribute Flash / PDF files with fonts, because they are encrypted and embedded in the documents. One of the problem with distibuting word or rtf documents, is that you can't legally distribute the fonts as well in many instances.
3) Microsoft and Netscape bickered in the late 90's about font embedding technologies, with not one solution that worked in all platforms - leading to only more mess.
4) Traditionally the web designer did some typography using images of text generated in photoshop - usually for headings. Tedious and inflexible when you wanted to redesign the site.
5)Several options have emerged in recent years:
A. The CSS3 @font-face tag which allows you to specify a URL for a opentype or truetype font. Supported in most resent browsers (Chrome, safari, Forefox, and IE) although they all do it slightly differently. Note there are licensing issues around @font-face fonts.
b. sIFR -has been around for about 4 years, it uses a script to replace heading fonts with flash text. Its legal, has plugins for
wordpress and drupal, but does make pages slightly slower to load. Degrades gracefully and has no licensing issues. http://www.mikeindustries.com/blog/sifr
c. CuFon –uses javascript to encode and embed fonts in web pages. Its relatively fast, encoding the fonts is free, and it
degrades gracefully. There are licensing issues.
d. Facelift image
replacement – works on opensource LAMP servers, replaces heading text with images generated dynamically fro fonts.
Fast and reliable – but its no longer text.
e. Typekit– replaces fonts dynamically from a network of servers. It’s a commercial service, with a free version.
How long will it last ?
Web Design Analysis Considerations
We have identified 3 broad areas for design consideration
1. Content
– what the site purports to be about.
2. Form
–n the layout and visual appearance of the site
3. Function
– how you use the site
Successful sites follow a user centric model
– i.e. they are focused on the experience of the site the user will have:
1. Why they are visiting or using the site ?
a. is it to find information?
b. to access a service
c. for entertainment.
d. Why else ?
2. Who and how will they be viewing the site?
a. high speed broadband from Glenorchy or dial up from Bangladesh?
b. large screen monitor or mobile phone?
c. old or new hardware / software – what standards should you comply to.
d. General public/specific demographic
3. Will this be a visit once site? or do you want them to regularly revisit.
4. How are you going to identify what sort of experience the user expects?
Some things to consider:
Content:
• How long should it take a page to load?
(answers vary depending on usage and content between
4 and 15 seconds – how big the media on the page can be will depend on bandwidth of the typical user).
• Is the site complete and fresh? (as opposed to half done, full of under construction signs and last updated 5 years ago)
• Is the content compelling? (high quality)
Form:
• Does the site adjust standards, is the viewing experience similar on a range of web browsers.
• Where is the most significant content on the page
(http://browsersize.googlelabs.com/)
• Will the user have to scroll to access important content
(http://blog.clicktale.com/2007/10/05/clicktale-‐scrolling-‐research-‐report-‐ v20-‐part-‐1-‐visibility-‐and-‐scroll-‐reach/) • Is
the design flexible or rigid, do parts of the design ‘float’ to allow for different window
sizes – is the optimal design size appropriate for your users.
• Does the site degrade gracefully (i.e. if css doesn’t work or images don’t is it still possible use site).
• Will blind or visually impaired people be using site ?
(http://wave.webaim.org/)
• Are font sizes legible, and contrast between foreground and background text sufficient.
Function:
• Do all the links work in the site? (http://validator.w3.org/checklink)
• Navigation should be intuitive and seamless, you shouldn’t really have to think about it.
• Where is navigation located, is it accessible from a variety of positions on the page?
• Are the categories clear in their description - icons only can be difficult to understand?
• How many choices are there (in general there should be no more than 6).
• How many clicks does it take to get somewhere (in
general it should be no more than 3)?
• Will your users get lost or go around in circles?
How do they know where they have been.
Finally a really good way to learn about best practice in web design is to look at what doesn’t work.
I highly recommend this site
http://www.webpagesthatsuck.com/ for an instructive and entertaining look at what not to do when designing a
site.
HTML
today we looked at HTML, HTML is intended to be used to describe the content of a page, its structure, headings, paragraphs, lists etc - NOT its form, the way it looks.
The visual appearance or form of the page is supposed to be done using CSS - cascading style sheets. A well designed site uses common css files which allow the visual appearance of the whole site to be modified and updated very quickly - and to be repurposed for different applications, like print, mobile phones etc.
See the website http://www.csszengarden.com for an example of the power of css.
The final part of the equation is function - how you use a web site - discussion to come.
An excellent design marries all three, content with form and function.
The visual appearance or form of the page is supposed to be done using CSS - cascading style sheets. A well designed site uses common css files which allow the visual appearance of the whole site to be modified and updated very quickly - and to be repurposed for different applications, like print, mobile phones etc.
See the website http://www.csszengarden.com for an example of the power of css.
The final part of the equation is function - how you use a web site - discussion to come.
An excellent design marries all three, content with form and function.
We got introduced to a very helpful website; www.htmldog.com
its tutorials include:
HTML beginner
getting started
Tags, Attributes, and elements
page titles
paragraphs
headings
Lists
Links
Images
Tables
Forms
Putting it all together
CSS Beginner
HTML Imtermediate
CSS intermediate
HTML Advanced
CSS Advanced
| Subject: What you see is not what someone else sees | Topic: Class Notes |
| Author: Mr William Hart | Date: 18 March 2010 12:02 PM |
One of the key lessons for a designer to learn when designing for the web, is that you can not easily control the visual experience that the viewer has.
Key to successful design is understanding that
1. The viewer will be doing several things at once, not just looking at your site design.
2. The viewer expects the site to just work for them, no matter what browser or device they use to view your site. They won't switch to the browser you tell them to use or adjust the window or screen just to view your site. If it doesn't just work - its your fault.
Several things you have to content with:
1. Individual users preferences
2. Different browsers work differently
3. People use different sized screens and windows.
Some useful resources
http://www.browsershots.org - (give you screen shots of a site in different browsers on different operating systems)
http://browsersize.googlelabs.com/ - a graphic representation of screen size use.
http://www.w3counter.com/globalstats.php - global usage statistics of different browsers
Separating form, content and function
In session 2 we looked at HTML, HTML is intended to be used to describe the content of a page, its structure, headings, paragraphs, lists etc - NOT its form, the way it looks.
The visual appearance or form of the page is supposed to be done using CSS - cascading style sheets. A well designed site uses common css files which allow the visual appearance of the whole site to be modified and updated very quickly - and to be repurposed for different applications, like print, mobile phones etc.
See the website http://www.csszengarden.com for an example of the power of css.
The final part of the equation is function - how you use a web site - discussion to come.
An excellent design marries all three, content with form and function.
Class lecture
HYPERTEXT
The Memex - 1945
As we may think - http://www.theatlantic.com/ magazine/archive/ 1969/12/as-we-may- think/3881/
By Vannevar Bush
(published 1945 in the Atlantic Magazine)
XANADU - 1960
What is Xanadu?
The Xanadu Australia formal problem definition is:We need a way for people to store information not as individual "files" but as a connected literature. It must be possible to create, access and manipulate this literature of richly formatted and connected information cheaply, reliably and securely from anywhere in the world. Documents must remain accessible indefinitely, safe from any kind of loss, damage, modification, censorship or removal except by the owner. It must be impossible to falsify ownership or track individual readers of any document.
This system of literature (the "Xanadu Docuverse") must allow people to create virtual copies ("transclusions") of any existing collection of information in the system regardless of ownership. In order to make this possible, the system must guarantee that the owner of any information will be paid their chosen royalties on any portions of their documents, no matter how small, whenever and wherever they are used.
Project Xanadu http:// www.xanadu.com.au
1965 - Ted Nelson- coined the term "hypertext"
Ted Nelson, a professional visionary,1 wrote in 1965 of "Literary Machines,"2 computers that would enable people to write and publish in a new, nonlinear format, which he called hypertext.3 Hypertext was "nonsequential" text, in which a reader was not constrained to read in any particular order, but could follow links and delve into the original document from a short quotation.4 Ted described a futuristic5 project, Xanadu[®6], in which all the world's information7 could be published in hypertext. For example, if you were reading this book in hypertext, you would be able to follow a link from my reference to Xanadu to further details of that project. In Ted's vision, every quotation would have been a link8 back to its source, allowing original authors9 to be compensated by a very small amount each time the quotation was read10. He had the dream of a utopian11 society in which all information could be shared among people who communicated as
equals.12 He struggled for years to find funding for his project, but success eluded him.
FOOTNOTES CORRECTING THE ABOVE:
1. No one has ever paid me to be a visionary.
2. I don't believe I used the term "literary machines" until 1981, when I made it the title of a book. However, 1965 is when I first used the word "hypertext" in print.
3. It is vital to point out that Tim's view of hypertext (only one-way links, invisible and not allowed to overlap) is entirely different from mine (visible, unbreaking n-way links by any parties, all content legally reweavable by anyone into new documents with paths back to the originals, and transclusions as well as links-- as in Vannevar Bush's original vision).
4. Going back to the original must not be done by links but must be done by deeper transclusive means. The link mechanism, particularly the embedded link of the Web, cannot do this correctly.
5. "Futuristic" is one of those words which implies that an idea is not a possibility-- just a crazy dream, and thus only an inspiration. I believe Tim thinks he made my ideas practical, whereas I think he oversimplified them-- with today's extreme complexity as the result.
6. "Xanadu" is a registered trademark which I maintain at considerable cost, and I ask all parties to respect this by using the "®" or "(R)" symbol for the first use of the trademark "Xanadu" in each document.
7. Not "all the world's information", but all the world's documents. The concept of "information" is arguable, documents much less so. I believe Tim is finding his concept of pure information, the "Semantic Web", much more difficult to achieve than hypertext documents.
8. No, not a link; a transclusive pathway. The two mechanisms are entirely different. A link connects two things which are different. A transclusion connects two things which are the same.
9. Not authors, rightsholders. Sometimes the author is a rightsholder, sometimes not. A rightsholder is generally someone who has bought or contracted the rights from the author. While we have sentimental concern for authors, in our system of law the rightsholder can be anyone, just as the owner of land is rarely the original settler any more. Besides fairness to authors and artists, a key objective is to bring in the commercial rightsholders-- big publishers, university presses, movie studios-- who will not otherwise publish their content digitally. Many people think I am against free content; nonsense. I want to create a shared world of mixable content both free and paid.
10. No, not every time it was read (pay per view) but the first time purchased, as with a paper document.
11. "Utopian" is another synonym for "impossible", like "futuristic" in footnote 5. This shows a problem of understanding.
12. "Communicated as equals" is a gracious but confusing phrase. The author and the reader are not exactly equal, they occupy different roles with frequent conflict. If he means that anyone can be an author and anyone can be a reader, that has always been true (since self-publishing has always been respectable). I would say "shared a level playing field". But I appreciate the spirit of this phrasing.
http:// ted.hyperland.net/
NLS "ONLINE SYSTEM' - 1968
- Douglas Englebert
- The screen/Mouse and 'The journal'
Welcome to the Invisible Revolution, the story of Doug Engelbart, the man who invented much of the information environment we live in today - the computer mouse, word processing, email, hypertext and so on. In short: Interactive computing.
This is his story, and the story of his fellow dreamers, thinkers, doers - revolutionaries - who changed our lives forever.
How did we go from using computers with punched cards - where you'd have to wait a day for the results of your calculations - to sitting around in coffee shops with laptops? It's a long and fascinating story, told here with text, voice and video.
We hope you find Doug's story as important and inspirational as we do and that you will take the time to look beyond the tools he invented and reflect on the reason he invented them.
The 40th anniversary of Doug's demo was celebrated December 2008. Have a look at why it's such a big deal for our history and our future: The Significance of Two Pasts.
Frode Hegland & Fleur Klijnsma
London
• http://www.invisiblerevolution.net/
ASPEN MOVE MAP 1978
Hypermedia - MIT media lab
• http://www.naimark.net/projects/ aspen.html
HYPERCARD - APPLE 1987
Bill Atkinson
International HyperCard User Group (iHUG)
Pantechnicon Wiki, created by Alain Farmer has become a boon recently for serving as a center of information. This page highlights worldwide efforts and activities the past several years that have kept HyperCard visible to the public, and to Apple Computer.
iHUG visited the O'Reilly Open Source Convention in 2003 and published an interesting review of open source technologies from a HyperCard user perspective.
We are a virtual user group. Many of our members have used HyperCard for years. We include professionals in education and businesses all over the world. Many are seasoned scripters and carry an amazing knowledge of the software.
iHUG Membership is free. We meet virtually real-time on the mailing list. iHUG offers a place to present what can be achieved with the software. We also create CD-ROMS that promote the strengths Apple HyperCard provides Macintosh users, especially its relevence to Apple's QuickTime and AppleScript technologies.
Please contact us if you have questions. Join our mailing list and ask online if you like. It's a fun and enjoyable experience learning with people who regularly think about Apple HyperCard.:)
Apple HyperCard was used to create the HTML on this web site.
WWW - 1989
Tim Berners Lee @ CERN
A graduate of Oxford University, Tim Berners-Lee invented the World Wide Web, an internet-based hypermedia initiative for global information sharing while at CERN, the European Particle Physics Laboratory, in 1989. He wrote the first web client and server in 1990. His specifications of URIs, HTTP and HTML were refined as Web technology spread.
He is the 3Com Founders Professor of Engineering in the School of Engineering with a joint appointment in the Department of Electrical Engineering and Computer Science at the Laboratory for Computer Science and Artificial Intelligence ( CSAIL) at the Massachusetts Institute of Technology (MIT) where he also heads the Decentralized Information Group (DIG). He is also a Professor in the Electronics and Computer Science Department at the University of Southampton, UK.
He is the Director of the World Wide Web Consortium (W3C), a Web standards organization founded in 1994 which develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. He is a founding Director of the Web Science Trust (WST) launched in 2009 to promote research and educaton in Web Science, the multidisciplinary study of humanity connected by technology.
He is also a Director of the World Wide Web Foundation, launched in 2009 to fund and coordinate efforts to further the potential of the Web to benefit humanity.
During 2009 Tim also advised the UK Government's "Making Public Data Public" initiative.
In 2001 he became a Fellow of the Royal Society. He has been the recipient of several international awards including the Japan Prize, the Prince of Asturias Foundation Prize, the Millennium Technology Prize and Germany's Die Quadriga award. In 2004 he was knighted by H.M. Queen Elizabeth and in 2007 he was awarded the Order of Merit. In 2009 he was elected a foreign associate of the National Academy of Sciences. He is the author of "Weaving the Web".
HTML - HYPERTEXT MARKUP LANGUAGE
Standards W3C http://www/w3/org
HTML 4/XHTML I.x,XML etc
HTML5-"plugin killer"
Subscribe to:
Posts (Atom)
