The Small Business Forum Versus The Art Institute of Pittsburgh

[Jagella]

I'm posting the web-page comp below to see if the members here might judge it the same way it was judged by my facilitator and classmates at the Art Institute. I'm curious to see how the opinions might differ between the two groups.

Thanks!

Jagella

http://freeforalldesigns.com/graphics/webpagecomp.jpg

[vangogh]

I'm guessing there's no live site at the moment. If there is a link would be great.

First impression I like how it looks. The curve of the header image pulls me into the page and frames the content nicely. The company names has nice contrast, though I wonder if it would be better placed above the image. It might work better as the first thing someone sees to better brand the site. I also wonder if a color other than black would work better as the background color. It does fit well visually where it is though.

I'm not crazy about the boxes on the left. The border is too thick for my taste and the color doesn't seem to fit with the image at the top. A stronger alignment might work better than the centered text too.

There should defintely be some navigation at the top. You can offer it at the bottom as well, but never make people scroll to see the basic navigation. For usability the main navigation should be seen sooner on the page than the bottom. Some people may never reach the bottom of the page.

Overall it's a good job.

[rezzy]

I would agree with vangogh. Also the color scheme doesnt seem all that good. It seems like random colored elements strewn all over the site.

I would go on, but I think vangogh covered most of the pts.

[cbscreative]

I generally like the layout too, and I also like red and black, but I don't think it's appropriate for this site concept. I agree with much of what has already been said. I would choose 2 or 3 colors and then harmonize them together. The current color palette is not working. My first thought on colors is earthtones. I normally don't use them, but I think it could work very well in this case. You could accent with gold to really give it a timeless look and reinforce your message.

[Jagella]

I'm guessing there's no live site at the moment. If there is a link would be great.

You're in luck, Steve. Experience Works is a real organization with a real website. (http://www.experienceworks.org/site/PageServer?pagename=homepage)


The curve of the header image pulls me into the page and frames the content nicely.

My facilitator helped me there. I was having major problems with the header which I originally designed for letterhead. She was critical of it and told me to make it “more dynamic.” I downloaded three stock photos and made a collage out of them. I know that horizontal lines can give an impression of movement, so I used Photoshop to cut a curve out of the bottom of the collage with the red line along the curve. I'm glad it works.


The company names has nice contrast, though I wonder if it would be better placed above the image. It might work better as the first thing someone sees to better brand the site.

I tried placing the logo on the upper left of the collage, but it obscures the woman's face. If I place it above the collage, then I'm left with a white band of negative space to the right of the logo. I think it would throw the composition off balance there.


I also wonder if a color other than black would work better as the background color. It does fit well visually where it is though.

I didn't design the logo, Steve. The logo you see is the Experience Works logo. For some reason they don't use the logo on their website. I had to copy that logo from their printed materials.


I'm not crazy about the boxes on the left. The border is too thick for my taste and the color doesn't seem to fit with the image at the top. A stronger alignment might work better than the centered text too.

I “plagiarized” a bit and took those boxes more or less directly from their website. I wanted this page comp to reflect the design of their web pages. I agree about the alignment and prefer left-alignment, generally.


Overall it's a good job.

I'm almost disappointed to know you feel that way, Steve. I usually go with what my facilitator tells me to do because I don't want to flunk. In the “real world,” I think I might be a bit more assertive with clients if they want something that looks gosh-awful.

Thanks for the feedback.

Jagella

[Jagella]

I would agree with vangogh. Also the color scheme doesnt seem all that good. It seems like random colored elements strewn all over the site.

Here's the actual site (http://www.experienceworks.org/site/PageServer?pagename=homepage). Did I mess up, or does the color problem originate on the website?

Thanks!

Jagella

[Jagella]

I would choose 2 or 3 colors and then harmonize them together.

Steve, did you know that Illustrator CS3 has a color harmony feature? The Color Guide panel provides some “Harmony Rules” you can choose from based on a hue you wish to use. Once you select a Harmony Rule, you can save it to the swatch panel. You then apply the hues to your work using the Live Paint Bucket tool. It takes a while to get used to, but it can be very handy once you get the hang of it.

Thanks for the feedback.

Jagella

[vangogh]

Thanks for the link Joe. I had meant if your design was online, but it's interesting to compare your design to the current site. I do like your design better.


horizontal lines can give an impression of movement

I'd say horizontal lines are more about conveying stability. Think horizon. It's always there (ok maybe not when there's a dense fog out). Curves offer the sense of motion (I think that's what you meant to say.) Diagonals also give a sense of movement or action.

With moving the logo up I meant above the image. I think you can still do something with that band or space at the top to put the balance back. Maybe the search box or tag line. Even contact info could help with the balance. The navigation could also be up in that space.

