Freek.dev

On their mutual Medium blog, Adam Wathan & Steve Schoger published an excellent post that offers 7 actionable tips to make your stuff look better.

It’s easy to throw your hands up and say, “I’ll never be able to make this look good, I’m not an artist!” but it turns out there are a ton of tricks you can use to level up your work that don’t require a background in graphic design. Here are seven simple ideas you can use to improve your designs today.

https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

Read more

Simon Vrachliotis recorded a free Egghead.io video course on the kickass Tailwind CSS framework.

In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes. By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!

https://egghead.io/courses/build-user-interfaces-by-composing-css-utility-classes-with-tailwind

Read more

Cristopher Rumpel recently launched a big redesign of his blog. In a new post he touches on why he moved away from his old solution, and what kind of problems he had to solved. Great read!

One of my resolutions for 2017 was to redesign my blog. One week before the new year I faced myself with the challenge and thought to myself if this was still doable. Somehow I managed it and here it is. In this article I will explain the process and show you how I redesigned the blog with Tailwind CSS and moved it from Jekyll to Laravel with keeping almost the same performance.

https://christoph-rumpel.com/2018/01/how-i-redesigned-my-blog-and-moved-it-from-jekyll-to-laravel

Read more

Dayle Rees, author of various popular books on PHP and Laravel, has recently blown new life into his efforts of creating IDE and terminal themes. He created themes for most of the popular apps out there including: PhpStorm, VS Code, Atom, iTerm2, ...

You can preview all the themes on: https://rainglow.io/

I've been using Dayle's Material Peacock for quite some time. Currently I'm digging white based themes and I'm on the GitHub theme.

Read more

In an older, but still relevant, post on Medium John Saito demonstrates the effect of different capitalizations.

Can you spot the differences with the messages above? The left side has a few more capital letters than the right side. Big O, little o. Who cares, right?

Well, if you write for an app or website, you should care. A little thing like capitalization can actually be a big deal. Capitalization affects readability, comprehension, and usability. It even impacts how people view your brand.

We’ll get to the juicy stuff in a bit, but first, let’s start with a little more background about capitalization.

https://medium.com/@jsaito/making-a-case-for-letter-case-19d09f653c98

Read more

Tailwind CSS is a kick-ass utility first CSS framework. Though the documentation contains some nice examples, you might want to some more examples. You'll be happy to know that Agustin Rodríguez created a site with some nice components built by the community.

https://tailwindcomponents.com

Read more

In this blogpost by Tailwind CSS co-creators Adam Wathan and Steve Schoger share lots of actionable tips to improve the layout of your site.

Laravel.io is a forum and community portal for developers who use the Laravel PHP framework.

They recently launched a brand new version of the site, but being a volunteer-driven open source project, finding the resources to put together a really polished design can be tough.

We asked and got the go ahead to try our hands at a bit of a facelift, so let’s see what we can do to take the UI up a notch!

https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0

Read more

You can spend a lot of time to make emails look pretty, but it might be better to just don't style them at all. Greg Kogan did some A/B testing an concluded that sending plain emails results in more opens, clicks, replies, ...

Why are the plain emails crushing the performance of designed emails?

• They're less likely to be caught in spam filters. Having less HTML and fewer non-text elements such as images lowers the likelihood of triggering spam filters. You can use a free spam checker to validate this by testing plain and designed emails.
• They're less likely to go into the "Promotions" tab in Gmail (used by ~16% of all email users), for the same reasons above. From my testing, the plain emails typically end up in the Updates tab and some times even in the primary tab. Of course, the text in the email also affects this.
• They don't look like advertisements. The second the recipient interprets your email as an ad, promotion, or sales pitch—and it does take just a second—its chances of being read or acted upon plummet towards zero. A plain email leads people to start reading it before jumping to conclusions.
• They feel more personal. It's no handwritten note, but it's much more personal than an over-designed email with the recipient's first name crammed somewhere inside.

https://www.gkogan.co/blog/dont-design-emails/

Read more

? Little details go a long way when styling UI components. Here are a few different ways to style inputs: pic.twitter.com/1D2AYDwi1f

— Steve Schoger (@steveschoger) 18 oktober 2017

