tech connect mag by lestercaldwell

VIEWS: 22 PAGES: 7

									Digital Web Magazine Redesign 2002


    Inside:
     Personas
     Conceptual Model
     Site Map
     Wireframes
The Audience

Primary Persona                                                                        Secondary Persona
                                                                                       Tommy Davidson
                            Angie Esperanza                                            Age 31
                            Age: 27
                                                                                       Profession: Webmaster at Hartford Insurance
                            Profession: Designer at a local chain of
                            coffee stores in Chicago
                                                                                       “Dude, I love this stuff”
                            “I need to get better so I can get out”
                                                                                       Tommy works a comfortable 9-5 at the insurance
                                                                                       company, and enjoys a lot of freedom to stay late
                            Angie works at a small chain of coffee
                                                                                       and muck around. While some of the IT guys will play
                            houses. Windy City Coffee (Windy-C) has five stores
                                                                                       games until all hours, Tommy would rather read about
                            in the Chicago area, and hope to open two more
                                                                                       the design and construction of the web, and make his
                            before the year is up. Angie is as ambitious as the
                                                                                       own sites. He’s built a small content management sys-
                            chain: she started out as a merchandiser, and moved
                                                                                       tem in php, he writes short-short stories that he posts
                            into the design role when Windy- C decided to build a
                                                                                       of his “blog” every week, and he messes with Pho-
                            website.
                                                                                       toshop. He hungers for the latest thing, and follows
                                                                                       “Photoshop tennis”, “Click here to start” and “Exquisite
                             She’s been designing for the web site for almost a
                                                                                       corpse” as well as having five pictures up in “the mir-
                             year, and is
                                                                                       rior project.”
                             always looking for new skills for her portfolio and new
ways to make the web site better. She feels she’s gotten very good at design-
                                                                                       Tommy’s Goals
ing elegant layouts (though she worries maybe her designs might go stale) and
                                                                                       Big:
would enjoy sharing some of the tricks she’s learned. She would like to bone up
                                                                                       Enjoy this new medium that he’s
on her technical chops; this is where she feels she’s weakest. The engineers at
                                                                                       part of!
the company are always
                                                                                       Smaller:
telling her she can’t do the designs she’d like to, and she’d like to argue more ef-
                                                                                       Keep up with all the cool stuff
fectively.
                                                                                       others are doing
                                                                                       Read about his heros, like Tim
Angie’s Goals:
                                                                                       Berners Lee
Big:
                                                                                       Learn new skills to pass the
Learn, excel and get promotes (or a new job!)
                                                                                       time.
Smaller:
Get to be a better designer        Find resources for ideas
Understand the medium better       Find tutorials on technical skills
Meet other designers                      Exchange ideas




 Digital Web                  Prepared by Christina Wodtke                             Version 1.0   Page 2        Approved by:
 Redesign 2002                xxx street city, state email, phone
                                                                                A Model for Working, a Model for a Magazine

                                                                                As I made my way through the content inventory, a pattern
                                                                                began to emerge. Most articles fell into one of four types

                                understand                                      1. Article looking at the “Big Picture.” These articles were
                                                                                trying to understand the fundamental nature of the me-
                                                                                dium, and the questions that go with it: What makes writing
                                                                                good? What is brand? Will broadband make a real differ-
                                                                                ence?

                                                                                2. Articles about Design. This was big “D” design, though.
                                                                                Information architecture, interaction design and graphic
                                                             design             design, one rolling into the other.
            evaluate
                                                                                3. Pragmatic articles on building the web. How do you get
                                                                                your cascading styles to work on old browsers? Make a
                                                                                version of your site for WAP? Make your site accessible.
                                                                                Like design, these articles are concerned with making stuff.

                                                                                4. Articles on Evaluating. From Usability to ROI, the ques-
                                                                                tion is “What is ‘good’?”

                                     build                                      By using these are drivers for the organization the maga-
                                                                                zine can have a theme of working wisely.




Digital Web            Prepared by Christina Wodtke          Conceptual Model    Version 1.0   Page 3          Approved by:
Redesign 2002          xxx street city, state email, phone
        Home page                                                                                                                      A Possibile Site Map
                                                                                  News
                                                                                  Archives
                         Content

                                                                                             Via Categorization, a connection is
                                                                                             built between on site and off site




                                                              Understand
                                                                           Overview            Essays                    Columns        Reviews

                 About


         About
                                                                           Overview            Structure                 Form           Reviews

                                                              Design

         Authors

                                                                                               Code                      Tech-          Reviews
                                                                           Overview
                                                              Build




                                                                                                                         niques
        Assorted
        Static
        Pages


         Classified                                                                            Usability                 Profits        Reviews
                                                              Evaluate




                                                                           Overview
                                                                                                                         and Traffic




Digital Web                   Prepared by Christina Wodtke                       Map                       Version 1.0   Page 4        Approved by:
Redesign 2002                 xxx street city, state email, phone
                                                                                                                                                                   Home Page

                              Digital Web                                                          Ad One                                 Ad Two
                              Tag line

                             This Week on Digital-Web                                                                The Watchlist

Each week, a new story is
                                This week’s story                                                                        Item 1
                                                                                                                                                            Here is the daily list of inter-
published on the month’s                                                                                                 note note note note note           esting stories found on other
theme, in one of the                                                                                                     link                               sites. They are also categorized
“aspects”                                                                                                                                                   in the same way the original
                                                                                                                                                            content is, allowing for “re-
