Inside Designer’s Mind – 100 things that designer considers before designing

Yes, this is an continuation to my previous article “Inside Designer’s Mind – Understanding a designer”. This article tells you what amount of plan actually takes to make a perfect design especially Web UI Design. Below compilations are from own & team work experience and doesn’t belong to any book.

Here lists about 100 things that designer considers before, while and even after designing(hope, at least you’ve enough patience to hover your eyes over these points) and list is partial:

Requirement gathering stage:

1. Is it a website / web application?
2. What is the business of the client?
3. Which industry the business belongs to?
4. Why the client needs a website /design solution?
5. Who are clients competitors?
6. What are competitors websites?
7. Is market ready to use the product / service offered by the client?
8. Is the product / service already exists in the market from other competitor?
9. Does this website really going to help to improve clients business & business goals?
10. What are the primary, secondary & tertiary target audiences?
11. Which part of the website is most useful to the users?
12. What are the clients corporate color scheme and clients expected color scheme apart from corporate colors?
13. What is the content priority?
14. What are the content types?
15. What category the project belongs to? Is it e-commerce / travel / education / banking etc;
16. Is all content of the screen displayed are dynamic or part of it?
17. Does the websites requires photographs to be shot from a model/photography agency or can it be obtained from a Photo Stock Library?
18. Does contents of websites includes streaming audio & video?
19. What media website need to be done? Is it Web(HTML) / Flash ?
20. If web, which technology to use? Is it Java / .NET / PHP / Other?
21. If flash, what should be the flash version? Is it Flash Player 6.0 / Flash Player 7.0 / Flash Player 8.0 /Flash Player 9.0?
22. What are the target internet browsers and their versions? Is it IE6.0 / IE7.0 / Firefox 1.0 / Firefox 1.5 / Firefox 2.0 / NN6.0 / NN7.0 / NN8.0 / Opera 8.0 / Opera 9.0 / Safari 3.0 or All?
23. Does these pages needs to be customized for mobile / PDA devices?
24. What is the time provided to complete whole project?
25. What is the time provided to do Graphic Design & UI prototyping for the website?
26. Is the time provided optimum / sufficient?

    Visualization stage:

27. Which design theme best suits clients requirement? Is it Elegant Simplicity / Complex Graphical / Enigma / Feminine etc;
28. Is this to be very creative / funky / serious / artistic / weird in nature.
29. Does it requires initial intro animation before start?
30. Is it a good idea to use a background music while browsing through pages?
31. What should be the frequency of use of given color scheme?
32. What are the color priority?
33. Should I include a sense of flavor of art into design?
34. Doing market research to understand the End-User.
35. Is it helpful collect Ad-Samples of the product to understand the message to consumer?
36. How about integrating some of the Ad concepts in design?
37. Whether to maintaining more graphics less text message or more text content and less graphics.
38. Collecting inspirational resources from the competitors Ad campaign/other websites of same industry/Black Book etc;
39. Is the person reviewing the design a professional design/art critic?

    Information Architecture and Information Flow stage:

40. How many sections does the website contains? and What are those?
41. Define navigation priority?
42. Navigation type: Menu based, Tabbed, Simple text links etc;
43. Is the text content given needs to be refined from an copy/content/technical writer?
44. Is the content of the website needs to be cached & searchable from search engines?

    Graphic Design / Visual Design stage:
    Many of consideration comes between Visualization & Actual Visual Design Process is numerous & sometimes undefinable. In actual Visualization & Visual Design is a parallel process, which is cyclic and interdependent.

45. Which tool to use for creation of layout? Is it Photoshop / Illustrator / Flash / CorelDraw etc;
46. Is the design being made is for all screen resolution or fixed screen size?
47. Does provided color scheme suits browser color output capability?
48. Is it a part of Web 216 color palette?
49. Do I need to create website / product logo or will the client provide it?
50. To use graphical buttons or simple buttons.
51. Background color standard white / black / pale color shades / tiled image.
52. Quantity of images/graphics/videos in the page maintain aesthetic look & performance.
53. Either to use multiple colors or standard set of colors to suit the flavor.
54. Whether to use art bits, brush strokes & pastels.
55. Is the fonts used will be present in the user’s machine?
56. Is it better to use system/device/standard Windows/MAC fonts?
57. If non-system fonts used, how to embed them? Is it with WEFT3.0 for IE or Flash Font Embedding Technique for all browsers.
58. Will the menu of the site be a of static/straight movement or slightly animated/delayed?
59. Does the page requires to avoid scroll vertically on standard resolution or let it scroll.
60. Is the Graphic Design in making can be easily prototyped for Web based / Flash based applications.
61. Does it conclude linearity of design so that it can well sliced and distributed among the page without mis-alignments and breaks.
62. Whether is it require to refine the design to eliminate unwanted contents and add more useful items.
63. Is this design matches current design trends or is it a Out-Of-Box concept which has never been tried before.
64. Could this design be a trend-setter.
65. Did client really liked the design mock-up. If not what necessary changes/iterations can be made to pull the design to development phase.
    
    Prototyping stage:
