Activities 5, 6 & 7

Activity 5 & 6

Activity 7

4. Barre Army Navy

I did the five-second test with my husband on this website. We both came up with the same fatal flaws, things that make this home page absolutely atrocious.

First of all, the header is poorly organized (discussed in The Non-Designer’s Design Book (3^rd Edition) by Robin Williams) and suffers from proximity (chapter two) and alignment (chapter three) issues. First, the title of the page doesn’t stand out because the phone number is the same size, and because the phone number is closer to the central area of the page, when the eyes naturally fall when first loading a page, both of us read the phone number BEFORE the page title, leading to confusion and a feeling of being “lost”. The second thing noticed was not the navigation or a focal point, but the fact that there is an overwhelming amount of text and links filling the page, with relatively minimal organization. As my husband aptly put it, “I see a whole bunch of crap that I don’t feel like reading.” That’s exactly how I felt, too – overwhelmed and instantly turned-off from this page.

This page would very much benefit from some organizational help, and perhaps having the text and links split onto separate pages that could be incorporated into the front page – for instance, instead of listing all of camouflage items in the right column, there could be a category or a page for camouflage items, which could be linked with an attractive image and text advertising the presence of camouflage items on a page. Same for the Fall/Winter Military clothing, the clothing of the brand Propper, et cetera. Splitting up all of that content and making it easy to navigate to the category you would like, and find what you are looking for – this is something that would benefit this site greatly.

5a. Atlanta Cutlery Corp.

Now here is a website that is well-organized, and has intent. Upon visiting the website, my eye is drawn to the focal point of the page, which is the changing image at the center. The navigation contains important items, such as well-categorized products on the sidebar (and organized in two separate ways that people may wish to browse them by, at that), and more simplified navigation is shown across the top. The right-hand side shows a cart, signifying that you can purchase items here, and you have no doubt from the beginning as to what sort of item it is that is being sold. There is a search box, though it doesn’t catch the eye as easily. It is, however, easy to find if you’re looking for it. The right side also shows best-sellers, which alerts a potential customer as to what is popular, and may grab their eye if they happen to also be looking for those popular items. And as you scroll down, you begin to see secondary content, such as other popular items and services available to customers. Finally, there is a secondary navigation including a site map and a FAQ, which doesn’t detract from the page, but lends itself to availability should someone be looking for it. The copyright and legal garble appears in the same area, in much smaller text, so that it doesn’t attract the eye unless one is looking for it. All in all, this home page seems effective – it speaks clearly to its intended audience, is easy to decipher and navigate, and is easy on the eyes. Well done.

5b. Martial Arts Mart

This is another example of a well-planned website. Again, there is a focal point that immediately informs you of the intent of this website (if the name didn’t give it away enough). This focal point, as in the first site, alerts you to special deals and shows you what they have to offer you. This page’s shopping cart is not as obvious as the other website, but it makes up for it by having the search bar more accessible than the last page – and as with the search bar last time, the shopping cart is not hard to find if you’re looking for it. Again, the left side has extensive navigation displayed in an organized manner, with simplified navigation across the top. Secondary content such as featured items and best-sellers begin to show up below the focal point, and catch the eye as it begins to drift down the page. The use of simple, explanatory images enhances the ability to scan the page for specific items or types of items. As you scroll down, you can also see additional options for customers, similar to the first website – services such as mailing lists and referral programs. And finally, scrolling all the way down, you can navigate much more specifically. This navigation doesn’t detract from the effect of the site because it’s so far down on the page – if you’ve scrolled to this point, you may very well be looking for exactly this sort of thing. And finally, at the very end, is the text-only navigation line, which includes items not shown above, such as a site map, privacy policy, and special information and forms – items that you may want a shortcut to. Below this is the credits/copyright/legal mumbo-jumbo, again in smaller text, so you will see it if you’re looking for it, but it won’t catch the eye if you’re not. Overall good, clearly laid-out and easily navigated. Kudos.

6a. Tally-Ho Uniforms

First reaction: “What. The crap. Is this?!” Flashing images, a background that severely interferes with readability further down the page, flashing text, confusing organization, too much clip-art, too much movement… I could go on forever. This is a classic example of what not to do when designing a website. They clearly tried to appeal to the “ooh, shiny” instinct of humans, but it really just gives me a migraine. There’s no continuity, no cohesive feeling. I find myself lost in the mess of bad clip-art and spinning word images. They have all of the elements needed, but they’re not in any particular order, and it’s hard to find what you’re looking for. I can hardly recommend how to make it better, except “kill it all and start from scratch”. Use simple colours, fewer images, no clip-art. Be consistent with font colours and sizes, and organize, organize, organize! Do NOT use transparent block elements over image backgrounds, EVER – your readability just failed. And please, please, PLEASE – no FLASHING images or texts. Your website will be left behind in the dust. Besides being unappealing, this website makes them look incredibly unprofessional – I wouldn’t buy from them. Final say: just scrap it and start over, guys. Really.

