Latest Entries »

Warm Bean Coffee Shop Mockup

Here is my mock up

Be aware that I named it Warm Beans instead of Bean. just to differentiate a bit 😉

Three Websites with Good Typography

Design Professionalism

As the name indicates, this site is quite professional. It is clear, consistent and appealing. Each field is clearly separated; headings, main text, and links provided are readable and easy to understand. No excessive use of typography is used and the typeface is just beautiful. In contrast to many other sites, a very good way of emphasizing is used which rather highlights than downgrade site’s value.



This site uses a personal typography design. In a clever way, it tries to tempt its users to sign up, giving a paperback feeling. The fonts is extremely consistent and readable and there is absolutely no struggle in understanding the content. In addition, the typeface used is visually appealing as it seems to matches with the black and white photographs. The logo is obvious and dynamic and the tagline is clear and informative. Even though the site is not up yet, it already gives some positive feeling and the typography of the site is the reason.



Those sites are both of the same company which provides high resolution pictures of bottles or cans. Even though the topic sounds boring and common, the company managed to make their subject interesting enough. Again, the main reason is typography. When a visitor first enters the site s/he can’t be but curious.

The content constitutes of several headings and paragraphs which have clarity and personality. The color of the fonts is used in an appealing way that works. Each content area is distinctive and it helps for passing the message to viewers.

Three Websites with Poor Typography

Mangal Pharmacy
This site seems to be poorly planned, even though this site uses a readable typeface. Apart than the main heading, there is no clear distinction between other headings and subheadings to paragraphs. The line length (of the main paragraph) is very long, thus making it more difficult for a visitor to keep track of the line. Also, there is a mismatch between the contents of the main block and the news block. In addition, double spacing is used, making a distraction. Last but not least, the content positioning, as well as its color, seem to be dated and boring.


The Company of Maisters
This website is really outrageous, but typography is even more bad. In general the site is aligned to the center. The use of the font sizes is not balanced, as the main content appears to be smaller than the message prompting for the use of email. The line length is big and designed in a way, that cannot be taken seriously by the visitor. In addition the letter spacing is small and makes it difficult to read. Navigation’s fonts are really small and arranged in a very strange and unappealing way.


Bob Hope
If I could illustrate the term “font bombing”, I would use this Bob Hope’s site. The reason is that their main page is full of different posters, something which adds a lot of “noise” into the page. Another reason i dislike this site is link-bombing: the site is full of links. There is no clarity, no clear separation between main text and secondary paragraphs. Also the emphasize usage comes with no special meaning. The color use is dreadful as well, making it difficult to understand the hierarchy of any content.

What is Systematic Research?

The word ‘systematic’ derives from the Greek word ‘σύστημα’.

In Wikipedia:

System (from Latin systēma, in turn from Greek “σύστημα”, “whole compounded of several parts or members, system”, literary “composition”) is a set of interacting or interdependent components forming an integrated whole.A system is a set of elements (often called ‘components’ instead) and relationships which are different from relationships of the set or its elements to other elements or sets.

According to Wikipedia, “science is the systematic attempt to discover and expose nature’s patterns“.

By this someone can conclude that systematic research is science itself. The pursuit for superior knowledge generated newer and more exact research methods, such as a solid systematic research which would bear fruits. Thus systematic research became an essential part of evolution for any field of science no matter if it is mathematics, business analysis, or even road works.

Again, referring to Wikipedia, the term “systematic research” includes a written or oral review of important discoveries on the subject being examined. Current knowledge and/or other reports are used for the process of a systematic research report, thus it is a secondary source and it can’t be regarded as any original experimental work.
Systematic research focuses on a research question that tries to identify, appraise, select and synthesize all high quality research evidence relevant to that question.”
Systematic research involves exploration, examination, and investigation. Those words may sound common to each other, but they are slightly different. It explores new fields of study, it examines existing ones and investigates all in depth.This kind of research can be linked with applied and basic research. Applied research is the search for solutions to practical problems using basic research. Basic research is the search for knowledge. An example of basic research can be the question “why does this apple exist?” or “why do humans exist?”. In other words, basic research exists for our fundamental understanding of the world around us. Thus applied research solves some (possible) problems, such as a mathematical solution or a business plan.







