Yay, it’s weekend .. time for a new roundup with the best design-related articles and tutorials of last week’s blogosphere, hand-picked for you. It’s all about webdesign, graphic design, SEO, tutorials, social media 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. The different articles and post 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.
Basic CSS Tricks that Are Not So Basic - Now, it is not an uphill task to keep the codes clean. There are some simple ways to do that. Wondering what they could be?
Creating a Slider Control with the HTML5 Range Input - HTML5 introduces a range of new form elements and functions, including the range input type. With the range input element, you can create sliding controls for your site users.
How to Build a Website Using Twitter Bootstrap and SASS – Part 1 - We will get our hands dirty and code a web page right from scratch using Twitter Bootstrap and SASS. The first part will cover the details of building the folder structure and creating markup using TBS for the layout.
CSS3 Attribute Selector: Targeting The File Type - The attribute selectors is a really useful feature to select an element without adding superfluousid or classes. As long as the targeted element has an attribute like href, src and type we don’t have to do so.
CSS Columns - One of the newer CSS properties at our disposal is the column set of properties; these properties allow us to create columned containers without the hassle of floats, clears, margins, and more.
More efficient CSS3 transitions - CSS transitions rarely happen in isolation. Adding transitions to groups of elements means there’s more to keep track of and more opportunity to add variety. We can also take advantage of how our brains tend to see things to both save ourselves ..
An Introduction to the CSS Flexbox Module - Currently, the CSS Flexbox specification is a working draft! The examples this tutorial covers could potentially fail to work in the future, as browsers change their flexbox implementation to match up with the specification.
JavaScript String Methods Reference - A lot of references I come across have far too much info, so this post will give examples and brief descriptions of some of the most common and useful string-related methods.
CSS Animate Effects We Can Learn From Animate.css - In this tutorial we going to look into the open source project which has become very popular lately…Animate.css. This is a project which is currently hosted on Github where you can download the source. We are going to look at some of the best CSS ..
The CSS Guide - This series has been created to teach you everything you need to know about CSS in order to operate in the web design world. We’d recommend doing a few sections a day, and in no time you’ll have mastered CSS! After that we have every CSS property indexed so you can keep track of support for a particular feature.
How We Improved Page Speed By Cleaning CSS, HTML and Images - Site speed can make or break conversion rates and impact your site’s revenue, so keep your page load time low by writing code semantically, use best practices and routinely cleaning up your CSS, HTML and images.
Usability, User Experience, Responsive Webdesign, Mobile, etc.
Help Prevent User Screw-Ups With These Awesome Tips - As a designer, it’s up to you to help your users avoid these tragic mistakes whenever possible. Today we’ll look at some methods that you can use to achieve this goal.
Building a Responsive, Mobile-First Navigation Menu - This tutorial will demonstrate how to develop a complex responsive navigation menu using the “Mobile-First Approach“. The aim is to present mobile users with a pseudo-native, touch-conducive and interactive interface that enables them to navigate the website with ease.
Insider views on responsive design: the debate continues - Can’t we all just agree? No, not in this lifetime, especially for a topic as highly debated as this one. With the vast number of web developers and designers servicing clients today, and the huge uptake in mobile devices ..
Where Does Advertising Fit In A Responsive World? - Ads are staying and responsive design is staying, yet the fixed nature of ads online don’t seem to lend themselves to the flexible layouts of responsive design. It seems as if something has to give.
Pattern Translations - We are accustomed to the phrase “design patterns” which encompasses an established solution to a design problem consisting of purpose, function and appearance. There are lots of libraries cataloging these solutions to help designers and developers make ..
The Beginners’ Guide to Benchmarking User Experience - Here are 6 steps for benchmarking your user experience designs against your client’s business objectives. The same approach works whether your clients are internal to your organisation or external.
Design Tips for a Cleaner User Interface - Minimalism is the design concept where you build interfaces using only the most important elements. These websites often come out looking very clean and intuitive for users. The style has been adopted in many different fashions ..
Design for Readability - Compared to their print counterparts, the web versions of many magazines give readers a decidedly poor reading experience. Most websites follow a lackluster design model. Will digital publications ever be able to compete with the reading experience ..
Defining And Applying Personas to UX Design - Personas have long been integrated with UX documentation. They help us create fictional users, representative of our real users, which we can reference throughout our creative process to inform and validate our design and UX.
Unified Dropdown Menu: One Menu to Rule All Links - Websites with multiple dropdown menus are known for causing user problems. But how would a single dropdown menu that displayed all of a website’s content links fare? It’s not common to find a unified dropdown menu on websites today
Basic Usability Ideas for Intuitive Design - In this article I want to share some ideas for basic, fundamental truths to building a usable interface. Designing a website is challenging even as a generic idea of colors, widgets, and wireframe mockups.
The case for responsive webcontent: it’s all about the users - There is a case to be made for content to not simply shift or hide, but to change altogether. For it to change based on certain contexts; based on use cases. Top tasks dictate use cases, and use cases dictate content.
Over Messaging The User Experience - While the look of our interfaces has changed over the years, the seeming constant demand to respond to dialogues boxes and information alerts hasn’t.
Webdesign in Common, Web Typography, jQuery, Tools, etc.
New tools for web design anddevelopment: June 2012 - It’s about time things in the world took a turn for the better, and it makes sense that the upturn should begin online. And best of all, none of our choices will cost you a red cent.
3 Quick Ways to Show Attention to Detail in Web Design - In this article, I’m going to exhibit a few examples of designs on the web that lack that little bit of detail that would make the websites a much more pleasant place to explore.
35 Excellent jQuery and CSS3 Navigation Menus - For this roundup we’ve prepared 35 fresh (most of them are from 2012), beautiful and straight away usable jQuery and CSS3 navigation menus. All you have to do is customize them for your specific needs!
Mobile Landing Page Optimization – 10 Best Practices for Success - Landing pages can be used for PPC ads, mobile app downloads, promotional campaigns and more. Optimization tactics are intended to boost conversion, improve PPC quality scores, and provide a better user experience
Custom jQuery Effects for Coding Good Websites - The three primary frontend coding languages(HTML5/CSS3/JS) are sometimes overlooked for the more technical details. However we should never forget the roots of our Internet and how websites have come into fruition.
10 essential security tips:protect your site from hackers - You may not think your site has anything worth being hacked for, but websites are compromised all the time. The majority of security breaches are not to steal your data or deface your website, but instead attempts to use your server as an email relay for spam, ..
Create a custom jQuery plug-in - In this article, learn how to quickly create a custom jQuery plug-in. Example code and step-by-step instructions show you how to create a jQuery accordion plug-in. If you know jQuery and are ready to take your skills to the next level, this article is perfect for you.
Make Your Web Pages More Legible With CSS3 Ligatures and Kerning Pairs - Traditionally, ligatures were created by inserting HTML entities, but in modern browsers it is much easier to turn on the appropriate CSS property. CSS3 offers many controls for kerning, but the easiest and fastest is very simple.
Designing the Dreaded Form - As much as they are dreaded, forms play an important role in many websites and designing them should involve careful planning of their layout.
9 Really Impressive jQuery Plugins with Canvas, SVG and CSS3 - jQuery plugin development is growing at a staggering speed. Thanks to the poweful and easy to use jQuery framework, it’s making our life so much easier! Apart from jQuery, due to the fall of flash, HTML5/CSS3 and powerful web browsers, javascript ..
Graphic Design, Brand Identity, Typography, Print Design, Icons, etc.
Understanding the Inner Glow Setting in Photoshop – we will explain every aspect of Photoshop’s layer styles feature and show you how to unlock their potential. In this article, we will explain the settings behind the Inner Glow and how it can be used.
15+ Vintage & Retro Typography Illustrator Tutorials - Here’s a collection of vintage & retro Adobe Illustrator tutorials dedicated to typography. These tutorials have been design beautifully with step by step instructions on helping you to create the perfect vintage/retro text ..
10 Useful Tips on Creating an Effective Logo Design - Creating an effective logo design that best captivates people’s attention and sticks to their minds takes some careful planning, execution and tests. With all the thousands of brands out there, and the millions of images and visuals ..
Time Saving Tips For Adobe InDesign - Being able to use something as versatile as Adobe InDesign as a pro means being efficient. Creativity is so often held back by the speed of navigating software, and InDesign can be no different.
15 Top Tips for Becoming a Great Graphic Designer - Whether you’re a design amateur or ace, sometimes a little help goes a long way. Here are 15 top tips to help you grow into a great graphic designer.
The Anatomy of a Business Card. Design Principles and Examples - Business card is the first thing which can give people an idea about what you`re actually doing and how you can help them through your business. But above these, people can actually perceive your business principles by only watching at your business card.
26 High Quality Adobe Photoshop Tutorials 2012 - In this article, we are presenting High Quality Adobe Photoshop Tutorials 2012 that will guide you how you can maximize your expertise and efficiency by exploring this astonishing tool.
Take Your Typography To the Next Level With the Glyph Palette - Accessible through Illustrator’s (or InDesign’s) type menu, the Glyphs palette is a powerful tool when it comes to taking control of your typography. Glyphs are simply the symbols associated with the keys on the keyboard, but the glyphs palette ..
Mastering Complex Selections in Photoshop - Having the ability to effectively extract an image from its background is an essential skill for any designer, photographer, or creative professional. Many times we have unique challenges when attempting to separate a subject from its setting.
The Comprehensive Guide to Bevel and Emboss - In this article, Part 6: The Comprehensive Guide to Bevel and Emboss, we will explain the settings behind Bevel and Emboss, including Contour and Texture, and how they can be used.
Blogging, Social Media, Writing, Content Strategy, etc.
How To Write Attention Grabbing Blog Post Titles – With Examples - A blog post’s title can make or break the success of an article. Bloggers strive to create attention-grabbing, irresistible headlines that result in full reads, improved conversions and social sharing.
3 Facebook “Like Button” Tricks You May Not Know - The Facebook ‘Like’ button is a powerful tool you can utilize to increase the fan base for your brands, companies and products. As part of the marketing strategy for many pages, this Like button is used as a ‘gate’ before ..
Simple Steps To Visually Increase Interest In Your Blog Posts - The most important part of any blog post is the content itself. However there’s more to content than words on a page. How your post appears visually contributes to its readability. It helps people decide quickly if they’ll stick around to read.
WordPress
Improve WordPress Visual Editor for any theme with Editor Stylesheets - What good is a WYSIWYG editing interface if it fails to show what your marked-up content really looks like? Many themes do not make use of editor styles, even though they’ve been available since WordPress version 3.
Create A Responsive, Mobile-First WordPress Theme - WordPress is an extremely popular, flexible, easy to use and open-source blogging and CMS system. And the need is growing for more beautifully designed and coded WordPress themes that work well across all of these devices.
10 Tutorials For Developing WordPress Themes - Being able to design custom WordPress themes is almost a must for today’s web designers. The fun thing with WordPress is that there’s always something new that you can learn to make the platform work better for you and your clients.
How To Speed Up Your WordPress Websites Loading Times - Every website owner want to speed up their website load time. Even the search engines like Google love the website load time when considering for indexing and page ranking means Web search ranking also depends on site speed.
WordPress Roles and Capabilities: The Basics - In this first part, we’ll walk through the basics and inner workings of the WordPress users, roles and capabilities system. No functions or code will be covered in this part. So you can jump to the next one if you are interested only in ..
Converting a Web Template into a WordPress Theme - before you can port your existing website or template into WordPress, you need to have a basic understanding of both HTML and CSS. WordPress uses PHP function calls to retrieve or call data elements.
Highlighting a WordPress Site’s Best Content - From “sticky” posts to featured post tabs and jQuery-based slider boxes, authors are increasingly creating a designated area near the top of their website’s index page which is exclusively used for featuring a site’s best content.
Master the WordPress Loop - Oh, The Loop. It’s a living, breathing thing. It’s the backbone of WordPress – the part that makes everything tick. Without The Loop, there would be no dynamic content (very little, anyway). Using The Loop, we can print any content, in any format we want.
How to Start a WordPress Website? – Building an attractive website is now easy as pie. One of the best open source platforms for the job is a Content Management System (CMS) called WordPress.
Everything About WP Auto-Save and Post Revision - Two features that have received enough bashing are WordPress Auto-Save and WordPress Post-Revising. These are more or less interconnected with each other and the codes that control them are capable enough to turn off any average webmaster.
How to Optimize the WordPress Front-End for Speed - That leaves you with optimizing the website which is 9 times out of 10 what needs to be “fixed”. Please also note that each page is unique and must be diagnosed separately. How do we diagnose the page?
WordPress Roles and Capabilities: Functions of Note - The series will cover the architecture and design of user roles in WordPress; highlight the most important functions for interacting with users and managing roles and capabilities; and in the last tutorial, we are going to build a real-life example that demonstrates the usefulness of this API.
Search Engine Optimalization, Conversions, Analytics, etc.
9 Questions to Shape and Future-Proof Your Link Building Strategy - Here’s a checklist of questions to help you understand if a potential client is ready to make a change from a previously one-dimensional link building strategy. This checklist would also serve for an ..
Is Your Blog Over-optimized? - The current hot topic in the search engine optimization world is Google’s recent Penguin update—a move the search giant claims is intended to help reduce the presence of over-optimized web pages in the natural search results.
Connection speed and web design - Reach out to these people when you do your website design. If you’re designing a website for those who may still be using 56k modems, a page full of videos, graphics and intense JavaScript isn’t going to fly.
21 Interesting Myths about SEO - “Research” is the most important part of this field and you always have to go with the updates. Maybe you are not aware of those techniques which worked in past years but they don’t work now.
Tutorials
Make Your Text Attractive Using Illustrator Tutorials - In this round-up, a handy collection of Adobe Illustrator Text Effect Tutorials for designers, you can provide attractive and stunning text effects, by using these text effect tutorials.
Swatch Book with CSS3 and jQuery - A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details. We will be using CSS transforms and transitions and create a simple jQuery plugin.
SASS and Compass for Web Designers: The Header - We’re going to continue building our Creative Portfolio web page with SASS and Compass. On this occasion, we’ll turn our attention to the header area, the primary navigation and some featured images.
Coding a Guided Registration Form with jQuery - In this tutorial I want to demonstrate how we can build such an interface with CSS3 and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords.
How to grab Dribbble feed with jQuery and CSS3 - Today, we are going to look at dribbble’s API. Dribbble is a place to show off your design, it’s based on invitation basis, therefore, most designs are of high quality.
JavaScript Tutorial: Parallax Effect, Thumbnail Shifting and Sequential Window Opening - his tutorial will explain several techniques such as Parallax Effect, Thumbnail Shifting and Sequential Window Opening. This tutorial will only focus on the very important codes to achieve those techniques.
Creating A Volume Controller With JQuery UI Slider - In this post we will code a PSD UI and turn it into something more functional. We are going to code the following PSD UI Slider to be applied as the jQuery UI Slider theme.
Freelance, Business and Workflow Related Stuff
10 designer tips for a successful side project - Read these pro tips on how to embark on a personal project, and discover the main things you need to consider along the way! Most designers, at some point, have considered taking on a personal project.
How to Make a Living in the Web Industry – Like most small business owners, you and I probably decided to go into business for ourselves because we has a skill we loved and figured we could make money offering our services. But when the honeymoon ended, we realized it wasn’t that simple.
What’s the magic number of design proofs your clients get? – Presenting multiple proofs provides our clients an avenue to make choices they are so eager to make. You might even stumble upon …But Not TOO Much!
3 Strategies for Determining a Project Budget for Clients – Pricing is often the final factor that determines if a client you are pursuing will hire you. When it comes time to pricing your services, how do you put together a package that provides your client with an accurate projected budget?
What to Expect When Designing for Startups - Designing for startups can feel more like a whirlwind than an actual design project. The process can be a rough road to travel if you are not prepared for the full experience.
Lost Any Business Lately? - Maybe it’s time to refocus your message on a new target audience. Appealing to everyone doesn’t work and never did. Zero in on a target audience that can benefit from your brand and inspire a whole new direction.
How to make more money as a freelance designer - Among designers, most want to become freelancers for the freedom you can get from it, but few actually start freelancing because of the lack of financial security. However, it is not that hard to make a decent income as a freelancer.
How to Make a Living in the Web Industry - According to at least one survey, having a written business plan doubles your chance of success, yet most don’t have one. One key piece of that equation is: how much revenue must I generate in order to make a living and a profit?
F*cking Brilliant, a great Read or just magnificent Tips!
Designer’s block: A Q&A with Trent Walton - Inspired Mag chats with Walton about where he starts to conceptualize complex design, why arrogance at a young age can be a good thing, and what app he’s currently obsessed with (that’s not his own).
Vendor prefixes are fucking batshit crazy - OK, I’m now officially fed up with vendor prefixes, and to a lesser extent with Firefox and Opera who’ve gone batshit crazy on us all once more. The reason? The device-pixel-ratio media query.
Tips For A Finely Crafted Website - Good Web designers know what many others might not realize: that creating a truly beautiful website requires care, time and craft. And similar to how a craftsperson molds their creation by combining raw materials, skill and unwavering focus on the vision, a beautiful design is ..
The Biggest UX Secret - That secret: the fundamentals of UX Design don’t change. As long as you know them, you can solve any problem, at any time, no matter how up to date you are with the latest trends and methods.
I hope you have enjoyed these hand-picked great articles? Please let me know by sharing your opinion in the comments-section. Did we miss a great article, please let us know .. To keep up to date with all the cool links, simply follow me @gonzodesign