6b. Control Driving Skills

Okay, the stupid cloud background made sense for FLIGHT UNIFORMS, but.. for a driving school? This background is more irritating than the first, even, because it’s not a fixed background – it scrolls! This is distracting and headache inducing all by itself. And the use of the huge red asterisks leads to the page stretching, so it scrolls to double its width. And I’m not even getting started. Abuse of marquees, a random and relatively hard-to-read weather feature (which attracts the eye more than the logo, bad idea), animated images (what does your country’s flag have to do with driving, guys?), horribly over-done bevel-edge tables, and the use of HUGE text that is coloured in no particular order – bad, worse, worst. From an aesthetic standpoint, this page is dead and gone. But functionality has failed, too – why is the navigation at the BOTTOM of the page and nowhere else? Horrible choice. And there are too many irrelevant additions, such as the aforementioned flag, a Goodyear tire image (yes, I know cars use tires, but how does that effect ability to drive?) and the Amber Alert marquees. It’s great that they want to stop child abductions and all, but it’s not relevant to the website, and should certainly not be displayed so prominently – like BEFORE the navigation! No, no, no! I hate to say it, but I’m going to give the same advice as before – scrap it and try again. Use fewer images (and relevant ones) and skip the irrelevant widget-type items (or if you must have them, organize them at the bottom or on a page specifically for things you support), no crazy background, no excessive bevels, and ORGANIZE. This website is so out of sorts, I can’t find much of ANYTHING. Organize your content so that it makes sense and is in a logical order – that includes PROMINENT navigation. And above and beyond all, make it clear, simple and cohesive. Otherwise, this page is wasted.

So. There’s that. And I believe that 1440 is greater than 200 words – sorry if I typed your eyes off. ;D

Also, a recently released project I worked on with the lovely James O’Brien (aka Cimmerian) – RantMedia. I thought an example of organization was in order. :]]

♥ Britagne

Update!

I just thought I would post these links, keep you all up to date…

So here’s my page at FTTC.. cool, right?
And I’m on Facebook… and here’s my Twitter, too…
And I’ve done some projects… but the website is down. :[
Will ETA them when it’s up again. x]

Enjoy! ♥

Chapter 3: Test Yourself

(p. 48, Learning Web Design)

Describe how each of these factors affect your role as a web designer:

1. The variety of browsers in use
Each browser has its own way of rendering code and images. Because of this, designers need to test their designs in different browsers, and should generally be accepting of small margins of discrepancy between displays in different browsers. But it’s still important to test the functionality and overall design effect in different browsers, so that you know that your design is effective and accessible.

2. Macs, PCs and Unix/Linux systems
Much like with browsers, different operating systems display websites differently. Operating systems come with a variety of font options, and so choosing a specific font may lead to that font not being available on another operating system. The OS in use may also effect whether or not users have plugins for multimedia, so essential data should not be displayed in a way that requires plugins to view them. Also, Macs tend to render colours lighter than other OS’s do, so designing in Mac means your colours may be darker in Windows or *nix systems, whereas designing on a Windows or *nix system may lead to colours seeming washed out on a Mac system.

3. Each user’s browser preferences.
Users can override your CSS, images and multimedia in their browser, so you shouldn’t put important text on images; it might make everything look neater, but people may miss out on the functionality. The same goes for displaying information using java or JavaScript. Anything you can do with CSS – colours, fonts, sizes – can also be overridden by the user, so your page may not look nearly as good with these custom settings. Because many people use custom colours and fonts for accessibility reasons, making sure your site will still function reasonably with changes to colour or font, or lack of multimedia or image support, is important.

4. Resizable browser windows
Since browser windows can be resized, you don’t actually know how big your canvas is. This is why liquid layouts are important, because they resize based on the window size.

5. Modem connections
Using a large number of images or other slow-loading media can limit accessibility to those on slower connection speeds. Images used should be minimal, and they should be optimized for the web so that they are smaller in size and thus easier to load.

6. Users with assistive devices
Since people with disabilities may be using special devices to access your website, you should make sure that it’s laid out logically and that it is accessible to special means of navigation. There are standards for web accessibility that some websites have to follow. It’s a good idea to keep those in mind.

Chapter 2: Test Yourself

(p. 28, Learning Web Design)