66. In which format prototype has to be developed. Is it flash / web.
67. If web, which version of HTML to use? Is it XHTML, HTML4.01 or HTML3.0.
68. If flash, which version of Flash Development tool to use? Is it Flash MX 2004 Professional, Flash 8 Professional, Adobe Flash CS3 Professional etc;
69. Which prototyping tool to use for web? Is it Dreamveaver, Frontpage or GoLive etc;
70. What should be the DTD of the HTML? Is it Loose, Strict or Transitional.
71. Which scripting language to choose? Is it JavaScript or VB Script or both.
72. Since VB Script doesn’t work in NN & Firefox, I should go for JavaScript.
73. Whether to use Table based layout or DIV based layout?
74. Table based are simple, but take lot of code to build and DIV needs to controlled totally through CSS.
75. Is the prototype is well suitable to be used directly for development.
76. If the application is going to be developed using .NET Technology. The table grid structure has to be well planned & CSS to be made accurately to impart same output when rendered as ASP.NET web application.
77. In CSS each class category has to be well commented for proper understanding for developers.
78. In prototype pages, all the pages which have undergone changes has to be commented by the Designer with his name, date & time.
79. Images from the template mockup has to be well sliced, and should be used minimally. Any pain color has to be replaced with HTML / CSS color code for increased performance.
80. While working with photographs it’s highly advisable to use JPEG images for it’s size optimizing capability.
81. While working on web graphics it’s highly advised to use GIF image.
82. If the image needs to be more transparent and have to be used in both web & flash, PNG preferred.
83. To keep all the file categories like image, flash, CSS, JavaScript, XML etc; as separate folders for effective product management & following standards.
84. Whether to use or avoid Active X components in page.
85. Whether to use Java plug-ins for mini applications or use flash applications.
86. Does the page scroll at planned minimum screen resolution like 800 x 600. If it scrolls hot to fix it without affecting whole design.

    Testing stage:

87. Is the XHTML/HTML code is written as per the standards defined by W3C.
88. Is the CSS code is written as per the standards defined by W3C.
89. Is the JavaScript code is written as per the standards defined by ECMA Organization.
90. Is there any JavaScript error appearing on any of actions like onclick, onload, onchange etc;
91. Is the page confirms usability & accessibility standards set by WAI.
92. Is the page confirms usability & accessibility standards set by US Federal Section 508.
93. Is all pages are linked well. Is there any broken links. If broken how to fix it, manually or using any other tool.
94. What is the time required to load the page at speeds like DSL, 56K, 28.8 & 14.4 bandwidth respectively?
95. Is the page loading inconsistent where components are loading individually at different speed.
96. Is load priority in symmetry?
97. Have I got a positive results while doing End-User testing with Student, Professionals & housewives.
98. How usable the information & navigation to the End-User. Could he/she be able to find the information he/she’s looking for?

    Post Deployment stage:

99. Did the design compelled user to make any financial transaction through the site.
100. Did the client received good business response through the site/solution and Did the site made good business out of it.

Inside Designer’s Mind – Understanding a designer from a Leadership Standpoint

“Oh! I heard you are a designer, graphic designer right?. You seem to draw lines, boxes & circles and fill colors to them, isn’t it?. Yeah! it’s very simple yaar”. This is what one of my old friend whom I met in Bangalore told me. It’s quite common to see these kind of responses everywhere.

A designer in an IT Company:

It’s not only a common man, but many doesn’t understand the process of design even in an IT company. Reason being they are not into making designs like Ad Agencies and Design Studios. They only need designs to make the software applications look aesthetic & appealing.

A formula for successful design lies here:

Clear Requirement/Objective + Freedom + Optimum Time = Creative(innovative) & Productive Output

