Collective #157

Go to Source



Free Font: Geomanist Regular

An elegant font family for a clean look designed by Atipo Fonts. The regular style is for free (pay with a tweet or like) and you decide the price for the whole family.

Get it



Donovan Hutchinson’s in-depth tutorial on how to create clocks with CSS animations and JavaScript.

Check it out



In case you missed it: Colorable is a color combination contrast tester that helps finding safe color combinations. Made by Brent Jackson.

Check it out



Besides showing off a stunning website, Stampsy allows for the creation of photo stories, mood boards, visual essays and more.

Check it out



A modern mobile touch slider with hardware accelerated transitions and native behavior. Made by

Check it out


Frontend stuff

A curated collection of useful tools and resources related to font-end development. By Moritz Klack.

Check it out



A gorgeous looking HTML5 media player with custom controls and WebVTT captions. By the folks from Selz.

Check it out

Collective #157 was written by Pedro Botelho and published on Codrops.

Go to Source

Our favorite tweets of the week: February 23, 2015 – March 1, 2015

Go to Source

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

THEBIGEYES #branding imagined by Lo Anto Like it?


Case Study of Assembly by Focus Lab


A visual way to brainstorm your ideas via @gregoiregilbert


Astropad: Turn your iPad into a professional graphics tablet for your Mac


#Mobile #UX design and all the ways it could go wrong via @sitepointdotcom


A comprehensive guide to hiring the perfect freelance developer & designer. via @thinkful


The Unseen creates “coded couture” to read wearers’ auras via @dezeen


Debugging tools & resources for testing website layouts


Dunkr App — easily see stats on your latest Dribbble shot


Biodiversity in Design Education via @designobserver


Better Motherf**king Website


In case you’re interested: 5 Important Design Principles for Apple Watch #Apps


Brace yourselves … The gorgeous #typeface that drove men mad and sparked a 100–year mystery /@Gizmodo


Fastest #WordPress Hosting – Beginner’s Guide to Finding One


Emails that win you clients


Undo – good article by @SachaGreif


Check out JWT’s interesting presentation: The Future 100


Lonely Planet 404 is adorable


Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

LAST DAY: Flat UI Pro, an Easy-to-Use Bootstrap Design Framework
Our favorite tweets of the week: February 23, 2015   March 1, 2015

Go to Source

Desktop Wallpaper Calendars: March 2015

Go to Source

We always try our best to challenge your artistic abilities and produce some interesting, beautiful and creative artwork, and as designers we usually turn to different sources of inspiration. As a matter of fact, we’ve discovered the best one—desktop wallpapers that are a little more distinctive than the usual crowd. This creativity mission has been going on for almost seven years now1, and we are very thankful to all designers who have contributed and are still diligently contributing each month.

This post features free desktop wallpapers created by artists across the globe for March 2015. Both versions with a calendar and without a calendar can be downloaded for free. It’s time to freshen up your wallpaper!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • You can feature your work in our magazine2 by taking part in our Desktop Wallpaper Calendars series. We are regularly looking for creative designers and artists to be featured on Smashing Magazine. Are you one of them?


Designed by Elise Vanoorbeek3 from Belgium.


Let’s Spring!

“After some freezing months, it’s time to enjoy the sun and flowers. It’s party time, colours are coming, so let’s spring!” — Designed by Colorsfera38 from Spain.

Let's spring!39

Fresh Lemons

Designed by Nathalie Ouederni71 from France.

Fresh lemons72

Hello, Spring!

Designed by Roxi Nastase90 from Romania.

Hello, Spring!91

Wake Up!

“I am the kind of person that prefers cold but I do love spring since it’s the magical time when flowers and trees come back to life and fill the landscape with beautiful colors.” — Designed by Maria Keller123 from Mexico.

Wake up!124


“As we all grow hopeful for spring to start, this floral background lightens my mood and I’m always inspired by Wes Anderson’s insight.” — Designed by Jordan Thoma174 from the United States.


The Early Adopters

“Last year I made also a wallpaper with these little chickens. The whole year up to now they lay on my desk and looked at me: ‘we are still cheerfull, use us again for your wallpaper’ ‘Allright, you have me’
Happy March!” — Designed by Agnes Swart216 from the Netherlands.

The early adopters217

Racers Spring

“All nature and creatures come alive.” — Designed by Corina Moscu255 from Bucharest, Romania.

 racers spring256


Designed by Origami Technologies290 from India.


March Madness

“To me “March” is all about colors, new leafs, fresh air containing super molecules of madness :) SO get MAD and enjoy the freshness!” — Designed by Abhijit Sarkar327 from India.

March Madness328

Crazy Glasses

Designed by studio Pietje Precies344 from the Netherlands.

Crazy Glasses345

It Smells Like Spring!

“It’s spring! Everything is green again!” — Designed by Design19361 from Romania.

It smells like Spring!362

Spring Is In The Air

“March is here, and with it we hope to get new projects and ideas flourish … We are going to start watering, just in case!” — Designed by Verónica Valenzuela404 from Spain.

Spring is in the air405

Chutki’s Holi

“My imagination on how Chutki (a famous character of Indian animated comedy series named ‘Chhota Bheem’) will enjoy HOLI this year!” — Designed by Sanchari Sarkar425 from India.

Chutki's Holi426

Spring Awakening Tree

“Springtime is the nature awakening.” — Designed by Antun Hirsman468 from Croatia.

Spring awakening tree469

Cartographic Wuppertal

Designed by Fabian Hüttenhoff487 from Germany.

Cartographic Wuppertal488

The Sound Of Music

“This month marks the 50th anniversary of The Sound of Music, the movie with Julie Andrews and Christopher Plummer that first captivated audiences in 1965.” — Designed by Dan Di504 from Italy.

The Sound of Music505

I’m A Business, Man.

