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 wordpress.com does not accept it, only if written in two words? And why the spell check of wordpress.com does not accept the word wordpress?

Third – deconstruction

Dogo News is a news site for children. Unlike any other site designed for children, dogonews.com 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.

Dogonews.com 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. http://web.archive.org/web/200011090553/http://www.kballet.org/

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.

http://web.archive.org/web/20020401031946/http://www.kballet.org/

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.

http://web.archive.org/web/20070427231057/http://www.kballet.org/

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 www.kballet.org/index.asp 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…..

First – about good web design

By good design I understand a content-focused visual milieu. According to a well-known metaphor, a good web design is like a smoothly operating air conditioner that one notices only when it fails to work. Or as I read in A List Apart, good web design is like typefaces either imposing a great personality or being neutral and allowing any content to speak for itself. My aim is to become a designer who can create beautiful sights for valuable content. While writing my blog I wish to marry interesting content, the kind I usually read in news magazines and great design.