Sometimes one of the best ways to learn how to build a great Web page is to put something up and then ask for feedback. patelewis requested feedback on his site "Foxfire Studio Inc." in the Web Design Forum. He says:
had bought a book on html, and built my site, then wanted a little pizzaz, So I bought a Flash program and started to edit the site. I would appreciate some feedback on it, and some advice from more experienced webmasters.
My Advice for Patelewis
I like the colors of this site a lot - I'm partial to oranges and browns, and these match the fox image well. Interestingly, the yellow text on brown (red?) aren't as hard on my eyes as I might have expected - but I suspect if there were more text on the page, it would begin to bother me. Did you draw the fox picture yourself? It's nice, but you should provide credit for it somewhere on the page.
There are a number of things I find wrong with this page:
- The title flash image is too big. 1234px is very wide, and the portion that isn't displaying on the page is just background. While it's a pretty picture, it's too wide for most browsers. I recommend designing pages for 800px wide browser windows - it creates a good size for reading text, and since most people on larger monitors don't maximize, it's still easy for them to read.
- Don't use Flash for navigation. Your navigation is critical to your Web site, but using Flash means that some people won't see it, and others won't like it when they do see it. Keep your navigation simple. If you must use Flash for your header, use it only for the header graphic, not for the navigation below it. Another thing about your navigation - you should keep it consistent from page to page. On one page I clicked on, the navigation switched from horizontal to vertical. This will confuse your readers, or at best be jarring.
- Create a good title and use it in your title tag. You're clearly thinking a little about SEO, because you've got keywords and description in your meta data, but then your title is "index.swf", which completely negates the value of your meta data. The title tag is one of the most useful tags on your Web page for search engine optimization - use it effectively.
- Validate your HTML. You have some incorrect tags (such as </br>) and non-existent tags (such as <text>) in your HTML which could cause problems.
- Learn CSS. Your embedded Flash object uses CSS, but then you use deprecated tags and attributes like <font> and align to do things that would be better done with CSS.
- Get rid of all the extraneous line breaks. If you want your paragraphs to be a specific width, then you should use CSS to define that width, and not use <br/> tags to break up the text. It's much easier to read text if it flows from line to line.
- Add in headlines to define your text. This will help with SEO as well as make the text easier to scan. On your sub-pages, I would use an <h2> to define the page name, rather than changing the site banner. When you change the banner, you lose the consistency of the entire site.
- Review your page size. People don't like to wait for things to download - and you should be sure that your pictures and your Flash banner do not make your page take forever to download. I recommend creating pages that are no more than 30K including all HTML, CSS, JavaScript, and images/multimedia. Your page is around 270KB, which will take a long time to load on a slower connection.
Your Turn to Critique
How would you rate this page? What do you like? What would you recommend changing? Let patelewis know in the forum or comment on this blog post.
Do You Want Your Site Considered for the Web Design Clinic?
There are two ways you can have your site reviewed by the readers at Web Design @ About.com:
- Post a request in the Site Review Requests folder in the Web Design forum. This is the best way to get feedback, as you'll get responses from other Web designers in the forum, and selected posts will be chosen for the Web Design Clinic.
- Submit your site to the Web Design Design Gallery and check the "solicit critiques" checkbox on the form. Pages submitted there will be reviewed by the About.com Guide to Web Design, Jennifer Kyrnin, and may be chosen for the Web Design Clinic.
patelewis, what I might do is take the Flash out of the header and use Flash on your galleries. That, to me, would be using Flash a bit more effectively while not slowing down the slower viewers too much.
Bob
The criticism on this site is often very cushy. It’s great being nice to people but sometimes people need a good kick to make something great.
I personally don’t like anything about the design of this site, it’s exactly what I would expect from someone who’s never made a web site as a first attempt. The colours are awful, fonts are awful. In fact the only redeeming thing is the fox, it’s quite a good drawing.
If your actually seriously considering using this site for your “studio” then learn from all your mistakes and go back to the drawing board. With each attempt you will get better, I guarantee it.
One more thing, from what I understand Pat is an illustrator? Use that, get advice from her about colours and art techniques and apply them to your web design.
I have to agree here with Tim to a degree….this is a studio handling designers. The header and the fox are great, the colors are ok, the font is horrible and so is the grammar. You should re-read what you write before posting it (especially for comment). Your flash is way too fast, you cannot view the image before it changes, and I’d leave it for your gallery, not your first page. Your first page should be short, sweet, and quick to load or the viewer will move on.
Try centering your text on the front page, use a tad bit more text (fluff) and sell whatever it is you want people to go view. When doing something artsy, I tend to use verdana or trebuchet as my text, not quite as blocky as aerial, but clean and easy to read.
Good luck, let us know when the next version is up.
Well, I’m surprised you think that one paragraph of mostly positive comments followed by 7 paragraphs of things to fix is “cushy”. I do think it’s important to tell people what they are doing well, that’s not cushy, that’s just giving them something positive. All negative feedback is often completely ignored – as the listener gets defensive and upset long before you get to the end of the litany of “mistakes”. Plus, Patelewis indicated in the Forum that s/he thinks of himself as a beginner. Expecting a beginner to know everything about design and development is unrealistic and a bad way to criticize. After all, we all started out with basic Web pages, no one turned out a masterpiece on their first or second try.
Also, since this is a Design Clinic, the idea is for me to suggest some things that could be fixed and for others to suggest additional or other things. My goal is not to list everything possible that could be wrong with a site, but open it up for discussion.
For more on how to give good criticism of Web pages that is received and acted upon (rather than ignored as being too harsh or mean) you might want to read my article on Web Criticism. There you’ll see some of my philosophy on critiquing Web pages.
I just found your first paragraph far to cushy, the rest was brilliant but if you honestly believe that site looks nice then fine.
I wasn’t trying to say your criticism is rubbish either just if I read that back when I started I’d think “Cool, people actually like the way it looks. All I need is to fix a few things.” reality is though it looks horrid and there is no point misleading people just to spare feelings.
It’s a good start but really should be marked up as a draft, nothing more.
But that’s just my opinion
Tim: Well, I did say that I liked the colors, and I do like them. If that makes the author think “cool she likes the colors, I just have to fix a few things” then they have received my point. I don’t agree with you that the site “looks horrid”. It’s fine that you have that opinion, but it’s not mine. I wasn’t saying I liked the colors to mislead anyone or “spare feelings”.
I just don’t think that it serves any useful purpose to simply trash on a design – especially with vague statements like “It looks horrid”. What is horrid about it? What can the author do to make it less horrid? Making the statement “the site looks horrid” is not helpful at all. Making the statement “I don’t like the color scheme” or “I find the yellow on red difficult to read” is a little more actionable by the author. And finding something nice to say, even if it’s only “I can see you worked hard on this site” will result in a more favorable response to all your negative comments.
At any rate, thanks for following up. I’m sure that Patelewis appreciates all the feedback, good and bad.
Okay Jennifer I see your point, I was maybe a little too harsh but at the time I felt someone needed to give the guy a bit of a kick but take on board both our comments respectively.
Like Jennifer, I like the color palate. I do think you need a couple more variations on the colors you do have.
Typography is a major part of web design, even if some may not think so. Take some inspiration from the experts on web design. Dave Shea, Jeremy Keith, Paul Boag, Roger Johansson, and others.
You’ll notice that there are no “fancy” (or as I like to say, gaudy) fonts, especially in the title. This is because simple design is simply the best.
When it comes to web design, Flash should only be used for necessary situations. It should never be used as “eye candy.” Flash (on the web) is great for streaming video, specialized applications, and that’s pretty much it. Trust me, users hate needless animations.
Also, read up on grid-based approaches to layout.
First, the content is amazing. Pat is definitely a talented artist, and Steve is a great jewelcrafter. Presenting their talents in the best light possible will benefit all. That being said, here is what I would say about the design. Please bear in mind that I consider myself intermediate in web design. I’m not a beginner, but I do still have lots to learn.
I would agree that it would be best to lose the flash in the header, especially the navigation.
1) I don’t see anything wrong with the flash slideshow on the front page. I would tweak it a bit, so that the individual images last a bit longer, make it a bit smaller, and maybe even convert it into a link directly to the gallery pages. It draws your interest in to what the site is all about… selling some stuff and hilighting the artist’s work.
2) It may help to draw out the navigational flow you desire for the site on paper. I use a flow chart type drawing when I first begin designing a site. That way, I can look at and identify the best flow. Just draw a rectangle, label it HOME and then branch out your pages and subpages from there, then follow that flow chart when building your pages. Ease of navigation and load time are the two things I notice most often in pages I visit.
I think you have a great beginning. An excellent foundation on which to build a dynamic and beautiful site. Let the artwork be your inspiration and the rest will come with time, as you learn more about building web pages.
Title in the title bar should not be the name of a flash file “index.swf”
Page design should be consistant from page to page. Inconsistant design makes users wonder if they are on the same web site. It also shows that whoever designed it is an amateur. Example. Your navigation bar Is across the top, then all pages should have the navigation bar across the top.
Using Flash for navigation isn’t a good idea. Many people don’t have, or will not install the Flash plugin.
You should use CSS for styling.
You don’t need a banner that wide. There are still alot of people who use smaller screen resolutions. i.e 800×600, 1024×768. Users don’t like to scroll horizontally. Design for 800×600 screen resolutions.
just came across this critique… what do you all think of the site as it is now?