“March, even just by name, is a month for action and hustle. This quote is one of my all-time favorites, and I think it’s a pretty great reminder to stay on your game.” — Designed by Resa Barillas549 from the United States.

I'm a business, man.550

Tune In To Spring!

Designed by Iquadart584 from Belarus.

Tune in to spring!585

After The Rain

Designed by Richard Davis606 from South Africa.

After the rain607

Join In Next Month!

Please note that we respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience throughout their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us, but rather designed from scratch by the artists themselves.

A big thank you to all designers for their participation. Join in next month649!

What’s Your Favorite?

What’s your favorite theme or wallpaper for this month? Please let us know in the comment section below.



  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6×768.jpg
  7. 7×864.jpg
  8. 8×720.jpg
  9. 9×800.jpg
  10. 10×960.jpg
  11. 11×1024.jpg
  12. 12×1050.jpg
  13. 13×900.jpg
  14. 14×1200.jpg
  15. 15×1050.jpg
  16. 16×1200.jpg
  17. 17×1080.jpg
  18. 18×1200.jpg
  19. 19×1440.jpg
  20. 20×1440.jpg
  21. 21×768.jpg
  22. 22×768.jpg
  23. 23×864.jpg
  24. 24×720.jpg
  25. 25×800.jpg
  26. 26×960.jpg
  27. 27×1024.jpg
  28. 28×1050.jpg
  29. 29×900.jpg
  30. 30×1200.jpg
  31. 31×1050.jpg
  32. 32×1200.jpg
  33. 33×1080.jpg
  34. 34×1200.jpg
  35. 35×1440.jpg
  36. 36×1440.jpg
  37. 37×768.jpg
  38. 38
  39. 39
  40. 40
  41. 41×480.png
  42. 42×768.png
  43. 43×1024.png
  44. 44×800.png
  45. 45×960.png
  46. 46×1024.png
  47. 47×1050.png
  48. 48×900.png
  49. 49×1200.png
  50. 50×1050.png
  51. 51×1200.png
  52. 52×1080.png
  53. 53×1200.png
  54. 54×1440.png
  55. 55×1440.png
  56. 56×480.png
  57. 57×768.png
  58. 58×1024.png
  59. 59×800.png
  60. 60×960.png
  61. 61×1024.png
  62. 62×1050.png
  63. 63×900.png
  64. 64×1200.png
  65. 65×1050.png
  66. 66×1200.png
  67. 67×1080.png
  68. 68×1200.png
  69. 69×1440.png
  70. 70×1440.png
  71. 71
  72. 72
  73. 73
  74. 74×480.jpg
  75. 75×768.jpg
  76. 76×1024.jpg
  77. 77×900.jpg
  78. 78×1200.jpg
  79. 79×1200.jpg
  80. 80×1200.jpg
  81. 81×1440.jpg
  82. 82×480.jpg
  83. 83×768.jpg
  84. 84×1024.jpg
  85. 85×900.jpg
  86. 86×1200.jpg
  87. 87×1200.jpg
  88. 88×1200.jpg
  89. 89×1440.jpg
  90. 90
  91. 91
  92. 92
  93. 93×480.jpg
  94. 94×480.jpg
  95. 95×480.jpg
  96. 96×600.jpg
  97. 97×768.jpg
  98. 98×1024.jpg
  99. 99×864.jpg
  100. 100×720.jpg
  101. 101×800.jpg
  102. 102×960.jpg
  103. 103×1024.jpg
  104. 104×1050.jpg
  105. 105×900.jpg
  106. 106×1050.jpg
  107. 107×1080.jpg
  108. 108×480.jpg
  109. 109×480.jpg
  110. 110×480.jpg
  111. 111×600.jpg
  112. 112×768.jpg
  113. 113×1024.jpg
  114. 114×864.jpg
  115. 115×720.jpg
  116. 116×800.jpg
  117. 117×960.jpg
  118. 118×1024.jpg
  119. 119×1050.jpg
  120. 120×900.jpg
  121. 121×1050.jpg
  122. 122×1080.jpg
  123. 123
  124. 124
  125. 125
  126. 126×480.jpg
  127. 127×480.jpg
  128. 128×480.jpg
  129. 129×600.jpg
  130. 130×768.jpg
  131. 131×1024.jpg
  132. 132×864.jpg
  133. 133×720.jpg
  134. 134×800.jpg
  135. 135×960.jpg
  136. 136×1024.jpg
  137. 137×1050.jpg
  138. 138×900.jpg
  139. 139×1200.jpg
  140. 140×1050.jpg
  141. 141×1200.jpg
  142. 142×1080.jpg
  143. 143×1200.jpg
  144. 144×1440.jpg
  145. 145×1440.jpg
  146. 146×1136.jpg
  147. 147×1334.jpg
  148. 148×2208.jpg
  149. 149×768.jpg
  150. 150×480.jpg
  151. 151×480.jpg
  152. 152×480.jpg
  153. 153×600.jpg
  154. 154×768.jpg
  155. 155×1024.jpg
  156. 156×864.jpg
  157. 157×720.jpg
  158. 158×800.jpg
  159. 159×960.jpg
  160. 160×1024.jpg
  161. 161×1050.jpg
  162. 162×900.jpg
  163. 163×1200.jpg
  164. 164×1050.jpg
  165. 165×1200.jpg
  166. 166×1080.jpg
  167. 167×1200.jpg
  168. 168×1440.jpg
  169. 169×1440.jpg
  170. 170×1136.jpg
  171. 171×1334.jpg
  172. 172×2208.jpg
  173. 173×768.jpg
  174. 174
  175. 175
  176. 176
  177. 177×480.jpg
  178. 178×480.jpg
  179. 179×600.jpg
  180. 180×768.jpg
  181. 181×864.jpg
  182. 182×720.jpg
  183. 183×800.jpg
  184. 184×960.jpg
  185. 185×1024.jpg
  186. 186×1050.jpg
  187. 187×900.jpg
  188. 188×1200.jpg
  189. 189×1050.jpg
  190. 190×1200.jpg
  191. 191×1080.jpg
  192. 192×1200.jpg
  193. 193×1440.jpg
  194. 194×1440.jpg
  195. 195×480.jpg
  196. 196×480.jpg
  197. 197×480.jpg
  198. 198×600.jpg
  199. 199×768.jpg
  200. 200×1024.jpg
  201. 201×864.jpg
  202. 202×720.jpg
  203. 203×800.jpg
  204. 204×960.jpg
  205. 205×1024.jpg
  206. 206×1050.jpg
  207. 207×900.jpg
  208. 208×1200.jpg
  209. 209×1050.jpg
  210. 210×1200.jpg
  211. 211×1080.jpg
  212. 212×1200.jpg
  213. 213×1440.jpg
  214. 214×1440.jpg
  215. 215×1920.jpg
  216. 216
  217. 217
  218. 218
  219. 219×480.jpg
  220. 220×480.jpg
  221. 221×600.jpg
  222. 222×768.jpg
  223. 223×864.jpg
  224. 224×720.jpg
  225. 225×800.jpg
  226. 226×960.jpg
  227. 227×1024.jpg
  228. 228×1050.jpg
  229. 229×900.jpg
  230. 230×1200.jpg
  231. 231×1050.jpg
  232. 232×1200.jpg
  233. 233×1080.jpg
  234. 234×1200.jpg
  235. 235×1440.jpg
  236. 236×1440.jpg
  237. 237×480.jpg
  238. 238×480.jpg
  239. 239×600.jpg
  240. 240×768.jpg
  241. 241×864.jpg
  242. 242×720.jpg
  243. 243×800.jpg
  244. 244×960.jpg
  245. 245×1024.jpg
  246. 246×1050.jpg
  247. 247×900.jpg
  248. 248×1200.jpg
  249. 249×1050.jpg
  250. 250×1200.jpg
  251. 251×1080.jpg
  252. 252×1200.jpg
  253. 253×1440.jpg
  254. 254×1440.jpg
  255. 255
  256. 256
  257. 257
  258. 258×768.jpg
  259. 259×864.jpg
  260. 260×720.jpg
  261. 261×800.jpg
  262. 262×960.jpg
  263. 263×1024.jpg
  264. 264×1050.jpg
  265. 265×900.jpg
  266. 266×1200.jpg
  267. 267×1050.jpg
  268. 268×1200.jpg
  269. 269×1080.jpg
  270. 270×1200.jpg
  271. 271×1440.jpg
  272. 272×1440.jpg
  273. 273×1800.jpg
  274. 274×768.jpg
  275. 275×864.jpg
  276. 276×720.jpg
  277. 277×800.jpg
  278. 278×960.jpg
  279. 279×1024.jpg
  280. 280×1050.jpg
  281. 281×900.jpg
  282. 282×1200.jpg
  283. 283×1050.jpg
  284. 284×1200.jpg
  285. 285×1080.jpg
  286. 286×1200.jpg
  287. 287×1440.jpg
  288. 288×1440.jpg
  289. 289×1800.jpg
  290. 290
  291. 291
  292. 292
  293. 293×480.png
  294. 294×480.png
  295. 295×480.png
  296. 296×600.png
  297. 297×768.png
  298. 298×1024.png
  299. 299×864.png
  300. 300×720.png
  301. 301×800.png
  302. 302×1024.png
  303. 303×1050.png
  304. 304×1200.png
  305. 305×1050.png
  306. 306×1200.png
  307. 307×1080.png
  308. 308×1440.png
  309. 309×1440.png
  310. 310×480.png
  311. 311×480.png
  312. 312×480.png
  313. 313×600.png
  314. 314×768.png
  315. 315×1024.png
  316. 316×864.png
  317. 317×720.png
  318. 318×800.png
  319. 319×1024.png
  320. 320×1050.png
  321. 321×1200.png
  322. 322×1050.png
  323. 323×1200.png
  324. 324×1080.png
  325. 325×1440.png
  326. 326×1440.png
  327. 327
  328. 328
  329. 329
  330. 330×480.jpg
  331. 331×480.jpg
  332. 332×800.jpg
  333. 333×1024.jpg
  334. 334×1200.jpg
  335. 335×1080.jpg
  336. 336×1440.jpg
  337. 337×480.jpg
  338. 338×480.jpg
  339. 339×800.jpg
  340. 340×1024.jpg
  341. 341×1200.jpg
  342. 342×1080.jpg
  343. 343×1440.jpg
  344. 344
  345. 345
  346. 346
  347. 347×480.jpg
  348. 348×768.jpg
  349. 349×800.jpg
  350. 350×1024.jpg
  351. 351×900.jpg
  352. 352×1050.jpg
  353. 353×1200.jpg
  354. 354×480.jpg
  355. 355×768.jpg
  356. 356×800.jpg
  357. 357×1024.jpg
  358. 358×900.jpg
  359. 359×1050.jpg
  360. 360×1200.jpg
  361. 361
  362. 362
  363. 363
  364. 364×480.png
  365. 365×480.png
  366. 366×480.png
  367. 367×600.png
  368. 368×768.png
  369. 369×1024.png
  370. 370×864.png
  371. 371×720.png
  372. 372×800.png
  373. 373×960.png
  374. 374×1024.png
  375. 375×1050.png
  376. 376×900.png
  377. 377×1200.png
  378. 378×1050.png
  379. 379×1200.png
  380. 380×1080.png
  381. 381×1200.png
  382. 382×1440.png
  383. 383×1440.png
  384. 384×480.png
  385. 385×480.png
  386. 386×480.png
  387. 387×600.png
  388. 388×768.png
  389. 389×1024.png
  390. 390×864.png
  391. 391×720.png
  392. 392×800.png
  393. 393×960.png
  394. 394×1024.png
  395. 395×1050.png
  396. 396×900.png
  397. 397×1200.png
  398. 398×1050.png
  399. 399×1200.png
  400. 400×1080.png
  401. 401×1200.png
  402. 402×1440.png
  403. 403×1440.png
  404. 404
  405. 405
  406. 406
  407. 407×480.png
  408. 408×768.png
  409. 409×864.png
  410. 410×800.png
  411. 411×960.png
  412. 412×900.png
  413. 413×1200.png
  414. 414×1080.png
  415. 415×1440.png
  416. 416×480.png
  417. 417×768.png
  418. 418×864.png
  419. 419×800.png
  420. 420×960.png
  421. 421×900.png
  422. 422×1200.png
  423. 423×1080.png
  424. 424×1440.png
  425. 425
  426. 426
  427. 427
  428. 428×480.jpg
  429. 429×480.jpg
  430. 430×480.jpg
  431. 431×600.jpg
  432. 432×768.jpg
  433. 433×1024.jpg
  434. 434×864.jpg
  435. 435×720.jpg
  436. 436×800.jpg
  437. 437×960.jpg
  438. 438×1024.jpg
  439. 439×1050.jpg
  440. 440×900.jpg
  441. 441×1200.jpg
  442. 442×1050.jpg
  443. 443×1200.jpg
  444. 444×1080.jpg
  445. 445×1200.jpg
  446. 446×1440.jpg
  447. 447×1440.jpg
  448. 448×480.jpg
  449. 449×480.jpg
  450. 450×480.jpg
  451. 451×600.jpg
  452. 452×768.jpg
  453. 453×1024.jpg
  454. 454×864.jpg
  455. 455×720.jpg
  456. 456×800.jpg
  457. 457×960.jpg
  458. 458×1024.jpg
  459. 459×1050.jpg
  460. 460×900.jpg
  461. 461×1200.jpg
  462. 462×1050.jpg
  463. 463×1200.jpg
  464. 464×1080.jpg
  465. 465×1200.jpg
  466. 466×1440.jpg
  467. 467×1440.jpg
  468. 468
  469. 469
  470. 470
  471. 471×600.png
  472. 472×768.png
  473. 473×960.png
  474. 474×1024.png
  475. 475×900.png
  476. 476×1080.png
  477. 477×1200.png
  478. 478×1440.png
  479. 479×600.png
  480. 480×768.png
  481. 481×960.png
  482. 482×1024.png
  483. 483×900.png
  484. 484×1080.png
  485. 485×1200.png
  486. 486×1440.png
  487. 487
  488. 488
  489. 489
  490. 490×720.jpg
  491. 491×800.jpg
  492. 492×900.jpg
  493. 493×1050.jpg
  494. 494×1080.jpg
  495. 495×1200.jpg
  496. 496×1440.jpg
  497. 497×720.jpg
  498. 498×800.jpg
  499. 499×900.jpg
  500. 500×1050.jpg
  501. 501×1080.jpg
  502. 502×1200.jpg
  503. 503×1440.jpg
  504. 504
  505. 505
  506. 506
  507. 507×480.jpg
  508. 508×480.jpg
  509. 509×480.jpg
  510. 510×600.jpg
  511. 511×768.jpg
  512. 512×1024.jpg
  513. 513×864.jpg
  514. 514×720.jpg
  515. 515×800.jpg
  516. 516×960.jpg
  517. 517×1024.jpg
  518. 518×1050.jpg
  519. 519×900.jpg
  520. 520×1200.jpg
  521. 521×1050.jpg
  522. 522×1200.jpg
  523. 523×1080.jpg
  524. 524×1200.jpg
  525. 525×1440.jpg
  526. 526×1440.jpg
  527. 527×900.jpg
  528. 528×480.jpg
  529. 529×480.jpg
  530. 530×480.jpg
  531. 531×600.jpg
  532. 532×768.jpg
  533. 533×1024.jpg
  534. 534×864.jpg
  535. 535×720.jpg
  536. 536×800.jpg
  537. 537×960.jpg
  538. 538×1024.jpg
  539. 539×1050.jpg
  540. 540×900.jpg
  541. 541×1200.jpg
  542. 542×1050.jpg
  543. 543×1200.jpg
  544. 544×1080.jpg
  545. 545×1200.jpg
  546. 546×1440.jpg
  547. 547×1440.jpg
  548. 548×900.jpg
  549. 549
  550. 550
  551. 551
  552. 552×480.jpg
  553. 553×600.jpg
  554. 554×768.jpg
  555. 555×864.jpg
  556. 556×720.jpg
  557. 557×800.jpg
  558. 558×960.jpg
  559. 559×1024.jpg
  560. 560×1050.jpg
  561. 561×900.jpg
  562. 562×1200.jpg
  563. 563×1050.jpg
  564. 564×1200.jpg
  565. 565×1080.jpg
  566. 566×1200.jpg
  567. 567×1440.jpg
  568. 568×480.jpg
  569. 569×600.jpg
  570. 570×768.jpg
  571. 571×864.jpg
  572. 572×720.jpg
  573. 573×800.jpg
  574. 574×960.jpg
  575. 575×1024.jpg
  576. 576×1050.jpg
  577. 577×900.jpg
  578. 578×1200.jpg
  579. 579×1050.jpg
  580. 580×1200.jpg
  581. 581×1080.jpg
  582. 582×1200.jpg
  583. 583×1440.jpg
  584. 584
  585. 585
  586. 586
  587. 587×480.jpg
  588. 588×600.jpg
  589. 589×768.jpg
  590. 590×720.jpg
  591. 591×800.jpg
  592. 592×900.jpg
  593. 593×1050.jpg
  594. 594×1080.jpg
  595. 595×1440.jpg
  596. 596×480.jpg
  597. 597×600.jpg
  598. 598×768.jpg
  599. 599×1024.jpg
  600. 600×720.jpg
  601. 601×800.jpg
  602. 602×900.jpg
  603. 603×1050.jpg
  604. 604×1080.jpg
  605. 605×1440.jpg
  606. 606
  607. 607
  608. 608
  609. 609×480.jpg
  610. 610×480.jpg
  611. 611×480.jpg
  612. 612×600.jpg
  613. 613×768.jpg
  614. 614×1024.jpg
  615. 615×864.jpg
  616. 616×720.jpg
  617. 617×800.jpg
  618. 618×960.jpg
  619. 619×1024.jpg
  620. 620×1050.jpg
  621. 621×900.jpg
  622. 622×1200.jpg
  623. 623×1050.jpg
  624. 624×1200.jpg
  625. 625×1080.jpg
  626. 626×1200.jpg
  627. 627×1440.jpg
  628. 628×1440.jpg
  629. 629×480.jpg
  630. 630×480.jpg
  631. 631×480.jpg
  632. 632×600.jpg
  633. 633×768.jpg
  634. 634×1024.jpg
  635. 635×864.jpg
  636. 636×720.jpg
  637. 637×800.jpg
  638. 638×960.jpg
  639. 639×1024.jpg
  640. 640×1050.jpg
  641. 641×900.jpg
  642. 642×1200.jpg
  643. 643×1050.jpg
  644. 644×1200.jpg
  645. 645×1080.jpg
  646. 646×1200.jpg
  647. 647×1440.jpg
  648. 648×1440.jpg
  649. 649