Read more [twitter.com]

Steve Schoger, a well known designer in the Laravel community, wrote down some good, actionable tips to improve your typography.

When I say typography, I’m not just referring to the font selection (although that is one important factor), I am referring to the entire composition of it. In this post, I’ve compiled a list of some important elements you can consider to create beautiful typography.

Let's get started!

http://www.steveschoger.com/2017/07/19/6-tips-that-will-improve-your-typography-on-your-ui/

Read more

In my day to day work I don't write any css at all, but I still very much enjoyed this blogpost by Adam Wathan where he shares some interesting things about how css should be structured and he makes the case for using utility classes to make visual tweaks.

When you think about the relationship between HTML and CSS in terms of "separation of concerns", it's very black and white.

You either have separation of concerns (good!), or you don't (bad!). This is not the right way to think about HTML and CSS. Instead, think about dependency direction.

...

One of the biggest benefits of using small, composable utilities is that every developer on your team is always choosing values from a fixed set of options.

https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

Read more

A few days before Breath of the Wild was released Nintendo's Hidemaro Fujibayashi, Satoru Takizawa, and Takuhiro Dohta (who all three working on various Zelda games in the past) gave at talk at the Game Developers Conference. They provide a unique look behind the scenes of this fantastic game.

Read more

Mathias Verraes, one of the organizers of DDD Europe, recently gave a talk at DDD London on how to name things to both improve your code and to improve communication with the business.

“Make the implicit explicit” must be one of the most valuable advices I ever got about software modelling and design. Gather around for some tales from the trenches: stories from software projects where identifying a missing concept, and bringing it front and centre, turned the model inside out. Our tools: metaphors, pedantry, type systems, the age old heuristic of “Follow the money”, visual models, and a healthy obsession with language.

https://skillsmatter.com/skillscasts/8806-ddd-meetup

Read more

Eric L. Barnes of Laravel-news and dotdev fame, did a little research on the most used fonts for programming.

Everyone has their ideal development setup, and many have spent countless hours customizing it to perfectly suit their needs. Outside of a color scheme, the next typical change is the font in use and every year new fonts are introduced giving us more to choose from than ever before.

To find out what everyone is using, I asked on Twitter and Facebook and had a ton of responses. Based on the answers here is a list of the top 5 programming fonts in use today

https://laravel-news.com/2016/10/top-5-programming-fonts/

I'm a big fan of Fira Code myself. It has some nice ligatures and it just looks very good. Here it is in action in my IDE:

Read more

John Saito, a designer at Dropbox, wrote down some very useful tips to improve the text in your UI.

Technically speaking, I’m a writer. I get paid to write words. But here’s something most people don’t know about me: I hate to read. ... You see, I mostly write interface text for apps and websites. It’s a style of writing where brevity beats brilliance, and every character counts. Writing interface text is actually a lot like design—designing words for people who hate to read.

https://medium.com/@jsaito/how-to-design-words-63d6965051e9

Read more

In the beginning of the year Wouter de Bres wrote this fantastic article on digital product design principles.

I wrote down twelve design principles for our team at Degreed to help us make design decisions. I tried to make them practical and clear and hopefully they are useful for anyone who is working on digital products.

https://medium.com/@WdeB/digital-product-design-principles-8bc9eb6c080c

Read more

This week an article on WIRED informed us that the average webpage is now the size of the computer game 'DOOM'.

Maciej Ceglowski gave an excellent talk on this subject at this years Web Directions conference. His keynote title "The website obesity crisis" is available on Vimeo.

Read more

Broken images are ugly. But they don’t always have to be. We can use CSS to apply styles to the element to provide a better experience than the default.

Read more

Mathias Verraes illustrates with practical examples how PHP's type system can be used when designing a system.

Below is an attempt at illustrating a design/redesign process I went through at a client, who’s started refactoring the core systems their business depends on. Design is the part of software development that is the most messy, the hardest to fit into rules or well-defined processes. In fact, while writing this post, I tweeted:

“There are surprisingly few software design books that recommend taking a walk, a shower, or a nap, as an important step.”

None of the solutions offered below should be taken as truth. I may have already changed my mind on some of them by the time you read them.

Read more