طراحی برای توسعه دهندگان

صفحه 1:
of Design for developers 

صفحه 2:
| would like to give some context to this presentation. These slides are from a 2 hour presentation called Design for Developers. 

صفحه 3:
The goal of Design for Developers is to teach interface design as a set of rules: there are some good default values for a lot of design decisions that you should remember, there is a “scientific” way of approaching things like alignment, even though many designers will tell you it’s something you should “feel”. 

صفحه 4:
Some slides only contain a few words or images so the slides don’t distract from what is being said. Since you are probably viewing this online, | reworked the entire presentation and added these sticky notes to add what | talked about when displaying the slide. They look like this. 

صفحه 5:
Introduction & design theory Practical tips and tricks Practical tips and tricks, cont. Q&A: throughout ل اكير ‎Se‏ 

صفحه 6:
Introduction 

صفحه 7:
‎cs ee =‏ اه ‎Wolf or @wolfr_on the internet ‎ ‎ 

صفحه 8:


صفحه 9:
| read stuff all day 

صفحه 10:
3 4 ١ 5 ۳ | = ۹ ‏نت‎ ۳ ‏ی‎ sae ۳ [like to play video games | 5 ‏ابر كيدا لين‎ 1 ۳ 1 0 3 = ز و ۳ م = اک ل ‎Pee eine‏ اف + | 10 05 ‎Fae ١ 5 ee‏ 

صفحه 11:
۱۷ ۰۲/2 ۸/۵۱۹2 11 

صفحه 12:
Webdesign Interface design Ethos Contact Branding & Identity iPad & iPhone Catalog HTML & CSS Photography Interface design that works. You just spent €120K on the new development cycle of your application. Your clients are up in arms about the upcoming redesign. You need someone who knows how great apps are built. Here's your man. View the work § Read the blog Privacy & Disclaimer RSS feed/Twitter Sitemap ‏مه‎ ©2011 Wolf's Little Store 

صفحه 13:
Webdesign Interface design Ethos Contact Branding & Identity iPad & iPhone Catalog HTML & CSS Photography Interface design that works. You just spent €120K on the new development cycle of your application. Your clients are up in arms about the upcoming redesign. You need someone who knows how great apps are built. Here's your man. View the work § Read the blog Privacy & Disclaimer RSS feed/Twitter ©2011 Wolf's Little Store 

صفحه 14:
The kind of design I do is interface design... @ My company Competitor 2 w Competitor Competitor 4 Competitor 5 Adcled value per employee (Euro) Maximum amount of competitors reached. Growth in added value per employee (@/-year) BD How it works > ۰ 12/2008 =a Print report 

صفحه 15:
‎LICENSE!‏ ات ‎4 ۷ ‎YOu need ic ‎ ‎ ‎oe ‎FIRSt thi ‎5 not about the “WOW!” ‎۳ ‎— 

صفحه 16:
| don’t really care too much for interactive presentations or branded games. Vrhile they have their right to exist as promotional material, it’s not the kind of work | want to spend my life doing. 

صفحه 17:
It’s about creating a great product eC eC ty Intelligent infa-red sensor ۱ Ceasar | ‏اي ل ل انيت‎ ey ret Easy to clean SS ‏ا‎ oes ‏ومتمممك سمه عدأ موتموق‎ Pe Peed دوم أل 0ه | لك ‎og‏ لي للك انان .وعاعهط أت 99.956 واتا ‏ا تا ‎ars)‏ يكن ‎Durable casing resists‏ ‎chips and seratches.‏ ‎ ‎17 ‎HEPA filtration —— Lifetinve HEPA filler removes ond eliminates over 99.9% ‏از‎ te Pe ‏ول وا‎ ae ‎ ‏ومتمة عتمعتوجوط كنم8۵ ‎eee eee‏ ‏۱ ‏ه عطنًا - عأه أت تمعز تا ‏ل ‎Pe‏ ‏ل ا ا ل لكا ‎energy efficiency.‏ ‎eae eCity Ca Ue ‏ل ةا ‎Only three moving parts =‏ ‎Cree eae i‏ ‎Ce en‏ ‎SL) ‎reluctance motor, ————___ ‎Pret ieee i) Tee RUN re ‏هذا وداتعاهم ,مجمعوو‎ ‏ع ل ل ا" امي‎ ‏ی‎ =e BE) CU ۵ ‏ناهن‎ 

صفحه 18:
Take something that blows and make it better. That’s probably what the people at Dyson were thinking when they applied their vacuum knowledge® to hand dryers. Product of the year for me. 

صفحه 19:
Avoiding this... 

صفحه 20:
ace Pane You’ve got the power — 

صفحه 21:
| think everyone has the power to make a good product because it’s more about knowledge and applying that knowledge instead of having strong visual skills. | believe we can extract a lot of rules from common design knowledge. That’s what I’m gong to do in this talk. 

صفحه 22:
111601 Let’s start with some theory on what makes a good interface. 22 

صفحه 23:
What Is a good interface? 

صفحه 24:
It depends. 

صفحه 25:
Examples of desirable qualities ‎Easy to use‏ از ‎Fun Accessible ‎When thinking about interfaces, and what ‎you’re going to make, you make a list of desirable qualities we want our interface to ‎ 

صفحه 26:
اراد Fast (app performance) Fast (time to task completion) 

صفحه 27:
Even though | like to design interfaces for the “general public” | have a special love for advanced modes and ways to get your task done ASAP even if it requires some training/ learning. 27 If we make our application easy to use, that might just hurt productivity (e.g. no advanced mode, lack of shortcuts, wizards for everything). 

صفحه 28:
Considerations Build accessible apps because it’s the right thing to do (morally) أ 211[/011 0065] ١ ‏ا‎ 00 68 have a disability? Do we have the dev resources to focus on "72۱۰ 

صفحه 29:
thea فلز ت۱۳ 1089 ‎Pad)‏ ‏2000 ‏26868 ‏10000 ‏10900 ‏1890 ‏5000 ‏1001 ‏رت ‏25068 ‏10000 ‏10000 ‏25868 Status Page Hide 8:81: ۲ Range Copy Move File Print Graph Data Systen ‎sii: eT‏ ا لال ‎Sales ۷ 40‏ 4600 4500 3 25 8000 75608 4 ۳ 5000 ترا 3 و ‎i 65608‏ و 45608 2 5 70108 32300 5 ۸۲ 10008 400 3 5 3000 ‎Sales ۷ 20000‏ 3808 لان 5 مرو 4000 ‎RESIS‏ 8 ۸ 100808 1252008 3 و لات اك 5 ‎Mgr‏ 1868 لك ين ‎Sales‏ 4808 40608 2 5 3000 تاره 3 ‎Mgr‏ 2888 درد 5 ۲ 1808 ‎¥P 1 22230‏ 1808 5 2008 ‎Let’s take this interface for example. | haven’t ever used it to be honest, but this us Lotus ‎123, the competitor to Excel back in the days of MS DOS. ‎ ‎29 ‎ ‎Global Insert Delete Column Erase Titles Window ‎ENP il ‏را‎ ‏نالل‎ tate 40 370 5 ‏و ان‎ 49692 Curly 34781 ‏أأعممواة0‎ ‏ا ا‎ 59937 Dempsey Ey Rn one 48338 Fields 01574 Fiklore 64596 Fine ۱ ‏ی‎ ia ‏لك ارم‎ 1773 ‏عرولا‎ ‎2165 ‏تأونانا‎ ‎23907 50 7166 316 ‎ ‎ 

صفحه 30:
۳ ‏رد۱۳‎ ‎Range Copy Move File Print Graph Data System Quit Global Insert Delete Column Erase Titles Window Status Page Hide ENP ۴۱۱۳ ۴ ۱۱9 ‏تاه‎ aT ‏لل‎ ‎Sales ۷ 49608 110‏ 4600 را 16888 40 3 25 8000 ۱ 2 ۸ 3 و 5 370 40 2 نا 3 و و ان 20808 05000 5 و ‎Curly‏ 49692 10088 45608 2 5 70108 أأعممواة0 34781 ‎SSS)‏ 15000 8 ۸۲ 10008 ا ا ‎Dempsey 3000 5315 3 40 100‏ 59937 ‎Donovan 3808 Sales 2 38808 300‏ 51515 2 ۸ 5 و ‎Fields‏ 48338 ‎Fiklore 100808 ۸ 8 30 ~-‏ 01574 25608 1252008 3 و ‎Fine‏ 64596 20508 50008 5 9۲ 1808 ا سما ‎BEE EPA ecu) 4808 Sales 4 5000 18868‏ نز۱۱۱ 40 2 5 3000 ۱ ۱۱۱ ناه 88868 3 ‎Mgr‏ 2868 ۱ ‎Hugh 1009 ۲ 5 36668 ie‏ 2165 ‎ ‎ ‎30 