The post Desktop Wallpaper Calendars: March 2015 appeared first on Smashing Magazine.

Go to Source

Comics of the week #276

Go to Source

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Is that a good thing?

Comics of the week #276

Still master of your domain

Comics of the week #276


An alternative to speed reading

Comics of the week #276

LAST DAY: Flat UI Pro, an Easy-to-Use Bootstrap Design Framework
Comics of the week #276

Go to Source

Design Principles: Dominance, Focal Points And Hierarchy

Go to Source

Has a client ever asked you to make the logo bigger1? Maybe they asked that just after you completed their request to make a heading bigger. The new heading stands out, but now the logo is too small in comparison and isn’t getting noticed. The clients wants to make the logo bigger.

Of course, now that the logo and heading are bigger, both are going to attract more attention than the main call-to-action button, which will need to be made bigger. And once the button is bigger, the heading is going to start looking small again.

You can’t emphasize everything. It defeats the point. When you try to do that, all of your design elements compete for attention and nothing stands out. They’re all yelling at the same time. Everything is louder, but still nothing is heard.

Emphasis is relative. For one element to stand out, another has to serve as the background from which the first is to stand out. Some elements need to dominate2 others in order for your design to display any sort of visual hierarchy.

Note: This is the fifth post in a series on design principles. You can find the first four posts in the series here:


