.. Your Daily Design Dosis

Tweet Parade (no.46-2015)

| Comments Off on Tweet Parade (no.46-2015)

.. stay up to date! Time for a new roundup with last week’s best tutorials and design articles! It’s all about HTML, CSS, PHP, responsive web design, branding, SEO, WordPress and more. A broad scale of topics, but never-the-less the underlying focus is on Design.

Also I see this as my personal bookmarks of great articles from the Community of the last period. These hand-picked articles and tutorials are categorized by their main topics. The best way to keep track of these tweets is simply to follow me on Twitter.

Webdesign Coding: CSS, HTML, Javascript, PhP, APIs, etc.

Building SVG Icons with React – While traditional graphics applications like Adobe Illustrator work well for certain tasks, they fall short when used to create pixel perfect, mathematically-derived graphics.

How To Style and Position SVG Text With The tspan Element – The SVG text element allows you to easily position and style text, but what do you do if you want to position and style different parts of the text differently? Do you need to create multiple text elements? Nope.

CSS Image Effects #6: Infrared Photography – This is the final post in a series which breaks down visual effects using CSS filters and blend modes. Let’s end the series with something short and sweet that has a lot of impact for minimal lines of code: a faux infrared photo effect.

PostCSS Deep Dive: Create Your Own Plugin – In this tutorial you’ll learn how to create a basic plugin of your own for PostCSS. We won’t be going too heavily into the plugin API, and we won’t use any super hardcore coding.

What Specifically is CSS Specificity – In this lesson, we’ll learn how CSS specificity works, what selectors win over others, and some tips to stay out of trouble when writing CSS. In CSS, specificity is all about who would win in a fight. Selectors have a “power level” of sorts.

How To Reuse SVG Text With The tref Element – Let’s pick things up with the two remaining attributes and then I’ll talk about reusing SVG text with the tref element. Please note that while the tref element is part of the SVG 1.1 spec, it’s being removed from the SVG 2.0 spec.

Things to NOT avoid when writing CSS – A blog post titled Things To Avoid When Writing CSS caught our attention a few days ago. We thought it would be useful if we shared our experience and views on how to write efficient and maintainable CSS.

JavaScript Is Eating The World – Lacker gave a talk where he made the case that the power, ecosystem and ubiquity of JavaScript will make it the default language for app, website and server-side development in the years to come.

Recipes for Randomness in JavaScript – Random behaviour is often required in JavaScript, from drawing stars scattered across the night sky to animating chaotic attractors. But there are many different kinds of randomness, and the type you need will differ depending on the application.

Using HTML5’s Native Drag and Drop API – Handling dragging, dropping, and sorting has always been a task for JavaScript. With the advent of the HTML5 Drag and Drop API, developers will be able to hook into native events and attributes to handle these interactions.

Usability, UX, Responsive Web Design, Mobile, Performance, etc.

UX of UP: Urinals and Usability – About half the world’s population uses them, yet have you ever stopped to wonder what urinal design can tell us about good Enterprise Mobile usability practices? No, of course you haven’t.

Long-Term Exposure to Flat Design: How the Trend Slowly Makes Users Less Efficient – Clickable UI elements with absent or weak visual signifiers condition users over time to click and hover uncertainly across pages—reducing efficiency and increasing reliance on contextual cues and immediate click feedback.

How to Build Responsive Images with srcset – An important part of a responsive website are responsive images. In this article, we’ll learn more about responsive images on the web and see how to build them.

The Best Guide for Designing With Gestures – It is safe to say designers are also shifting towards designing with gestures. It get tricky though, when designing for mobiles it hard to retain best practices for gestures in mind like the “thumb zone”. At this stage we are designing for more than the eyes, but also the hands.

Big Data, Small Insight – Time and time again, I witnessed frustrated Product Owners reiterating designs that eventually offered little or no benefit to the business – or the user. The data was telling us what was going on, but it wasn’t telling us why it was happening.

A Quick Guide to Google’s PageSpeed Insights – In this short video tutorial from my recent course on optimizing page load, I’ll explain how you can use PageSpeed Insights to improve your own web page speeds.

How We Hold Our GadgetsWhere do hands and fingers fall on the device? Since we hold phones, phablets, tablets, and laptops very differently, it’s no surprise that each of these touchscreen variations has its own UI needs.

The Difference Between Responsive and Adaptive Design – Responsive sites and adaptive sites are the same in that they both change appearance based on the browser environment they are being viewed on (the most common thing: the browser’s width).

Why you shouldn’t ignore the bigger breakpoints in responsive web design – Basic media queries are usually for a phone, tablet, and desktop. But there’s generally no consideration for the Very Big Desktop.

