Archive for January, 2012

Sixth – my color choices

The next step toward the web site that I design, is to pick up its colors. In order to find the right colors, one can do many things. All depends on how much time one is ready to invest in the quest. Since the possibilities are beyond the capacity of the human eye – as far as I am concerned – the more time spent with oscillating between different shades and intensities of the same color, the more confused and disillusioned the future designer will be. And even though I have very clear arguments for the colors to be chosen, I still feel, it could be better. The only counter argument that I can bring in order to pull myself away from the screen is that this is only my first try, the initial step, and there is still more time to make final decisions. So the below four colors represent my first choice of the coloring of the four main segments of the web site.


The website allows readers to read news on three different levels, while one of these is further divided into two sub-segments. Thus the compound level will be in the blue-region, hence, I chose these two different shades of blue. The green and the lilac represent the other two levels. (The lilac might be too close to the darker blue, and thus  changed.) All these colors will work well with a fifth, contrasting (in the color jargon complementary) one from the area of oranges. And I will add a rather neutral color as well. Whereas the orange will be a good eye catcher, the neutral color used in different values may work as a font color on the one extreme, and as background on the other extreme. At a later stage, I will give them a try.


Fifth – about typefaces

In my first posting I answered the question of what I consider be good design with a reference to one of the readings. The article that I read then said that good design was like good typefaces, which either lend a great personality or are neutral enough to channel the content in its purest form. Obviously, when thinking about choosing the fonts for my websites, I keep this in mind. Today’s assignment is to think about the fonts I will be using when designing my website, and the reasons of my choices.

Until now I thought of two main guidelines of how to make my choices. The first is that children today, at least in parts of  the United States, do not learn cursive letters any more. Therefore my site will not use any fonts that imitate cursive writing. The second is to make the text easy to read, therefore I am looking for fonts that are more square-like.

For example, I find Felix Titling a nice font for buttons to navigate to the interior pages of the site. The characters seem as if were carved out from perfect squares, but do not remind textbooks. They are not rounded. The font was developed by Microsoft and it has a story, which makes me like the font more. It was developed based on the typography of the Veronese calligrapher and painter Felice Feliciano. (With such a name you could only make happy things!)

I also find Constantia an interesting font. It reminds me newspaper fonts, but not quite. This is a less narrow, nevertheless formal type, seems to be easy on the eye. Research conducted by the Software Usability Research Laboratory at Wichita State University shows that Constantia is a highly legible font created by Microsoft.

Nonetheless, as part of my future usability tests, I will check both fonts with potential future readers.

Fourth: about colors – little comment

For the coming class I read about color usage on the web. A whole technical apparatus supports the different shades that can be boiled down to the basic colors of red, yellow, and blue. From there we go to the secondary and tertiary colors and the different softwares that help to design not only the color of the pictures one uses but the color the viewer sees.

How familiar the topic and how disturbing the variance for somebody who until now was familiar with only the color theory of Johann Wolfgang von Goethe. The color theory of the German poet-scientist also aimed at correcting Newton’s claims on light and optics. Goethe not only impressed the protagonists of my dissertation but also one of my favorite author of children’s book: Eric Carle.

I have already played with ideas of how to color my website, so that it will remain colorful without turning it into a color chaos, i. e. a misinterpretation of children’s esthetics.

Fourth – the first step toward a web site

Today I start building an interactive news site for kids. The below scan is the first wireframe sketch of the main page of my future website. This is my final project for this course. The idea of the site is to bring news to kids from their town, country, and the rest of the world and to allow them to write news about the events to their fellow readers and authors. Under news team membership readers can read about the technicalities of contributing and also the terms, which they have to accept. When one actually wishes to contribute, he or she needs to click on the bottom news from you or follow the lead from the news team membership. By logging in, one can see all his or her contributions and his or her profile, the latter is always open to updates. Contributions are reviewed by the site operators before final posting. The search and follow are buttons of the customary use. The news can be read either by topic: based on the buttons on the horizontal bar. The reader can navigate and read news depending on the relevance of the news: selection is between local, national, and international news. In order to activate the local and the national news site, one must click on “where you live” and choose from the list, or add to it. In the footer, About, Copyrights, Privacy Policy are buttons of the customary use.

