Sent by Joy Bower on 8 December 2004 23:11
>>> I stopped using photoshop and illustrator early in the process and I
>>> saved a lot of headaches. This step introduced too much print medium
>>> bias that did not fit in the web medium (I also tend to hire folks
>>> that have do not use the graphic tools until the end). We get things
>>> done much more quickly and have a far more flexible framework. We
>>> also have a product that has the possibility of working well across
>>> platforms (desktop, mobile, etc.).
>>> 1 - Assess the content types
>>> 2 - Assess the content objects needed (photos, headers, browsing
>>> structures (navigations and link lists), text, charts, data tables,
>>> etc.)
>>> 3 - Outline page types needed (home page, browsing pages, destination
>>> pages (newsletter, memo, brochure/catalog, etc.))
>>> 4 - In valid XHTML and using proper semantic markup build wireframes
>>> for page types including content objects that are needed in these
>>> page
>>> types (use a wireframe CSS that turns on borders and only uses black,
>>> white, and greys)
>>> 5 - Add classes and ids where need to hang design, being sure to name
>>> these semantically (logo, localnav, globalnav, category1, etc.)
>>> 6 - Start adding presentational design in the CSS (required images,
>>> coloring, type weight, visual cues, etc.) - this is where one begins
>>> to use photoshop and illustrator
>>> 7 - Evaluate templates for redundant CSS and test design on people,
>>> and browsers
>>> 8 - Fix
>>> 9 - Dump in content
>>> I began working in this manner in 2001 and have been refining it
>>> since. If you are familiar with CSS Zen Garden and have designed for
>>> it, you have started at step 6. The hard work is done and the
>>> presentation can be modified on a whim quite easily. Starting with
>>> Photoshop and Illustrator too early, it is too easy to marry the
>>> content to the design and it will be hell fixing. This is the web we
>>> are building for not print (actually if designing print and web you
>>> would be benefited by following a nearly identical process and at
>>> step
>>> 6 design for print and web in conjunction and they should not be
>>> identical interfaces as they are very different medium).
>>
>> Thanks for sharing your good ideas. I'm not sure I understand on part.
>> Will you please clarify?
>>
>> Do you at some point in the process (and when?) spend time designing
>> the look/design of the visual interface? It appears to me from your
>> description that you do not spend time designing the interface. Step 6
>> sounds like the point at which you make whatever graphic pieces
>> (masthead, bullets, etc.) that you'll need. Is this correct? If not,
>> then what is the visual design process that you do and at what point
>> in
>> the process is it done? Also, what is the name of the application you
>> use?
>
> Yes, visual design starts at Step 6. In earlier steps (4 & 5) the
> rough layout and placement of content objects can begin within the
> simple wireframe.css file. One can still do extensive visual design
> at this point. I use BBEdit, HomeSite, or Dreamweaver all depending
> where I am and what OS I am using.
>
>> I like the idea that the look/design of the visual interface grows out
>> of the information architecture and user experience requirements. That
>> makes a lot of organic sense.
>>
>> If you are saying that the visual design of websites should be
>> completely different from visual design for print, I disagree. Print
>> design has successfully addressed the making of many different kinds
>> of
>> pages readable, with logical hierarchy and good flow of information. I
>> don't recommend taking a print design and making it into a website
>> without running it through the full web design research, analysis,
>> planning and design process, there is much of value in print visual
>> design for web designers.
>
> The visual design does not have to be completely different, but print
> and web are two entirely different medium with very different
> properties for page boundaries, visual characteristics of the medium,
> and control of the environment and medium that the person using the
> information has before them. There are many things that can be
> learned from print design, but far too much of it has bled over to the
> web, which hinders some of the constructive properties of the web.
> Over use of graphics for text elements makes it impossible for the
> user to copy and paste the text so it can be reused (particularly
> silly is when addresses, phone numbers, dates, etc. are presented in
> graphic formats -- ironically AIGA is one of the worst offender of
> this).
> Gradients and reverse text can work very well in print, but keeping
> the same presentation of the information on the web begins to hinder
> the readability. What makes a stunning print piece can be a mess on
> the web. Oh, and the converse it very much true as well. Learning
> which visual assets translate well is important. Designing brand
> across platforms is a difficult craft to master, but it can be done
> beautifully and still keep consistancy while playing to the mediums
> strengths and weaknesses.
> People have many options on the device to view web-based information.
> Desktops, laptop, handheld, and mobile phones are options that we deal
> with today (the mix is different depending where the users of the
> information are located). Extensively designed sites can hinder the
> information use on some devices and should be a consideration when
> building the visual presentation. The great thing with CSS is
> different platforms can use different stylesheets, which improves the
> information use for a device.
>
>> If you are saying that no website should be highly visually designed,
>> I
>> don't agree with that either. The visual design of any website should
>> be appropriate to the full spec of the project, including what the
>> site
>> should look like and what it should do. Design is a choice (or rather
>> a
>> series of many choices), up to the designer/developer and the
>> customer.
>> Many highly designed sites are wonderful and gorgeous. So are many
>> sparely designed sites.
>
> No, not saying that. There is a definate balance that needs to be
> understood. Visual design should help the content not hinder it. I
> tend to find highly visually designed sites have people behind them
> that are bored with their content. Site's with content owners that
> are excited about the conent tend to have somewhat more restrained
> visual design. One of the things that the focus on the content first
> process does is re-energize the site owners about their content and
> their reason for being. I have had clients that demanded highly
> visually designed sites that have rediscovered their content and have
> actually asked to have a moderate visual designed site toned down.
> Content greatly benefits from well designed visual presentation. This
> too is a craft that must be learned and learning the qualities and
> limits of any medium is important to being a master at the craft.
Thanks for clarifying in detail. Great stuff. Makes mucho sense.
Joy
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