1. HTML → c) The Markup language used for all web documents.
2. W3C → i) The organization that monitors web technologies.
3. CERN → g) Particle physics lab where the Web was born.
4. HTTP → h) protocol for transferring web documents on the Internet.
5. IP → f) Internet Protocol.
6. URL → b) The location of a web document or resource.
7. NCSA → a) Home of Mosaic, the first graphical browser.
8. DNS → d) Matches domain names with numeric IP addresses.
9. ASCII → e) A limited set of letters, numbers and symbols.

Chapter 1: Test Yourself

(p. 18, Learning Web Design)

1. Match these web professionals with the final product they might be responsible for producing.
A. Graphic Designer → Photoshop Page Sketch
B. Production Department → (X)HTML and CSS documents
C. Information Designer → Site Diagram
D. Web Programmer → PHP Scripts

2. What does the W3C do?
The World Wide Web Consortium, or W3C, is a group that was founded in 1994 by the inventor of the Web, Tim Berners-Lee. The W3C is the authority on web technology, from HTTP protocol to the development of web languages such as (X)HTML and CSS. They can be found at http://www.w3.org.

3. Match the web technology with its appropriate task:
A. HTML and XHTML → Identifies text as a second-level heading.
B. CSS → Makes all second-level headings blue.
C. JavaScript → Checks a form field for a valid entry.
D. Ruby on Rails → Creates a custom server-side web application.
E. XML → Defines a new markup language for sharing financial information.

4. What is the difference between frontend and backend web development?
Frontend design is the design of the content you see displayed in your browser. It relates to the users experience when accessing a website, and includes graphic design, interface design, and site production, as well as part of the information design process.
On the other hand, backend development refers to scripts and applications that run in the background on the server. Backend development, which includes programs to process form input, store information in databases and bring it up when requested, and running content management systems (CMS), is not seen by the user, but creates the functionality of dynamic or interactive web pages. Perl, CGI, PHP, ASP, JSP, Ruby on Rails and Java are all used for backend development.

5. What’s the difference between a web-authoring program and an HTML-editing tool?
Web-authoring programs are programs that allow you to design your website in a WYSIWYG (what you see is what you get) environment. In these programs, you don’t have to type lots of (X)HTML or CSS codes, and the program functions much like a desktop publisher, except that it gives you the files for your work (that is, (X)HTML, CSS and image files you’ve used in your design) to upload. When uploaded, they will look the same on the browser (theoretically) as they did in the web-authoring program. Dreamweaver is a good example.
HTML editors, on the other hand, do not have a WYSIWYG interface. They are simple text editors that are designed to speed up the process of writing code by hand, and are preferred by many designers. They may have syntax highlighting, shortcuts, or even templates built in for you to use. TextPad (Win), Adobe HomeSite (Win) and BBEdit (Mac) are examples of these. I personally use CrimsonEditor (Win) and gedit (Linux).

1-1: Taking Stock

(Exercise 1-1, p. 16, Learning Web Design)

What are your web design goals? To become a professional web designer? To make personal websites only?
I plan to become a professional web designer, although I also have the full intention of making my own websites. I would most like to work freelance or as a contract designer, not actually become part of a corporation or business with preexisting framework and employees. I would much rather be hired on for a task or set of tasks, and move on when my work there is done. I also prefer to telecommute.

Which aspects of web design interest you the most?
I love making layouts, and have made a fair number of (X)HTML and CSS layouts, some better than others, since I began in 2001. I very much wish to refine these skills, and pick up new skills in codes such as PHP and JavaScript, since those skills will come in handy and I have very minimal knowledge of them as it stands. I would like to become educated in using SQL and databases, which I have only dabbled in. I also intend to learn C and C++ eventually, but that is rather separate from my current goals, which include completing my course at Francis-Tuttle and, in the process, refining my (X)HTML and CSS skills, and learning PHP, JavaScript, SQL, XML, Ajax, etc.

What current skills to you have that will be useful in creating web pages?
I have pretty good (X)HTML and CSS skills, and have minimal knowledge in PHP and JavaScript. I also know a bit about using FTP, and I’ve played with SQL on the rare occasion, usually working with forums.

Which skills will you need to brush up on?
I definitely could use an update on all of the coding I already know, since the standards have changed since I started teaching myself, and I’ve not kept up to date on everything (that’s (X)HTML and CSS). I also need to learn the codes that I don’t know or don’t know well (everything else).

Which hardware and tools do you already have for web design?
A computer, obviously. I have Adobe CS4 Master Collection, and I use Crimson Editor for coding because it has a syntax highlighter, which I find to be very useful.

Which tools do you need to buy? Which tools would you like to buy eventually?
I would eventually like to get a better computer so that I can dual-boot and check designs on multiple OS’s.

August Blog Post: Choices

(Since I have no idea how I’m actually supposed to be doing this, I’m just going to take a shot in the dark.)