More about Systems in Wiki:
Fields that study the general properties of systems include systems theory, cybernetics, dynamical systems, thermodynamics and complex systems. They investigate the abstract properties of systems’ matter and organization, looking for concepts and principles that are independent of domain, substance, type, or temporal scale.Most systems share common characteristics, including:

  • Systems have structure, defined by components/elements and their composition;
  • Systems have behavior, which involves inputs, processing and outputs of material, energy, information, or data;
  • Systems have interconnectivity: the various parts of a system have functional as well as structural relationships to each other.
  • Systems may have some functions or groups of functionsThe term system may also refer to a set of rules that governs structure and/or behavior.


Systems in social and cognitive sciences and management research.

Social and cognitive sciences recognize systems in human person models and in human societies. They include human brain functions and human mental processes as well as normative ethics systems and social/cultural behavioral patterns.

In management science, operations research and organizational development (OD), human organizations are viewed as systems (conceptual systems) of interacting components such as subsystems or system aggregates, which are carriers of numerous complex business processes (organizational behaviors) and organizational structures. Organizational development theorist Peter Senge developed the notion of organizations as systems in his book The Fifth Discipline.

Systems thinking is a style of thinking/reasoning and problem solving. It starts from the recognition of system properties in a given problem. It can be a leadership competency. Some people can think globally while acting locally. Such people consider the potential consequences of their decisions on other parts of larger systems. This is also a basis of systemic coaching in psychology.
Organizational theorists such as Margaret Wheatley have also described the workings of organizational systems in new metaphoric contexts, such as quantum physics, chaos theory, and the self-organization of systems.

Systems applied to strategic thinking

In 1988, military strategist, John A. Warden III introduced his Five Ring System model in his book, The Air Campaign contending that any complex system could be broken down into five concentric rings. Each ring—Leadership, Processes, Infrastructure, Population and Action Units—could be used to isolate key elements of any system that needed change. The model was used effectively by Air Force planners in the First Gulf War. In the late 1990s, Warden applied this five ring model to business strategy.



Three good color scheme websites


This website only uses 2 main colors (background-navigation bars) and three secondary. The balance achieved between those two main colors is great, relaxing to the eye and the content is instantly identifiable. Hovering over the links, a blink effect is used, but not annoying at all. A cool color effect is also used as a dithering one (or close to this effect) for making the visual illustration of earth’s continents. Secondary colors used supplements the overall experience but they are used in such small doses that they are barely apprehensible.

  • links: #B3C943
  • containers/bars: #DB0067
  • background: #F3F1E1

Exile Designs

This is the online portfolio of a propitious French digital artist. She made a good monochromatic use of the color. The background is a warm relaxing color that matches with fonts, titles, logo and header. A careful use of white color was made for the links which also use a hover effect with a good matching color as well. Regarding color scheme structure, the webpage elements are used wisely and carefully, so that all of them tie well each other.

Some of the colors used:

  • #3D2121
  • #4C2B33
  • #E2BFC8
  • #E52B57


cloud9 websiteCloud9 is an online IDE for development of JavaScript and HTML5 applications. Apart for other functions, s it is obvious that their success depends on correct choice regarding color schemes. Designers couldn’t leave out this without considerable thought and they have done a very good job. Color choice and positioning is really good, making a relaxing experience and it succeeds on usability and accessibility issues.

The dark background used helps viewers focus on the content which is distinctive and classifiable. Green headings are helping to classify each topic separating it from different ones. A light tinted blue is used on the heading grasping the attention of the viewer. As a general impression, watching this this website at my viewport is pleasant and satisfying.

  • #0092EF
  • #009900
  • #505050
  • #BF0202