Compare any two elements in a design. Either the elements will be equal in every way or one will exert some level of dominance over the other. The more dominant element will attract the eye and get noticed first. It might even appear to exhibit some sort of control over the less dominant element.

The more dominant element likely has greater visual weight than the elements it dominates. It will seem to exert force on what’s around it.

The circle exerts dominance over the square due to their relative sizes. (View large version8)

As you develop a composition, you’ll see numerous elements exerting dominance over each other. Some elements will dominate, and some will be subordinate. Without conscious control, you’d just hope that things all work out and that the important information will attract attention. Fortunately, you do have control.

How to Establish Dominance

You design one element to have more dominance than another by giving it more visual weight. The greater its visual weight, the more an element will attract the eye and exhibit dominance.

You create dominance through contrast, emphasis and relative visual weight. Identical items can’t dominate each other. To exert dominance, an element has to look different from the elements it’s meant to dominate.

Your goal is to create elements with noticeable differences in visual weight.

You can vary the same characteristics that we talked about in the last couple of articles in this series. As a reminder, here are the most common characteristics you can vary to set different visual weights:

  • size,
  • shape,
  • color,
  • value,
  • depth,
  • texture,
  • density,
  • saturation,
  • orientation,
  • local white space,
  • intrinsic interest,
  • perceived physical weight,

