How to Liven up Your Flat Design with Dirty Dots

About five years ago there was a glorious but bloodthirsty revolution in web design — and like all revolutions, there were winners and losers.

Glossy rendered UI versus flat design

Losers and winners

The losers were bevelled edges, faux stitched borders, glossy reflections and drop shadows.

The winner was ‘flat design’.

Microsoft got the flat ball rolling with Metro and then successive version of Android and IOS got flatter and visually simpler. Eventually, Material Design distilled it all down into a cohesive theory.

And on the whole, we’re all much better off for it. Graphics files are lighter and faster, and UI’s are simpler and less cluttered. But you could argue there is a certain clinical ‘samey-ness’ to a lot of design 2015.

So, it’s always nice to have methods to give design projects (logos, illustrations, UIs, etc) some warmth and without piling on tonnes of extra visual clutter?

Grab your Retro Spectacles

Print is a technology that has been constantly refined for over 400 years as paper, inks and machinery have improved. The fidelity of high-end print today is incredible.

Funny thing is, we still seemed to be charmed of many of the little failings of those original, low-tech print methods. The kind of throwaway design we’ve all seen on soup tins, old newspapers and train station walls.

Say Hello to Mr. Retro

Mr Retro's Permanent Press filters

Mr Retro’s Permanent Press filters

Photoshop Plugin maker Mr Retro has made a living out of riffing on old print styles with their Permanent Press set of filters. Each filter mimics some of the natural, grungy imperfections of classic printing press work.

These imperfections include:

  • Paper grain
  • Chunky halftone dots
  • Plate misalignments
  • Ink overlap & bleed

These filters are all very configurable and can add a surprising amount of warmth to a flat-color designs without necessarily adding a lot more clutter — especially if used sparingly.

However, at $99 they aren’t cheap. But there are other less expensive ways to squeeze some of the flatness out of a design.

Halftones in Adobe Illustrator

Illustration: The Future of the Hamburger Menu Icon?

Illustration: The Future of the Hamburger Menu Icon?

This is an illustration I did for an article called ‘Are users ready for the desktop hamburger icon?’ I wanted to keep the image simple but felt it was a touch clinical.

Continue reading %How to Liven up Your Flat Design with Dirty Dots%

Source: Sitepoint

Creating PDFs from Markdown with Pandoc and LaTeX

creating PDFs

If you've read some of my previous posts on SitePoint or elsewhere, you may know that I'm working on a board game. In the game, called Chip Shop, you get to run a computer company in 1980s America.

As part of the project, I'm attempting to open source the entire game as much as possible. After several false starts, I've decided on a basic framework of Markdown for most of the game components—especially cards and the manual.

As the game's website uses Jekyll, the website for the game is generated from the Markdown files. I intend to have premium pre-boxed and print-yourself versions of the game, and to achieve this I need to generate PDFs from the Markdown files.

What I'm Trying to Accomplish

My ideal workflow is to generate the PDF files at the same time as generating the website, rather than generate the files as visitors request them. This rules out my usual option for PDF generation, wkhtmltopdf, as it generates PDFs from already generated HTML. Another reason it's not an option is that I want the PDF card versions to look different from the HTML pages, and Jekyll lacks any kind of view mode feature to accomplish this without resorting to complex CSS rules.

The Markdown template file for cards in the Chip Shop game contains a lot of Markdown front matter fields for game mechanics. Not all are used on every card. For convenience during printing, I need to fit as many cards on an A4 page as possible—in this case, a 3×3 grid. Eventually the pages will need to be double-sided, but I haven't implemented that yet.

Enter Pandoc and LaTeX

[author_more]

Any internet search looking for solutions to generating PDFs from Markdown will lead you down the Pandoc path. Pandoc is an open-source, Swiss Army knife markup conversion tool that supports a wide and growing variety of input and output markup formats.

To generate PDFs with Pandoc, LaTeX is needed. LaTeX has its roots in the scientific research community, and is a document declaration and layout system. Combining Pandoc and LaTeX allows us to use variables, and thus to generate PDFs from a series of Markdown files and support Markdown front matter.

Despite the power of Pandoc and LaTeX, I couldn't find any way of combining multiple PDFs (cards) onto one page, especially when using variables from Markdown files. After much research, I settled on PDFJam, a simple command line tool for this requirement.

Installing Dependencies

Markdown

You need no extra software for Markdown, except maybe an editor and there are so many of those, I suggest you read a few SitePoint posts to make your choice.

Jekyll

I'll continue to use Jekyll in my examples taken from my game to illustrate the build process, but it isn't an essential part of PDF generation if you don't need a website.

Pandoc

On my Mac, I installed Pandoc with Homebrew, but there are options for all operating systems.

LaTeX

There are lots of opinions on the best way to install LaTeX, depending on what you need or intend to do with it. A full installation of its common tools and libraries can near 2GB, but for most purposes a minimal installation will be enough. Read the project's download page to find the best option for you.

For this tutorial, we'll be using the xelatex engine, as I use custom fonts. But you can select any engine that supplies specific features you require.

PDFJam

Depending on how you installed LaTeX, you may have PDFJam installed already. (Check by typing which pdfjam in the terminal.) If you haven't, then find details on installation here.

Continue reading %Creating PDFs from Markdown with Pandoc and LaTeX%

Source: Sitepoint

Desktop Wallpaper Calendars: October 2015


  

We always try our best to cater for fresh inspiration and well, we have found a very effective way to do so: desktop wallpapers that are a little more distinctive than the usual crowd. Since seven years, we challenge the design community to participate in our wallpaper mission and each month designers and artists from across the globe enthusiastically contribute their work to it. The result is a unique mix of ideas and styles, eye candy that is bound to cater for new idea sparks.

