| |||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||||||||||||||||||||
Friday, August 31, 2012
My September 2012
Wednesday, August 29, 2012
Sunday, August 26, 2012
Wednesday, August 22, 2012
Sunday, August 19, 2012
Friday, August 17, 2012
The Psychology of Color and Emotion
Goethe on the Psychology of Color and Emotion
by Maria Popova
“Colour itself is a degree of darkness.”
Color is an essential part of how we experience the world, both biologically and culturally. One of the earliest formal explorations of color theory came from an unlikely source — the German poet, artist, and politician Johann Wolfgang von Goethe, who in 1810 publishedTheory of Colours (public library; public domain), his treatise on the nature, function, and psychology of colors. Though the work was dismissed by a large portion of the scientific community, it remained of intense interest to a cohort of prominent philosophers and physicists, including Arthur Schopenhauer,Kurt Gödel, and Ludwig Wittgenstein.
One of Goethe’s most radical points was a refutation of Newton’s ideas about the color spectrum, suggesting instead that darkness is an active ingredient rather than the mere passive absence of light.
…light and darkness, brightness and obscurity, or if a more general expression is preferred, light and its absence, are necessary to the production of colour…. Colour itself is a degree of darkness.
But perhaps his most fascinating theories explore the psychological impact of different colors on mood and emotion — ideas derived by the poet’s intuition, which are part entertaining accounts bordering on superstition, part prescient insights corroborated by hard science some two centuries later, and part purely delightful manifestations of the beauty of language.
YELLOWThis is the colour nearest the light. It appears on the slightest mitigation of light, whether by semi-transparent mediums or faint reflection from white surfaces. In prismatic experiments it extends itself alone and widely in the light space, and while the two poles remain separated from each other, before it mixes with blue to produce green it is to be seen in its utmost purity and beauty. How the chemical yellow develops itself in and upon the white, has been circumstantially described in its proper place.In its highest purity it always carries with it the nature of brightness, and has a serene, gay, softly exciting character.State is agreeable and gladdening, and in its utmost power is serene and noble, it is, on the other hand, extremely liable to contamination, and produces a very disagreeable effect if it is sullied, or in some degree tends to the minus side. Thus, the colour of sulphur, which inclines to green, has a something unpleasant in it.When a yellow colour is communicated to dull and coarse surfaces, such as common cloth, felt, or the like, on which it does not appear with full energy, the disagreeable effect alluded to is apparent. By a slight and scarcely perceptible change, the beautiful impression of fire and gold is transformed into one not undeserving the epithet foul; and the colour of honour and joy reversed to that of ignominy and aversion. To this impression the yellow hats of bankrupts and the yellow circles on the mantles of Jews, may have owed their origin.RED-YELLOWAs no colour can be considered as stationary, so we can very easily augment yellow into reddish by condensing or darkening it. The colour increases in energy, and appears in red-yellow more powerful and splendid.All that we have said of yellow is applicable here, in a higher degree. The red-yellow gives an impression of warmth and gladness, since it represents the hue of the intenser glow of fire.YELLOW-REDAs pure yellow passes very easily to red-yellow, so the deepening of this last to yellow-red is not to be arrested. The agreeable, cheerful sensation which red-yellow excites increases to an intolerably powerful impression in bright yellow-red.The active side is here in its highest energy, and it is not to be wondered at that impetuous, robust, uneducated men, should be especially pleased with this colour. Among savage nations the inclination for it has been universally remarkedy and when children, left to themselves, begin to use tints, they never spare vermilion and minium.In looking steadfastly at a perfectly yellow-red surface, the colour seems actually to penetrate the organ. It produces an extreme excitement, and still acts thus when somewhat darkened. A yellow-red cloth disturbs and enrages animals. I have known men of education to whom its effect was intolerable if they chanced to see a person dressed in a scarlet cloak on a grey, cloudy day.The colours on the minus side are blue, red-blue, and blue-red. They produce a restless, susceptible, anxious impression.BLUEAs yellow is always accompanied with light, so it may be said that blue still brings a principle of darkness with it.This colour has a peculiar and almost indescribable effect on the eye. As a hue it is powerful — but it is on the negative side, and in its highest purity is, as it were, a stimulating negation. Its appearance, then, is a kind of contradiction between excitement and repose.As the upper sky and distant mountains appear blue, so a blue surface seems to retire from us.But as we readily follow an agreeable object that flies from us, so we love to contemplate blue — not because it advances to us, but because it draws us after it.Blue gives us an impression of cold, and thus, again, reminds us of shade. We have before spoken of its affinity with black.Rooms which are hung with pure blue, appear in some degree larger, but at the same time empty and cold.The appearance of objects seen through a blue glass is gloomy and melancholy.When blue partakes in some degree of the pltis side, the effect is not disagreeable. Sea-green is rather a pleasing colour.RED-BLUEWe found yellow very soon tending to the intense state, and we observe the same progression in blue.Blue deepens very mildly into red, and thus acquires a somewhat active character, although it is on the passive side. Its exciting power is, however, of a different kind from that of the red-yellow. It may be said to disturb, rather than enliven.As augmentation itself is not to be arrested, so we feel an inclination to follow the progress of the colour, not, however, as in the case of the red-yellow, to see it still increase in the active sense, but to find a point to rest in.In a very attenuated state, this colour is known to us under the name of lilac; but even in this degree it has a something lively without gladness.BLUE-REDThis unquiet feeling increases as the hue progresses, and it may be safely assumed, that a carpet of a perfectly pure deep blue-red would be intolerable. On this account, when it is used for dress, ribbons, or other ornaments, it is employed in a very attenuated and light state, and thus displays its character as above defined, in a peculiarly attractive manner.As the higher dignitaries of the church have appropriated this unquiet colour to themselves, we may venture to say that it unceasingly aspires to the cardinal’s red through the restless degrees of a still impatient progression.REDWhoever is acquainted with the prismatic origin of red will not think it paradoxical if we assert that this colour partlyactu, partly potentia, includes all the other colours.We have remarked a constant progress or augmentation in yellow and blue, and seen what impressions were produced by the various states; hence it may naturally be inferred that now, in the junction of the deepened extremes a feeling of satisfaction must succeed ; and thus, in physical phenomena, this highest of all appearances of colour arises from the junction of two contrasted extremes which have gradually prepared themselves for a union.As a pigment, on the other hand, it presents itself to us already formed, and is most perfect as a hue in cochineal ; a substance which, however, by chemical action may be made to tend to the plus or the minus side, and may be considered to have attained the central point in the best carmine.The effect of this colour is as peculiar as its nature. It conveys an impression of gravity and dignity, and at the same time of grace and attractiveness. The first in its dark deep state, the latter in its light attenuated tint; and thus the dignity of age and the amiableness of youth may adorn itself with degrees of the same hue.History relates many instances of the jealousy of sovereigns with regard to the quality of red. Surrounding accompaniments of this colour have always a grave and magnificent effect. The red glass exhibits a bright landscape in so dreadful a hue as to inspire sentiments of awe.GREENIf yellow and blue, which we consider as the most fundamental and simple colours, are united as they first appear, in the first state of their action, the colour which we call green is the result.The eye experiences a distinctly grateful impression from this colour. If the two elementary colours are mixed in perfect equality so that neither predominates, the eye and the mind repose on the result of this junction as upon a simple colour. The beholder has neither the wish nor the power to imagine a state beyond it. Hence for rooms to live in constantly, the green colour is most generally selected.
Though hardly a work of science, Theory of Colours stands as an absorbing account of the philosophy and artistic experience of color, bridging the intuitive and the visceral in a way that, more than two hundred years later, continues to intrigue.
แนวคิดในการออกแบบปก
แนวคิดในการออกแบบปก 1Q84 ฉบับภาษาอังกฤษ วางแผงตุลาคม 2554 พร้อมๆ กับเล่มภาษาไทย
เหลือเวลาอีกไม่กี่เดือนก็จะถึงเดือนตุลาคม กำหนดวางแผง 1Q84 เล่มภาษาไทยที่ชาวพลพรรคสำนักพิมพ์กำมะหยี่และเพื่อนร่วมงานกำลังตั้งอกตั้งใจทำงานกันอยู่
แต่หนังสือ นอกจากเนื้อในแล้ว ยังมีปกให้เราต้องดูแล เมื่อเวลากระชั้นเข้ามาอย่างไม่รอรีเช่นนี้ เราก็คิดว่าถึงเวลาเริ่มคิดถึงการออกแบบปกกันบ้างแล้ว วันนี้เลยเสิร์ชหาในกุ๊กเกิลดูว่าปกเวอร์ชั่นอื่นๆ เขาเป็นอย่างไร ได้เห็นแนวคิดหลายอย่างผ่านผลงานปกจากหลายๆ ประเทศ แต่ไม่มีปกจากประเทศไหน "คิดเยอะ" ดี เท่าปกจากเวอร์ชั่นภาษาอังกฤษ ที่มีกำหนดวางแผงเดือนตุลาคมนี้ (เดือนเดียวกับเวอร์ชั่นภาษาไทย)
คุณ Chip Kidd ผู้ออกแบบปกเล่มนี้ ได้กล่าวอธิบายแนวความคิดในการออกแบบปกไว้ >>ที่นี่
ส่วนข้างล่างนี้เป็นบทแปลบทความดังกล่าวเป็นภาษาไทยค่ะ
หลังจากได้รับเกียรติออกแบบปกหนังสือฉบับปกแข็งทุกเล่มของฮารูกิ มูราคามิ ตั้งแต่เล่ม ดิ เอเลเฟน วานิชส์ ผมก็ตั้งตารอที่จะได้ทำงานเล่ม 1Q84 เป็นพิเศษ เพราะเป็นหนังสือที่ผู้เขียนมุ่งมั่นเขียนและผูกพันอย่างที่สุด (และเป็นเรื่องที่ไม่ธรรมดาเลย) อีกอย่างหนึ่งก็คือ ในทางตรรกสัญลักษณ์ ชื่อหนังสือเป็นความฝันของนักออกแบบ ด้วยลักษณะอันเป็นเอกลักษณ์ของทั้งสี่ตัวสามารถนำมาออกแบบเป็นงานที่ทรงพลังและโดดเด่นได้ง่ายๆ
เรื่องราวในหนังสือ เล่าเรื่องสองเรื่องที่ดูผิวเผินคล้ายจะไม่มีความเกี่ยวข้องกัน ที่ค่อยๆ ขมวดพันเข้าหากันทีละน้อย เรื่องแรกเกี่ยวกับผู้หญิงคนหนึ่งที่ชื่ออาโอมาเมะ ที่เปิดเรื่องมา เจอว่าตัวเองต้องปีนบันไดฉุกเฉินของทางด่วนที่รถติดหนักในกรุงโตเกียวเพื่อหลีกเลี่ยงรถติด เมื่อเธอลงมาถึงพื้นดิน ในภายหลังเธอก็เกิดความเชื่อว่าเธอเข้าสู่ความจริงอีกอย่างหนึ่งผ่านทางนั้น เป็นความจริงที่แตกต่างจากความจริงที่เธอรู้จักเล็กน้อย เธอให้ชื่อมิติใหม่นี้ในใจว่า 1Q84 (เรื่องราวในหนังสือเกิดขึ้นในปี 1984 และในภาษาญี่ปุ่น Q ออกเสียงเหมือน 9) โดยให้ Q มาจาก Question Mark โลกที่แบกรับคำถามอยู่ และแนวความคิดนี้กลายเป็นเรื่องหลักเรื่องหนึ่งในหนังสือชุดนี้
หลังจากได้อ่านต้นฉบับแล้ว ผมก็เกิดความคิดในทันทีว่าการอยู่อย่างคู่ขนานของสถานการณ์ที่อาโอมาเมะเผชิญอยู่ สามารถนำเสนอผ่านการเชื่อมต่อกันของปกหุ้มหนังสือและตัวปก ด้วยการใช้กระดาษหนังแบบโปร่งแสงในการทำปกหุ้ม บนปกหุ้มนี้มีชื่อหนังสืออยู่ชั้นแรก พิมพ์ภาพผู้หญิงให้โผล่ตามช่องของตัวอักษรและตัวเลข ส่วนอื่นๆ ของเธอนอกเหนือจากนั้นไม่ต้องมี
เมื่อปกหุ้มได้หุ้มปก มันจะ "เติมเต็ม" ภาพใบหน้าของเธอ แต่ก็มีบางอย่างที่ประหลาดกำลังเกิดขึ้น และก่อนที่คนอ่านจะได้อ่าน พวกเขาจะถูกบังคับให้คิดถึงเรื่องที่มีคนบางคนเดินทางจากโลกหนึ่งไปอีกโลกหนึ่ง
ยิ่งกว่านั้น สิ่งที่ต้องนำมาพิจารณาเสมอ นั่นคือ มันดูสวยดีทีเดียว
ปกหุ้ม ตรงขาวๆ เป็นกระดาษโปร่งแสง
ปกหนังสือ
ภาพเมื่อปกหุ้มได้หุ้มปกแล้ว
A Little Printer by Deejoost
The cutest little printer by Bergcloud
Little Printer lives in your home, bringing you news, puzzles and gossip from friends. Use your smartphone to set up subscriptions and Little Printer will gather them together to create a timely, beautiful mini-newspaper.
UPDATE: Pre-orders can be made now! Cost: £199 GBP and will be shipping in 60-days from the 14 of August!
http://www.dejoost.nl/
http://www.dejoost.nl/
Monday, August 13, 2012
Sunday, August 12, 2012
Friday, August 10, 2012
Thursday, August 9, 2012
Terrific Illustrative Type by Alex Beltechi
Alex Beltechi is a graphic designer and illustrator from Romania.
One of his stronger areas of expertise – as you can tell from the following pieces – is experimental typography.
His unique blend of (usually) clean lines and grungy textures brews a pixel-perfect typographic illustration every time that are always a pleasure to look at.
A lot of Alex’s work is produced for personal and experimental purposes, while some pieces are made into tutorials or sold as stock files.
If you like what you see, you can follow Alex on Twitter, and check out his other work on either his Behance or Flickr profiles.
10 Web Typography Rules Every Designer Should Know
When someone visits a website you’ve designed, the odds are that they don’t care much about the colors, images or sounds, they’re immediately looking at the text.
No matter how many bells and whistles you’ve built into a website, everyone relies on text to accomplish whatever they’re visiting the site to do.
That alone should make typography, the art of arranging type, a priority for any web designer.
In this article we take a look at 10 easy rules to keep in mind when designing your next web project.
1. Read through the text yourself
With a design like JonesingFor a designer without a great grasp of the text would have struggled to put together the typography that makes this site really work. As you tackle your own typography, you probably don’t have to worry about writing a site’s text — but you do have to read it!
Some web designers think that just copying and pasting out of a text file constitutes the total of their textual duties. But reading through the text provides at least a basic idea of how the text can be integrated into a website, avoiding the disconnect between the writing and the design of a website.
You can kick your typography up yet another notch, if you can read through the text once it’s in place in your design. Take special note of the space around the letters. Do you have any unusually big spaces that look odd? A little careful typography can eliminate those issues. You can also get an idea of lines that might be too long to easily read, awkward line breaks and similar issues.
2. Dump Lorem ipsum as soon as possible
Do you think you could have designed Jesus Rodriguez Velasco’s website without the actual text? The site is heavily dependent on the written word — and very specific words too. Even the body text got special attention with a drop cap and some other tweaking that just wouldn’t have been possible with Lorem ipsum.
Unless the text of your website is actually Lorem ipsum, dummy text will bear no similarity to the real thing. That means that any tweak you might make to the text — or the design surrounding it — will have to wait until you get the real thing. Asking for (and getting) text from your client as early as possible in the process will give you the ability to match your overall design and your typography.
3. Show a clear hierarchy
When you arrive at Rik Cat Industries, you know immediately where you should start reading. Even though there are a few links at the top of the page, Rik’s welcome catches your eye first. It’s much bigger, using typography to establish a clear hierarchy.
Every site needs a well developed hierarchy: indicators of where to start to start reading and how to proceed. Your typography can provide that hierarchy — just as Rik’s does — as long as you know your hierarchical order ahead of time. By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.
Your design’s hierarchy goes beyond just the typography you employ, of course, but since users almost always start with the text, it makes sense for designers to do the same.
4. Pay attention to both macro and micro typography
Relying entirely on typography for their front page, the Crowley Webb and Associate’swebsite was designed with two factors in mind: both macro and micro typography.
Macro typography is the overall structure of your type, how it appears in the context of your design and its aesthetic when you consider your text as a block on its own.
Micro typography is more concerned with the details of spacing, the issues that determine whether words are easy to read. Micro typography is an absolute necessity when it comes to putting together a block of text: if it isn’t legible, there’s no point in proceeding. Crowley Webb and Associates addressed this question through both careful writing and spacing out those words that the site would highlight.
But macro-typography provides you with the opportunity to make your text more than well-spaced: it’s the chance to make it look appealing and a part of your whole design. The choice of typefaces and colors on this website create a viable whole. Ignoring either facet of typography is detrimental.
5. Take care with type colors
It would be so easy to lose text in the background of ArtofElan, especially the bright red on dark red combination used by the designer. When a web designer works with colored type, care is absolutely necessary, there’s no guarantee that a red on red combination, or even a yellow on red combination will be visible. After all, everyone has visited a website where the text seemed to be only one shade off from the background color and gotten a case of eye strain when they tried to read it.
The easiest fix for this situation is to make sure that the color of your type is drastically different from that of your background. Black and white work so well because they are as drastically different as you can get, but there are some color combos that work well: something along the lines of a dark blue on a light pink will get the job done. Reversed out text is pretty tricky… while you can work with light pink text on a dark blue background, you’re more likely to get a complaint about it.
6. Get serious about your CSS
If your CSS is solid, you can move between pages of your website seamlessly, just as the different versions of Hutchouse.com rely on different stylesheets to create some impressive effects. Even if you don’t take things as far as Hutchhouse, CSS can help eliminate amateur typography issues like changing up typefaces and sizes between pages.
CSS can provide easy consistency between your typography across the entirety of a website. If you are consistent in how you use type, however, breaking that consistency even a small amount can make whatever you wish to highlight truly stand out, just like establishing and then breaking a grid can make for an effective design. In web typography, keeping your fonts consistent can be a simple matter of CSS.
7. Ditch the centered text
Choosing an alternative to centered text can make a website design easy to read, just like DesignCanChange.org. Opting for centered text, especially on a page like this, would make for a problematic page: the jagged edges centering creates on each side make it much harder to read and there are plenty of opportunities for perfectly centered text to wind up distorting the rest of your designs on different displays.
In some circles, centered type is only one step up from using Comic Sans in a website design. You might consider it for a headline, but in general, aligning your text to the left will make your readers much more comfortable, unless they read from right to left.
8. Deal with smart quotes and other symbols
Luigi Ottani’s site showcases what careful attention to quotation marks and other symbols will get you: a complete lack of problems when the site displays those symbols. Many websites are dotted with symbols a browser cannot display. It’s a legacy of the fact that most of the text a web designer works with was probably written in Microsoft Word or another piece of word processing software that makes all sorts of little changes to text without the writer paying much attention.
One of the worst changes is smart quotes: the curly quotation marks Word automatically substitutes for straight quotation marks. Another problem area comes when you work with text written in another language: accents and umlats can cause just as much trouble as Word’s helpfulness. If you just copy and paste text with such changes into your design, you’ll likely have to go back and fix them later, at least for some web browsers.
Instead, get them early in the design process so you can focus on making your text fit better with your design. If you do want those fancy symbols and smart quotes showing up in the final design, break out your HTML entities.
9. Plan for your text to get larger
When you increase the size of the text on Veerle Pieters’ website, it’s not quite as pretty than if you use the font size she picked out. However, you can still read everything, locate links and so forth, something that is true of very few websites.
That’s because, in part, many designers make sure to layout text in 10 point font or even smaller. Most people are comfortable reading such fonts, but Baby Boomers make up a huge section of the web-browsing population and a lot of those aging web surfers are going to have their browsers set to display type as large as they can. Your text, as well as your design, needs to be able to adapt to that fact.
It’s also worth taking into account the fact that browser size can vary dramatically, moving text around to unexpected locations if you aren’t careful. If bumping the size up a point creates problems, that older demographic is going to move on to the next website in a hurry. Having to scroll forever over to the side will have a similar result.
10. Show a preference for sans serif
If you look at the A List Apart’s website, pretty much every big block of text is set in a sans serif typeface, making it much easier to read. Headlines and other smaller blocks of text are laid out in serifed fonts, creating a balance between the two.
When it comes to laying out text on a screen, sans serif fonts are almost always the best bet, especially if you chose a font like Verdana that was designed for display on a computer screen. Serifed fonts have a higher chance of displaying poorly, becoming blurry or even pixelated.
It’s not possible to entirely avoid serifs, of course. But for large blocks of text especially, using a font without serifs can offer an extra level of guarantee that visitors will be able to easily read a site’s text. When you’re choosing fonts for a project, look through your sans serif options first.
A final comment
Typography is easily overlooked, and even when a designer does take it into consideration, it’s easy to write off as a time-intensive activity with little return. But spending even a few minutes with the text that will be the centerpiece of your design can transform it from something any web designer could slap on a page to an element that supports the rest of the design.
Written exclusively for WDD by Thursday Bram.
Do you follow these rules and others? Please share your views below…
Subscribe to:
Posts (Atom)