صفحه 31:
If we list our desirable qualities and compare them with the program we have here, we might come to the conclusion that it’s not easy to learn, not accessible (to persons with sight or hearing disability for example; there is no VoiceOver like on Mac, there is no multitasking to run something like JAWS in the background. task ences is also pretty good. Inaccessible تب ‎task‏ تلا تال ۱ 10 25000 201 2000 10080 110000 10000 از 20 از 25000 111 (۱ 20 01 ‎BI]‏ 40008 4500 19000 65008 تن 45000 10 4000 ناتك 10000 رز ۸ تا 50000 تا ‎BELL)‏ ‏30008 ‏نز۱۱۲ ‏35088 و ‎ec)‏ حل لت 2-5 لخي 7 ليث كنا ‏اند ‎ ‎ ‎ ‎ ‎ ‎ ‏5 4008 15 5000 0 و و۱ ۱ ‎President‏ 1666 15 308 5 3000 نات ‎Adnin‏ 1688 و و۱ 515 4008 85 5088 ۳ 2000 1088 ۳ 1098 85 2008 ‎| i ‏لاف للا ‎ ‎ ‏و( ‎eee ‏اا‎ ‎B ‎۱۳۸۵ ‏نان‎ ‎40370 5 507086 ۳۳ 48692 ۷ 34791 Dabarrett 84984 6 6 2 vr) 40338 ] 605 91574 Fiklore CSET a 13729 BLL PM) ۰۱۱۱۳۱ ۱۱۸۳ ‏اس‎ ‎2165 Hugh 23907 Johnson 1108 ۶ ‏ال ل ‎31 ‏یا أو ‏رن ‎Range Copy Move File Print Graph Data System Quit‏ ‎Titles Window Status Page Hide‏ ‎ 

صفحه 32:
Let’s expand on this example with another example, a Point of Sale system. A POS system is used at a register, when you go to a shop and buy something basically. Example: POS system 32 

صفحه 33:
it Customers Would you want this... i Products Search... +1, ellison Mood 8 sles Bob eaves Cc rowel 0 E. Diet G Seed cenrge ۳ Harry Bell J Doe be be be be be be be be be fo John Hall Name D. E. Dief R Howard Web Store Order ۲ Order 2009-60 Order 2009-53 Sey ‏ا‎ D. ۳ Dief ‎Price‏ م ‎John va ‎6 powell Bob Bauer BS ۱ N ۳ : ‎George Baker ‎ee 2009-47 Order 2009-46 Oey 2009-45 Order 2۱۷9 ‎Order 2009-39 Order 2009-38 ‎Order 2009-36 ‎Order 2009-23 ‎Retail ‎ ‎ ‎ 

صفحه 34:
Total Due 34 

صفحه 35:
05 م1 Sane <[( 4 --2011-@5-12 11:29:32-- https://github. com/j2fly/oh-my-zsh/raw/master/tooLs/instal1.sh Resolving github,com... 207.97 .227,239 Connecting to github. com|207.97.227.239|:443,.. connected. HTTP request sent, awaiting response... 200 0K Length: 1174 (1.1K) [text/plain] Saving to: “STDOUT" 2011-05-12 11:29:33 (124 MB/s) - written to stdout [1174/1174] Cloning Oh My Zsh... Cloning into /Users/jon/.oh-my-zsh. .. remote: Counting objects: 2042, done. remote: Compressing objects: 100% (1100/1100), done. remote: Total 2042 (delta 1215), reused 1561 (delta 855) Receiving objects: 100% (2042/2042), 248.12 KiB, done. Resolving deltas: 100% (1215/1215), done. Looking for an existing zsh config... Found ~/.zshrc. Backing up to ~/.zshrc.pre-oh-my-zsh Using the Oh My Zsh template file and adding it to ~/.zshrc Copying your current PATH and adding it to the end of ~/.zshrc for you. SR Meme ‏ات‎ ‎Changing shell for jon. Password for jon: 520 كعوممك مم وت 830 17 now installed. 35 

صفحه 36:
The opposition between making an application easy to use vs. making it so you can complete your task quickly becomes clear here... since the employees in our imaginary shop all get trained do we really want to use the slick “Easy to use” system when maybe we want the system that enables us to do our task as fast as possible? 36 

صفحه 37:
There’s a Belgian supermarket, Colruyt, that tests everything, optimizes everything, and | think they thought long and hard about their register/cashier system too. It’s not very modern, but employees know how to work the system in an efficient manner because they are trained to do so and the software enables them to be fast. 

صفحه 38:
Would you rather bit F5 + F8 to serve a customer or go through a wizard with next/ previous options? 38 

صفحه 39:
Etablissementen Franz Colruyt N.V. Beurs Euronext: COLR @ Oprichting 1925 Sleutelfiguren Jef Colruyt, bestuurder-voorzitter Hoofdkantoor Edingensesteenweg 196 1500 Halle Producten Distributie Omzet A €6,75 miljard euro (2009-2010) Winst 6 475,3 ‏اللمصصصصصص سسحت ور ون ززم‎ Website www.colruyt.be 

صفحه 40:
(| hate shopping there) Unfortunately the experience of shopping there is not really what | want, I’d rather pay a bit more and don’t feel like I’m shopping around in a prison. But that might just be me. 40 

صفحه 41:
Why did | put this theory part in the presentation? | want everyone to think about what they’re building and for who they’re building it. Even though kids are growing up with computers these days, the current generation of software is becoming flat and less usable to expert users. While | <3 Apple software a lot of what they do feels dumbed down. |’m very frustrated making this 150+ slides presentation in Keynote because there is 41 

صفحه 42:
Some assumptions 

صفحه 43:
Goals e You want your designs to look passable without the intervention of a dedicated (expensive) designer e You want to be able to create web applications on your own, or with a team of developers only e With a little time and some tricks this is not hard to do, especially for web applications ui) 

صفحه 44:
You’re a developer so: e You use your IDE and never ever open Photoshop or Illustrator unless you have to e You write scripts to solve problems e You love your terminal and database schemes, not so much your ruler and color palettes (if you have them) 

صفحه 45:
Web developer, Windows software developer, 2۷, ۱۷0۷ 0۲ 10۶ 107 ۵0101۱۱۱۱6۰۱۳ same principles 

صفحه 46:
Web developers have a bit of an edge: 

صفحه 47:
Web developers have a bit of an edge: 

صفحه 48:
, اام Who in the audience has ever tried to learn Photoshop? It's big and vast... there’s many tools and palettes and it's easy to get lost. | | took me years to become productive in Photoshop and | understand why people are advocating designing in the browser. pay 

صفحه 49:
۲۵ ۵ 17 3 3 08 * Select Filter View Window Help SSa bb og ‏إن‎ | 9 Untitled-1 @ 100% (RGB/8) 200 3 500 5 600 ADJUSTMENTS. Add an adjustment ©: uly UE od 250 @ Photoshop File Edit Image Layer ial * (MAuto-Select: | layer + | ()Show Transform Controls | Ue Ba 2, & S| 200 0 50 100 2150 PS (sl E+ ‏هه‎ - ]83 - 2 wa PO Ol ۳ Sine] SPEBXSEAN ‎DS =‏ كا ‎OU‏ سا ‎PS ‎a ‎a” ‎oN ‎6 ‎ ‎Bl Doc: 194,0K/0 bytes ‎ ‎ 

صفحه 50:
You don't have to learn Photoshop (or any graphics program for that matter) to deliver a proper software design. As | said before it’s a matter of knowledge and applying this knowledge. As a web developer you have an extra edge in a sense that you can apply design frameworks easily thanks to the power of HTML (structure) and CSS (presentation) whereas sharing the design of one Java app with another is not convenient, if even possible. 50 

صفحه 51:
Practical tips & tricks Now... on to the real meat of the presentation. The practical tips and tricks. What you’ve been waiting for | guess! 51 

صفحه 52:
Practical tips & tricks (1) Typography Alignment Light & shadow | divided this up in sections, first up are typography, alignment and light and shadow. These are the most important parts. 

صفحه 53:
Typography 

صفحه 54:
لخلاو e Generally you want a readable typeface, in interface design you want a very readable typeface that works in small sizes e This leaves you with very little choice on the web: 

صفحه 55:
Verdana The quick brown fox jumps over the lazy dog Lucida Grande The quick brown fox jumps over the lazy dog 

صفحه 56:
Droid Sans comes with Android and is also optimized for small size display; Segoe UI is the font used in Windows Phone 7 and parts of the new Windows | think. Solid choice if you’re doing Microsoft software. Droid Sans ¥ The quick brown fox jumps over the lazy dog 52600 ۱ | 4 This is Segoe Ul as used in the Office 12 User Interface Spt Segoe UI Regular and Italic sa: Segoe UI Bold & Bold Italie ‏مهد‎ ‎Tahoma Regular & Bold ::.: 56 

صفحه 57:
Why these fonts? Specifically designed for Ul: compare Verdana to Times: which will be more legible at small sizes? If you’re interested in typography at all, and you want to know more why this is like it is, try http:/Aypophile.com/node/12028 

صفحه 58:
Why these fonts? Hinted at low sizes lam hinted ۱-۹۵ I Elan 8 ١ > 8 The two fonts at the bottom will not be named... hint: one is universally hated by designers and the other ۰ caused a stir when it was inte aria used as the subtitle for ‏تق زعام ررس ق1‎ James Cameron’s Avatar 

صفحه 59:
La Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ۳ ۱ ۱ | Sa ns incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ‎Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do etusmod tempor‏ 1 | مم ‎a a | 1 0 incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis‏ ‎nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎Duis aute irure dolor in reprehenderit in voljggy ‎fugiat nulla pariatur. Excepteur sint occaecai Some fonts have their roots ‎in print, they are wonderful if used for the right purposes. ‎culpa qui officia deserunt mollit anim id est ‎۱ ‏ای زر‎ Sans is a great typeface ۱ ۱1۱ 091 ‏ور‎ ۱۱۱۱۱ British roots, Palatino ‎exercitation ullamco laboris nisi ut aliquip ex eqmmexelelem oly e114 (Teim (eo) ar-t olele) ‎۱ ceca) and Impact, wel... ‏ای رت ‎ICTR‏ ‎۱ ‎59 