This formula not only for design but also implies for many professions which needs creativity. Sadly one or more of this are in scarcity in many organizations/processes.

In a typical IT company, designer has to visualize a design for 6 intended audiences in layers, they are:

1. Creative Lead – Supervises and approves the design task
2. Project Manager – Supervises and approves the project
3. Client Delivery Head / Director (Optional sometimes) – Approves the project & delivers it to the client.
4. Client – Organization / person who’s taken project from another organization / person to get it done offshore(India/China).
5. Client’s Client / Client’s Customer – Organization / person who needs solution / product / service done
6. End-User – People for whom product/solution addressed for and are often considered optional.

Satisfying all of them will only make a design concept successful. Many times it happens like you make a perfect design that suits end user requirement, but your manager reject it at first stage saying the color scheme he personally didn’t liked. Don’t you call a designer a genius who works in this complex type of setup. By the time a design passes through all these layers and reaches End-User, this has gone for numerous iterations and changes after which the primary objective what a designer has tailored would’ve gone for a toss.

Common issues while working with Non-Creative Managers:

It’s quite common in any IT company that a designer will be directly reporting to manager of a project. One will not get a person to work under whom is actually into design/creative industry like Advertising & Design Studio. Here manager is from a software development background which means non-creative. Even sometimes, one will get a chance to get to work under creative project managers, but it depends from organization to organization and from projects to projects. The common issues are:

1. He will not be given enough requirement & contents before starting design
2. He will be usually told to do a design initially so that it can be changed later entirely
3. Even sometimes one will be told that to “Do something”.
4. If you have a great idea, you feel it’s going make a difference and your manager doesn’t understand it. It’s a waste.
5. There is no Out-Of-Box concept. If it’s there, ask your manager which Box.
6. Creative independence & creative risk are the terms your manager doesn’t understand. If you use it, they’ll think you are making a show-off.
7. Luckily color schemes are usually given, unfortunately are of bad combinations. Sometimes no color will be given and told to do either in Light color or Dark color. As per design principle, a good design will be a combination of suitable light & dark color contrasts.
8. Task schedule will be given only for the design task execution. Time for planning, research, visualizing etc; are not included in schedule.
9. If you are sitting quiet, sketching and visualizing your upcoming design, you are wasting your time in thinking something stupid. It’s preferred that you do design first and think later.
10. Designers’ are usually thought as different type of developers(software engineers).
11. A “UI Prototype Design” are usually called as “Prototype Code”.
12. Most of creative websites are blocked through network firewall. Because they consume lots of internet bandwidth.
13. You will be emphasized on your efficiency in how you can use the tool rather than what best you can do using that tool.
14. In their knowledge, “Creativity” only means ability to match & play with colors. Knowledge of Art, Aesthetics, Flavours, Typography, Photography, Trend etc; are considered as something “special” and not needed.

What designer wants?

1. Like above formula, provide clear requirement. Requirement for designer is entirely different than a requirement for a developer(Software Engineer). Both types of requirements(creative & functional) are needed to plan navigation along with visual design.
2. Freedom on work provides passion on work, which leads to innovation and also gives a sense of ownership. Once a great man said “When passion and skills are put together, expect a masterpiece”.
3. Providing optimum time will make him plan, research, visualize, and execute task efficiently. If stringent time is given one or many of them may suffer.
4. Avoid multiple iterations on a single design. Because a designer will sketch a aesthetic design for the intended user at initial stage itself. Each change will actually deviate the design from its initial appeal. Sometimes these iterations let the design refine to the user & client needs. At most times it ruins.
5. Providing all required primary & secondary tools to make an “idea” into “reality” efficiently. For example “Adobe Photoshop” as primary tool and “KPT”, “Alien Skin” and other third party applications as secondary tools.
6. Kindly consider them as special species. If they have a better way to doing things, let them do. Don’t avoid them since you don’t know about it. May be its worth to take risk.

Requirement Gathering: DPLC – Web UI Design & Development

Stage – 1: Requirement Gathering:

The requirement gathering is the critical phase to extract the project information from the client in a systematic way. A requirement gathering for design is entirely different than for requirement gathering for development. Here the discussion will be mainly based on four important dimensions i.e. Objective, Content, Design & Usability. Whereas in development it is Technology, Database, and Business Orientation.

Objective
Objective defines the business objective of a solution developed. A designer must know why the design is being made for. The project could be Air Travel Site, Real Estate Directory, Vacation Portal, Education Portal, Database Management Application, Stock Market Information Tool, or just a company website. A clear objective helps designer to visualize the future design & progress plan of the project.

