airdobe @ wordpress

Just a journal for Web Design

DM1232 Week 5

Posted by airllustrator on May 22, 2009

Visit http://www.thisfashion.com.sg/ and make an
analysis by answering the following questions:

•How do you find this site? (in 3 words)
– Uninteresting
– Outdated
– Unprofessional

•Who do you think the site is created for?
– Potential customers of This Fashion
– Customers who already know about the shop and would like more information about it
– Online shoppers who are surfing the internet to look for good buys or clothes

•What are the good attributes of the site (in terms
of usability, aesthetic issues, etc)?

– None of the links are broken
– Information short and sweet and straight to the point
– Does not look cluttered with pictures or too much text/elements
– Clean design
– Fast page loading as the scripting is pretty simple and it is not too content loaded

•What are the bad attributes of the site?
– It lacks pictures or elements that will attract people to stick around or visit the site again.
– The color scheme is really dull, and unsuitable for the company’s image – clothing store that should be selling fashionable clothes.
– The layout is too boring and looks pretty unprofessionally done.
– Inconsistent element alignments
(‘Home’, ‘Outlets’ and ‘ ‘Gift Voucher pages all have center alignment
while ‘Services and ‘This Card’ have left alignment)

– Bad typography for information on outlets.
( Several numbers in the telephone numbers listed are emphasized (bold) or are set at a larger font size for no reason)
– Pictures are small, unclear and don’t really show anything of importance.
– There is no link back to ‘The Card’ after clicking the sub-link, ‘How to apply’
– It is unclear what they are selling
(Since there is no catalogs or images of clothing available in their outlets)
– ‘Contact Us’ link is missing on several pages (Eg. ‘Services’, ‘This Card’ and ‘Gift Voucher’)

Overall i think that the site really needs a makeover to really promote what they’re selling.

Here are some better examples of sites that have a better layout and/or are more interesting or professionally done:

http://www.nike.com.sg/v3/
http://www.adidas.com/sg/homepage.asp
http://www.minitoons.com/

Other bad examples:

http://www.77thstreet.com/
The colors of the grunge image behind the poll clashes with the white color of the text,
the main page is also too cluttered with images, and there is no reading hierarchy in the text.

http://www.giordano.com.sg/
Broken image link, link is hidden behind an image and cannot be clicked, broken links!

http://www.hangten.com.sg/index.html

That’s all! Toodles! 😀

Posted in Assessment | Tagged: , | Leave a Comment »

DM1232 Web Design Homework Week 3

Posted by airllustrator on May 8, 2009

Attached are the PDF files for Week 3’s blog homework. 🙂

The Website that I’m doing is : http://www.pa.gov.sg/seniors/index.html

https://airdobe.files.wordpress.com/2009/05/users_080332t-copy.pdf
https://airdobe.files.wordpress.com/2009/05/site_obj_080332t-copy.pdf\