صفحه 60:
... probably good if you want to make an IMPACT. 60 

صفحه 61:
Verdana Gill Sans Here’s the same character string in Verdana and Gill As you can Excel set in Gill Sans might Sans. give some problems: what if you need cell 11, you would read it as II 61 

صفحه 62:
Jan 093 000 99 657 0G-8B ح اق اليا كل آي إن الح انان اسلا و رارصا ها رش ‎aie Axelii11.Jan@9 837 00-88 ۰ Kontoauszug_ —_—_Energieliefe‏ A crossed zero can make the difference between a font that works for financial applications and one that doesn’t. Maybe you want to display a serial number that has both O and 0 (zero) in it. This i from a blog post about Axel by my favorite typographer, Erik Spiekermann. http://www.fontshop.be/details.php?entry=386 . It’s a very economical typeface perfect for spreadsheets. 

صفحه 63:
Font sizes 

صفحه 64:
Relative readability This is a pretty well known picture among designers, it displays the relative readability between a book and a blog post on a screen set in 16px. Basically we all use type sizes that are way too low. 16px works for reading. Why not use this browser default instead of making the text tiny? 

صفحه 65:
۳0۱] 5 e When in doubt, make it larger, especially if it’s for reading (any long form content in paragraph form) e All texts on the web that are meant to be read should be at least 14px big! 

صفحه 66:
۳0۱] 5 e You can go smaller in interface depending on your font, e.g. if you use Lucida Grande or Verdana you could go for 11, 12 or 13px. 

صفحه 67:
11.3 Further reading The most likely ancestral candidate of Canis lupus is Canis lepomhagus, a small, narrow skulled North American carid of the Miocene era, which may hive also given rise to Same larger, broader skulled C, lepophagus fossils found in northam Texas may represent the ancestral stock from which true wolves derive, The first tnze wolves bogan to appear at tha end of the lancan North American Stage and the onset of the early Iningtorian. Among them was Canis priscolatrans, a small species closely resembling the red wolf, which colonised Eurasia by crossing the Boring land bridge. The new E: an C, priscolatrans population evolved into Canis efruscus, then Canis This. primitive wol closely resembled the moder southern wolf populations of the Arabian Peninsula and South Asia, which were once distributed in Europe in the early ‘Quatemary glaciation until about 500,000 years ago (see Subspecies). C, mastachensis evolved in the direction of Canis lupus, and recolonised North America in the late Rancholabrean era. There, a larger canid species called Canis dius was already eslablished, but it became extinct 6.000 years ago after the lange prey it relied on was wiped ‘out. Compatition with the newly arrived gray wolves for the smaller and swilter prey that survived may have contributed to its decline. With the extinction of dire wolves, gray wolves became the only large and widespread canid species left,!”! The North American recolonisation likely occurred in several waves, with the most distinctive popullations occunring in the periphery of the range. These populations 2 | ar on the high arctic Islands, ¢, i, jrcaon in the eastem forests, C. / bailey! in the tar south and C. i nus at the continental comer opposite the paint of invasion) may represent survivors of early migrations from Eurasia. ©. |. baileyi, C.J. Ircaonand ۶ ۱ rufus display some peimitive traits and systematic affinity to one another, Fossil remains from the late Pleistocene of lange bodied wolves similar to C. | arctos and C. |. albus occur in coastal southern Califormia, indicating that lange North American gray wo! subspecies wore once wiiespread, and mary have boon driven southward by glaciation, thaugh wolves no longer reside thace. Foasits of small bocked wolves similar to C. 1 bailayi have been found in a range encompassing Kansas and southem Caltomia. This indicates a late Pleistocene population flux, in which large, Arctic forms of woil moved farther south, with emailer, warmth adapted wolves expanding as [he ate moderated: aries eluding Cans kpes ng Wang) The now exlinct Japanase wolves were descended from large Siberian wolves which colonised the Korean Peninsula and Jagan, before it separated from mainiand Asia, 20,000 years ajo during the Pleistocene. During the Holocene, the Tsugary Strait widened and isolated Honshu from Hokkakdé,, thus causing climactic changes leading to the extinction of mast large bodied ungulates inhabiting the archipelago. Japanese wolves likely underwent a process of island dwarfism 7,000-13,000 years ago in response to these climatoiogical and ecological pressures. C. i hattai (formerly native to Hokkaidd) was significantly larger than it southern cousin C. |. hodophilax, as it inhabited higher elevations and had access to larger prey, as well as a continuing genetic interaction with dispensing wolves from Siberia.” Subspecies: Main article: Subspecies lupus In. 2008,!"1 37 subspecies of wolf were recognised, including the red wol! and nod including two Canis lupus subspecies: Canis lupus dingo and Canis iupue familias, Woll subspecies are divided into two categories: “Northen wolves”: lange-sired, large-teained wolves: with strong camassials which inhabit Noth America, Europe and northem Asia." “Southomn wolves": native to North Africa, the Arabian Peninsula and South Asia. They are characterised by their short fur,” small beans and weak camasaials. They 2 fay represent a relict population of early wolves, as they closely resemble fosal European wolves,” and the rate of changes observed in their ONA sequences date them =H to about 800,000 years, as opposed fo the American and European lineages which stretch back only 150,000.""°! The vocalisations of southem wolves have a higher proportion of short, sharp barking,” and they seldom ‏۲و‎ ikoly that dogs and dingoes stem from this group. Wolves in Central and East Asia are intermediate in form and size to northem and southem wolves." Differences in beain size are well defined in diflerent wall populations, with wolves in northem Eurasia having the highest values, North American wolves having slightly smaller brains, and the soulham wolves having the smallest. Southern wolves have braing §=10% smaller than northem wotves.!'3] Though different in behaviour and morphology, northem and southem wolves can still interbreed: the Zoological ondon for acample once successfully managed 19 mate a male European wolt Indian female, resuiting in a cub bearing an almost exact likeness 

صفحه 68:
ملكتا "ةر e There's a reason newspapers are set in columns, that books are not wider than they are... practical printing reasons, but also a scientific reason: it's harder to read a text when lines are too long e Rule of thumb: paragraphs should never be longer than 60 characters, so limit them in width 68 

صفحه 69:
Wiay is my tyPee So bLoxrins:=: ‏لو‎ 

صفحه 70:
Font services e Use Typekit ($50/yr for low traffic sites) e Use Webtype if you have money ($40/yr/ typeface) e There are very little fonts in Google web fonts currently that are worth using e Use with caution (performance, quality of fonts) e Good design is not free in general 

صفحه 71:
All efforts to optimize for performance on my own Wolf’s Little Store website were kind of cancelled out by using 2 fonts from an external web provider. If you care about performance at all, don’t use @font-face. ۵ 

صفحه 72:
مت نع ۲۲ ‎ER‏ ع .3 Each day the crowds have grown; on Tuesday, aday after the civilian cabinet offered its resignation to Egypt's transitional military overnment, the protesters massed at ie epicenter of Egyptian resistance — first to the former president, Hosni Mubarak, ousted in February and now to the military commanders who replaced him — appeared to number ٩ Ser well more than 100,000. MENTS (15) * REPRINTS Such was the nervousness about the test of wills that trading was briefly suspended on the Cairo stock exchange after its main index slumped for a third successive day, deepening the sense of crisis that has built since street fighting began on Saturday. The first parliamentary elections since Mr. Mubarak was forced from power are scheduled to begin next week, and there is widespread concern that they will be postponed. Déscendants Now Playing < Intense skirm shies cominped for a fourth day on the main avenue leading to the Interior Ministry. For the protesters, the outburst still seemed to represent a leaderless expression of rage. Though the security forces could have reached the square from other streets and the protesters could have attacked the Interior Ministry from other directions as well, each side continued to hammer the other — protesters with rocks, the security forces with tear gas that wafted back through the aver — along the same charred and pockmarked block. Many of the protesters wore green face masks, of the type used by medics, to try to filter tear gas fired by security forces in the ebb and flaw of the fighting ane streets. littered with debris. Both sides sought to reinforce makeshift barricades. A reporter for Al Jazeera held up a spent tear gas canister to a camera and said the country of its manufacture was 1.0 line height rotesters filled Tahrir Square in central 2 ed with the police in nearby streets for the fourth straight day, braving an increasingly lethal crackdown to demand an end to military rule. CAIRO — Huge crowds of ‘Cairo on Tuesday and batt! COMMENTS: (15) عم a E] SIGN IN TO EMAR Multimedia PRINT SINGLE PAGE ‎REPRINTS‏ م ‎SHARE ‎i Photographs ‎Protesters Brave ‎Now Plyingilliy, ‎ ‎DéScendants ‎CAIRO — Huge crowds of protesters filled Tahrir Square in central Cairo on Tuesday and battled with the police in nearby streets for the fourth straight day, braving an increasingly lethal crackdown to demand an end to military rule. ‎Each day the crowds have grown; on Tuesday, a day after the civilian cabinet offered its resignation to Egypt's transitional military ‎Multimedia ‎government, the protesters massed at the epicenter of Egyptian resistance — first to the former president, Hosni Mubarak, ousted in February and now to the military commanders who replaced him — appeared to number well more than 100,000, ‎fe Photographs ‎Protesters Brave a Crackdown ‎Such was the nervousness about the test of wills that trading was briefly suspended on the Cairo stock exchange after its main index slumped fora third successive day, deepening the sense of crisis that has built since street fighting began on Saturday. The first parliamentary elections since Mr. Mubarak was forced from power are scheduled to begin next week, and there is widespread ‎concern that they will be postponed. ‎Intense skirmishing continued for a fourth day on the main avenue leading to the Interior Ministry. For the protesters, the outburst still seemed to represent a leaderless ‎(November 20, 200) ‎expression of rage. ‎Though the security forces could have reached the square ‎Related in Opinion ‎from other streets and the protesters could have attacked the Interior Ministry from other directions as well, each ‎Related in Opinion ‎1.5 line height ‎ 