WPO Stats – Case studies and experiments demonstrating the impact of performance optimization on user experience and business metrics.

How to maintain product UX consistency? – Maintaining product consistency will not only reduce the learning effort for users to navigate within the application, but also benefit the whole product development cycle, from design, engineering, to QA testing and documentation.

Designing Websites Using A Mobile First Approach – Adopting a mobile first strategy can be extremely difficult at first; however, there are many benefits to this concept. All that is required from you is to step up and take the leap.

Misused mobile UX patterns – Getting used to adapting best practices might make you believe that eg. Google is always right, their design goals are the same as yours and you fail to question them. Here are a few patterns that are (or used to be) considered best practices and yet might not be as good as you’d think at first sight.

Get Faster at Responsive UI Design – Designing with multiple screen sizes in mind becomes speedy and more effective when considering content in the wireframing process. By blocking out areas for the content or splitting it into different categories, designers can create movable parts to adapt to any screen size.

List vs. Grid View: When to Use Which on Mobile – There’s more flexibility with layouts on desktop, but on mobile, your choice matters. The view that allows users to see more content while doing less work is the winner.

The importance of Visual Consistency in UI Design – Visual Consistency is so important, building visually consistent pages has become an unspoken rule. This article brings you great tips to go with when attempting to bring balance and visual consistency into your UI.

The User Experience (UX) Of Pagination – Before you can paginate, you have to know what the user is looking for and whether or not pagination is an actual value-add. And, if you can’t answer that without saying “Because, data”, don’t give the user data – give them a way to tell you what their intent actually is.

Webdesign in Common, Web Typography, Tools, Email, etc.

Best Web Apps and Work Hacks for Web Design Teams – One way some project managers seek to improve design team productivity is to require team members to work harder or for longer hours. Taking this approach however will almost always have a damaging effect on overall team productivity in the long run.

15 Reasons Why A Grid Based Approach Will Improve Your Designs – Every designer will have their own reason for why grids are important to them, but in short, they help you to structure your design in a way that would otherwise be difficult, time consuming and troublesome.

The Future of Web Design Again? – I’m interested in the trends just around the corner we’re not quite at, but are getting closer to. Within this article we’re going to explore these topics so you can get the gist of exactly where we’re heading as an industry.

The Creative Design Process – A well-thought-out and systematic design process minimizes the chances of errors, resulting in an impactful and professional logo. However, if you don’t follow a design process, then you may undermine the credibility of your design skills as well as your business.

Creating beautiful typography for the web – In this article, we will provide a broad overview of the importance of both macro- and microtypography on the web. The former focuses on the overall arrangement of text on a page; the latter on fine details like ligatures and figures.

Five Steps to an About Page That Sell – See, an About page shouldn’t be about you at all. The accepted wisdom is that it should be, but that’s wrong. Your About page should be about the person reading it. Let me repeat that.

Using System UI Fonts In Web Design: A Quick Practical Guide – We can get excited about using system UI fonts. They’re an interesting, fresh alternative to web typography — and one that doesn’t require a web-font delivery service or font files stored on your server.

Jekyll against the rest of the world – WordPress is a wonderful but complex system that’s largely responsible for the blogging revolution of the past decade. Its security track record isn’t the best and you can like its code or not.

Premature Subsetting of Web Fonts – If you thought Web Fonts were pretty nifty, then you’re going to think font subsetting is really cool. But please don’t pretend that these characters don’t exist! You’re publishing on the World Wide Web – act like it.

Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.

How to Create a Natural Pastel Photo Effect in Photoshop – A pastel is defined as “a soft and delicate shade of color”. Pastels aren’t overly intense or elaborate. They don’t detract from the rest of an image or design. They simply add a clean and subtle look.

Tips To Create Timeless Logo Design – A logo is a brand’s identity. It is more identifiable than brand’s name itself! Therefore logo design process needs systematic planning, artistic thinking and inputs. Here is a list of certain important things you must consider while designing a logo!

What to do when a client rejects your designs – The deck is finessed, the sell is delivered with gusto and everyone looks up at the client in anticipation – only to find tumbleweed blowing, followed by a big fat ‘no’.

Blogging, Social Media, Writing, Content Strategy, etc.

3 Rules of Thumb for Maximizing Twitter – Yet, that is just one perspective or opinion and burdens the platform with limitations that discount that power and reach of the network. If we thought this way, would blab, periscope or meerkat be as actively used as they are now?

Less content marketing, more quality content – There is a type of product that does require lots and lots of content marketing and will continue to require such marketing long into the future. The type of product where the more you learn about what it’s made of, the less likely you are to buy it.