You can create dominance through visual direction as well. For example, you might surround an element with arrows all pointing to that element. If there are enough directional cues, the element could become dominant even if it’s of lesser visual weight than other elements on the page.

You can also have co-dominance, where two dominant elements exist within a composition. However, both will compete for attention and could ultimately be distracting without the right overall balance in your competition.

Ideally, you want a single dominant element.

The Dominant Element

The dominant element in a design is the one with the greatest visual weight (or the one that everything else points to). It’s the element that attracts the eye first, more than anything else on the page.

Be careful not to make the element so dominant that it completely obscures everything else, but do make it stand out in the design.

Your dominant element is the starting point for the story you’re telling. It’s the entry point into your design. It should attract visitors to the first place you want them to look.

This is how you start a conversation with visitors. The dominant element is noticed first and sets the context for what’s seen next. It’s at the top of the hierarchy. It should emphasize your most important information, because it might be the only thing anyone will see. Whatever message you want people to take away should be clearly communicated in or near your dominant element.

Without an entry point, viewers will have to work harder to find their way into your design. They’ll have to pause and think where to look first and think about what’s truly important on the page. A lack of entry point will increase the cognitive load on visitors. Don’t make them think. Provide an entry point into your design.

Focal Points

Focal points are also elements or areas of dominance, just not to the same degree as your one dominant element, which could be defined as your most dominant focal point. Focal points are areas of interest, emphasis or difference within a composition that capture and hold the viewer’s attention.