صفحه 73:
Bila e | keep returning to these same values: e Use a line-height of 1.1 for headings ٠ Use a line-height of 1.5 for paragraphs 

صفحه 74:
۹ 

صفحه 75:
Josef Muller Brockmann Grid systems in graphic design Avisual communication mariual for graphic designers, typographers and threa dimensional designers Raster systeme far die Ein Handbuch fir visuelle Gestaltung Grafiker, Typograten und Ausstallungsgestatter Verlag Niggli AG Schweiz Flirstentum Liechtenstein 19 

صفحه 76:
Much has been written about the dark art of aligning things: there’s whole books about aligning and grid systems, mostly dealing with paper sizes and proportions. | want to show you 3 things that might make you better at aligning without having to overthink it. 

صفحه 77:
0011111 e Law of proximity (gestalt) e Screen interface design: work with the number 6. 6, 12, 18, 36... (example) e Grid design example e Use space appropriately 

صفحه 78:
لان ل 

صفحه 79:
The law of proximity — Spatial or temporal proximity of elements may induce the mind to perceive a collective or totality. Wikipedia 

صفحه 80:
80 

صفحه 81:
As you can see, the left circles form a group, on the right side there’s 3 groups, all of this is done by spacing between elements only. Why is this so important and what does it have to do with Ul design? از 

صفحه 82:
Thanks for doing this. I feel like there’s a big change coming up and Product is a good way to deal with this change. Mr. X wrote this 1 day ago Like it! Loving the new changes. Mr. Y wrote this 1 day ago I think the changelog is kind of hard to read but other than that keep it up and looking forward to 1151118 1. Mr. Z wrote this 1 day ago I found a bug, I'll report it in the bugtracker. Basically some JS Windows in Opera (Windows). The law of proximity says that elements that are closer together will be perceived Mr. A wrote this 1 day ago ۲ ‏ا‎ ‏مسب‎ : as a group. Since the spacing is even between every comment here it’s hard to find out who wrote which comment. 82 