Three bad color scheme websites

.argh! { those sites : suck;  they lack: harmony;  they fail: to deliver a satisfying color scheme; }   class=”argh!”

"to konaki" websiteFirst in list (in no particular order) is the site of a greek tavern/entertainment center. The color scheme not only does not compromises with any color theory, but also is rather outrageous. More specifically, the color that was chosen for the main text is white, but it contradicts the color of secondary text such as the google ad links or the rolling text.

The background seems as it was chosen out of luck and it is more than obvious that no deep analysis or a logical conclusion was done in relation with the color influence it may have to viewers.

However, the most horrible of all, still not obvious to any user who visits the site for first time, is the false overuse of pseudo-classes; hovering your pointer over the links, you will discover that the navigation’s background changes to  a repulsive combination of colors. I have to warn you that if you visit the site  out of curiosity, you should be prepared of a piercing noise when you hover your mouse over the navigation’s links.  Some of the colors used are:

  • google ad fonts: #f9ed41
  • background: #9b3500
  • navigation bar: #8d0800
  • visitor count: #1220ae  class=”argh!”

While someone may think that there is no bad use of colors at this site, I would have to say that there really is; probably this site’s designer tried unsuccessfully to cover his weakness regarding his color choice ability. A very big blue logo and very small red links constitute the homepage. Exploring the site further, one can discover that a similar color choice pattern is followed. Now, specifically speaking, the combination of that blue and red (and white), may not be obviously annoying or a failing one, however the color design and the absence of a main color make it poor and shoddy, thus downgrading the site’s value.

  • font: #cf1000
  • logo: #00146d  class=”argh!” websiteYet another Greek horrid website. What first caught my eye, was the terrible combination on the header of the site; tints of blue color and red logo on the left that shouts ‘ I am a failure ‘. Not only that, but an orange icon which represents a Greek column capital on the right gives a cheap feeling regarding the site. Color choice following a certain method was probably an unknown method to the designer. Inspecting colors further, the designer mainly used blue and red shade color falsely and he also failed to arrange them so they could match better rather than confuse viewers. Last but not least, the background is really bad.

  • navigation bar: #840600
  • navigation tab bar: #002476
  • logo color 1:#e31300
  • logo color 2: #00a8d6
  • background: #d9cfd0

Silk Cut Metaphor hilariously explained…

I immersed myself into studying about the meaning of denotations, connotations, the term ‘myth’ and I went further exploring the meaning of a metaphor (even though I knew what it meant) and I came across a hilarious argument during which two people are discussing the metaphor that Silk Cut includes at their campaings.

Silk Cut AdEvery few miles, it seemed, they passed the same huge poster on roadside hoardings, a photographic depiction of a rippling expanse of purple silk in which there was a single slit, as if the material had been slashed with a razor. There were no words in the advertisement, except for the Government Health Warning about smoking. This ubiquitous image, flashing past at regular intervals, both irritiated and intrigued Robyn, and she began to do her semiotic stuff on the deep structure hidden beneath its bland surface.

It was in the first instance a kind of riddle. That is to say, in order to decode it, you had to know that there was a brand of cigarettes called Silk Cut. The poster was the iconic representation of a missing name, like a rebus. But the icon was also a metaphor. The shimmering silk, with its voluptuous curves and sensuous texture, obviously symbolized the female body, and the elliptical slit, foregrounded by a lighter colour showing through, was still more obviously a vagina. The advert thus appealed to both sensual and sadistic impulses, the desire to mutilate as well as penetrate the female body.


Vic Wilcox spluttered with outraged derision as she expounded this interpretation. He smoked a different brand himself, but it was as if he felt his whole philosophy of life was threatened by Robyn’s analysis of the advert. ‘You must have a twisted mind to see all that in a perfectly harmless bit of cloth,’ he said.