I have some ideas of the domain name, but I have not made any decisions yet.

By the way, I am very curious to know, why wireframe is usually written as one word and yet, a central site of the virtual life on the internet, the spelling check of does not accept it, only if written in two words? And why the spell check of does not accept the word wordpress?

Third – deconstruction

Dogo News is a news site for children. Unlike any other site designed for children, is very shy in its visual appearance but strong in content. My “deconstruction” circles on the question why to leave the content in such a rigid environment?

  1. About the title and the logo: Dogo Argentino is the name of type of dog developed in Argentina. Knowing this, the dog-house image as logo as well as the subtitle: “Fodder for young minds” make totally sense. As opposed to that, this is what the founders put in the About: “DOGOnews is an online newspaper and web guide for children. “DOGO” (not Do-Go), means young or small in Swahili.”
  2. The title, the subtitle and the logo would benefit from a less overwhelming background that frames the page.
  3. You either read the content as a visitor, sign in as a teacher or student. Very clear, very straightforward, and thus a little boring. The folders look as if they were backpack folders. Easy navigation as a quid pro quo colored letters on white background.
  4. Opposite the two options, on the left one can choose between the four sub-pages. Same thing: clear, which is as good as lacks the “overcolored” design usually made for kids. As much as it may try to set a trend, it may also be less inviting for kids first entering the site.
  5. Layout is very clear and reminds “adult” news sites. Small picture on the left, title in bigger blue fonts that is linkable. Author, date and abstract in black, and one can click again on blue to read more. The white background of the inside part of the page contrast the colorful margins.
  6. Margins are colored concentric stripes. They are given little “message” and  decorative function. The space could have been better used.
  7. Again very clear logos for comments, sharing, and there is a widget to download the code to put in on one’s website or log. It gives a great tool for those who understand it and does not bother those who do not know what it is. Can a minor operate a website?
  8. On the right column first comes search, then topics. No play with the actual meaning of the words, there are no logos either. Simply Current Events, Science, Sports, Social studies, etc. The only “movement” is that the titles are differently colored.
  9. Latest comments feature avatars. Great idea to have this little drawings instead of making parents involved in uploading photos of their children. Also safer.
  10. The site is internet safe only as long as the reader does not click on the linked youtube illustrations. From there nothing keeps anyone from continuing in the youtube site.
  11. No ads. Great. The site is about news and nothing more.
  12. The only place products are recommended is the book review page. It is written by readers and it features the elements of a commercial web site: stars mark the popularity of the book, “Add to My Books” button reminds Amazon, reader is given page numbers, ISBN number, and publication date. Again, lacks any sign of need for extravaganza, which is good: the page is easily scanable and teaches how commercial sites work. 
  13. What I liked the most is that under maps the very same news from the main page appear as placed on a Google map. Excellent visualization of the idea of world news. Yet it is not design, the placement of the boxes for the news follow the geography of the Globe and not a preconceived idea how to lead the readers’ eyes. is great because it takes children seriously, believes that beyond the coloring “young minds” can find interest in words. But the words on the site appear as if they were digitalized news clips. The site could have been given more dynamics and yet retain its excellence in content providing.

Second – the ballet site

My second assignment is to compare the different design phases of one website and decide whether the change was for the better. I chose the web site of the Korea National Ballet because I do not read Korean, so the letters and the text do not make any meaning to me. For me they form part of the graphic design instead of conveying meaning. Hence, my examination cannot include assumptions about how the design serves as a medium of a message. It focuses on its arrangement, the way it guides my eye, and the overall sense of the site it communicates.

The first design I looked at is from November 2000.