صفحه 83:
The law of proximity 4comments to “Three excellent reasons to move your presentations to Speakerdeck now” llias says: An adblocker should solve two of your problems ;-) Also no fullscreen on speakerdeck is a pitty. Bramus! says: SpeakerDeck indeed has less clutter (read: ads), yet | still prefer presentations from SlideShare though. Here's why: - Links aren’t clickable in SD - All slides are images (no text recognition) in SD - No fullscreen support in SD The first one is the real deal-breaker to me. 59 ‌ A 2 ‏م‎ Wolf says: @llias | don't run Adblockers, | want to see the web as intended ‏زا‎ ‎sometimes interferes with my job, and you don't really want to h Adblocker messing with the layout (e.g. on ad-heavy news sites). @Bramus Good points, the no-link clicking is indeed pretty much team can solve the current issues. Otherwise it's indeed still a better idea to go for Slideshare (even llias says: | completely understand your view on this but just like I'm able to ignore billboards on the street or change channels on tv | want to be able to “ignore” annoying ads on the web. | don't have any problem with ads that are less obtrusive (and more relevant) like google’s textual ads or services like the deck. 

صفحه 84:
| keep returning to the number 0 

صفحه 85:
Base font size: Base line height (x1.5) ~ 12 =18px ۰ Reading font size: Base line height (x1.5) 16 =24px ~« 

صفحه 86:
6px ‏اال‎ Major elements spacing 0 units ۳۵0۱2۳ 009 4 units Minor spacing 2 05 

صفحه 87:
This part of the presentation is about how | keep returning to the number 6 for aligning and spacing UI elements. It makes sense: all the numbers we use for our defaults (1.5 line height, 16px font size for reading, etc.) form multiples of 6 when used in simple calculations: 12, 18, 24, 36, ... 87 Example 

صفحه 88:
Grid Calculator Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid. View Ghangelog, Base font size @ 12 px Total width: Number of columns 936 X ‏لب‎ columns Column width ow Gutter width Start off with a grid, | used an online grid di ۱ calculator (here: http://www.29digital.net/ grid/ ) and defined my column and gutter widths so are multiples of 6. 

صفحه 89:
Here’s that same grid visualized. | used Photoshop but you might as well do it in HTML/CSS if you’re used to that. 

صفحه 90:
As you can see, if we think of 6 as our unit, there are 4 units between columns, and each column is 16 units wide. 

صفحه 91:
Header area 

صفحه 92:
Header area Content area 2a, a content area... 

صفحه 93:
‎96px high = 16 units‏ تخكك ها ‎0011 ‏أاع‎ 2 Flexible height ‎ 

صفحه 94:
Spacing between areas: 4 units ‎96px high = 16 units‏ تخكك ها ‎Spacing between areas: 4 units ‎0011 ‏أاع‎ 2 Flexible height ‎ 

صفحه 95:
Spacing between areas: 4 units ‎96px high = 16 units‏ تخكك ها ‎Spacing between areas: 4 units ‎hings that attack us everyday. His need or revenge has gone past the anger of osing his leg; for him, Moby Dick has ome to be all the wrongs in the world. ۲ ۱ engeance inspires monomania, the Flexible height obsession with one goal, and it turns everything into a reflection on the person ho Is feeling it; everything in Ahab's orld is either for or against his hunt. ‎engeance 3: Ahab looks at himself as a ship leaving behind a wake in the world; is choice of pursuing revenge has put ‎ 

صفحه 96:
Spacing between areas: 4 units ‎96px high = 16 units‏ تخكك ها ‎Spacing between areas: 4 units ‎Flexible height ‎Vengeance 2: Ahab tells Starbuck that all things are masks for od, and that Moby Dick is just a mask for the inscrutable hings that attack us everyday. His need for revenge has gone ‎past the anger of losing his leg; for him, Moby Dick has come to ‎be all the wrongs in the world. Vengeance inspires monomania, he obsession with one goal, and it turns everything into a eflection on the person who is feeling it; everything in Ahab's orld is either for or against his hunt. ‎engeance 3: Ahab looks at himself as a ship leaving behind a ake in the world; his choice of pursuing revenge has put him ‏رد-۱9‎ ‎eased to be a choice. That which put him apart from other en, has now made him doomed to always be apart, no matter at he should choose now. ‎ 

صفحه 97:
Moby Dick, chapters 31-45 engeance 2: Ahab tells Starbuck that all things are masks for od, and that Moby Dick is just a mask for the inscrutable hings that attack us everyday. His need for revenge has gone ast the anger of losing his leg; for him, Moby Dick has come to @ all the wrongs in the world. Vengeance inspires monomania, he obsession with one goal, and it turns everything into a eflection on the person who is feeling it; everything in Ahab's rid is either for or against his hunt. engeance 3: Ahab looks at himself as a ship leaving behind a ake in the world; his choice of pursuing revenge has put him part from a normal life. For him, his monomania has now eased to be a choice. That which put him apart from other en, has now made him doomed to always be apart, no matter at he should choose now. engeance 4: Starbuck, who is a decent and honorable man, is errified by Ahab's desire. He knows that his need for revenge ill doom them all. Starbuck, as mentioned in the chapter lescribing him, has a deep-seated fear of "spiritual terrors." hile he will face a whale like any other man, the oddness and epth of Ahab's madness is something he can't quite face head ‏ما مقعم ولط /زأولثة5 10 من ااأنها طقطاخ طاعاحاى 10 علمع اع ع1 .م‎ evenge, is something that is not human. It lends a tragic ircumstance to his surroundings. 

صفحه 98:
Moby Dick, chapters 31-45 Space between heading and paragraph: 18px, 3 units engeance 2: Ahab tells Starbuck that all things are masks for od, and that Moby Dick is just a mask for the inscrutable hings that attack us everyday. His need for revenge has gone past the anger of losing his leg; for him, Moby Dick has come to be all the wrongs in the world. Vengeance inspires monomania, he obsession with one goal, and it turns everything into a eflection on the person who is feeling it; everything in Ahab's orld is either for or against his hunt. Amount of characters on a line: +63 Space between paragraphs: 18px engeance 3: Ahab looks at himself as a ship leaving behind a ake in the world; his choice of pursuing revenge has put him apart from a normal life. For him, his monomania has now eased to be a choice. That which put him apart from other en, has now made him doomed to always be apart, no matter at he should choose now. Space between paragraphs: 13px engeance 4: Starbuck, who is a decent and honorable man, is errified by Ahab's desire. He knows that his need for revenge ill doom them all. Starbuck, as mentioned in the chapter describing him, has a deep-seated fear of "spiritual terrors." hile he will face a whale like any other man, the oddness and depth of Ahab's madness is something he can't quite face head ‏را یه بات را‎ evenge, is something that is not human. It lends a tragic ircumstance to his surroundings. 

صفحه 99:
Content width: 4 columns Still a multiple of 6 (360) Moby Dick, chapters 31-45 Vengeance 2: Ahab tells Starbuck that all things are masks for God, and that Moby Dick is just a mask for the inscrutable things that attack us everyday. His need for revenge has gone past the anger of losing his leg; for him, Moby Dick has come to be all the wrongs in the world. Vengeance inspires monomania, the obsession with one goal, and it turns everything into a reflection on the person who is feeling it; everything in Ahab's world is either for or against his hunt. Vengeance 3: Ahab looks at himself as a ship leaving behind a wake in the world; his choice of pursuing revenge has put him apart from a normal life. For him, his monomania has now ceased to be a choice. That which put him apart from other men, has now made him doomed to always what he should chaose now. | move the text to the middle since | want to add a navigation etc. to the website. Vengeance 4: Starbuck, who is a decent an 161160 ‏1د د وول وررزورور وم .م زققل 5'تلقطك نزما‎ err will doom them all. Starbuck, as mentioned in the chapter describing him, has a deep-seated fear of "spiritual terrors." While he will face a whale like any other man, the oddness and depth of Ahab’s madness is something he can't quite face head on. The extreme to which Ahab will go to satisfy his need for revenge, is something that is not human. It lends a tragic circumstance to his surroundings. 

صفحه 100:
Moby Dick, chapters 31-45 Vengeance 2: Ahab tells Starbuck that all things are masks for God, and that Moby Dick is just a mask for the inscrutable things that attack us everyday. His need for revenge has gone past the anger of losing his leg; for him, Moby Dick has come to be all the wrongs in the world. Vengeance inspires monomania, the obsession with one goal, and it turns everything into a reflection on the person who is feeling it; everything in Ahab's world is either for or against his hunt. Vengeance 3: Ahab looks at himself as a ship leaving behind a wake in the world; his choice of pursuing revenge has put him apart from a normal life. For him, his monomania has now ceased to be a choice. That which put him apart from other men, has now made him doomed to always ۱ what he should choose now. Vengeance 4: Starbuck, who is a decent a terrified by Ahab's desire. He knows that his cou will doom them all. Starbuck, as mentioned in the chapier describing him, has a deep-seated fear of "spiritual terrors." While he will face a whale like any other man, the oddness and depth of Ahab's madness is something he can't quite face head on. The extreme to which Ahab will go to satisfy his need for revenge, is something that is not human. It lends a tragic circumstance to his surroundings. Moby Dick 

صفحه 101:
consectetur adipisicing elit, sed do eiusmed tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Ahab Lorem ipsum dolor sit arnet, consectetur adipisicing elit, sed do eiusmed tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Starbuck Moby Dick, chapters 31 Vengeance 2: Ahab tells Starbuck tha God, and that Moby Dick is just a mas things that attack us everyday. His need for revenge has gone past the anger of losing his leg; for him, Moby Dick has come to be all the wrongs in the world. Vengeance inspires monomania, the obsession with one goal, and it turns everything into a reflection on the person who is feeling it; everything in Ahab's world is either for or against his hunt. Vengeance 3: Ahab looks at himself as a ship leaving behind a wake in the world; his choice of pursuing revenge has put him apart from a normal life. For him, his monomania has now ceased to be a choice. That which put him apart from other men, has now made him doomed to always be apart, no matter what he should choose now. Vengeance 4: Starbuck, who is a decent and honorable man, is terrified by Ahab's desire. He knows that his need for revenge will doom them all. Starbuck, as mentioned in the chapter describing him, has a deep-seated fear of "spiritual terrors." While he will face a whale like any other man, the oddness and depth of Ahab's madness is something he can't quite face head on. The extreme to which Ahab will go to satisfy his need for revenge, is something that is not hurnan. It lends a tragic circumstance to his surroundings. ۱/۵۱۲ ۷ E COMPLETE Table of Contents Author Information Plot Summary Characters Places & Objects Quotes Themes & Topics Fate Nature of Whaling Religion Vengeance Chapter 1 - 2 Chapter 3 Chapter 4 - 6 Chapter 7 - 9 Chapter 10 - 12 Chapter 13 - 15 Chapter 16 Chapter 17 - 19 Chapter 20 - 22 Chapter 23 - 25 

صفحه 102:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmed tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Ahab enim ad minim veniam, quis nostrud exercitation Starbuck Moby Dick, chapters 31-45 Vengeance 2: Ahab tells Starbuck that all things are masks for God, and that Moby Dick is just a mask for the inscrutable things that attack us everyday. His need for revenge has gone past the anger of losing his leg; for him, Moby Dick has come to be all the wrongs in the world. Vengeance inspires monomania, the obsession with one goal, and it turns everything into a reflection on the person who is feeling it; everything in Ahab's world is either for or against his hunt. Vengeance 3: Ahab looks at hi wake in the world; his choice of apart from a normal life. For hi ceased to be a choice. That whi men, has now made him doome what he should choose now. Vengeance 4: Starbuck, who is terrified by Ahab's desire. He ki will doom them all. Starbuck, as describing him, has a deep-seated fear of "spiritual terrors." While he will face a whale like any other man, the oddness and depth of Ahab's madness is something he can't quite face head on. The extreme to which Ahab will go to satisfy his need for revenge, is something that is not hurnan. It lends a tragic circumstance to his surroundings. My Acre 111 ‏حا‎ IPLETE 8 Table ot Gontents Author Information Plot Summary Characters Places & Objects Quotes Themes & Topics Fate Nature of Whaling Religion Vengeance Chapter 1 - 2 Chapter 3 Chapter 4 - 6 Chapter 7-9 Chapter 10-12 Chapter 13-15 Chapter 16 Chapter 17-19 Chapter 20 - 22 Chapter 23 - 25 

صفحه 103:
Interface design Webdesign About Branding-and identity iPad & iPhone HTME-& ESS ۷0 7 | use this strategy all the time, look at my site, all the spacing is based on 6... Journal Store Home Interface design ۱ 5 

صفحه 104:
الا ا ها | ‎sos‏ اه ‎BERR ee ee‏ ‎es eee ca) =|! |‏ سس ‎Pe a tL ‏دپ‎ Ll ‏ااه ُمى4ىمسمصممىسىسىحىمىصمببا+6جج لج __ ۱۱۳3۱۳۹۳5 555 ‎11001018100 TTT) | | | ‎SSeS ‏ا‎ te) sielel sia | ‎6xZ LT TT ‎| eat ‏اا‎ Tn _ le etd ‏ا ار لدت تكثيىيي اا ل ا ‎le‏ للملا ‎ 

صفحه 105:
ار ۲ 186 0 

صفحه 106:
Use space appropriately 

صفحه 107:
This is the Netflix iPad app, I’m all for proper whitespace, but this is just not an appropriate design for the iPad. You have all this space, why not use it e.g. to display the film posters too? It looks like they just stretched out the existing iPhone app. This is a common problem with most Android tablet software these days. ۱ NETFLIX Mother and Child Daniel & Ana Happily Ever After Leaving Entre Nos This Emotional Life The Young Victoria | Am Love Me and You and Everyone We Know Wild China Art & Copy Please Vote For Me A 0# ‏تسج‎ 

صفحه 108:
Use space appropriately 1/3 Wit \ "" ۳ 

صفحه 109:
Reese) 

صفحه 110:
Shadows and gradients rule #1: Use shadows and gradients as a tool, not 258 0 00 

صفحه 111:
Think of real life 05 ليت نت 111 

صفحه 112:
‎A‏ ئ ‎| Take a second to look at this photo | and look at the reflections, the knobs, the shadows being cast. ‎ 

صفحه 113:
In real life... e Shadows are never pure black (radiosity) e Objects higher than other objects cast a shadow on the lower object e Some surfaces are reflective and some are not e When we press a button it lowers e Light is cast from a direction 113 

صفحه 114:
Shadows are never pure black 

صفحه 115:
Drop Shadows will ruin your design if you don't do it right. Things should be right up against their surface which means using a 1-3px Drop Shadow size. And 0-3px distance. This isn't WordArt. Mike Rundle, flyosity.com 115 