‘What’s the point of it, then?’ Robyn challenged him. ‘Why use cloth to advertise cigarettes?’

‘Well, that’s the name of ’em, isn’t it? Silk Cut. It’s a picture of the name. Nothing more or less.’

‘Suppose they’d used a picture of a roll of silk cut in half – would that do just as well?’

‘I suppose so. Yes, why not?’

‘Because it would look like a penis cut in half, that’s why.’

He forced a laugh to cover his embarrassment. ‘Why can’t you people take things at their face value?’

‘What people are you refering to?’

‘Highbrows. Intellectuals. You’re always trying to find hidden meanings in things. Why? A cigarette is a cigarette. A piece of silk is a piece of silk. Why not leave it at that?

‘When they’re represented they acquire additional meanings,’ said Robyn. ‘Signs are never innocent. Semiotics teaches us that.’


‘Semiotics. The study of signs.’

‘It teaches us to have dirty minds, if you ask me.’

‘Why do you think the wretched cigarettes were called Silk Cut in the first place?’

‘I dunno. It’s just a name, as good as any other.’

“Cut” has something to do with the tobacco, doesn’t it? The way the tobacco leaf is cut. Like “Player’s Navy Cut” – my uncle Walter used to smoke them.’

‘Well, what if it does?’ Vic said warily.

‘But silk has nothing to do with tobacco. It’s a metaphor, a metaphor that means something like, “smooth as silk”. Somebody in an advertising agency dreamt up the name “Silk Cut” to suggest a cigarette that wouldn’t give you a sore throat or a hacking cough or lung cancer. But after a while the public got used to the name, the word “Silk” ceased to signify, so they decided to have an advertising campaign to give the brand a high profile again. Some bright spark in the agency came up with the idea of rippling silk with a cut in it. The original metaphor is now represented literally. Whether they consciously intended or not doesn’t really matter. It’s a good example of the perpetual sliding of the signified under a signifier, actually.’

Wilcox chewed on this for a while, then said, ‘Why do women smoke them, then, eh?’ his triumphant expression showed that he thought this was a knock-down argument. ‘If smoking Silk Cut is a form of aggravated rape, as you try to make out, how come women smoke ’em too?’

‘Many women are masochistic by temperament,’ said Robyn. ‘They’ve learnt what’s expected of them in a patriarchical society.’

‘Ha!’ Wilcox exclaimed, tossing back his head. ‘I might have known you’d have some daft answer.’

‘I don’t know why you’re so worked up,’ Said Robyn. ‘It’s not as if you smoke Silk Cut yourself.’

Marlboro Cowboy advertisment‘No, I smoke Marlboros. Funnily enough, I smoke them because I like the taste.’

‘They’re the ones that have the lone cowboy ads, aren’t they?’

‘I suppose that makes me a repressed homosexual, does it?’

‘No, it’s a very straightforward metonymic message.’


‘Metonymic. One of the fundamental tools of semiotics is the distinction between metaphor and metonymy. D’you want me to explain it to you?’

‘It’ll pass the time,’ he said.

‘Metaphor is a figure of speech based on similarity, whereas metonymy is based on contiguity. In metaphor you substitute something like the thing you mean for the thing itself, whereas in metonymy you substitute some attribute or cause or effect of the thing for the thing itself’.

‘I don’t understand a word you’re saying.’

‘Well, take one of your moulds. The bottom bit is called the drag because it’s dragged across the floor and the top bit is called the cope because it covers the bottom bit.’

‘I told you that.’

‘Yes, I know. What you didn’t tell me was that “drag” is a metonymy and “cope” is a metaphor.’

Vic grunted. ‘What difference does it make?’

‘It’s just a question of understanding how language works. I thought you were interested in how things work.’

‘I don’t see what it’s got to do with cigarettes.’

‘In the case of the Silk Cut poster, the picture signifies the female body metaphorically: the slit in the silk is like a vagina -‘