Content
Content defines the potential or nature of any project. It might be a tourism information site, education portal, online stock broking portal, gaming portal, database management application etc;. Content is what drives the design process to the next level. And it is the scarcity in most project because a client comes with a business concept, but not content.

Content are classified into many types such as business inputs, complete project information, viewable contents like, logo, text, images, input fields and other multimedia objects. A designer’s job to integrate these contents into one aesthetically looking application.

With few very simple words we can define content as source, foundation, skeleton or wireframe structure for any design project.

Design:
Design is the next process derived after collecting enough resources like contents. Design is entirely a creative process. A designer before initiating design work should know the following:

• Type of project
• Organization type
• Target audiences
• Specific design guidelines/specifications from the client
• Technology

Usability:
Usability is defined as simplicity to experience an application. Usability is combination of physical and psychological consideration. Usability mainly consists of readability, accessibility & findability. Following features are very important to define usability for a site:

• Content priority
• Media type (static/animated)
• Device Type (PC/PDA)
• Key input operation (Mouse/Keyboard/Touchscreen/Hybrid)

Introduction: DPLC – Web UI Design & Development

DPLC – Web UI Design & Development

DPLC stands for Design Process Life Cycle. This is similar to SDLC(Software Development Life Cycle). DPLC will be a part SDLC when any software project developed using User Interface considerations. Another way to define DPLC is through sequential process of implementation of User Experience Design alongwith application of Information Architecture principles using Waterfall model of SDLC for Web Application UI Design.

Following are the sequential steps included in DPLC-Web UI Design & Development:

1. Requirement gathering
2. Visualization
3. Roadmap / Flowchart / Wireframe / Sitemap creation
4. Information Architecture & Design
5. Graphic Design / Visual Design
6. Design Refinement
7. Prototyping
8. General considerations in prototyping & it’s standards
9. Prototyping for .NET applications
10. Prototyping for Java applications
11. Prototyping for PHP applications
12. Prototype Testing – Usability
13. Prototype Testing – Browser Compatibility
14. Prototype Testing – End-User Experience
15. Validation / accreditation
16. Release for development

The step 1 to 6 are considered common for all User Experience Design processes whereas 6 to 16 are domain specific like Desktop & Web Application and also technology specific like VC++, PHP, Java, .NET, .NET-Expression Blend, Flash, Delphi etc;

With DPLC method it is assured that the User Experience Design process is carried out in a proper way. Adopting this will allow any creative team to design & develop effective design solutions in proper time, suitable budget, bug free & with little iterations.

In coming articles we will discussing each of the topics mentioned above in detail with suitable live examples.

Hot California Graphics 2 – A remarkable design blackbook

Introduction

I’m definitely not a usual book buyer. It’s never happened to me like I had planned and bought a book for. I may just drop into any bookshop / outlets / exhibitions on the way, surprisingly! I get books which I was actually looking to have for a long period and there are few which actually changed my life. The one now I’m going to discuss is about a minimal but marvelous design book which I call as design blackbook.

Hot California Graphics 2 is not like typical blackbook we find elsewhere where majority of blackbooks are usually published by advertising agencies / advertising associations which mainly consists of advertisements on print media. They typically focus themselves on Concept, Copy & Photography dimensions of communications.

Detail

Hot California Graphics 2 is first published by Madison Square Press, NY in 2002. The book has elegant portfolio of 32 design studios situated all over NY and counts for 360 pages of unlimited impressions. It features works done at famous studios such as Hunt Design Associates, Adams Morioka, Maddocks & Company, Sargent & Berman Inc, Evenson Design Group, MIRES, 30sixtydesign, Visual Asylum, Boardwalk, Cahan & Associates, DUPIUS, and The Thompson Design Group.

It’s the bank of inspiration for multiple mediums of graphic design like Print Advertising, Branding, Packaging, Environmental, Architectural, Metal, Textile, Sign, Entertainment, Broadcasting and Web. And one can see designs made for almost all successful business domains such as Automobiles, Consumer Products, Breweries, Entertainment, Media, Sports, Tourism, Health Care, Hospitality, Financial, Banking and Education.

