Design beautiful websites with Fireworks October 25, 2007

http://www.adobe.com/designcenter/fireworks/articles/frwcs3_webdesign.html

This chapter has great tips for getting started on your design. I’ve found myself referencing it frequently.  Start out by researching the company and trying to get as much information as possible. Great tip that a meeting doesn’t have to take place in an office. Start out by sketching your layout design on paper.  Design a site that is both beautiful & functional. Navigation should be clearly visible on page.  Each page should look like it all belongs to one site.

The page should consist of the content & content block(container), a logo, navigation, footer, and whitespace.  He goes into the grid theory, which I later found out you don’t have to stick true to.  Grids work for print, but when you design for the web, making sure it is uniform and looks good will work. He goes into balance, symmetrical and asymmetrical, unity, ,proximity, repetition, emphasis, placement, continuance, isolation, contrast, and proportion.  All of these elements make a good design.

Having a morgue file is a great idea. That way you can reference it whenever you need an idea.  He also has some great ideas to mix up the navigation and placement of everything on the page.

The Best Faces for the Screen October 22, 2007

http://www.will-harris.com/typoscrn.htm

While he states using a 14-16 point type face won’t look unusually large, I have to disagree.  I think that size should be used for headers and subheaders.  I would stick to 12 pt. for body text, 14 at the most; or else it will look like your designing for the elderly. I understand the reasoning behind always using a sans-serif for at all times on the web, but it feels so wrong, coming from a print background. 

I had no idea about hinting before this; it is a process where by individual pixels of the screen are controlled when fonts are certain sizes.  He also states to us a typeface with a large x-height.  When the font has a larger x-height it gives you more pixels, more information, and more definition. It’s a good idea to have an x-height that’s one pixel larger than half the body size.  He also states extra tracking is a good idea (between characters).

Tips:  The bigger the better.  The simpler the better.  Don’t touch! (letters)  It’s great he gives a list of the fonts which work best on screen.

FOGE Homepage October 15, 2007

The following is my redesign for the FOGE homepage. The navigation all contains rollovers. Left navigation will rollover to a red, and the top navigation lights up like the “About Us” button is pictured.  The video play button is also a rollover. You can click on the thumbnail or link below to view my file.

or

http://bcts-potomac.aacc.edu/128b/19/foge/homepage.zip

Final Project October 15, 2007

I will be redesigning the website I do freelance for, Washington DC Building Trades. Right now I just manage the calendar and newsletters .  I’m in the process of redesigning the print newsletter for them, so I would like to present a redesign for their website along with it (starting in the new year).  They have mentioned before that they wanted the site redone, or not, they’re very casual about it; and they don’t know I’m taking this class. They want a new look and most of the content is out dated. The web address is http://dcbuildingtrades.com/.

8 Web Design Tactics to Help You When You’re Stuck October 9, 2007

http://www.seomoz.org/blog/web-design-tactics

These are some very useful tips to keep in mind when designing your site. With any project, I’ve always found it useful to sketch out your ideas on paper before going straight to an application.  It also makes sense to build the body of your website before trying to determine the title.  It’s also helpful to get ideas from sites that work.  If you like a particular website, there is a reason for that. Figure out why you like that site and make it work with yours, without copying. 

 Sometimes you do need to walk away. When things get frustrating, it’s best to take a break and come back when your not so stressed.

It’s also a good tip to not do the same type of design element over and over. This gets boring.  Although, I don’t think you should use every design element possible. This will make your site look like many different sites.

It’s always good to get other opinions. Maybe they can point out something you just can’t see, because you’ve been looking at the design for so long.

FOGE Recommendations October 9, 2007

This website has a lot going on. There is just so much involved, it seems to be very overwhelming. Not to mention the text is very small, making it difficult to read, and the white text on the black background isn’t very easy on the eyes, as well.  They should really weed out some of the text, it is a bit much.

 

The overall design is really small and compressed. It would be more effective if it was spread out, allowing the text to be larger and more visible. There could also be less drop links in the homepage. The links on the homepage could branch off into other pages, keeping the main navigation links more simple.  The actually links could stand out more, using a red button for example, and if there are drop down links, they should not be on a transparent background.  They should also divide up the navigation and have some links across the top.

 

The whole site is designed the same whether you are a child, volunteer/adult, or donating company. The “Kid’s Web Page” is fun, but as soon as you click a link, it takes you back to the original design. I’m not quite sure why the “Galaxy Ball” page is in a different format then the rest (there is no navigation).

 

I would also include some more pictures on the page. Throughout the site, the only ones they do have seem to be distorted.

http://bcts-potomac.aacc.edu/128b/19/week6/foge-recommendations.html

5 Principles to Design By October 8, 2007

http://bokardo.com/archives/five-principles-to-design-by/ 

1) Technology Serves Humans- If someone can’t find something on a web site, it is the web designer’s gault!

2) Design is not Art- Great Design is dependent upon the age in which it is made and the problem which it is meant to solve. Art is timeless.  Good Design is something that works well.

3) The Experience Belongs to the User- The designer is at the service of the user.

4) Great Design is Invisible- Bad design is easier to spot then good design. It is awkward, difficult, & complex.

5) Simplicity is the Ultimate Sophistication- Knowing what to keep & what to throw away… less is more!

http://www.smashingmagazine.com/2007/03/08/best-of-february-2007/

Fireworks Ch. 4 & 5 October 8, 2007

In these chapters we learned to add text, create shapes, and used different aspects of layers. The result is the example home page. I feel it is pretty easy to do. No problems!

Rollovers October 4, 2007

http://bcts-potomac.aacc.edu/128b/19/week6/rollover.html

I love rollovers! They really make your buttons stand out, so simple, yet so effective.

Webpages that Suck October 4, 2007

 http://www.webpagesthatsuck.com/10-worst-mystery-meat-navigation-sites-featured-on-web-pages-that-suck-in-2006.html

 Wow, he’s pretty harsh!  But, it is good to know ahead of time or have guidelines to follow when designing your website. You certainly don’t want yours to suck!

Mystery meat navigation- Wow, I can’t believe people would actually use links that you can’t find. You really want the most computer/Internet user- illiterate person to be able to navigate through your site! Lucky for me, this is most of the people who work for my company…. I’m an IT person to them!  So I have a lot of people to test my site on before I go live.

#9- Wow, that does suck! Come on people, use some graphics you actually wantto look at. It feels like a Power Point presentation, some of the links don’t work, & some don’t take you back to the home page.

#8- Not sure what is going on here.  I looked cool how the photos zoomed in, but then I was hunting for the way to get to any information & once there, I really didn’t want to read it. Wow, too much going on and it’s not clear how to navigate. Next…

#7- It looks cool, but who has the time to rollover all those pills to find what they are looking for. In this fast-pased world, you want users to be able to find what they are looking for quickly!

#6- Wow, those images are small!… and what exactly is it that I’m looking at?!… and after being click happy, I found that it continued to other images, with still no text!

#5- Why can’t I just click the words?! … Next!

#4- Please, just tell me where to click and what I’m clicking into. You really have to hunt and peck… and try to figure out how the heck to return to the other pages. The font is really small also, don’t really want to read it!

#3- I feel like I’m being hypnotized or it’s some kind of science project. Again, just tell me what I’m looking for!

#2- I really don’t understand what this website is all about. Very childish looking!

#1- Well this one has no words at all. What is it a website for?

What ever happened to less is more?!  It seems these designers are being what I will call as too designy! One word… Wow! Ok, so maybe I was harsh too.