Vic flinched at the word. ‘So you say.’

‘All holes, hollow places, fissures and folds represent the female genitals.’

‘Prove it.’

‘Freud proved it, by his successful analysis of dreams,’ said Robyn. ‘But the Marlboro ads don’t use any metaphors. That’s probably why you smoke them, actually.’

‘What d’you mean?’ he said suspiciously.

‘You don’t have any sympathy with the metaphorical way of looking at things. A cigarette is a cigarette as far as you are concerned.’


‘The Marlboro ad doesn’t disturb that naive faith in the stability of the signified. It establishes a metonymic connection – completely spurious of course, but realistically plausible – between smoking that particular brand and the healthy, heroic, outdoor life of the cowboy. Buy the cigarette and you buy the lifestyle, or the fantasy of living it.’

‘Rubbish!’ said Wilcox. ‘I hate the country and the open air. I’m scared to go into a field with a cow in it.’

‘Well then, maybe it’s the solitariness of the cowboy in the ads that appeals to you. Self-reliant, independent, very macho.’

‘I’ve never heard such a lot of balls in all my life,’ said Vic Wilcox, which was strong language coming from him.

‘Balls – now that’s an interesting expression…’ Robyn mused.

‘Oh no!’ he groaned.

‘When you say a man “has balls”, approvingly, it’s a metonymy, whereas if you say something is a “lot of balls”, or “a balls-up”, it’s a sort of metaphor. The metonymy attributes value to the testicles whereas the metaphor uses them to degrade something else.’

‘I can’t take any more of this,’ said Vic. ‘D’you mind if I smoke? Just a plain, ordinary cigarette?’


Source  (at the end of the article)

“O, Margin, Margin”

Well, this week was surely a frantic one for me (and for other beginners I can assume). Studying six chapters of CSS and trying to cram everything into one’s brain, working against time, is something I wouldn’t suggest to anyone with high blood pressure.

There were lot’s of new things I learned and now I have to classify each element (block, div, boxes and so on) of knowledge in my mind so I can feel more relaxed. I caught myself babbling last night:

O Margin, Margin! wherefore art thou Margin?
Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love,
And I’ll no longer be a Padding.

Coursework Website

Hi everybody!

My coursework website can be found at:



WebPage Design Class 3: Structural Layer-XHTML

Some things I learned this week.

  1. Tables are evil.I will try not use them. Ever!
    But sure I will learn how to work with them. Just in case.. you never know..
    Some tables are good.
    Tables are not evil then..
    Doh, are tables evil or not???
    Well, the truth is that tables should be handled carefully. They shouldn’t be used for the website page design layout as the results are really bad on various browsers. Especially when they are viewed on cellphones. They should be mostly used for tabular data.Useful posts about this matter can be found here and here.
  2. XHTML is not a whole new language than HTML. Just a stricter form of it.
  3. The use of descriptive filenames is good for SEO. Also, it is best if you use hyphens for domain names. Google, the most widely used search engine, doesn’t recognize non-hyphenated words. For example, an hyphenated domain is seen by Google as “www proto site com”, as Google regards hyphens and dots as a space.
    For more information, read here.
  4. DOCTYPE and meta http-equiv [blah blah blah] lines which looked to me like #$!@#!$%^&*$^# or as an extraterrestrial language is all clear to me now.Doctype is the document type definition for the HTML page. Using it, we get more consistent results in all browsers, as they “know” which version of HTML we wrote our webpage.The meta tag is used for informing the browser about the content type and the character encoding we use.
  5. Always keep in mind that if your website doesn’t appear the same like the one you uploaded on the host server, press Ctrl+F5 in order to clear your cache! (Many thanks to my fellow student Negar for this!)

..and one thing I definitely did not learn:

  • How difficult it is to link your domain to your host. As I bought both from the same company (Ecowebhosting), I definitely lost this experience.. Maybe it would be handy for the future.