The focal points in your design should stand out but should be noticed after the element with the most dominance. The graphic below shows a lone circle amid a sea of mostly gray squares. The circle is not only a different shape, but is larger and bright red. It’s likely the first thing your eye notices in the graphic.

Three of the four squares are also reddish in color, though not as bright as the circle. They’re the same size as the other squares in the image, but they do stand out from the gray squares due to their color.

The circle and the three reddish squares are all focal points because they stand out from the majority of other elements in the graphic. They contrast with the mass of gray squares. The large bright red circle stands out the most. It’s the dominant focal point, or the dominant element in this image.

The red circle and squares are focal points. The circle is the dominant element or dominant focal point. (View large version10)

As with the dominant element, you can create focal points by giving them more visual weight than everything except the dominant element — which, again, is your most dominant focal point. You can also create visual direction that leads to different focal points.

Contrast is a good way to create focal points, because contrast calls attention to itself for being different. Anything that can be contrasted and anything that can affect visual weight or direction can be used to create a focal point, in the same way that it can be used to create a dominant element. The difference is simply of degree.

Levels Of Dominance

If you create focal points and make one of those points the dominant element, then you’re starting to create different levels of dominance. The dominant element will sit on one level and will be noticed before all others. The remaining focal points will sit on another level. How many levels of dominance can you realistically have in a design?

Three is a good number. As a general rule, people can perceive three levels of dominance. They notice what’s most dominant, what’s least dominant and then everything else. There needs to be enough difference between these levels for people to distinguish one from the next. You want to create distinct levels, not a continuum.

You could create more than three levels of dominance, but each additional level will reduce the contrast between neighboring levels. Unless you’re sure you can contrast each level well enough, stick with three.

  • Dominant
    This is the level with the most visual weight and the one that gets the most emphasis. Your dominant level will usually consist of a single element in the foreground.
  • Sub-dominant
    This is the level of focal points, with the exception of the dominant element or dominant focal point. It gets secondary emphasis. Elements on this level get less emphasis than the dominant level but more than the subordinate level.
  • Subordinate
    This is this level with the least visual weight. It should recede into background to some degree. This level will usually contain your body of text.

It’s possible for different people to look at a composition and think that different elements are focal points or even the dominant element. Remember to go big enough with your differences in visual weight to make clear which level is more dominant. You want your dominant element and focal points to be as obvious as possible.

Visual Hierarchy

As you design distinct levels of dominance, you create visual hierarchy in the design11. Ideally, this visual hierarchy will match the conceptual hierarchy of your content. If an article’s heading is more important than a caption in the article, then the heading should be more visually dominant.

Base your visual hierarchy on the actual priorities of the information being presented. First, prioritize everything that will go on the page, and once it’s set, design a visual hierarchy to follow that prioritization.

Visual hierarchy enables visitors to scan information. It helps you communicate a message quickly and effectively. The top of the hierarchy (the dominant element) should help to answer questions a visitor might immediately have upon landing on the page.

Within seconds, visitors should be able to pick up the key points and main message of the page. They can do this if you make the most important information the most visually prominent.

People who stick around longer than a few seconds should be able to scan through the focal points in your design to gain the next most important message(s) that you want to communicate, and so on with the rest of your information.

The Inverted Pyramid of Writing

Establishing hierarchy in a design is similar to the way journalists use the inverted pyramid of writing. The most important news is all in the first paragraph or two. The lead covers the who, what, where, when, why and how. It tells you everything you need to know.

The inverted pyramid of writing (Image: Wikipedia13) (View large version14)

The lead is followed by important details that fill out the story. They’re details that provide context or help you understand the story in greater depth. Toward the end of the article is the general and background information that’s nice to know but not necessary to understand what’s going on.

If someone reads only a sentence or two, they should come away with the most important information. The longer they stick around and the more they consume, the more details they’ll get.

Visual hierarchy works the same way, except that it doesn’t have to flow linearly from the top of the page. You get to control where people look first, second and so on

Again, three level of dominance or hierarchy are recommended, although four or five are still possible.

Gestalt Principles And Visual Hierarchy

One of the reasons I started this series with an article about gestalt principles was to show how they lead to many of the design principles we work with.

Visual hierarchy evolves out of gestalt. Focal points are one of the gestalt principles. Your dominant element is an extreme focal point. Both use contrast to stand out. The other side of the coin is similarity, which helps us to see things as the same. Similarity and contrast are necessary ingredients in hierarchy.

Such laws as the ones of prägnanz and symmetry are about creating order and making things simpler and clearer. That’s exactly what you’re doing when you build hierarchy in a design. You’re organizing design elements to establish a sense of order.

The dominant element is likely seen as the figure. The least dominant elements are likely seen as the ground. Really, any principle related to connection or separation can be applied to dominance and hierarchy.


As I’ve done throughout this series, I’ve collected screenshots from a few websites, to share what I see as being the dominant elements, focal points and hierarchy.

This is my opinion. You may see the designs differently and that’s fine. Thinking critically about the designs is more important than agreeing on what we think.

An Event Apart

The dominant element on the home page of An Event Apart1715 is the image at the top. It’s the largest element. It’s also an image of people, which we’re typically drawn to. The large white text across the image offers contrast with the image, calling your attention to it.

Screenshot of the top of the home page of An Event Apart1715 (View large version18)

The text “The design conference for people who make websites” is probably the most important information that anyone landing on the page needs to know. It’s a very clear statement about what An Event Apart is and who the website is for. It’s arguably the first thing someone new to the website should see.

Focal points include the website’s logo, the dark background behind “Upcoming Events” and the testimonial set as a large bold heading.

If you scroll down the page, you’ll notice that the design mainly uses size and color to create additional focal points and visual hierarchy. Important information is larger. It’s bold. It might be red. Occasionally an image draws the eye.