Desktop Wallpaper Calendars: October 2015

We are very thankful to everyone who took the challenge and shared their designs with us this month. This post features desktop wallpapers for October 2015. Both versions with and without a calendar can be downloaded for free. Time to brush up your desktop!

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

Source: Smashing Magazine

ESLint: The Next-Generation JavaScript Linter


  

It was the summer of 2013 and I was working on a project for my employer, Box. I had just finished wiring up JSDoc as a nightly build using a plugin to detect T3 patterns in our code and document them automatically. It occurred to me that these patterns might be easy to get wrong, and I started looking for a way to automatically detect incorrect patterns. I immediately turned to JSHint because we were already using it and I thought it could support plugins. Unfortunately, it could not.

ESlint

Still, I couldn’t get the idea of a linter with pluggable runtime rules out of my head. I had just spent a bunch of time learning about Esprima and abstract syntax trees (ASTs), and I thought to myself, “It can’t be all that hard to create a pluggable JavaScript linter using an AST.” It was from those initial thoughts that ESLint was born.

The post ESLint: The Next-Generation JavaScript Linter appeared first on Smashing Magazine.

Source: Smashing Magazine

How To Run A Side Project: Screenings Case Study


  

Did you know you have a superpower? No, I’m not talking about super-strength, sticking to walls or pushing metal claws out of your forearms (although you might have those as well, for all I know).

Screenings: A Side-Project Case Study

If you work on the web — which I assume you do if you’re reading this — your superpower is side projects. Unlike your regular job, where you have to listen to your boss or please your client, a side project lets you take on an alternate identity, one of which you’re in charge and no one can stop you.

The post How To Run A Side Project: Screenings Case Study appeared first on Smashing Magazine.

Source: Smashing Magazine

Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD)


  

Today we’re happy to release a new Smashing freebie: 18 lovely world landmark icons such as the London Eye, the Eiffel Tower or the Empire State Building. The icons are detailed enough to show architectural elegance but without adding chaos. They’re designed to work best in both digital and print media.

Landmark Icons Excerpt

Today we’re happy to release a new Smashing freebie: 18 lovely world landmark icons such as the London Eye, the Eiffel Tower or the Empire State Building. The icons are detailed enough to show architectural elegance but without adding chaos. They’re designed to work best in both digital and print media.

The post Freebie: World Landmark Icons (AI, EPS, PDF, PNG and PSD) appeared first on Smashing Magazine.

Source: Smashing Magazine

Web Development Reading List #105


  

What’s happening in the industry? What important techniques have emerged recently? What about new case studies, insights, techniques and tools? Our dear friend Anselm Hannemann is keeping track of everything in the web development reading list so you don’t have to. The result is a carefully collected list of articles that popped up over the last week and which might interest you. — Ed.

Firefox 41 is released.

Hey, fog and rain take over, temperatures are falling and the leaves of the trees are changing their colors. Sitting in front of a computer all day, reflecting how fast things change in nature, I can often see a similarity between our world of front-end development and things going on in the world.

The post Web Development Reading List #105 appeared first on Smashing Magazine.

Source: Smashing Magazine

Why Performance Matters: The Perception Of Time


  

Those of us who consider ourselves developers, including me, are very task-oriented. We like to be guided towards optimal results, and we find ourselves uncomfortable when there is no clear path to follow. That is why we all want to know how to do things; we like step-by-step tutorials and how-tos. However, such guidelines are based on certain theories, deep knowledge and experience.

Deconstructing Performance

For this reason, I will not provide you, the reader, with a structured answer to the question of how to make a website faster. Instead, I aim to provide you with the reasons and theories for why things function in certain way. I will use examples that are observable in the offline world and, using principles of psychology, research and analysis in psychophysics and neuroscience, I will try to answer some “Why?” questions.

The post Why Performance Matters: The Perception Of Time appeared first on Smashing Magazine.

Source: Smashing Magazine

Advanced WordPress Management With WP-CLI


  

The command-line interface has always been popular in the world of developers, because it provides tools that boost productivity and speed up the development process. At first sight, it might seem hard to believe that using the command line to perform certain tasks is getting easier than using a graphical interface. The purpose of this article is to clear up your doubts about that, at least concerning WordPress tasks.

Advanced WordPress Management With WP-CLI

WordPress provides a graphical user interface for every administrative task, and this has helped to make it the most popular content management system on the web. But in terms of productivity, working with the command line enables you to accomplish many such tasks more efficiently and quickly.

The post Advanced WordPress Management With WP-CLI appeared first on Smashing Magazine.

Source: Smashing Magazine

Chrome, Firefox, Safari, Opera, Edge? Impressive Web Browser Alternatives


  

It’s 2015 and your choice of browser has proven to be as important as your choice of operating system. Dedicated apps may be competing against browsers on mobile devices, but that is hardly the case in the desktop environment. On the contrary, each year more desktop browsers appear, and some of them can change the way you browse the Internet for the better.

Impressive Web Browser Alternatives

Google Chrome, Mozilla Firefox, Internet Explorer, Safari and Opera dominate the world’s desktop browser market. Whichever statistics you check (NetMarketshare, StatCounter’s GlobalStats or W3Counter), you’ll notice that they often contradict each other in declaring which browser is leading the race. However, no matter which method is used to determine usage share, all sources agree that those five browsers do not own 100% of the world’s desktop browser usage. They may be the most popular, but they are not the only options available for accessing the Internet. So, what about the remaining share?

The post Chrome, Firefox, Safari, Opera, Edge? Impressive Web Browser Alternatives appeared first on Smashing Magazine.


Source: Smashing Magazine