As a web designer, there are many choices that we have to make from day to day. These include colour schemes, website layouts, and use of coding. Everything we code, we must make a choice about, and those choices affect the users of our websites. Thus, the choices we make are very important, as they will affect the usability and overall function of our website, both technically and aesthetically.

The first choice we must make when designing is, “Who is this website for?” What is the target audience? Who do we want to look at the website, and be taken in by it? A website designed for grade-school girls is apt to be different than one designed for middle-aged men. Another way of looking at this question is, “What is the theme of this website?” A princess-themed website is apt to look different than a football-themed website (or so we might hope! ;D) and thus we must make decisions as to what will accomplish the intended effect. For instance, choosing pink and purple for the colour theme may help accomplish the effect of the footb– I mean, princess website. (I have too much fun with this.)

The next question should be applied to each element of our design – “What does it do? How well does it do it?” Each element should have an intended function, and should function optimally as such. This doesn’t just apply to making sure all of your links go to the right place, or that the login screen actually logs the user in. Visual elements have functions as well, and are used to communicate information and intention. And we, as web designers, must choose elements that will have the most functionality in our website. An image of a tiara may be used to influence the user’s overall feeling of being a quarte– princess. (Gotcha again! ;D) So each choice we make, whether it be colours, images, fonts, layouts, or text – they must be made with intent.

Who does this website appeal to? How about this one? If you said “football fans” and “princesses” (although not necessarily in that order!) then you would be right. In each, elements are used that, while in themselves may seem arbitrary, come together to form a cohesive image of the intended audience. Somewhere, a web designer had to make decisions about each element included in these websites, elements that would correctly relay the information about intended audience and content.

Another way to look at choices, however, does not sit solely with the designer. Some websites, such as WordPress, Twitter and MySpace, leave many choices in the hands of the user. How is this effective or, in some cases, not so effective. For instance, WordPress allows you many layout choices, but you can scarcely modify them, with the thought of keeping things uniform, error-free and neat. Twitter allows slightly more choice, giving users the option to choose colours and backgrounds, and even upload their own backgrounds. This allows mix-and-match, and gives an overall more customized feel. MySpace, on the other hand, leaves the designing entirely up to the user. How many times have you seen a MySpace page with bad coding, leading to the page looking sloppy or, worse, being inaccessible. In my case, the answer is, “far too many.” Some might view this as being an error of the designer of MySpace – there are too many choices, and many users do not understand them. With that in mind, the layouts often get messed up.

So what choices should users get? It depends on the application. Many forums offer the ability to change between skins, so that the user can choose the one that they like the best. They cannot, however, make their own. But can a user have too many choices even in this scenario? Sometimes, choices can be overwhelming. A designer is often smart to give fewer choices, and choose the best of the designs to offer, than to give many choices that will only cause confusion and difficulty for the user. How can they possibly know which of the hundreds of skins to use? That’s a very time-consuming and energy-consuming choice, and as designers, we wish to make our users have a more comfortable experience by using the most accessible designs and the most effective layout of information. Overwhelming a user, whether it be with skin choices or too-busy designs, is defeating to this purpose, and should be avoided.

So what’s all of this boil down to? Make your choices carefully. The world of web design has many, many tools that are just waiting to be used – use them well and use your common sense. Believe it or not, your gut does have your back, so trust it.

DISCLAIMER: For all of the football fans, I was not implying that you’re all closet-princesses. For all non-football fans, I actually was. ;D

Orientation – Activity 7: Questions.

Which aspects of the web interest you most?
To be honest, the internet fascinates me to no end. I’m interested in everything to do with technology, particularly web design and graphic design. In relation to this course, I’m really interested in fine-tuning my current graphic and web design skills, which include proficiency in HTML, XHTML, CSS and Adobe Photoshop. I also hope to expand my knowledge of PHP and Javascript, and to learn XML and Ajax (which, if I’m not mistaken, is just using Javascript and XML together). I’m really excited to learn to use other Adobe products, and hopefully master the art of effective, minimalist coding. I also hope to learn more about social networking and advertising oneself in the design world.

Which aspects of the web interest you least?
I don’t think there are many things that I’m not interested in, really. Like I said, the internet and technology are fascinating, and I want to learn everything I possibly can.

What do you hope to gain from this course?
I think I pretty much covered that in the first question, no?

What is your biggest fear about this course?
That I won’t do well, especially in the social aspects. I have a hard time being very open, and sometimes it seems to alienate people or make them feel that I’m being cold towards them. I hope my classmates won’t think that I’m being cold or stand-offish towards them if I seem nervous.

What about this course most excites you?
Finally being back to school, and working towards my goals in a hands-on (you know what I mean!) way so that I can broaden my abilities and become overall more educated and effective as a designer.