If you were to visit the page and merely scan it, you would still come away knowing what the website is about, knowing whether any conferences are coming to your area, and having been convinced by the abundance of testimonials.

Paid to Exist

The dominant element on Paid to Exist2119’s home page is the graphic of the backpack at the top of the page. It’s an image and larger than everything else around it. It contrasts with its surroundings because it is a graphic with intrinsic interest and a different shape.

Screenshot of the top of the home page of Paid to Exist2119 (View large version22)

Focal points include the website’s name, some of the text to the right of the graphic, and the big green “Download” button. The social sharing buttons are another focal point.

Looking at the section of content just below, you’ll see three large numbered circles, which serve as focal points and lead you to their accompanying content.

You’re meant to read the information. Notice how the heading above each paragraph reflects the color of its accompanying circle, to draw you in.

Think about the circles and text in terms of visual hierarchy. The big colorful circle (which is one level in the hierarchy) gets your attention and leads you to information that sits on another level of the hierarchy.

Mandy Sims

Mandy Sims2523 has a single-page website. The very top (not shown in the screenshot) includes an image of Mandy, which for me is the dominant element. Mandy’s name is also displayed as the largest text.

However, I want to draw your attention to a section further down the page. As you might expect, the section’s heading is the largest text there, so it becomes a focal point.

Screenshot of a section of Mandy Sims2523’ single-page website (View large version26)

Focal points are also the testimonials down the right side. Notice how the background color of the testimonials is the same as the background color of the active link in the menu.

Without reading the text in this section, you can still clearly see that Mandy offers coaching services to happy clients, because one level of the hierarchy communicates just that.

Vanseo Design

This last example is from my own website27. It’s a blog post I wrote a couple of years ago. Forgive the indulgence, but unlike the other examples, I know exactly why every element on the page looks the way it does. Whether or not I’ve succeeded is another matter, but I’m certain of the intent.

Screenshot of the top of an article from Vanseo Design29 (View large version30)

The page’s main heading is meant to be the dominant element. This is a blog post that I want people to read, but I want to give people a sense of what the article is about before they have to invest their time reading.

The partial image also draws the eye, and you might think it more dominant, but an image like this isn’t necessarily visible at the top of every post on the website.

The logo in the top-left and the RSS icon in the top-right are meant to stand out a little more than the other text, and so both are red. Both would stand out more with a brighter red, but I didn’t want people to be distracted by them. The same red is also used in headings throughout.

The meta information on the left is meant to stand out from the main text. Here, I used local white space to increase the visual weight of plain text. Ideally, someone would glance at it and get information about me and the category and tags for the post.

One thing I decided to do with the design was make links in the body less visible than on most websites. I want people to be able to find them, but I don’t want them to pull you out of the content. I used a blue, which doesn’t stand out much from the black text, and I chose italics instead of bold. The links are not meant to be focal points, so I de-emphasized them visually.

My hope is that someone landing on this or another post on the website will be able to very quickly tell what the article is about and discover some basic information about me, such as my name or the name of the website, before hopefully reading the post.


You can’t emphasize everything. In order for some elements in a design to stand out, other elements must fade into the background.

By varying the visual weight of some elements and the visual direction of others, you can establish different levels of dominance. Three levels is ideal; they’re all that most people can discern.

On one level will sit your dominant element. It’s an entry point into your design, and it should be or be near the most important information on the page. A second level of focal points can draw attention to the next most important information visitors should see. Your third level holds everything else. Most of your content will be on this level.

Designing different levels of emphasis or dominance will create a visual hierarchy in your design, with more important information being more visually prominent. It will help you communicate with visitors quickly and efficiently.

We’re getting close to the end of this series. Next time, we’ll look at compositional flow, movement and rhythm. I’ll talk about leading visitors through a design so that they’re more likely to find information in the order you want them to see it.

Additional Resources

(il, al)


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26 //
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39

The post Design Principles: Dominance, Focal Points And Hierarchy appeared first on Smashing Magazine.

Go to Source

Free download: Lucid one page PSD template

Go to Source

This stunning free PSD provides a framework for all your client’s essential information, lovingly crafted, into a simple to modify format.

Designed by Lucid Site Designs, the popular one-page design is a great fit for almost any purpose, and includes a header, features, product details, pricing, and contact sections. Perfect for technology services, IT hardware, or SaaS, the bold monochrome design is an outstanding stylish choice for any number of professional jobs.

All layers in the PSD are clearly named, so you’ll be up and running with it in no time. Simple to customize it’s built on a 12 column grid. This exclusive download would work beautifully with a Bootstrap or Foundation build. It even comes with three alternative headers: standard, contact form, and a subscription form.

Download link beneath the previews:

Free download: Lucid one page PSD template

Free download: Lucid one page PSD template

Free download: Lucid one page PSD template

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

The Watercolor Design Bundle (300+ elements) – only $9!
Free download: Lucid one page PSD template

Go to Source

Freebie: Flat Icon Pack (AI, SVG, EPS, PSD, PNG)

Go to Source


We are happy to share a great freebie today: an exclusive set of 40 pixel-perfect vector icons from The set contains various clean and modern icons in all common formats.

About the Set

This carefully crafted taster set of 40 icons contains various icons and they come in SVG, EPS, PSD, AI and differently sized PNGs (32 and 62 pixels).

The icons are very versatile and easy-to-use. They are high-quality icons, which you will see as soon as you open the vector files.


About’s current Flat Icon Pack offers 2000 handcrafted, consistent and pixel-perfect icons ready to use. Our icons have been specially built to match the current design trends and to help you expand on your projects. This beautiful icons are perfect to create a unique design experience.



Have a look at the 40 icons exclusively selected for Codrops readers:

Download the Set for Free

You can download the ZIP file of the icon pack here:

The icons are royalty-free. You can use them in your commercial or personal works. You may modify the size, color or shape of the icons. No attribution is required. But reselling the set or individual pictograms is not allowed.