There are definitely ways to move the logo to the top and still achieve a harmonious design. What happens for me now is my eye starts with the image and follows the curve down into the content. The logo isn't the first thing I see, but I think it should be.

Understand about the logo. That's typical in the real world too where you have to work with an existing logo. And now I see where those boxes came from. I'm not crazy about them on the current site either.


I'm almost disappointed to know you feel that way, Steve. I usually go with what my facilitator tells me to do because I don't want to flunk. In the “real world,” I think I might be a bit more assertive with clients if they want something that looks gosh-awful.

Funny. I don't think your design is awful though. It could be improved, but it's far from awful. I do understand having to do things the way your facilitator wants. Part of your design goal while in school will always be to please your facilitator who's really your client.

[Harold Mansfield]

The one thing that I was immediately drawn to and looked completely out of place were the boxes They look completely out of place for the rest of the site, and a lot less professional.

Also the search box is out of whack, covering the text and the words "site search" are far above the actual box (in FF), and the photo of the mature gentleman in the header...he looks lonely. that may come off better if it were a smiling group photo.
Other than those things the site looks O.K., it's probably 3 or 4 changes away from looking completely professional.

[Business Attorney]

I think the boxes on the left really detract from your design. The color and the thick border, previously mentioned, are a big part of the problem with the boxes but I think the lack of design within the boxes is equally significant.

I'm not a designer but I would think something along these lines would work better. Plus, as I learned from another thread, the call to action should be stronger.

[Jagella]

...it's interesting to compare your design to the current site. I do like your design better.

That's what I want to hear! I think their site is kind of bland. They obviously need me to spruce it up. ;)


I'd say horizontal lines are more about conveying stability.

That's right, Steve. I meant to say diagonal lines lend a sense of instability or motion.


With moving the logo up I meant above the image. I think you can still do something with that band or space at the top to put the balance back. Maybe the search box or tag line. Even contact info could help with the balance. The navigation could also be up in that space.

Hmmm. Yes, you have some good ideas, Steve. Like I said, I had originally conceived this design for letterhead. One of the course outcomes is for us to learn how to create designs that can be used both in print and online. If I were to do it again, I'd brainstorm ideas that could work both ways rather than try to place the print design onto a web page as an afterthought.


Funny. I don't think your design is awful though. It could be improved, but it's far from awful.

Well, I was referring to a hypothetical situation in which I am asked to use a design that's unattractive.


I do understand having to do things the way your facilitator wants. Part of your design goal while in school will always be to please your facilitator who's really your client.

I did openly disagree with one of my facilitators and lived to regret it. She took some points off of my grade. It didn't hurt my score very much, but I got the message. Seriously, facilitators can be tough. One of them phoned me one day and reprimanded me for “talking down” to the other students. I didn't think I did anything wrong and was just trying to be helpful, but I apologized to the other student anyway just to be diplomatic. The road to hell is paved with good intentions, as they say.

If there's one lesson I think I've learned about design, it's to check a lot of work of other designers before I start to come up with my own ideas. It's a really good way to start my concept development. If I just try my own ideas, I've found they end up looking bland and uninspired.

Jagella

[Dan Furman]

Nice work Joe. A few thoughts:

Ok, first the bad: Yea, another "nay" on the boxes. They look.... like a "personal home page" or something. Maybe it's the colors? Same with the tagline ("Would you...") That's not a great color.