used another way to upload it because i’ve encountered some problems. :{

Posted in Assessment | Leave a Comment »

DM1232 Week 2

Posted by airllustrator on May 1, 2009

  1. What is Browser-Safe Color Palette / Web-Safe Colors?
  2. Is it still relevant in today’s context? Why?
  3. What are the common fonts face found on PC & Mac?
  4. What is page loading time and how does it influence your
    design?
  5. Read about Web Design Process article and
    write what you think about it (at least 150 words)

1. It is a fixed color palette that will work well on most browsers. Out of the 256 colors available in Mac and PC, this palette only consists of 216 colors. The remaining 40 variable colors are eliminated so that the palette can be optimized for cross-browser use.

Browser-safe colors

Browser-safe colors

2. It depends.
The browser-safe color palette was ‘created’ a long time ago when computers ran on 8-bit, 256 color monitors. It was suggested as a web standard to ensure that all computers would display the colors correctly when it was running on a 256 color palette.

HOWEVER, the browser-safe color palette is no longer needed as the graphic cards available these days can display more than a million colors.

In the view of a designer,
this palette could be a good or a bad thing.
Working with the limited color choices may be a good decision if you are not confident at color picking or if you are just starting out at web designing.

On the other hand, colors on the palette are highly saturated and very, very limited – compared to what is available these days.
If using the palette does not bring justice to your design, or make it turn out looking like what it should be, then it would be a bad decision sticking to the browser-safe color palette. JUST PICK YOUR OWN COLORS! D:

One question would be, ‘who is your audience’?
The minority of people using old computers/monitors?
(of which you will have to compromise and stick to the palette)
Or, those with common graphic/video cards that can display a wide range of colors?

The choice is up to the designer of course, because the most important thing in the end, is to ensure the website that you have designed is pleasing to the eye.

There is no right or wrong or even relevance in today’s context.
If you want to use the palette, no one is stopping you. 😉

3. These are some common fonts found on both PC(Windows) and Mac:
— Left:PC — Right:Equivalent on Mac

  • Arial / Arial
  • Arial Black/ Arial black
  • Courier New / Courier New
  • Comic Sans MS / Comic Sans MS
  • Verdana / Verdana
  • Tahoma / Geneva
  • Trebuchet MS / Helvetica
  • Times New Roman / Times
  • Lucida Console / Monaco
  • Lucida Sans Unicode/ Lucida Grande
  • Georgia / Georgia
  • Impact / Impact

They are also known as “Browser-Safe Fonts”,
meaning they are viewable to everyone on the internet –
also because Macs & PCs have these fonts installed in their operating systems by default.

An important point to note, though, is that the fonts you can use for your website design are directly dependent on the fonts that are available on your visitor’s computer. If they do not have the fonts installed, then they will not be able to view exactly what you have intended for them to view when you used a particular font.

( That problem can be overcome by saving your font as an image file and then posting it onto your website as an image.) … at least, that is what i think.

Here’s a link on browser safe fonts.
& a list of programs that can help on the conversion of pc/mac fonts.

4. ‘Page loading time’ is a term used to describe the amount of time it takes for a user to view your web page after clicking on the link that leads to that particular web page.

People these days, including myself, expect things to be fast and convenient. The same concept applies to web users – They want the websites they visit to load quickly, and they want to get their information in record-breaking time! Hence, it is critical that we, as web designers, ensure we create quick-loading websites to make them happy and have a better user experience.

Here are a few quick tips on how to optimize page loading time:

  1. Reduce widgets
  2. Compress the size of your page
  3. Cut back on cookies
  4. Host files locally (instead of using sites like photobucket, or imageshack)

For more tips, please visit this site.

5. Well, these links were broken,
http://webstyleguide.com/process/index.html;
http://cybermed.ucsd.edu/Web_design/process.html;
so i only analyzed the the remaining links available.

After reading through the articles,
i have come to the conclusion that there are many similarities
between these seemingly different workflow process articles by these people.
Even if they do categorize their steps in a different order,
or name them differently, Content-wise, they are quite interrelated – give and take.

If i were given the task to name the steps,
this is how i would put it.

1. The most important and crucial step of web designing,
is the purpose of the creation of the website.
“Who is the client?”
“What does the client want?”
“Who are the viewers/target audience?”
“What would they like?”
“What is the purpose of creating this site?”
i.e commercial usage; to deliver some sort of information;
a portfolio site displaying artworks?

Hence it would be good to determine all these before starting to plan the design/interface of the website.

2.Knowing the competition & learning from what has already been done.By exploring other existing sites, as a user/viewer, you can determine what is good or bad about them.
You can then learn from their mistakes and successes.
Implementing the successes into your own design or even making it better.

3.Sketching out thumbnails and roughs would be the next step.
It would enable the designer to organize the layout and contents,arranging the elements in a nice order; creating and playing around with different compositions.
It is an important step to organize your thoughts.

4.Once the client has given the go-ahead or the designer is satisfied with it,typography and visual elements have to be considered. Typefaces are important as it can bring about a feel to the overall site. Websites can be considered bad if the wrong typeface is used, resulting in information being wrongly conveyed. ( Eg. if it is a professional e-commerce site, and you use Jokerman font, what would the target audience think?)

5.Draft it out in Photoshop to see how it looks like
and rearrange the elements as deemed fit. It’s a good practice as
it can be used as reference while coding up the HTML.
(A lot of time will be wasted if you do not know how the website is supposed to turn out looking like and you do the coding first.)

6.Code, test, debug.

7.Official launch. 😀

I would say i am more fond of the processes by this and
that as i feel i can relate more to them in a “designer kind of way”.
While the rest puts a lot of analysis and focus on features of the site, etc etc. The above 2 is a combination hands-on approach, exploring and analyzing at the same time.
(In other words, i find them easier to understand and follow.)


Okay, if the above wasn’t what was expected for me to type out,
i can generally just say that these articles are good references for people who are designing their first websites and do not know where to start. They can decide to choose between whichever of these processes that they feel most comfortable with.

Overall, i think reading these articles and actually dissecting them bit by bit has made me more aware of what to do when i have to design a website in future. 😀

Posted in Assessment | Tagged: | Leave a Comment »

Flash & actionscripting.

Posted by airllustrator on April 22, 2009

Well, i’ve always been fascinated by flash websites and portfolios.
The movements; the interactivity – they’re just overwhelming!
I’d love to make a flash portfolio (well i did try before, but of course it looked pretty mediocre) one day.
…and i have to say, i’m pretty saddened that we’re only learning scripting for a static website.
Oh well, a step at a time i guess.

Scripting = the basic foundation of actionscripting, i hope.

Check this site out:
1. “Pick up the phone”
aooa
It’s actually a pretty creepy site, but the different scenarios are intriguing ;D

okay, short post.
I will be uploading a banner soon to replace the default one at present. :B
…when i feel like it.

Posted in Motivate me NOW! | Tagged: , | Leave a Comment »

Week 1 : Answer these questions (or die!)

Posted by airllustrator on April 21, 2009

1.Name as  many browsers as you can

2.What is Browser Wars?

3.What is an IP address?

4.What is a URL?

5.What is a good website?

1. Internet Explorer; Safari; Mozilla Firefox; Google Chrome; Netscape

2. Well, i guess it’s where the above mentioned web browsers are competing against each other in terms of dominance on the World Wide Web.

3. An IP (Internet Protocol) address is somehow an online ‘identity’ of where you reside on the WWW. Each individual network is given their own special identity in the form of numbers.

4. A URL is a web address

5. A good website is one which provides information in a readable manner as hassle-free as possible. Its interface has to provide easy navigation and communicate visually with it’s audience. Good design also plays a part – the website has to have a good or interesting-enough design to be able to capture it’s users’ attention. Of course, no broken links, some pictures (not all text), and good and ‘out of the box’ programming would be a plus.

Posted in Assessment | Tagged: | Leave a Comment »

Hello, World Wide Wide!

Posted by airllustrator on April 21, 2009

Today marks the first day of blogging, for school…?
I hope i can keep this up.
I have a seemingly huge number of blogs, be it personal or art-related.
Shall try not to forsake this one… (since y’know, it affects my grades D:)

Will have to try to get used to this interface,
because Blogger, the site i usually blog on,
seems a little more.. shall we say, user-friendly.
I have to admit though, WordPress is more professional in a way.

(…and yes, this is just sort of a test post. no juicy bits included. Please skip to the next post where I will be answering the questions.)

goodness, i couldn’t find the icon to change my font size so i had to manually type it out. Thank goodness for little knowledge on basic html. D: I hope i can survive this module.

Posted in Personal (Well... not really) | Leave a Comment »