We hope you enjoy this freebie and find it useful!

If you’d like to contribute and publish your exclusive freebie on Codrops just drop us a line.

Freebie: Flat Icon Pack (AI, SVG, EPS, PSD, PNG) was written by and published on Codrops.

Go to Source

Considerations on Choosing a University CMS

Go to Source

The other day a friend of mine, who works at a university, told me he was on a committee to choose a CMS for the whole university. I definitely don’t envy that task, but I do find it quite interesting.

A lot of us have probably seen companies/institutions make what seems to be embarrassingly bad tech choices. For instance, paying unbelievable monthly fees for simple things like email and calendars when they could be using better and comparatively free Google services (we yell, while nobody listens).

That’s one of the places my mind immediately went when this comes up. Oh wow! What a great opportunity to save this large institution from wasting millions on some weird sleezy software contract and get them on something just as powerful and potentially free.

The other place my mind went is right to some tech that I would go with, if I was in charge. It would be so interesting to do this with WordPress Multisite! Just one set of software to keep updated. Yet, different departments could have their own sites with their own administrative control. Assets could be shared as needed, but each site could be as unique as needed as well. Fun!

I even asked on Twitter for other suggestions as well:

From a friend: “I’m on the committee to pick a CMS for our entire university. Opinions?” I’ll relay yours!

— Chris Coyier (@chriscoyier) January 12, 2015

Answers I got included every single CMS you’ve ever heard of, as well as MARKETING BOTS out to convince me their way is the right way. Lisa summed up a common feeling:

@chriscoyier Drupal is my serious answer, "lololololololololololol" is my also-serious answer

— lisa maria (@redsesame) January 12, 2015

Turns out: cart before horse.

It’s thinking like I was doing that gets companies into messy situations to begin with. Some TECH DUDE who’s got it all figured out before the considerations are even made very clear.

There is a lot more to consider than just tech.

Who’s going to implement and work on this CMS?

You know how many IT employees they had to work on this and maintain it? Zero.

Yep, zero. They don’t really have a true IT department (or whatever you want to call it) to manage the university’s website(s).

They also aren’t really looking to change that fact. They aren’t trying to build a new department for that. They aren’t trying to contract or hire freelancers to do it. They are trying to just buy a hosted CMS system. Probably from a company that specializes in that kind of thing. A company they can work with the set it up. A company they can call for help, or more likely, have an ongoing contract with to support.

Part of that reasoning is…

Capex vs Opex

That is, “Capital expenditure” vs Operating expenditure”. This looks to be a decent article on that. It’s a big differences for business like a university. One is deductible, one isn’t.

@chriscoyier One big issue is HOW they pay—license fees are capital expenses, developer costs are not.

— Karen McGrane (@karenmcgrane) January 12, 2015

I’m sure there are other big important considerations here as well that are above my head.

But suddenly, spending a million bucks on a CMS contract doesn’t seem so out of the question. Imagine trying to hire a whole team of local developers to take this project on. It would be hard, slow, and cost just as much if not more. And there is no guarantee it’ll be better, in fact it feels more like a gamble.

As Karen says:

@chriscoyier Some orgs have an easier time paying a $500k license fee than paying for Drupal/WP devs

— Karen McGrane (@karenmcgrane) January 12, 2015

It’s not the CMS

Any CMS can do CMSy things.

Obviously it needs to have custom data structures, custom templates, custom URL design. You should be able to build the kind of site you want with it. Some CMSs are more opinionated than others in this regard, but any one worth its salt is a tool toward building the site you need.

It’s the CMS

And yet… it’s certainly still worth your time to consider what CMS’s offer and how they handle certain things.

  • Can the CMS manage multiple sites?
  • What is your mobile plan? Can the CMS deal with that?
  • What is the upgrade process like?
  • What is the documentation like?
  • Is community around the CMS important?
  • Is there paid support available?
  • Can it handle permission levels that match the university’s structure?
  • Should you want or need to hire out to help with it, is that possible? Easy?
  • What features can you imagine your CMS needing? Now vs in a few years time? (e.g. “Let’s add a forum! Let’s give students profiles! We need a chat room!”)
  • Have you thought about security? Backups?

Who’s going to be actually using this CMS?

This is perhaps the most important consideration.

Not who’s going to be using the website. That’s students and prospective students and yes that’s all important stuff but not what we’re dealing with right now.

Who is going to be adding content, managing content, basically the primary user of the CMS? Can you give them a CMS that is perfect for their needs? That is easy for them to use? That allows them to wrangle that content in the most useful and effective possible way?

Karen, again:

@chriscoyier Less important which one they pick, way more important that they plan for time required to define and customize author UX.

— Karen McGrane (@karenmcgrane) January 12, 2015

The right CMS is a customized one — right? Can you build input screens that are perfectly custom to what these people need? Can you make sure they don’t resort to copying and pasting from Word? From linking up PDFs?

Insanity, confusion

I am not at all envious of my friend because of this. I just can’t imagine a world in which a committee like this, conversations and meetings like the ones he’s having aren’t filled with insanity, confusion, and bullsh*t.

Probably some lightly bad stuff like people that are involved that probably shouldn’t be. People that just aren’t grasping what’s going on. Important people not contributing.

And then probably some awful stuff like people posturing for control. Red tape. Power struggles.

I don’t really have any advice for all that, except to say that it can’t be ignored. The human part of all this is just as big a part than the intellectual tech discovery stuff.

More Resources

  • Kerry-Anne Gilowey’s deck “Getting Your Specs in a Row: Your role in CMS selection”

Examples of What Some University’s Use

I’m probably not going to maintain this list over time, but if you feel like chiming in about what universities are using what (and even better, how that’s working for them) in the comments, please do!

Considerations on Choosing a University CMS is a post from CSS-Tricks

Go to Source