Google’s ‘About me’ is your all-inclusive profile for the company’s apps – A new “About me” page is Google’s one-stop shop for updating your profile details across the company’s arsenal of apps. Changes made here will update how your personal information is display in the likes of Google+, Photos, Drive and more.


Are You Getting Cheated When Buying A WordPress Theme? – Google, in particular, considers website loading speed to be very important and has made it one of the more important factors in its ranking algorithm.

Best Ways to Manage Version Control in WordPress – We often don’t feel the stress of whether or not there are multiple version of a file saves until there is a coding issue which leaves you with no choice but to revert to a previous version. These issues make you realize the importance of version control systems.

Recommended Plugins – While WordPress offers a ton of features and flexibility, there is still a lot of functionality missing from the core software. The best way to fill in the missing pieces, of course, is to get yourself the right plugins.

Add an Automatic ‘Featured Image’ to Blog Posts Based on Category – There can be scenarios where instead of showing a featured image for each post, you want to display an image relating to the category the post is in.

The Ultimate Guide To WordPress Speed Optimization – This tutorial will be solely focused on WordPress speed optimization to the complete maximum. The window of loading time that most people give a website is 0 – 2 seconds.

How to Fix & Repair Crashed WordPress Database Easily – So if you are facing such strange issues, then don’t worry, just follow the below instructions and you will be up and running in no time.

UX vs UI: What’s the Difference? (And How They Apply to WordPress) – A better understanding of UI and UX, and how they apply to you, as a WordPress developer, is key to building a better product and brand – which is exactly what we’re going to cover in this article.

You Screwed Up and You Have an Angry WordPress Client. Now What? – In this post I won’t dwell on how the mistake was made or what you should have done to prevent it, but instead I’ll run through what you can do to rescue the situation and come out of it with the relationship with your client intact, if not improved.

What’s New & How Will It Affect a WordPress Site? – If you’re a website developer/owner running their sites on WordPress then you’ve landed to the right blog post. This informative guide will not only give you a taste of what’s new coming in PHP 7 but also will answer all your questions related to the new PHP version!

Search Engine Optimalization, Conversions, Analytics, etc.

5 Ways Design Elements Help Out with Local Search – From navigation and URL structure to social sharing and visual content, the following five tips will better your design element for your website.

Why it’s time to leave old-school SEO behind – SEO strategies have included back-linking, title tags, page architecture, site maps and introduced us to a style of writing content that emphasizes keywords. These strategies have largely belonged to webmasters and programmers.


Interactive Room Display – The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up.

Animating an SVG Menu Icon with Segment – A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

How to Create Skewed Edges With CSS – In this post, we’re going to look at how we can create a angled edge effect (horizontally) on a web page. To do this trick, we will be using the pseudo-elements ::before and ::after and CSS3 Transform.

Freelance, Business and Workflow Related Stuff

5 Questions You Should Ask Before Starting a Design Project – No one likes to ask difficult questions. When put in a situation of potential conflict or social awkwardness, we tend to shy away and opt for a more comfortable scenario.

The Art of Dealing With a Panicky Design Client – I’m talking, about the panicky clients; the clients who see everything as the most urgent emergency ever. The ones who call you 20 times at 2 AM with “urgent” messages and tasks that for some mysterious reason can’t wait until a decent hour.

F*cking Brilliant, a great Read or just magnificent Tips!

Stop Giving Depressing Code Reviews – Code reviews are amazing. They’re our best opportunity to get recurring feedback as developers, making them crucial to the development of our skills. Unfortunately, we often write 200 lines of good code when all that gets noticed is the one line we format incorrectly.

How I Work with Color – It’s all about experimentation. Pressure test your color palettes. Test them against various backgrounds across a multitude of mediums and note how they read when the elements are scaled. There’s so much to do and still so many new, interesting palettes to discover.

How Apple Is Giving Design A Bad Name – Once upon a time, Apple was known for designing easy-to-use, easy-to-understand products. It was a champion of the graphical user interface, where it is always possible to discover what actions are possible, ..

Why is it so hard to find a front end developer? – The answer is simple: front end development, like any specialized trade or spectator sport, is a lot harder than it looks. It isn’t until you’ve dipped your toes in it that you realize just how turbulent the waters are.

Let’s talk about white app icons – Your icon is your greatest tool in shaping an image of your product in your users minds. A lack of variety in icon design hurts users ability to navigate and blurs the mental image of your product.

– § –

I hope you have enjoyed these hand-picked great articles? Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

Sorry, comments for this entry are closed at this time.