You can witness design works done for clients/products like Ketel One, Sony Playstation, Nickelodeon, UCLA, AAF, Warner Bros, Princess, espriTV, Spider-man, Harry Potter, Hansen’s, hp Printers, Dreamcast, Invitrogen, Qualcomm, IndyMac Bank, RICON, alexgoes, Nissan, PLAYBOY TV, Burger King, Nike, Foster Farms, Purina, and Nestle.

Where to Buy this?

This book is available in almost all major book outlets and can also be purchased on amazon.com. I have bought this at Sapna Book House, Bangalore, INDIA for $20 USD.

Understanding CSS DOM

The CSS DOM is a unconventional term used to define the application of CSS in HTML DOM. With this you can apply CSS style definitions to any object using DOM. Now you are already aware about basics of DOM.

To start with as usually you should know little HTML, CSS, Javascript & Dreamweaver MX or later. CSS DOM works similarly as CSS but, you are applying it through DOM using JavaScript.

There are basically two methods to apply DOM CSS to an element:

1. Direct CSS class application method
2. DOM Style method

Direct CSS class application method

In this method you are going to apply an already existing CSS class to an HTML element using JavaScript. Here’s the example.

Here’s a DIV tag where a CSS class applied to it,

<div id=”myObject” class=”sampleClass”>My HTML Object</div>

.sampleClass {
color: #000000;
text-decoration: none;
}
.newClass {
color: #FFFFFF;
text-decoration: underline;
}

Now I’m going to manipulate the CSS class name into a different one using JavaScript.

Function ChangeClass() {
document.getElementById(“myObject”).className=”newClass”
}

We’ve to trigger this function using any methods discussed in the previous article.

<input type=”button” name=”button1″ onclick=”ChangeClass()” />

DOM Style Method

This is a very common method used to apply CSS style definition to any object without having any existing CSS class. Here is an example.

<div id=”myObject”>My HTML Object</div>

Now I’m going to apply style definitions to this object,

Function ApplyStyle() {
document.getElementById(“myObject”).style.color = “#000000”
document.getElementById(“myObject”).style.fontFamily = “verdana”
document.getElementById(“myObject”).style.fontSize = “11px”
document.getElementById(“myObject”).style.display = “inline”
}

Same way we’ve to trigger this function using any methods discussed in the previous article.

<input type=”button” name=”button1″ onclick=”ApplyStyle()” />

More DOM CSS properties

Help from Dreamweaver 8 method

For more DOM CSS properties you can refer to “Reference” section of Dreamweaver MX or later. To do it follow this procedure: Goto ”Window” menu from menu bar and select “Reference” or press “Shift + f1″ key to open reference window. From “Book” dropdown select “O’RIELLY CSS Reference”. Now select any definition name from “Style” dropdown, and say “font-family” or “Background”. Now you can see detailed description about the each attribute and their values. Look for “Object Model Reference” you will find the way to locate the object(document.getElementById), you can find all properties and values of that object. Similarly you can do this for almost all other styles too. You can execute all properties with the help of above mentioned examples.

Understanding HTML DOM

Have you ever tried to get the HTML values inside a DIV or TABLE element or have you tried to make a SPAN tag behave like DIV and vice versa. If you haven’t tried this till now then, I could say it’s possible with HTML DOM and it can be controlled using JavaScript.

To start with all you need to know is little HTML, JavaScript, CSS & Dreamweaver 8. DOM stands for Document Object Model or in my own words skeleton of a browser and is a W3C recommendation. You can play with any HTML object displayed over the browser the way you play with movieclip & component objects in flash. Fine, now lets go in-depth.

Working with DOM

HTML DOM has a structure similar to HTML, like Element(tag) , Attribue & Value. For example in html its

<body background=”bgimage.gif”>

Where “body” is element, “background” is attribute and”bgimage.gif” is value. Similarly in DOM its,

document.body.background=”bgimage.gif”

Where “document.body” is element, “background” is attribute/property and “bgimage.gif” is value.

Now lets try applying it through javaScript:

funtion applyBg() {
document.body.background=”bgimage.gif”
}

Now we have to trigger this JavaScript function using event handler called “onclick” through a simple form button;

<input name=”button1″ type=”button” value=”Change Background” onclick=”applyBg()”

By this way you can change the property of an HTML/browser element.

Hope now at this stage after trying these code example you have come into a conclusion about DOM, lets take one more DOM example on form elements:

document.myform.textbox1.value = “Hello! Brother”

Where “document.myform” is the form name, “textbox1” is the text box object name and “Hello! Brother” is the value to be populated inside the text box. Even this can be triggered in the same way as mentioned in the previous example within a JavaScript function. The properties & values does varies from one element to other element in a document.