Now the good: REALLY nice job on the curve, the pic, the links, and the copy. The only problem I have with the copy is the company name should be in another color (that's because I initially want to read "experience works" as a noun and a verb, not as a company name - this is common for company names like that - CAP both first letters, and put it bolded in another color)

[vangogh]

One of the course outcomes is for us to learn how to create designs that can be used both in print and online.

When you're creating a design that will meant for different media don't fell like it has to be exactly the same. All you really need to do is repeat a few elements and convey the same message. For example in this case if you used the same logo, color, and repeated the curve you'd have enough to tie letterhead, business cards, etc. to the website.

[Jagella]

Nice work Joe. A few thoughts: Ok, first the bad: Yea, another "nay" on the boxes. They look.... like a "personal home page" or something. Maybe it's the colors? Same with the tagline ("Would you...") That's not a great color.

My problem with the box is that it uses more space than it might. Generally, links should be unobtrusive and low on the visual hierarchy.


Now the good: REALLY nice job on the curve, the pic, the links, and the copy. The only problem I have with the copy is the company name should be in another color (that's because I initially want to read "experience works" as a noun and a verb, not as a company name - this is common for company names like that - CAP both first letters, and put it bolded in another color)

The lower-case w on the name of the organization is a typo. Bold and color on the name is also a good idea.

Thanks, Dan,

Jagella

[Jagella]

When you're creating a design that will meant for different media don't fell like it has to be exactly the same. All you really need to do is repeat a few elements and convey the same message. For example in this case if you used the same logo, color, and repeated the curve you'd have enough to tie letterhead, business cards, etc. to the website.

Thanks, Steve, but as a personal preference I think I will plan designs for all means of output. One issue, for instance, is that of orientation. Internet and on-screen graphics are often in landscape orientation whereas printed documents are often in portrait orientation. I originally created the collage for use on letterhead. When I resized the collage to make it extend to the width of the web-page comp, I realized that it takes up a lot of space vertically as well as horizontally. The result, like you mentioned, is that the links may need to be seen by scrolling. Now, I can always try to find solutions to the problem by going back to the drawing board, but I think it would be more efficient to create a collage that can be easily used on both letterhead and the Web. I might have added another picture or two to the collage making its aspect ratio greater in width and lower in height.

But like I said, I think approaches to concept development are a matter of personal preference.

Jagella

[vangogh]

Joe I'm sure where you get that I was saying you shouldn't design for all means of output. All I'm saying is the different means of output don't need to look exactly alike. In fact if they do look exactly alike it's a pretty bad job.

You mentioned the idea that your reason for not wanting to place the logo above the image is that it wouldn't work in print. That image wouldn't work in print and shouldn't be on things like letterhead or a business card.

What I'm saying is when you're designing for both print and the web you're not looking to create the same design for both. You're looking to find some common elements to repeat across all.

[SteveC]

To be blunt, the design is terrible... others here may wrap it up nicely but I’m not known for that, so let’s be blunt and give you some good honest feedback.


The overall design is terrible; it creates a amateurish almost untrustworthy impression.
The three images in the band at the top have just been thrown in there, they are not blended together so that they flow into each other... they simply have been thrown in there.
The red band has jagged edges... and is simply a red line, if you want to create this effect... make sure it is not jagged and work the edges more... maybe even defining them a little with a black line... either way at the moment it simply looks like a red line thrown there...
Top navigation... there is no top level navigation, how are people expected to get around the website... how about you put it under the red line... use a different color button or such and make the red feature your navigation, element.
The rest of the page just looks like it has been thrown together in around ten minutes... the information is not presented professionally and is more of a turn off than a turn on.


Just my opinion of course... and to help, may I suggest that you start looking at fantastic ground breaking websites and advertisements, etc... try to figure out what they are doing right and why... and then try to emulate this in your own designs. Making it as a designer isn’t easy, however if you don’t develop your eye and know what works and what doesn’t then you’ll make it...

[Jagella]

To be blunt, the design is terrible...

Yes, it's Steve C all right!


The three images in the band at the top have just been thrown in there, they are not blended together so that they flow into each other... they simply have been thrown in there.

Hmmm. That's an interesting thought. I must admit that I haven't explored blending images together in Photoshop. I'll have to try it.

Anyway, like I mentioned to (the other) Steve, I'm well aware that the collage is not a good fit on the page. Also, the images on the left and right are a bit redundant. If I were to do it again, I'd try to use more of a variety of subjects on the collage.


The red band has jagged edges...

I'm glad you mentioned that because I noticed some jaggies in there too. I'll need to work more on aliasing techniques.


Top navigation... there is no top level navigation, how are people expected to get around the website...

I'm sorry if I didn't make clear that this page is essentially a stand alone page that only really needs to link to the contact form. This page is not a full blown website. It's just an online contact sheet linked to a form that the target audience might use in lieu of phoning Experience Works. In other words, there isn't much to link to. If it was a real web page, I would provide links to the Experience Works site on the logo and maybe a link on the collage. Once visitors arrive on the Experience Works site, they have the navigation for that site.


...the information is not presented professionally and is more of a turn off than a turn on.

I would need to contact Experience Works on that subject because what you see on the rest of the page is basically what I saw on their printed materials. If it's a turn off on this comp, then they may be turning off their prospects. Only the age 55+, unemployed people living in Williamsport, Pennsylvania can really answer that question.

Thanks for the feedback, Steve.

Jagella

[vangogh]

I'm sorry if I didn't make clear that this page is essentially a stand alone page that only really needs to link to the contact form.

Then why are there 7 links in the form of a navigation bar at the bottom of the page? And why do the two boxes on the left have calls to action asking for clicks. Clearly the page as designed is meant to link to more than a contact form.


I would need to contact Experience Works on that subject because what you see on the rest of the page is basically what I saw on their printed materials. If it's a turn off on this comp, then they may be turning off their prospects. Only the age 55+, unemployed people living in Williamsport, Pennsylvania can really answer that question.

I think SteveC is referring to the design around the information and not specifically the information itself. You also don't need to be a member of the target group to determine whether something works or not. You don't need to be 5 years old to know that copy requiring a dictionary to understand wouldn't work. Part of your job is to understand the market without necessarily being part of that market in order to present the information effectively.

[Jagella]

Then why are there 7 links in the form of a navigation bar at the bottom of the page? And why do the two boxes on the left have calls to action asking for clicks. Clearly the page as designed is meant to link to more than a contact form.

Part of my assignment was to make this page comp similar in design to the actual website. My facilitator essentially told me to make the changes you are asking about, and you know what I told you about contradicting facilitators. As they said at the Nuremberg trials: “I was just following orders.”

How much of a problem would you say the links at the bottom and left side of the page are? I would think that an prospective trainee might like to read the FAQs or the privacy policy. They might also like to make a donation.


Part of your job is to understand the market without necessarily being part of that market in order to present the information effectively.

I understand that, but it sure would help to actually talk to some people in the target audience.

Thanks for the feedback, Steve. Your comments are well taken.

Jagella

[vangogh]

How much of a problem would you say the links at the bottom and left side of the page are?

I think sitewide navigation is better placed at the top of the page than the bottom. Some people may never get to the bottom of the page and so may not see any navigation there. In this case you said the page was only supposed to link to a contact form. Then the other links shouldn't be there at all since the requirement is the page doesn't link to anything other than a contact form.

These links are understandably at the bottom of the page on the site since they aren't the main navigation. There is however a main navigation bar at the top on the site. The links probably don't belong on the page you designed.

[Jagella]

The links probably don't belong on the page you designed.

I'd say one of the differences in our approaches to design is that you make a point of including only essential elements while I often toss in extras that I hope might add to the visitor's experience.

Did I tell you I started reading A Call to Action? I've found it's good to discuss and debate these kinds of issues and then do some research to see what other designers might have to say. Might too many links prevent conversion? Personally, it would make no difference to me as long as I can get to the information I'm looking for, but that's just me.

Thanks again for your input.

Jagella

[vangogh]

Who says I only make a point of including essential elements? Between the two of us I think I'm more then expert when it comes to my approach to design.

Joe the links you added at the bottom of the page aren't an extra to add to the visitor's experience. This is the reason you gave for adding them to the page


Part of my assignment was to make this page comp similar in design to the actual website.

That wasn't a design choice to enhance user experience. You were attempting to make your page similar to the actual site.


Might too many links prevent conversion?

Yes. Every link presents an option to the visitor. If you want someone to take a singular action then all those links are providing options that go against your goal. There's a reason why a typical one page site selling a product has no navigation. It's to offer two options, buy or don't buy.

[Jagella]

Who says I only make a point of including essential elements?

I was making that assumption. I'm sorry if I assumed wrongly.


Between the two of us I think I'm more then expert when it comes to my approach to design.

I won't argue that one, Steve.


Yes. Every link presents an option to the visitor. If you want someone to take a singular action then all those links are providing options that go against your goal. There's a reason why a typical one page site selling a product has no navigation. It's to offer two options, buy or don't buy.

I've seen a lot of pages that include links that don't seem to be necessary to the purpose of the page. Would you say they're making the same mistake?

Getting back to the issue I raised on the OP, I can see that the Small Business Forum is significantly different from the Art Institute. It demonstrates that different groups of people can have substantially different viewpoints on what is or is not good design. That is, after all, what I wanted to know.

Experimentation in design, as in science, can be very revealing.

I think I will take some of what I've learned about design on this thread and post another comp that I hope will better reflect good web-design principles.

Thanks again, Steve. Your helpful insights and critiques are appreciated.

Jagella

[vangogh]

I've seen a lot of pages that include links that don't seem to be necessary to the purpose of the page. Would you say they're making the same mistake?

Not necessarily. Depends on the page and its purpose in the overall site. You can't automatically tell by looking at a page what its purpose is. Sometimes you can, but not always.

In general if a page is part of a site it should probably have a top level navigation on every page. Some pages might have a singular purpose in which case additional navigation could make it harder to achieve the goal of the page. My comments about the navigation being better left off the page are based on your comments that this was meant to be a special page that wasn't supposed to be connected to the site and existed only to get people to call or click through to the contact form. If that was the requirement for the page then there shouldn't be additional links. If this page is one among many on the site then it should include top level navigation preferable toward the top of the page to make it visible without scrolling.

[Jagella]

Thanks, Steve. I'm back to the drawing board.

Jagella