Back then the background was black, there was a logo on the left upper hand corner, and mainly pictures dominated the site. A quasi frame divided the center part from the header and the footer and all the pages of the site were designed like this. In the header the title “Ticket” was in English also in the Korean version. In a larger button white an orange, “What’s new” was the visually most striking button. Apparently, then, the most important was to update the potential audience on what the company was doing and not straightforward marketing.

By 2002 a new design took over. Apparently very little pictures (as much as I can download the site). Instead, much text on white background. The logo is still in the left upper hand corner, but in the header there is only Q&A, Site map, and a logo for contact. The white quasi-frame disappeared, instead there is a horizontal bar that allows to enter the different pages of the site. Whereas the titles are in Korean, when scrolling the mouse through, they change to English. Under “Notice” – in English on the Korean version – a list of dates with explanation in Korean. There is a calendar below it, still in the middle of the page. There is a link to quizzes and to a Gallery, which judging from logos, includes both visuals and sound. The site became more interactive and less static. It allows more “KNB-experience” through the web, but offers less insight to the performances.

In 2007 the background remained the same white, and everything else changed. Excluding the upper bar where visitors can also log in, the site is divided into five stripes. A bar with Korean titles, each is scrollable. Then comes a vertically divided stripe. One after the other automatically or as the mouse goes through it becomes wider. Then come static pictures from the performances, which are almost in the middle. Below it each stripe is divided into two columns. News and Notice is on the left and Quick menu with English typos on the right (instead of Dancers, one can click on the button Dacers.) Last but not least ticketing and if I am not mistaken a link to a map are on the bottom. This is a much simpler and compressed look. The arrangement however, makes it more straightforward and seems not to balance between marketing the shows and informing about the company.

Today the site has a white background and differently colored rectangles for the different headlines. It has links to the social network sites as well. On the left hand there is the title and the dates of the upcoming premiere. The color choice of the rectangles support the hierarchy of importance: the coming up premier is the most accentuated. Within this rectangle there are two buttons: Ticketing and Information in different shades of the rectangle’s lilac color. Below is the picture of the choreographer. There is a rectangle to see videos or pictures but it does not work. Season Program and Notice are the other two big rectangles.

The site is much cleaner and more neutral as well. It suggests that the company fashions itself as an established, prestigious classical ballet company. Its elegant lines and clarity makes it easily approachable for those visitors who are familiar with the universe of classical ballet. Since no visuals are displayed in the rectangle dedicated to them, first visitors need to spend more time on the site in order to have any understanding about the company and their productions. If I need to evaluate whether it is better or worse than the previous sites, I remain puzzled. It better serves the presentation of a brand than narrates what the company is doing, like the previous sites did. It is definitely smarter, but I do not know if this is intentional and why the owners of the site decided to communicate such an image.

Second – but not

Last time I wrote exactly hundred words because I understood that each assignment-entry is limited to hundred words. This time, I know I can go beyond. At least in the word number.

As I mentioned earlier, most entries in this blog are short records of each of the steps I make toward becoming a web designer. Others would call them home work. They would be perfectly right, since I write this blog as part of my assignments. Each week I have two classes, which means two entries are posted weekly. In fact three, because from next week, I have an additional entry to make in which I visit and comment on the blog by one of my class mates. I am not sure if I would ever venture to write a blog on my own. But this is irrelevant now, and somehow paradoxical, as this entry does not answer the questions of the next assignment. The reason is because I am not able to acquire the necessary technical background. However, it does allow me to create categories in my blog!  Hence, this entry will not make into the regular category of entries.

My second assignment is to compare three designs of a web site as time passed by and evaluate how it transformed. But when I am trying to view a site I receive a  message arguing that because robots.txt is unable to enter the site, I cannot view the page that I requested. After having received this message so many times, I gave up and checked what robots.txt document is. And it turns out that is so much relevant to my project, so I decided to write about it. Now I know, what every sci-fi fan knows: there are good and bad robots. I also learned that by using robots.txt I can not really stop bad robots entering my site, but I can try. Once getting to my final project, I will.

I hope I can write the next entry about the evolution of the design of a web site…..