DOM Basics

Basically, there are three important things to know to master DOM, one identify/locate the object, second look for properties & values for that object and third event handler to trigger the function.

Locating/identifying an Object

There are mainly three methods to locate an object:

1. Direct Method
2. Form Method
3. GetElementById / GetElementByName / GetElementByTagName Method

Direct Method

These are identifiers which are already inbuilt for unique HTML/browser components, for examaple:

document.body.property=”value” – for body element
document.links[i].property=”value” – for links
document.appletName.property=”value” – for applets and many more

Form Method

These identifiers are only restricted to form & form elements like, button, text box, combo box(dropdown), textarea, radiobutton, checkbox etc; For example:

document.formName.elementName.property=”value”

GetElementById Method

This is an unique and independent method of locating an object. Any object can be accessed by assigning an id=”idName” attribute into any element. For example:

<div id=”idName”>Hello! Brother</div>

document.getElementById(“idName”).property=”value”

For example: function to read an HTML code from a DIV element and populate it to a Textarea:

<div id=”getCode”><table width=”100%” border=”0″ cellpadding=”2″ cellspacing=”2″><tr><td>This is a sample content</td></tr></table></div>
<textarea cols=”10″ rows=”5″ name=”putCode”>No Data</textarea>

document.form1.putCode.value = document.getElementById(“getCode”).innerHTML;

There are other similar methods resembling to GetElementById, those are GetElementsByName and GetElementsByTagName. The “GetElementsByName” is used similar as GetElementById. Whereas “GetElementsByTagName” just only looks for particular tags like and can only be used alongwith “GetElementById” or “GetElementsByName” identifier.

Setting Atrribute Values to the Objects

Help from Dreamweaver 8 method

For more elements & attributes/properties you can refer to “Reference” section of Dreamweaver MX or later. To do this follow this procedure: Goto”Window” menu from menu bar and select “Reference” or press “Shift + f1” key to open reference window. From “Book” dropdown select “O’RIELLY JavaScript Reference”. Now select any element name from “Object” dropdown, say “body” and select any attribute/property from the next dropdown. Now you can see detailed description about the each attribute and their values. Look for “Object Model Reference” you will find the way to locate the object(document.body), you can find all properties and values of that object including event handlers for individual objects. Similarly you can do this for almost all other objects too. You can execute all properties with the help of above mentioned examples.

Event Handlers

Event handlers are used to trigger one or more JavaScript functions. Event handlers differ from one object to the other. Here are few common examples:

Body Element
onload – Triggers when page loads
onunload – Triggers when page unloads
onafterprint – Triggers when before page loads
onbeforeprint – Triggers when after page loads

Common
onclick – triggers when user clicks that object
onblur – triggers when loses focus
onfocus – triggers when gets focus
onmouseover – triggers when mouse pointer moves over the object
onmouseout – triggers when mouse pointer moves out of the object
onmousedown – triggers when mouse button is on pressed state
onmouseup – triggers when mouse button is released after pressed state

Textboxes
onchange – Triggers when the value or selection changes inside the component (also applies for list element)
onselect – Triggers when the value inside the textbox is selected
onkeydown – Triggers when any key on the keyboard in the pressed state
onkeyup – Triggers when any key on the keyboard is released after pressed state
onkeypress – Triggers this event between onkeydown and onkeyup state

Feature Fight: Vista vs. Tiger

Feature Fight: Vista vs. Tiger

Microsoft Windows Vista

• Codename: Longhorn
• Released: January 30,2007
• GUI: Aero-Glass

Apple Mac OS X 10.4 Tiger

• Codename: Not known
• Released: April 29, 2005
• GUI: Aqua

Now we are going to discuss the GUI relativity of Vista over Apple Mac OS X Tiger. Even we are going to discuss the relativity on features of Mac OS X Leopard over Vista.

This became even more controversial when the Microsoft Windows Vista released developer Beta for testing on completion of development in November 10, 2006. Most of the developers criticized it for its relativity in GUI with Tiger. Even now we are going to do the same thing through feature by feature and point by point.

Aero-Glass Theme:
The A.E.R.O. stands for Authentic, Energetic, Reflective and Open. The theme which comprises of entirely new look and feel out of its predecessors like windows 95/98/2000/XP. Here are the similarities compared with Tiger:

