Website Design Project

[Kris]

With our legal formation just around the corner it's going to be time
to begin to get the word out and start attracting contributors,
advisors, and our community at large. These days, it goes without
saying, we'll need a well conceived presence on the web to pull this
off. User experience design is the core of who we are, and that
starting with a focus on design is going to be really important... so
the design of our own website will say a lot about us.

I'm really excited to introduce Martin Hipp, who has stuck his neck
out to help us with the design. He deserves a lot of credit for
taking this on at such an early stage.
( http://martinhipp.com/ )

So, if you don't know what HTML and CSS are, we still need you to
check in on this thread every once in a while to help guide us.

[Michael O'Hara]

Looks like we're taking a road trip to New Zealand.  :-)

Welcome Martin.

[Kris Walker]

I updated the functionality specification for our home on the web...
it is only one sparse page, so check it out.

http://docs.google.com/Doc?id=dhtf77b8_16g9mm2qhj

Feel free to comment here on this discussion thread.

Also, there is a new wireframe (early draft in web design jargon) of
our website here:

www.fireworksproject.com

Although this is a draft, and very little design effort has been spend
on it at this point, it is out there for the world to see. I explain
this idea of early exposure here : http://www.fireworksproject.com/blog
and I would be very interested to hear some thoughts on this concept.

[Rebecca Gallo]

" Best of all, we are creating software that we can get excited about. "

Yeah, we're excited....but don't we want others to be excited to?  There's plenty of IT companies that are excited about their stuff, but isn't the difference here that our USERS will actually like this stuff too?  Or is that not our audience here? 

Also, I want to switch the place of the two paragraphs at the top of the page.  I think people read the left side first (as we read left to right), so I thought the left side should explain the problem and what we're trying to do, while the right side says who we are and our approach....

I'm more attracted by what we're trying to do/the problem we're trying to elimate than the way in which we're trying to do it.  Though I know the way we're doing makes us very different, it's the idea of what we're trying to do that first attracted me.  What kept me interested is the way in which it's being done....

Maybe not all will agree, but I feel like I write that on every post, so I'll stop writing that - as that's the whole point of brainstorming anyway: I say my stuff, and we agree or not:)

--
~~~~~~~~~~~
Rebecca Gallo
301-787-5610

[Kris Walker]

> Yeah, we're excited....but don't we want others to be excited to?  There's
> plenty of IT companies that are excited about their stuff, but isn't the
> difference here that our USERS will actually like this stuff too?  Or is
> that not our audience here?

Good question.
The purpose of the website in the short term is to attract
contributors to the
project. So, the target audience at this point is people like you and
me. As
soon as we have a product mature enough to unleash on the public, the
site
will transition to focus on showcasing the way you are describing.

By, the way, If anybody thinks that this strategy of putting our best
foot forward
to attract talent is not the best idea at this point, feel free to
express it.

> Also, I want to switch the place of the two paragraphs at the top of the
> page.  I think people read the left side first (as we read left to right)

I think that is a great idea.

[Kris Walker]

Hi all, Martin put up another wireframe for comment.

http://dev.martinhipp.com/fw/

At this point we are focused on the layout and navigational elements,
but of course open to comments on colors and content/wording at any
time.

[Michael O'Hara]

Looks a little facebookish.

That might change if the logo is put in there. 

All improvements though.

[Michael O'Hara]

Ohh and I'm not thrilled about the copy under "join the project"  Makes us sound too desperate and that we have nothing going for us. 

If I were to read that I would think, this isn't going anywhere, so why would I join.

[Kris Walker]

I'm curious to know what everyone thinks about the orientation of the
"call to action" links, which you can see as the large red boxes on
the left in Martin's wireframe. They could be layed out vertically
like that, or horizontally like they are at www.fireworksproject.com
Here is good example of a finished website with the "call to action"
links laid out horizontal: http://www.madebysofa.com/

Also, you'll notice that Martin laid out the intro "teaser" paragraphs
horizontally rather than the vertical fashion like the current draft
at www.fireworksproject.com

Lastly, Martin changed the words of the navigation buttons in the top
left, which I think works better.

Anyway, any comments before we move forward?

[Michael O'Hara]

The horizontal links work on the Sofa page because how they set up the navigation of the page (everything just drops down below it).    I think this type of layout works pretty well.  I guess I'm indifferent.  I think it could work either way.

One thing that does bother me a little with it is it looks too corporate. 

Hard ridged lines.  Right angles.  Exactitude.  I didn't think that was the feel we are going for.  I thought it was a little more relaxed. A little more personal.  We want people to think they are going to their livingroom, not a corporate office.

I would have no idea how to design that, so that's not much help.  But those are my thoughts.

And yes, like the navigation buttons on the top right. 

[Kris Walker]

Just to remind everyone that the focus of the design at this point is
the layout... where the elements of the page will be located. The web
designer's version of "sketching" a layout at this stage is called
wire framing. The edges will be square and the fonts will be boring,
but that is because designing more appealing graphics is quite time
consuming, especially if the layout of the pages is still in flux. As
the layout becomes more stable, we'll turn our attention to fonts,
colors, and graphics.

You can get a good, short explanation of the web design process here,
if you'd like to learn more about it:
http://colbowdesign.com/blog2/?p=154

I've written quite a bit of the content (the text/words on the pages),
which we really need feedback on ( because I'm not a talented copy
writer ). All the content we have so far can be found at
http://www.fireworksproject.com

Rebecca and Mike have both shared some thoughts on content, and any
continued suggestions for content changes will be added when the next
version of the site goes live. So, what I'm saying is that just
because you do not see your suggestions in Martin's designs, does not
mean they were ignored. So keep the content critique coming.

Also, Martin has thrown in a lot of color into the early wireframes,
so we can start to comment on that as well. However, it's going to be
hard to make any judgements on color until we see the ideas for a
theme, which will come soon at the rate Martin is going.

So here is the next layout wireframe:
http://dev.martinhipp.com/fw/2/#

Notice that the layout is swapped from the last version (
http://dev.martinhipp.com/fw/ )
... Any thoughts on that?

One thing I am particularly interested in hearing more about is the
wording for the links in the top left. Those links will appear the
same way on every single page of our site, and the single word used to
name each page says a lot about what the user will expect find there
when they click it.

1. Do we like "news" or "blog"?
( the page will be a announcement and general communication page that
targets the audience of users/customers )

2. What does "community" mean?
( the page will be a list of descriptive links to our various forums
and discussion groups for users/customers )

[Michael O'Hara]

My thoughts

Layout 2 is better than 1.  The reason......Kris said a while ago that he wants the initial website to be a brochure.  Kind of a "this is who we are and this is what we do.  I think when you accentuate the "this is who we are" by placing it in the left hand column, you make it seem less like this website can provide something for the user, but rather what this whole thing is. (that's kind of why I liked the Sofa site, it had that same type of feel to it....even though it did crash my firefox).

Blog is better than news for 2 reasons.

1. It is more like a blog than it is news.

2.  When someone sees news, they will probably expect a link to the AP or something similar.  Blog indicates what you are saying about you....news indicates what others are saying about you.

[Martin Hipp]

Hey guys, Martin here, thanks for the feedback. I will change the
'news' to 'blog'.

On Apr 11, 6:57 am, "Michael O'Hara" <mroharam...@gmail.com> wrote:
> My thoughts
>
> Layout 2 is better than 1.  The reason......Kris said a while ago that he
> wants the initial website to be a brochure.  Kind of a "this is who we are
> and this is what we do.  I think when you accentuate the "this is who we
> are" by placing it in the left hand column, you make it seem less like this
> website can provide something for the user, but rather what this whole thing
> is. (that's kind of why I liked the Sofa site, it had that same type of feel
> to it....even though it did crash my firefox).
>
> Blog is better than news for 2 reasons.
>
> 1. It is more like a blog than it is news.
>
> 2.  When someone sees news, they will probably expect a link to the AP or
> something similar.  Blog indicates what you are saying about you....news
> indicates what others are saying about you.
>

[Kris Walker]

I agree, I like blog better than news... and I like the layout of
http://dev.martinhipp.com/fw/2/# better too.

The latest layout wireframe will be easy to manipulate over the
lifespan of the website, it has sensible navigation, and I think
having navigational elements on the right of the screen moves the
reader's eye across the content more effectively.

[Martin Hipp]

I have tried to incorporate the logo into the current wireframe, you
can see it here http://dev.martinhipp.com/fw/3/. I will try to come up
with another wireframe soon, where layout/colours will conform to the
logo a bit more

[Kris Walker]

I thought maybe it would help to find some websites with a look and
feel that might work for Fireworks, as Martin moves away from the wire
frame stage and into the visual design phase.

Please feel free to critique this list or add to it.

http://cakephp.org/

http://www.thinkorange.pt/

http://www.oneshareinvestments.com/

http://healogix.com/

http://www.meshu.ca/

http://searchinsidevideo.com/

[Martin Hipp]

The fourth wireframe is up, this one sports the logo concept 2:

http://dev.martinhipp.com/fw/4/

To view the wireframe with logo concept 2a:

http://dev.martinhipp.com/fw/4/?logo=2a

To view the wireframe with logo concept 2ai:

http://dev.martinhipp.com/fw/4/?logo=2ai

[David Young]

I like version 2ai.

About the frontpage:
I think we got too much text on the frontpage.
We better start with 2-3 lines about who we are than starting with a
question.

The introduction must be very short, attractive and to the point.
I think we can achieve this by using illustrations, icons and a strong
headline. (ie. overview in vector art etc).
And maybe it's better to display just one button on the frontpage to
join the community so you can decide later in a form if you just wanna
join or to become a contributing member.

[Kris Walker]

Good points David.

I think we should proceed on the web design project with some user
testing that will get us quantitative results.

Personally, I subscribe to a methodology similar to this:
https://wiki.mozilla.org/Labs/Ubiquity/Usability/Usability_Testing/Fall_08_1.2_Tests

We have a test website at:
http://www.fireworksproject.com
as well as a test website built by Martin here:
http://fw.martinhipp.com/

We should also incorporate David's suggestions into a wire frame
website for testing as well.

Currently I do not have time to lead the testing effort for another
week at least. If somebody would like to take this project, that
would be awesome, and if not, then I'll begin testing in a week or two
from now.

[David Young]

Ok, let's make some structure. Making wireframes about the design is
ok, but we should take some steps back and first focus about our
goals.
We have a lot to explain. So we must group related content togheter.

Todo:
1. Make sitemap (to structure the content)
2. Define what we want with each page.
3. Work out the details on each page. (ie. menu, apply form, some text
about our vision, link to sponsor etc.)
4. Make wireframes were to position header, maincontent, footer, etc
on each pages.
5. Graphic design (based on the our ID/logo)
6. Coding in XHTML/CSS

I added a page so we can work on these points:
http://groups.google.com/group/fireworks-project/web/website-project-content?hl=en

Later we can set up de e-mail/apply forms, statics, testing and
finally launching.
We can use a CMS if necessary to add & edit the content online. But we
just need to focus on the content itself.

[Kris Walker]

> Ok, let's make some structure. Making wireframes about the design is
> ok, but we should take some steps back and first focus about our
> goals.

Good call David. I think I was getting a little too rushed to get a
"web presence.". You also mentioned briefly that we need to put the
focus on content first, and I could not agree more.

I added some thoughts about content strategy to the page you started,
as well as another site map concept:
http://groups.google.com/group/fireworks-project/web/website-project-content

We should have a deadline for site map concept submissions. Does
Sunday, May 16th sound OK?
After which, we'll spend a few days to decide on a site map, and then
move on to creating goals for each page in the map.

Everyone may also want to critique http://www.mozilla.com, since that
website, and that organization, has a similar content strategy to ours.

[David Young]

Thanks for your input, Kris.
I think May 16th is OK.

[Kris Walker]

Added another revision (concept #4)

http://groups.google.com/group/fireworks-project/web/website-project-content

[David Young]

Ok, time to choose a sitemap. I think concept #4 will fit.
We can wait a day to choose one, and then continue to the next steps.

[Kris Walker]

I agree, I think concept 4 provides the best starting point for a
content strategy.

So what are some ideas on a good methodology for outlining the content
goals for each page?

Card swapping usually works well, but I'm curious to get more opinions
on it:
http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide

[Martin Hipp]

I published another sitemap concept which I think will work better.

[Kris Walker]

From looking at the site map concepts, I think that everyone seems to
"get" the purpose of the website, and what the Fireworks Project is,
as well as what we're trying to be. That is really awesome. To make
sure we stay in the same boat, I revised the top of the project page
to reflect our content strategy more clearly (I hope):
http://groups.google.com/group/fireworks-project/web/website-project-content

However, I think I may have become a little too verbose with site map
concepts #2 and #4. Looking back through some material, I realised
that David's idea for outlining a site map is just to get an idea for
the pages that we may need. I think we have done that, so the
question now is how to create the content objectives for each of the
pages.

I like Martin's paired down site map (concept #5), but It might help
if you elaborate a little on your ideas about why you think it would
work better?

Nice work... I'm getting excited to see how the content comes to life.

[David]

Yeah nice work so far.
Ok, we need to decide an initial sitemap.
We can go back later and change it, if needed.
But we have to start somewhere, and I think concept #4 is the best for
now.
#5 is not bad, but there's not a lot of space to explain our ideas &
vision, I think.

[Kris Walker]

I updated the web site project page again:
http://groups.google.com/group/fireworks-project/web/website-project-content

I started a concept setting out the goals of each of the pages. I'd
like to call an end to this second phase on May 24th.

David, is my concept close to what you had in mind for your second
phase?

[David Young]

That's a very good start. I just cleaned the page so we can work
easier.
I revised the page and added some sub pages (see Organization).
We can add the details as well.

[Martin Hipp]

I like what is coming along, but I am a bit concerned with naming the
page 'Organization'. In the UK, New Zealand and Australia and a lot of
other countries we would spell it with an 's' instead of 'z'. Could we
not just call it 'About'?

[Kris Walker]

I agree Martin... That's a good point. And besides the spelling of
'organization', there is going to be a content/navigational issue with
it as well. Most people expect an 'about' page to contain that
content.

[Kris Walker]

I added some more explanation and examples to the site map.

The next step is to create some wireframes. I think the best way to
do this is to have myself, David, and Martin each build a wire frame
independently of one another. We'll set up a "launch" date to
announce all the wireframes and then begin a discussion about what we
like best of each one and what we want to incorporate into the final
wireframe.

Martin and I have already created wireframes, but I'm planning on
updating mine to reflect the content strategy and site map outline.
Martin can take another wack at it, or let his wireframe stand as it
is... His choice.

So what is a good launch date to have the wireframe's done? I'm
thinking Mon June 8th.

[Michael O'Hara]

I think that's a great idea to have 3 wireframes......although I'm not the one taking the time to build the wireframe.  :-D

[Kris Walker]

By the way, the idea behind independently designing wireframes is to
avoid the "designed by committee" outcome.
http://en.wikipedia.org/wiki/Design_by_committee

This way, we'll see different, independent, interpretations of the
site map. We'll be able to critique each design, and decide which
interpretation we like best. That is not to say that some elements of
other designs may enhance the design we choose, and we cannot rule out
the possibility of integrating elements from multiple designs.
However, I am a strong believer that perfection is reached, not when
there is nothing left to add, but when there is nothing left to take
away.

I stand by the submission date of June 8th, if David or Martin would
like more time, please post here.

[Martin Hipp]

I have quite a bit of work at the moment, but I will try my best at
getting a wireframe up.

On May 30, 9:51 pm, Kris Walker <kixxa...@gmail.com> wrote:
> By the way, the idea behind independently designing wireframes is to

> avoid the "designed by committee" outcome.http://en.wikipedia.org/wiki/Design_by_committee

[David]

Ok, i was indeed a little busy. June 8th is ok for me.

[Kris Walker]

OK, time to see some wire frame concepts:

First, Martin submitted his wireframes a while back:

http://dev.martinhipp.com/fw/2/#
http://dev.martinhipp.com/fw/

And, recently, Martin also jumped ahead a bit and sent a concept with
graphical elements added. You can find it on our web design page here:
http://groups.google.com/group/fireworks-project/web/website-project-content
It is not too early to start collecting comments on that.

Next, you can find my latest wire frame here:
http://www.kixx.name/fireworks/

You'll notice that everything is in shades of grey. Since we are
focused on site navigation and possible usability issues in this phase
of design, I did not want colour selections to get in the way of that
process. You'll also notice a lot of empty space on the right side of
the home page, which will contain a graphic that I didn't bother
putting in the wire frame.

I would especially like some comments about the content selection tabs
on the left side ('everyone', 'ux design', 'developers'). Our site
targets several audiences, and so it presents unique challenges to our
content strategy and navigation. Having several sites for each
audience is confusing. On the other hand developers become annoyed at
digging through content in layman's terms for information that is
relevant to them, while technical information that developers want to
see is confusing to users. The content switching tabs on the left
side are my solution to this problem.

[Kris Walker]

Hi all,

David and Martin have been busy with school and projects, so I'm going
to be doing the wire frames to keep things moving.

The blog platform makes a much better place to discuss this, since I
can put pictures in with the posts, and everyone else can comment on
it. Sorry to redirect everyone to a different location, but it makes
this much easier for the remainder of the web design project.

So, please stop on over a comment on the design:

http://fireworksfactory.blogspot.com/2009/06/fireworks-project-website-design.html

Comments will be closed Friday, June 12th. So, come early.

[Kris Walker]

Designers:

The layout is finalized with the wirframe found at http://www.kixx.name/fireworks/

The next step is to gather sketches of graphical design ideas. The
goal is quantity over quality at this point. We'll refine the design
after flushing out our ideas. Sketches should be simple, non-
functional mockups that effectively communicate an idea. It should
take less than an hour to create a sketch.

Please review this document before getting started:
http://groups.google.com/group/fireworks-project/web/website-graphical-design

Upload your sketches to the files directory on this Google group, and
then post to this discussion thread with a link to the file and an
explanation of the idea that your sketch communicates.

1 week should be long enough to submit and discuss the sketches, so
Monday, June 22 will be the last day for submissions.

[Kris Walker]

Uploaded a mockup:
http://fireworks-project.googlegroups.com/web/web-mockup_1.png?gda=31i15UIAAACIVXJfxiQqQs6m_0GwiKDA3Mn2ZjVEGmYHBfOsG9wt7KmPHKCSNeOBZCnjsvk21zhV4u3aa4iAIyYQIqbG9naPgh6o8ccLBvP6Chud5KMzIQ&gsc=Vd3hjAsAAAC7UJSukYcQGpuI6vl7fo2K

The black box containing the logo and the tagline in the upper left
corner looks terrible, but I still don't have any good ideas for the
background of the logo. This box also serves as the link back to the
home landing page.

The orienting the navigation buttons as shaded arrows is meant to help
guide a new visitor through the site while still remaining useful to
people who frequent the site.

In addition, each page has a "state" flag, which is the orange flag on
the left. This is a strong indication to the user of where they are,
and what type of content they can expect on the page.

The main purpose of this mockup was to illustrate the arrow navigation
buttons and the page state flag.

Thoughts on these features from a usability and design perspective
would be greatly appreciated.

[Kris Walker]

David, Martin:

Any comments, any ideas, any mockups?