صفحه 116:
Window shadow 800 DigitalColor Meter | [Displayin sRGB 00 R: 255 0: 5 B: 255 Cinema 

صفحه 117:
Recipe for a good button! Light to dark gradient Clear verb Clear lines 

صفحه 118:
Recipe for a good button! ۳" Distinctive active state It’s not realistic to change the color of a button when you press it but it does help ۱ to reinforce which button was clicked. | In real life the button would probably lower a bit thus creating an inner shadow. | Inner shadows work for “pressed” look 

صفحه 119:
Don’t just flip the gradient direction! Just flipping the gradient Light direction Light direction 

صفحه 120:
Most interfaces: think of light coming in from a 120° angle h people and places... Q Name E-mail Organisation hl scoop’? Fol p into the for new list | Text inputs have shadows Modal boxes cast a 120° drop on the top and left shadow (more shadow on bottom and right), be subtle 120 

صفحه 121:
Practical tips & tricks (2) 

صفحه 122:
Practical tips & tricks (2) Color Icons 1 Reusable design 2 Next up are three parts, the first about color, then icons, and to end reusable design. 122 

صفحه 123:
Color 

صفحه 124:
Ways to pick colors 

صفحه 125:
OK Cancel Add To Swatches _ Color Libraries 100 0 0 |_| Only Web Colors 125 

صفحه 126:
Hues app for Mac is pretty cool, and it’s only €2 @ Hues File Edit History Win [Ey [ Ras sliders 3 Red 9 5 Green Blue Opacity ‎ —)‏ سح ‎#956D93 ‎RGB ‎rgb(149, 109, 147) ‎hsl(303, 16%, 51%) ‎126 

صفحه 127:
DigitalColor Meter RGB as Hex Value, 8-bit 5 2 15 >) 5: 27 Aperture Size Hues is a good replacement for the standard digital color meter. 127 

صفحه 128:
Easy coloring: 3 values 

صفحه 129:
#000 #333 Headings Body text h1, h2, h3, h4 { color: #000; } body { color: #333; } 666 | only ever use 3 colors to start with, to establish some hierarchy. Muted text -muted { color: #666; } 

صفحه 130:
ending If you do work with more color it’s a good idea to think about blending them a bit for a more natural and considered design. 130 

صفحه 131:
Let’s say you have a colored background... 131 

صفحه 132:
132 

صفحه 133:
133 

صفحه 134:
Box text color should be light version of background color, not white, not grey 134 

صفحه 135:
/* 1. You can pick the color manually using a color picker */ -box p { color: #c5f8ff; /* 2. You can pick the color from your browser and use Hues.app */ -box p { color: #c5f8fFf; /* 3. Or use the lighten() function in 5655 */ ‏م ءعامط.‎ 1 color: lighten($bgcolor, 70%); i 7 4. Or if all your supported browsers have rgba support, you could do it like this. The result will be less optimal but it will work on any background. 0 ‏م غامط.‎ 1 color: rgba(255,255,255,0.9); } 135 

صفحه 136:
Blending colors #000 #333 Headings Body text hi, h2, h3, h4 { color: #@@@; } body { color: #333; } #666 Muted text -muted { color: #666; } 

صفحه 137:
Blending colors Heading #000 #333 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. #666 Copyright muted 

صفحه 138:
Heading #333 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. #666 Copyright muted 

صفحه 139:
‎get ۱ OurStory Blog SIGNUP LOGIN‏ ها تا ‎ ‎We offer two simple ways to pay for your email campaigns and you can switch between the two at any time that suits. ‎Pay per campaign ‎Great if you only send emails occasionally. You'll only pay when you send an email campaign to more than 5 people. Each campaign ‎costs $5 plus 1¢ for each recipient. Fen Sarena FER Re Weer eT ‎Pay monthly for unlimited campaigns ‎Perfect for anyone who sends at least one campaign a month. We'll bill your card monthly based on the size of ‏سمس ك4 ‎your subscriber list. The monthly fee adjusts automatically as your list’ 2 - ‏و + ‎] ‏قهع ولمع‎ 0- 500 501 - 2,500 2,501 - 5, MONTHLY COST SEND LIMIT Unlimited Uniimited Uniimited Unlimited Unlimited Unlimited ‎No matter how you pay, there are no contracts, setup fees, or nasty lock-ins, and you can cancel at any time ‎i i 1 Try Campaign Monitor for free! SIGN UP FREE Choose how to pay when you start sending campaigns ‎Aderkoin marneceec oarn 9a nrnfit Winhuwwalimo dieconiinte ‏ایا‎ ‎pee, ‎(@ CampaignMonitor ‎ ‎ ‎Pricing ‎fill High-Volume Pricing ‎Mark It Up & Profit ‎ ‎ ‎ 

صفحه 140:
Try Campaign Monitor for free! There’s a green background, dark green for the heading, some softer green for the text, and then a clear button. All work very well together, of course, they’re all variations on the same color. 140 

صفحه 141:
For example, here’s the page title, instead of just using white they used a tint of blue, blending properly with the background color. This looks better. 141 

صفحه 142:
No colour theory here... just a few tricks: Home - Wolf's Little Store Home - Wolf's Little Store Ethos Catalog Interface design that works. You just nt €120K on the new of your application. are up in arms about the upcoming redesign. You need some / ows how great apps are built. Here's your man. View the work §} Read the blog Trick 1: as few colours as possible 142 

صفحه 143:
No colour theory here... just a few tricks: Subtraction.com - | | + | beep Subtraction.com/ 2 Gr subtraction Google | Subtraction.com Subtraction E be Search I’m not the only designer just resorting to ion.com/ by Mary Meeker and Tim Cook on Tablets: Trick 1: as few colours as possible 143 

صفحه 144:
۱ BU 500 =| News & Features a Cee eee ere a eet et 5 53۷ eee ede are ‎Rotate eure‏ اه ‎ele MU ee eee)‏ انا ‏ا ات ‏عاات5 مللامدى ماكز ما ‎(mes‏ ‏ل ل ل نك ‎ ‎ate‏ عر ل" انرمع اعم ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎— Kuler might be a good tool for color but | ‎este ‏للك‎ don’t really work with too many palettes in L ‏ای‎ ۰ : ١ 1 ‏اب۱7‎ interface design, | mostly stick to what | ‎know that works already (white/grey/black +‏ سه ‎accent colors + standard message colors,‏ مناعاعهها ‎Post on: 2011.10.01 at 06:10‏ ‎e.g. red for error and green for success)‏ سس ‎ ‎144 ‏00-0 0 ۰ ۳55۲ للملا ومأوصمط وعم11 = ‎de een‏ | ‎Lusdious ۰ | ‏ا‎ je ‏از 1 ‎Badia‏ ‏اناا ‏ع« ل ساي ‎as‏ ‎See] ۰‏ و تا ‎eres iar] et | ‏ع ‎Fighter Pilot‏ لا يمنا ‏حم م ه (198866 1084 -1) ‏| بعنامم بمصام | وتعمماعهك | علانه بعابطا | ععابط ممطة | ماعذ | ©" ات ‏لت ‎Create ‎att d ‏لك‎ ad ۱۱۵۷۷ ۱ eae | Highest rated Random ‎Community ‎Pulse ‏جر 

صفحه 145:
| don’t have a sixth sense for color, | can apply the color theory | know, but mostly UI design doesn’t need a lot of color, so | / wouldn’t wo much about it eith ی یز These pallettes are harmonious... but why? 145 

صفحه 146:
Fake harmony 3D. View Window Help ۳2 5 ESSENTIALS. DESIGN «> | (CP Co uve~ A way to fake color harmony in a kind of engineered way. See the video at http:// methodandcraft.com/videos/creating-harmonious- color-schemes 

صفحه 147:
Pay per campaign Great if you only send emails occasionally. You'll only pay send an email campaign to more than 5 people. Each can costs 55 plus 1¢ for each recipient. ‏ام‎ 

صفحه 148:
Musescore.com button: Register for free now! Already a member? Lag in Apple.com Overview Tech Specs Bootstrap button: Bootstrap on GitHub » Currently v1.3.0 Cloudapp button: requires OS X 10.6.6+ 

صفحه 149:
”| تت ی مامت requires OS X 10.6.64 Already a member? Log in Overview Tech Specs Currently vi.3.0 All these buttons are the same. Designers are not original! 

صفحه 150:
Originality, creativity is not the goal The goal is to deliver a good design. 

صفحه 151:
0 0 n 1 ra 3] Not everyone has an Apple Cinema display: most people have a cheap computer with a crappy screen. If you #EEE (very light grey) 8 6۷۱, use a light grey like #EEE then there’s use at least #D5D5D5 (grey) What they see What you think they see 151 

صفحه 152:
Icons 

صفحه 153:
۱ ۳ 0 fi S Not so much to say about icons, they’re an essential part in the interface to easily recognize actions and parts without having to think too much. e Invest in a good icon set e Pixel icons are ideal for web applications e FamFamFam will only get you so far 153 

صفحه 154:
۱ ‎Sj shape_fip_vertial‏ ورس وز سس ۲۳ ‎ak‏ مج ورس مر ۳ عد یوج مهن لا ۱ ‎ ‎ ‎(apples sete (3 bik atit ‎]1[ ‏قن إ! اممصابصة_عاق_ممقدناووة‎ error ‎12 ‏اسلا فان محتاانعه‎ fg brick go ‏قم ها ی عمصدات_ عفن امه ۳ ‏تا ااطت_ مج هلجم 7 ‎| ‎۱55 eplination_view_boen ‏قوم‎ ‏عضاعق رودن ها مما مساوم 2 ‏هوم عقا_ممار_ممقساممة ‎[i‏ ‏يدص وما مرسسب 0 ‏مص لك امامكعدمد_ممقدنادد للا ‎bagi jini‏ مهس با ‏تا زر نات مه لا ‎۱۳ ack ‏عفعضلن_ سا‎ ‎| ‏دمر وميس ‎١١‏ ‏مو وصن یط ‏بصدر_ وده وير ‏عدا وطمه د ‎day‏ ‏تدر ايه 6 ‎00000 ‎= bulet_srromm_ owen ‏وم سم متايه هر ‏مس سمدرستايها ع سوسم نمكم ريكنام ‎gr.‏ ‏اند و ‏تایه و ‎ ‏موه انیا ۵ له _ )تلا ۲1 مسق یحس_ 0۱۱9 و جوا وت ‎bull pink‏ متا زا سر ‎eager! tlie pupae‏ ‏هها_علانه ها تیا زقس ۲ص ۵اه © لت تنج _طچره_عابجا 5 ‎re_stat_geil_2‏ سا ‎buliel_loggle_pluc‏ 2 اس ال لت انوا ‎(buy‏ ‎ 

صفحه 155:
+S Dropbox — &) Get Started |) Files © Eve = Dropbox » Preso_barcamp » [3 BC +, Search your Dropbox ‏يو‎ Upload | (oq New folder 4 Invite te folder File Name « Size Modified tt Parent folder =| responsive_design_outline.txt 5.49KB 6/24/2011 9:33 PM responsive.key 66.08MB 6/25/2011 1:24 AM j.| responsive.pdf 9.65MB 6/25/2011 1:18 AM (| Screen shot 2011-06-24 at 17.32.49.png 257.63KE 6/25/2011 1:16 AM a, | fil Screen shot 2017 1 188.48KB 6/25/2011 1:16 AM 6/25/2011 1:16 AM 6/25/2011 1:16 AM 6/25/2011 1:17 AM 6/25/2011 1:17 AM (al | Screen shot 2011-06-24 at 18.04.45.pnqg 1.61MB 6/25/2011 1:17 AM [@]) Screen shot 2011-06-24 at 18.06.57.png 876.48KB 6/25/2011 1:16 AM (@l ) Screen shot 2011-06-24 at 18.07.11.png 633.16KB 6/25/2011 1:16 AM [| Screen shot 2011-06-24 at 20.36.50.png 183.73KB 6/25/2011 1:16 AM fi Get extra space free ‏ها‎ | Screen shot 2011-06-24 at 23.39.51.png L.LIMB 6/25/2011 1:16 AM @ Install Dropbox {| Screen shot 2011-06-24 at 23.40.14.png 1.OGMB 6/25/2011 1:16 AM ee (| Screen shot 2011-06-24 at 23.40.30.png 397.37KE 6/25/2011 1:16 AM [@] | Screen shot 2011-06-25 at 00.38.18.png 246.34KB 6/25/2011 1:16 AM fl] Screen shot 2011-06-25 at 00.45.48.png 206.27KB 6/25/2011 1:16 AM fg) Screen shot 2011-06-25 at 00.52.02.ona 196.77KB 6/25/2011 1:16 AM 

صفحه 156:
(J /Users/wolfr/icons/Picons basic 2/basic2/PNCG/64 ‏اعد ۲۰3۵۱۵ ات(‎ Q 0 » @ basic2-007.png 5 5 8 basic2-014.png > basic2-004.png 22 basic2-005.png basic2-006.png basic2-O11.png basic2-012.png basic2-013.png ۱۳ th za basic?-035.png لل basic2-042.9ng basic2-033.png basic?-034.png هر “” basic2-040.png basic2?-032.png basic2-039.ong basic2-04 Long 301 tems, 92,36 GB available @ basic2-003.png a basic2-O10.png ee basic2-O17.png د basic2-024.png 8 basic?-031.png eve 39 لم8 03- 2ع أكدط e basic2-002.png basic2-009.9ng و basic2e-016.png basie2-023.png basic?-030.png & basic2-037.0ng imi | 6 8512-0019 وو 66 basic2-008.png <> basic2-015.png a basi¢2-022.png a basic2-029.png هه basic2-036.0ng _., Macintosh HD [) Time Machine Backups ‏كك‎ ‎J) untitted ‎0176ca000000‏ قا ‎Fl Desktop‏ ‎woltr‏ 8 ‎Ga Pictures‏ ‎Applications‏ ‎Downloads‏ © ‎Documents‏ )} ‎٩ Sites‏ ۳۳۵ 22 مت عسعنت 2011 7 ‎DD Drephax‏ ‎Today‏ ‎Yesterday‏ ‎Past Week‏ ‎(All Images‏ ‎(AN Movies‏ ‎All Documents‏ @( ‎ ‎ ‎ ‎ 

صفحه 157:
ane Mac App Store - Hues Picons | Vector Icons and P € C ft © picons.me ‏جد هن‎ 1 Gmail 5 Google Reader Zap Colors ۳ Stack Overflow Read Later (ask Metafilter Add to pinboard ۱0 2۶ |_| Other Bookmarks i ee Quick download wh Picons Royalty-free Vector Icons for LC Picons Basic 2 2 300 icons @ = ~ 6 0 يه 3 لعتا تا ۲۲۱ تا کت iE) © 6 . ضرا 2- 4 © اج‎ O Dd k > 3 ‎fo‏ ظ کت = [©] ‎][ ۸ 8 # a ‎8 # 0 ‘ GC 26 ‎۳۹ ‏لا » #۶ 8 © ‎© ‎8 ‎0 ‎I ‏ل ‎He = BD to ‎pe ‏© 2 تن ذل إلا هك م ‎ip‏ ‎ba ‎09 8 4: ۵ ] ]1 6 ] : 0 ][ 45 ۶ 8 ‎ih & @ ‎oP 3 ‎ ‏رت ‎ ‎he ‏ا و۲‎ © be ‎2 ‎hte ‎ 

صفحه 158:
Mac App Store - Hues Picons | Vector Icons and P P Pictos € C fi © pictos.drewwilson.com ‏جد هي‎ 1 ‏اموت‎ Google Reader Zap Colors 5, Stack Overflow Read Later [ask Metafilter Add to pinboard L_ Instapaper » |_| Other Bookmarks ‎FOLLOW ME ۲۸۷/۴۴۲ ۲۲۷۱5 ۵۴۶‏ = ۰ اتید بای یات ۱ ‎191 ‎3 ۱۷۲۲۲۲۸ ۶ ‎ ‎ ‎ ‎ ‏© 65 2 :د © 66 ۰ او ۱ ۱ با ‏ل اف اا ل ا لح ايلا ل ل ل و و فيس إل بجحو د يم إن عن فد لي يخ ۱ ‏5 ا ذه لفتا ذا © [عا كا ©6 © »مز 6 - 6 +4 © 6#اع 2 6 © ]ا 1 <د 6 حر ‏| 55 ف 55 كا ها 1ن لها اسه © 1 © 1 © 7 © © 0 © © 72 5 ب بي 3 = ه ‎ae en ee ee oneness ae‏ فخ 8 فش ىه 5 5 © همه تير قم نلى فق © © 65 2 لس 9 ‎ce ee‏ ‎Te ee ee ee ee re ce oe ee)‏ ‎0022 1002 2 1 0 ۱ ‎Pictos too, http://pictos.drewwilson.com/‏ لا لا © © © 69 © »> * « (ه 34 يه ‏اا ال م 6 ۱ ©؟ » > تهت ‏"ا خق 0 <> <> #" © فخ عل 2# 6ن ل 6 © 6 © < © © 83 ]ا ) 0 + تت ف هه ‏© © © هه 8# م 6 © ©« © © هات 65 5 س تم *» 6 عر ير #8 8 35 85 5 ‎158 

صفحه 159:
font with 5 ۲ 5 ico ‏کچ و تور‎ 9 || مذ ف % وا a ©© 3 © 55 6١4 + Oe 06 6 = ‏م‎ ‎x A 4 © لب ل 1 زل و © *“ ‏مس‎ #© 6 < t oN, كا لح ‎a + ©‏ سد © ى عل Fico is a font with 52 simple, commonly used icons and lyphs, served on th] scalable perfect for responsive designs with media queries color-agnostic quick & easy you can even use gradients and shadows works in most browsers - even on mobile 159 

صفحه 160:
Icon rule #1: Only use an icon when it's well known, otherwise use text, or text + icon 

صفحه 161:
What does this mean? It’s pretty clear... we know this from traffic, we know the exclamation mark, it means “warning”. 161 

صفحه 162:
Ambiguity الا 2 This one is a little tricky. The right button below means add, and | can see that the toggle switches between a grid and a last view, but what about the loop icon? Does it mean zoom? Does it mean view details? Multiple meanings are a common icon problem, this can be resolved by using labels. Facebook | Jules Tort... Facebook | Jules Tort... The Minirnalist - Reci... ee 2 & ۳ Italian Sausage and ۰ © هت ه 

صفحه 163:
163 3:29 ممع مم1 ‎RAgainstSlavery‏ Jason_Pollock ezrabutler Nussknackerin 

صفحه 164:
Reusable design 

صفحه 165:
Just like you create functions to reuse in code, you should have a design library with elements you can reuse (Web devs have it easy thanks to CSS) 165 

صفحه 166:
ده as ۱ ‏اه‎ Grd Layouts ‎i‏ تا فت رها ‎ ‎om ۱۱ 8 1 er ‎61 017 ‎ ‎ ‎ ‎2 ‎oat ‎Ct ‎ ‎ ‎FORK ON GITHUB ‎USE IT WITH LESS ‎Download, fork, pull, file issues, and more with the official Bootstrap repo on Github. ‎A fan of using Less? No problem, just clone the repo and add these lines: ‎ ‎<link rel="stylesheet/ess" href="/path/to/bootst ‎ ‎<script src="/path/to/less.js"> ‎Browser support ‎Bootstrap is tested and sup| browsers like Chrome, Safa and Firefox. ‎9 9 ‎* Latest Safari * Latest Google Chrome « Firefox 4+ ‎ ‎ ‎ ‎©» Fully comp and mir Css * Complete styleguide documentation ٠ Three example pages with different layouts ‎ ‎ ‎ ‎HOTLINK THE CSS ‎For the quickest and easiest start, just copy this snippet into your webpage. ‎<link rel="stylesheet" href: ‘http://twitter. github, ‎About Bootstrap ‎History ‎Engineers at Twitter have historically used almost any library they were familiar with to meet front- end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly. ‎ ‎Read more on ¢ vitter.com * ‎Follow @twbhootstrap - 3,730 followers 

صفحه 167:
Media Tables Forms Navigation Alerts Popovers Javascript Less ۱۱ Overview About Grid Layouts Bootstrap | Choose File | No file chosen Example form legend (J Option one is this and that—be sure to include why it’s great () Option two can also be checked and included in form results (| Option three can—yes, you guessed it—also be checked and included in form results. Let's make it super long so that everyone can see how it wraps, too. Option four cannot be checked as it is disabled. May 1, 2071 12:00am | to) May &, 2071 11:59pm Prepended checkbox Appended checkbox File input List of options Date range Textarea is this and that—be si"=to.include why it’s great سس #تصصصاخصم ‎emma ener‏ اصانص سصصتطاخصخصصص صتصصص صبيطة صصة 

صفحه 168:
SUPERCUT.ORG Home Viewall Add yourown The SuperSupercut ‏عانه عنطا هط‎ Supercut. noun \‘sii-per-ket\ — A fast-paced montage of short video clips that obsessively isolates a single element from its source, usually a word, phrase, or cliche from film and TV. Supercut.org collects every known example of the video remix meme. Recently added ‏ااه يدوالا‎ This site for example was coded up with Bootstrap in one evening by a developer with few visual skills. Looks passable, even good to me! ۰ 75 1999999111101 MEWS LIVE COW ERAGE Rebecca Black's YouTube interview Fight Club — Every ‘| am Jack's... Various horror films — Exploding Bill Clinton's 1998 State of the = Every "Um heads Union — Every number 

صفحه 169:
jQuery Ul Mobile Meetups Forum Events About Donate موت )۲۱۱ Pe ‏كي‎ JQUERY MOBILE 1.0 FINAL RELEASED! jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design. 1.0 Final Release Notes © jQuery Mobile recently released 1.0, if you’re doing something that’s mobile only, this might be a good framework candidate. = = 2121 | | played around with the beta and they do a lot of customized web application that will work on all popular things right by default smartphone and tablet platforms. Device support © CINDROID BlackBerry. ۱ ۸ ‏مجح و وج لس سل‎ DARA 

صفحه 170:
حم م ‎bookmarks for w | Golden Grid System‏ ۵۵ 21 6 C fi © goldengridsystem.com _ Read later Add to Pinboard 3 Reader ۳1 FB Tw 1) instapaper [7] Gmail zap colors 5 Google Reader »® |) Other Bookmarks Golden Grid System A folding grid for responsive design. Fou r features There’s frameworks out there for responsive ۱ ۱ design too, http://goldengridsystem.com/ Columns, gutters, a baseline and a scrip ee ۱5 5 

صفحه 171:
%®% Ext Design » ۳ Other Bookmarks Stock Portlet —djia — sp500 ‎Samples &‏ نا ‏نه ‏90 ‏5 ‏سا ‏= ‏< ‎w‏ ‏@ ‏= ‏9 ‏= ‏= ‏9 ‎Qo‏ ‎Portal Layo ‎cdn.sencha.ia/ext-4.0.7-gpl/examples/portal/ portal.html ‎[1 Gmail ‎zap colors ‎Portlet 3 RUG X ‎Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nis! non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. ‎Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam mec urna. ‘Curabitur velit. Lorem ipsum dolor sit amet. ‎Avoid frameworks that look dated. Not every ‎framework is good. ‎Feed Viewe ‎Instapaper ‎% Samples & ‏1 1۷ لا ‎a Reader FB ‎Grid Portlet o ‎‘Company % Change 3m Co 0.02% 0.42% ‎0.28% ‎Alooa Inc Altria Gr... 0.01% 0.31% -0.48% 0.53% ‎0.92% ‎Anverica... ‎America... ‎ATET Inc. Boeing ... Caterpil... 0.02%, 0.51% -0.43% ‎Citigrow... ‎EI. du P... Boron ۰ -0.08% ‎1.09% ‎General ... ‎General ... ‎Portlet 2 ‎Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sedales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla. ‎& HTMLS Ap; ‎Add to Pinboard ‎8 ۵ 5 Mal 6 8 ‎Read later ‎Ext Portal ‎Options: ‎@ Navigation ‎Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum nan, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libéra lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla. ‎ ‎ ‎ ‎ 

صفحه 172:
جوا ۵ 

صفحه 173:
۱۱۱ ۱۱۱۵/۰۱۱۱ aecy Remove Outline for WebKit Browsers, ۳ 7 input[type="text"]:focus { outline: none; 1 http://webexpedition18.com/articles/useful-css-snippets/ 173 

صفحه 174:
STROSS CTL 6 eer ee rer ny 5 Datalls 1 7 2620 Personal | AW | 2 ‏يم‎ aes alk to Kerri | Business CES 2012 2 

صفحه 175:
۱۱( ۱ ۱۸۱۱۱۱۱ ۱۹۱۱۱ ee 0 [۲۵] وا عطع۳ ۳ ‎Aube Gane (8) =a‏ 3 1 ای ی ۱ ۲ مج 1۱] وس Hatch Fleplace First es | Mode | More *| || Mode|Mone ۳ Fieplace with Fiom [0 ‏اس ما لت‎ ۵۵۶ Type | Creation (Cur Stent 1 Fred Cer Pad (0 . [ File 12 ‏عوهت ام ع‎ ]3۱ AL) ce : ‏ا‎ Break) O Seg = Irechade: Ext ‏ممم طروي‎ || CPt > ‏نا 5 ۳ كم‎ 0 Type | Bane 10 Extea, ‏مضع‎ A unre ats ‏فق ون توت لا‎ | = Append Fokker Marne (9) ١ ‏محفهم وبع ا‎ 13 Hone = (۱ =| |More =| [1 : 1 Heme | More | See cane > Selections (12) 8 New Locate )13( A Fines | ‏علطن ی‎ Hekber Misr Lem Mim [0 7) Maa [0 : Pith Match Cane FP 4 Sublet: Path Len Min — Maw [9 Copy not Move Selected) Favourite 

صفحه 176:
ی ی 4 L. MOO | Print Robot Hello, it's Little MOO again. | thought you'd like to know, the following items from your order are now in the mail: 1 x MiniCards (100) You requested DHL Standard delivery, which means it should reach you between 5 and 15 business days. Remember, I'm just a bit of software, so if you have any questions regarding your order, the best place to start is with our Frequently Asked Questions. We keep the answers here: http:/Awww.moo.com/help/ If you're still not sure, contact customer services, (who are real people) at: Thanks for ordering with MOO - we hope you love your order, Thanks, Little MOO, Print Robot Moo "We love to print" + 5 ۴ 1 1 1 1 سای ( ۱ ۳۳۱۳۲ ۲۵۵ 0340734109 21 Print Robo O409788673 sine 1 Print Robo 13 1 8 | 2 ۱ ۴6۳۱۳۲ ۲۵0 0988318456 1 ( ۱ ۳۲۱۳۱ ۵۵ 10398316456 

صفحه 177:
So, this presentation is coming to an end. As we walked through typography, alignment, light & shadow, color, icon usage and reusable design | hope you learned something new that you can apply to your work to make it better. There’s certain parts of designing that we can make into guidelines and rules of thumb. Applying these rules will make your design better and in many cases good enough. 177 

صفحه 178:
If you want to become a smarter person read every single book and article mentioned on the following slide. 178 

صفحه 179:
http://twitter.github.com/bootstrap/ http ://iquerymobile.com/ http ://goldengridsystem.com/ http://subtlepatterns.com/ http:/Awww.mikematas.com/ http://pictos.drewwilson.com/ http://picons.me/ http ://ico.lensco.be/ Designing the obvious by Robert Hoekman Jr. The Elements of Typographic Style by Robert Bringhurst Detail in Typography by Jost Hochuli Web resources http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.ph http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/ http:/Awww.uie.com/articles/three hund_ million button http://blogs.msdn.com/b/jensenh/archive/2008/03/12/the-story-of-the-ribbon.aspx http://www.asktog.com/columns/076AppleFlatlandPart2.htm! http://www.asktog.com/columns/075AppleFlatlandPart1.html Designing the obvious by Robert Hoekman Jr. Designing for interaction by Dan Saffer Getting Real by 37signals http:// gettingreal.37signals.com/ 179 Books Defensive Design for the Web: How to improve error messages, help, forms, and other crisis points by Jason Fried & Matthew Linderman Designing Web Usability by Jakob ‏لوحتت اه‎ Don’t make me think! by Steve Krug 

صفحه 180:
۳۱۱۲۵ ۰ If you like what you’re seeing, | can apply my knowledge to your application too, or give this presentation for your company. Get in touch: mail@wolfslittlestore.be 180 

صفحه 181:
۱/۱ ۲۱6۲۵۰5 1۳۱۶ ۷: http://twitter.com/wolfr 

صفحه 182:
Subscribe to the blog: Here’s the link: http://wolfslittlestore.be/journal/ RSS: http://feeds.feedburner.com/Wolfslittlestore 182 

صفحه 183:
Thank you for your attention!