• Transparency/Translucency/Opacity:
  Aero-Glass has the transparency appeal to it and applied to its window pane, Start Menu, Menu and Desktop Icons. Similar to translucent theme on Tiger.
• Live Shadow:
  All the window and menu elements does have a Flat Shadow around them, but more sleek and intuitive than Tiger.
• Icons:
  All the icons created are either 3D or 2D multicolored with shadow. One can easily notice the Recycle Bin of Vista has 90% relation with Trash of Tiger.

Features:
Other than GUI there are highly noticeable features that has been used in Vista compared to Tiger.

• Fast Search:
  This seems to be the replica of Spotlight in Tiger, where the file search has been improved drastically. Give the search keyword/phrase within a blink of an eye search completed with results. One can easily spot the Search(magnifier) button icon in Vista where it is placed towards the right of text input box, whereas in Tiger the same icon already placed on the left of text input box.
• Desktop Widget:
  This one I found not only similar to Dashboard of Tiger, but even with Yahoo Widgets by Yahoo Inc. Where one can see a analog clock, Weather, Stock Details, Maps, and lot more to be mounted on the desktop.

Hope this is evident enough to prove that Microsoft have done some copycatting in its new product “Vista” , now we can even call this as rival copycatting.

Now, its time to drag the Apple to courtroom. Where Apple releasing Mac OS 10.5 Leopard, few features found similar with Windows Vista.

Features:
These are noticeable features that are found in Leopard compared to Vista.

• Time Machine:
  These features found specifically in Windows XP as System Restore and even same have been improved in Vista. The Time Machine seemed to be more advanced compared to System Restore. System Restore can only restore the system files such a DLLs, INIs and few EXEs, whereas in Time Machine it can even restore user created files such as photos, movies, and other documents including system settings.
• Spaces:
  This is similar and again advanced to multiple Users feature of Windows XP & Vista.

Hope we’ve covered enough criticism against both the parties. Looking for your feedback on the quality of article. If you think any modifications needed into the article, we whole heartedly welcome your suggestions.

For Reader’s reference:
Apple Mac OS X Tiger: www.apple.com/macosx/tiger
Apple Mac OS X Leopard: www.apple.com/macosx/leopard
Microsoft Windows Vista: www.microsoft.com/vista

The Initiation

Now, this is the time to give a kick-start. Don’t mistake that CUi is all about only about buttons, textbox, graphics and visual design. We would like to publish articles which are even 100 years old print ad ever published to the latest codename of new Mac OS product.

Topics published/discussed under CUi:

Primary:
1. Human Computer Interaction (HCI)
2. Information Architecture
3. Usability
4. User Interface Design / UI Prototyping with Web, Application & Flash
5. Visual Design
6. User Experience
7. UI Design Technologies like HTML, CSS, JavaScript, AJAX and Flash
8. Design Tools such as Adobe Photoshop, Adobe Flash, Adobe Dreamweaver, Adobe Illustrator and CorelDraw

Secondary:
9. Design Theories
10. Art History
11. Content Writing
12. Content Design
13. Photography / Background Art
14. Painting/Sketching/Brush Art making
15. Design Management

We would like to mainly concentrate on Primary categories listed, since it is the native category for UI/GUI design. But we are CUi designers; we need to focus more than just a UI. It all depends on our members and articles posted in this blog.

My kind request with all the readers to volunteer themselves and invite more friends who are working in any of above categories, our red-carpet is always ready for you.

Cheers,
CUi Team.

What’s CUi?

Let’s assume we have different forms of creative platforms,

Fashion Design + Movie Making + Music Composition + Painting/Sketching + Architecture + Graphic Design + Photography + Writing = Forms of Creativity.

Let’s integrate these forms into UI Design,

Forms of Creativity + UI Design = CUi.

Where ‘C’ also stands for Clear, Consistent, Collaborative and Creative Communication.

Most of design firms have identified the importance of CUi, when user started expecting more than just GUI in late 1995’s. The first step is taken by Apple by introducing Mac OS and Microsoft released its Microsoft Windows 95 after launching Windows 3.1 which is made on GUI principle. Now ‘Wow’, we are experiencing Aero Glass a.k.a Vista, don’t you think it contains all sorts of Creative Forms(almost) and who will forget the award winning Mac OS X series which has stayed as an inspiration for all Interaction Designers.

Therefore, CUi > UI/GUI.

I’m starting practical posts with relevant pieces of works with it. Just wait, we are coming.