So if the theme was                                                                                                      Item 1                             lated items” (see following
“PDA’s” week one’s                                                                                                       note note note note note           page.
article might be “Will WAP                                                                                               link
change the web” week
two might be “effective
icons for the palm” week                                                                                                 Item 1
three might be a columnist                                                                                               note note note note note
explaining “Getting your
CMS to output WAP”                                                                                                       link
and week four might be
“Evaluating Avanto go”                                                                                                   Item 1
                             Last week                    Two weeks ago                  Three weeks
I recommend having an                                                                                                    note note note note note
editor for each of these                                                                                                 link
aspects.

                                                                                                                         Item 1
                                                                                                                         note note note note note
                                                                                                                         link




                                                                                                                                                            This navigation holds non-
                                                                                                                                                            topic based items
                                                            about | authors | donate | sponsor | topic map | newslettter | volunteer




 Digital Web                       Prepared by Christina Wodtke                          Home Page                     Version 1.0     Page 5       Approved by:
 Redesign 2002                     xxx street city, state email, phone
                                                                                                                                                                             Article Page

                            Digital Web                                                          Ad One                                 Ad Two
                            Tag line

                                                               Article Title
                                                               By so and so

This column is for “time”                                                                                                                                             This side is for items related
                             This month                        CSS and well-structured documents are                                 Related Articles
based related informa-                                                                                                                                                by topic. So other articles in
tion, such as this week’s                                      a combination that can’t be beat. This                                on CSS                           the past digital web has pub-
articles or sponsors.        Story 2                           tutorial looks at how to transform a                                                                   lished, other items from the
Other possibilities could    Teaser                            Web page using traditional Web design                                 Story 2                          watchlist, or from trackback.
be items from classified,    Read more link                    methods into a CSS-based site. In fact, the                           Teaser
or current discussions of                                      example will be drawn from                a                           Read more link
                             Story 3
this articles.                                                 Digital Web content page         Css
                             Teaser                                                                                                  Story 3
                                                               modeled after those pages        changed
                             Read more link                                                                                          Teaser
                                                               covering reviews, interviews     my life
                                                                                                                                     Read more link
                             Story 4                           and tutorials—tutorials that
                             Teaser                            are amazingly like this one.                                          Story 4
                             Read more link                                                                                          Teaser
                                                               This isn’t the first attempt in this space                            Read more link
                                                               to try to recreate a Web page using
                                                               CSS. J. David Eisenberg tried to re-do a                                   >All css articles
                             Brought to you by                 Yahoo! Weather page in his article titled
                                                               Converting a Page to CSS. While his                                   Related Articles
                             The letter B.
                                                               attempt was not a complete success, he                                Elsewhere
                             The classifieds                   totally transformed the page’s structure
                                                               and style using contemporary CSS                                      Story 2
                                                               methods. As David says, “anything worth                               Teaser
                             New items this
                                                                                                                                     Read more link
                             week!                             doing is worth doing again.”
                                                                                                                   Discuss           Story 3
                                                                                                              Next article           Teaser
                                                                                                                                     Read more link




                                                          about | authors | donate | sponsor | topic map | newslettter | volunteer




Digital Web                      Prepared by Christina Wodtke                          Article Page                  Version 1.0     Page 6                   Approved by:
Redesign 2002                    xxx street city, state email, phone
                                                                                                                                                                        Topic Map

                              Digital Web                                                           Ad One                               Ad Two
                              Tag line



                              Topic Map

                               Understand                       Design                           Build                              Evaluate
This is a set of links to
category index pages.                                           Color theory                     css                                Usability
Behind each link is a set
                               Community
                               Blogging                         Typography                       WAP                                Understandability
of articles pertaining to a
given category. This is not    Weblications                     Photography                      xhmtl                              Findability
an exclusive categoriza-       Content Strategy                 Illustration                     XML                                Optimizing for
tion scheme. An article        Inspiration                      Animation                        Web Standards                      Search
on the why and how of          Innovation                       Cartooning                       Web Safe Color                     Optimizing for low
CSS could be found under       Brand                            Layout and compo-                Flash                              bandwidth
build> css and under           Marketing                        sition                           DOM                                ROI
understand> choosing a                                          Motion Design                    Liquid Design                      Accessibility
                               Localization
technology.                                                     Trends in design                 ASCII                              Traffic Optimizing
                               User Experience
                               Email                            Controlled Vocabu-               Javascript
Moreover, these categories
can be linked to from arti-    Web Culture                      laries                           CGI                                Software Reviews
cles, from the home page,      E-comerce                        Information Archi-               Perl                               Service Reviews
and used by researchers.       B-2-B                            tecture                          Database Design                    Site Critiques
                               Cartoons                         Navigation Design
The redundancy will help       Client Managment                 Interaction Design               Interviews with
people looking for , say, a    Project Management                                                Builders
review on Dreamweaver..                                         Interviews with De-              Builder’s Tools
They could find it in                                           signers
“builder’s tools” or in
                               Interviews with Web              Design Tools
“Software reviews”
                               Personalities




                                                           about | authors | donate | sponsor | topic map | newslettter | volunteer




Digital Web                       Prepared by Christina Wodtke                          Topic Map                     Version 1.0     Page 7             Approved by:
Redesign 2002                     xxx street city, state email, phone

								
To top