Web design

Weekly News for Designers (N.266)


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

New Resources & Tools

snabbt.js, a minimalistic Javascript animation library that will translate, rotate, scale, skew and resize elements.
snabbt.js, a minimalistic Javascript animation library that will translate, rotate, scale, skew and resize elements

icono, a set of pure CSS icons with only one element.
icono, a set of pure CSS icons with only one element

CSS Gradient Animator, a web-based tool for generating animated gradients.
CSS Gradient Animator, a web-based tool for generating animated gradients

Fileicon, a collection of pure CSS file icons.
Fileicon, a collection of pure CSS file icons

CSS Stats, a tool that will visualize useful stats about your CSS.
CSS Stats, a tool that will visualize useful stats about your CSS

hyhyhy, a tool for creating nice looking HTML5 presentations.
hyhyhy, a tool for creating nice looking HTML5 presentations

Give ‘n’ Go, a curated gallery of Dribbble shots reworked as interactive CodePen pens.
Give 'n' Go, a curated gallery of Dribbble shots reworked as interactive CodePen pens

New Learning Resources

Expandable Project Presentation in CSS and jQuery by CodyHouse.
Expandable Project Presentation in CSS and jQuery by CodyHouse

Best of Best WordPress Tutorials of 2014 on WPBeginner.
Best of Best WordPress Tutorials of 2014 on WPBeginner

PHP Tips, Resources and Best Practices for 2015 by Bruno Skvorc.
PHP Tips, Resources and Best Practices for 2015 by Bruno Skvorc

How To Write Mobile-First CSS by Zell Liew.
How To Write Mobile-first CSS by Zell Liew

Approaches to Media Queries in Sass by Eduardo Bouças.
Approaches to Media Queries in Sass by Eduardo Bouças

Thinking Beyond Scalable CSS by Nicolas Gallagher.

How to Map in Sass by Dennis Gaebel.
How to Map in Sass

Better Webfont Loading Using localStorage and Providing WOFF2 Support by Adam Beres-Deak.
Better Webfont Loading Using localStorage and Providing WOFF2 Support

The Good, The Bad And The Great Examples Of Web Typography by Jeremiah Shoaf.
The Good, The Bad And The Great Examples Of Web Typography

The Languages and Frameworks That You Should Learn In 2015 by Martin Angelov.
The Languages and Frameworks That You Should Learn In 2015

…and finally…

Modal Window Destroy Concept by LegoMushroom.

You may also like to browse the Weekly News Archives.


The post Weekly News for Designers (N.266) appeared first on Speckyboy Web Design Magazine.

Advertisements
Standard
Web design

The 7 Awesome Secrets of Lazy Designers

I have a confession: I’m a lazy designer. Don’t get me wrong, I love putting my head down and doing my best to create quality work, but I’m also a big fan of finding ways to save both time and effort in every aspect of my workflow. I’m never proud of spending 40 hours on a project when I should’ve spent 10 to achieve the same result. If you’re a lazy designer too, here are some tips you might enjoy.

1. Stock Isn’t a Sin

Using graphics, fonts, and photos from sites like ours can help you bust out fantastic work in record time. A great design is simply a collection of well-crafted smaller pieces; however, not all of those smaller units have to be 100% of your own conception. Using a font or graphic from an online marketplace, or outsourcing parts of the work will help you achieve greatness without stressing the small stuff.

2. Originality is Overrated

Truly original design work is great, but don’t feel a need to reinvent the wheel with every client and project. Utilities like Bootstrap can rapidly speed up your workflow and are often perfect for your client’s needs. It’s easy to feel the need to astound by doing creative back flips, but what you need to remember is that while specific projects call for that type of effort, others might be more straightforward. Always do your best to provide what the client needs, but remember that the solution isn’t always going to be completely unique.

lazysecrets-2

3. Finished is Often Better Than Perfect

Quality is extremely important, but setting firm deadlines for yourself keeps you sane and your clients happy. Think about it: how often have you been on a website like Facebook or Twitter and said to yourself “I wish you could…” or “This would be better if…” Yes, web designers think that, too, but if they corrected everything before putting out a finished product, the world would be a lot less exciting. Websites are evolving and users will always find better uses and data you haven’t synthesized, so if you aim for perfection, you’ll never get anything done.

4. Never Stop Learning

You might think that you only need to learn just enough Photoshop and CSS to get by, but you’d just be setting yourself up for more work as you fumble around and take the long route. A true lazy designer knows his software inside and out and spends his or her free time finding new shortcuts and tricks to explore.

When I first started using Photoshop, it was just to do a few designs for a class. It took me five minutes to figure out steps that now literally take seconds. These programs are meant to make complex tasks easy, so take full advantage of this. When you think about the seconds and minutes that every shortcut will save you and how that time and effort equals money, it becomes clear that learning shortcuts and tricks is a win-win.

Great Educational Sites

lazysecrets-1

Here are some sites that you should check in on regularly to keep your skills sharp:

5. It’s Easier To Do It Right the First Time

Shortcuts are awesome. Cutting corners and delivering terrible results…not so much. You’ll save yourself a lot of hassle in the long run if you do everything you can to get design projects right the first time. I don’t know about you, but I just don’t have the energy to go through endless rounds of revisions. Spend more time thinking and less time doing.

Work out the potential problems you may encounter beforehand so you don’t waste time at the computer or sketchbook. Have an idea of the finished product in mind while working, but don’t be afraid to edit what you can see becoming a potential hazard or trying out a new idea. When you’re done, do a quick scan for any obvious mistakes. Check your work and make sure you haven’t forgotten anything. By working ahead in your mind, carefully editing while you design, and reviewing the whole piece before calling it a day, your new first draft becomes as good as your old third draft.

6. Some Clients Need to Be Fired

Clients mean work and money. Never disrespect them or undervalue them. That being said, some clients are more trouble than they’re worth and you’ll make your life a lot easier by letting them go. Say it with me, “I am a professional and deserve to be treated as such.” If you feel like you are being abused, underpaid, or simply not respected by your clients, it’s time to have a meeting or to cut and run. Clients can have very unreasonable demands and, as hard as it sounds, it can be better to leave a bad situation with little to no tension than to stay and finish. One way to be proactive about this is to set honest, clear goals in a contract with your clients.

7. Outsourcing is Awesome

More work means more money, but everyone has a limit. Take on more work than you can handle, then offload the bulk of it. Spend your time on the projects that you enjoy and let other people take care of the rest. You need to find people who can work independently and don’t need a lot of hand holding, or you’ll find yourself in a terrible situation. A quick guide to picking helpers: if you don’t feel like you’d be proud putting your name on one of their pieces, don’t work with them. Good work is collaboration. Work with designers who are at your level so any questions or problems become a discussion, rather than you teaching someone how to do something you could do yourself.

lazysecrets-2

What Are Your Lazy Designer Tips?

These tips are going to save you time and effort. Remember, the truly lazy designer is smart, efficient, and exact: don’t give any more or less than you have to while getting the job done right.


Header image created using Big Pack of Flat Line Illustrations.


Standard
Web design

Weekly News for Designers (N.265)


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

New Resources & Tools

What Colour Is It? Hexadecimal colours that corresponds to the current time of day.
What Colour Is It?

Wysihtml Editor, is an extended and less strict approach on wysihtml5 rich text editor.
Wysihtml Editor

MkDocs, a fast and simple static site generator for building project documentation.
MkDocs

Social Likes, a library of beautiful share buttons with counters for popular social networks.
Social Likes

Material Palette, a Material Design color palette generator.
Material Palette

Bootsy, an organized folder structure framework for every aspect of a project.
Bootsy

Meet the Ipsums, a collection a 'lorem ipsum' generators.
Meet the Ipsums

New Learning Resources

Freelancing: How to talk yourself into charging more by Andy Adams.
Freelancing: How to talk yourself into charging more by Andy Adams

A Designer’s Sublime Text Setup by Matej Latin.
A Designers Sublime Text Setup by Matej Latin

The Top 100 Email Marketing Campaigns of 2014 from Campaign Monitor.
The Top 100 Email Marketing Campaigns of 2014 from Campaign Monitor

Improving Design With Quick Usability Tests by Jerry Cao.
Improving Design With Quick Usability Tests by Jerry Cao

The Current State of Ghost by Sufyan bin Uzayr.
The Current State of Ghost by Sufyan bin Uzayr

A Beginner's Guide To Grunt: Redux by Matt Bailey.
A Beginner's Guide To Grunt: Redux by Matt Bailey

Free UI Resources

A collection of the top 50 Web & Mobile GUI Templates from 2014.
A collection of the top 50 Web & Mobile GUI Templates from 2014

Freebie: MFD UI Kit (PSD).
Freebie: MFD UI Kit

Freebie: Evil Icons, a simple and clean SVG icon pack.
Freebie: Evil Icons, a simple and clean SVG icon pack

Freebie: Snowflake UI Kit (PSD & Sketch).
Freebie: Snowflake UI Kit

Freebie: Gumba – An HTML5/CSS3 Single-Page Website Template.
Freebie: Gumba - An HTML5/CSS3 Single-Page Website Template

…and finally…

CSS-Only Calendar App Concept by David Khourshid.

You may also like to browse the Weekly News Archives.


The post Weekly News for Designers (N.265) appeared first on Speckyboy Web Design Magazine.

Standard
Web design

28 Awesome Holiday Gifts for Designers

It’s that time of year again. There’s fun to be had, but for now you’re focused on what gifts to buy. A tough task for many, but it’s especially tricky when it comes to finding that perfect gift for your designer friend or relative. Or maybe you’re a designer stuck for what to put on your Christmas wishlist? Not to worry, I’ve put together a list of 28 awesome goodies and gadgets sure to put a smile on any designers face this Christmas.

Moleskine Smart Notebook

Moleskine-Smart-Notebook-02
The Moleskine Smart Notebook creates vector SVG files from your sketches. It uses special markings on the page, alongside it’s custom app to optimize the process, and to ensure you get the best results with less effort than would normally be required. A real timesaver.

Blue LED Wooden Alarm Clock

wood-alarm-clock
This beautiful wooden alarm clock is touch and voice activated. The simple design, wooden finish and blue LED’s combine to make one of the more stylish looking digital clocks that you can pick up for or less. It even tells you the temperature!

POP Desk Smartphone Handset

457666927582513529_c13541b1409a
Give your work calls a more professional and retro feel with this playful Retro Smartphone Handset. The device is compatible with the majority of smartphones (with a headphone jack) and it works on both the standard phone mode, or any voice call apps including Skype. A fun gift well worth the price tag.

A Book Apart Gift Card

ABA-hero-4_c97486bb-368b-4a52-8d53-72e7d35848e0
A Book Apart is a collection of “brief books for people who make websites,” covering anything from Responsive Web Design to Content Strategy across 13 books. Available as physical paperback books or as digital ebooks, giving the gift of education has never been so easy, especially with their handy giftcards.

Travel Tag Prints

357d331ed178e10db733e8c82952c406
A beautiful gift for that designer friend who travels! Neil Stevens has put together an impressive range of gorgeous A3 posters inspired by travel tags, featuring destinations from all over the world, all in a similar vintage style that would look great on any wall.

Groovemade iPhone Cases & More

Screen Shot 2014-12-09 at 01.27.40
Groovemade
produce a growing line of truly amazing wooden cases and accessories for iPhone, iPad and Mac. These products are proudly “built the hard way” and it shows. Luckily for this holiday season, they’re offering giftcards too, so you don’t have the pressure of picking out a case for your friend or family member.

Exploded Alphabet Poster

EA_01
The Exploded Alphabet Poster is designed by Matt Stevens who says: “The full and definitive set of exploded letters comprised of many of my favorite typefaces.” This poster speaks to any fans of type and it explores a rather interesting view of some lovely typefaces. The perfect way to decorate your home office.

Wacom Intuous Pen

intuos pen 2 g
Designing with a mouse can be somewhat limiting at times, but you can open up a bunch of creative possibilities by trying out a graphics tablet. The Wacom Intuous sells for or under, and it’s a fun, easy way to introduce yourself or a friend to the world digital doodles, illustrations and lettering.

Creative Market Gift Card

cmgc
A Creative Market Giftcard
is the easiest way to give the gift of design, buy a giftcard from to 0 and let your creative friend pick out the exact design goodies they want from our growing selection of over 110,000+ quality design resources. Gift cards can be sent via email in an instant.

Affinity Designer

Screen Shot 2014-12-11 at 23.46.35
Affinity Designer aims to be the fastest, smoothest, most precise vector graphic design software available. Catering for everything from UI Design to Icon Design and full works of art. They’re really trying to negate the need for multiple design apps and the feedback so far seems to suggest they’re getting a lot of that right, and at they’re doing that for a lot cheaper than most competitors.

4-Port Aluminum USB Hub

f13e23f649b34386a1c83119789375fe
With so many gadgets, spare USB slots become a rare resource amongst designers and the like. This beautiful looking Aluminium USB Hub gives you four extra slots and is styled to fit nicely with most Apple computers, bonus points for that.

Crop It Like It’s Hot

CropHeather
Designers with a sense of humor, and love of rap/hip-hop will appreciate this nod to Snoop and Pharrell Williams. A fun playful t-shirt that’s 90% cotton and only . What are you waiting for? Crop it like it’s hot!

Browser Sketch Pad

Browser_Pad-3_1024x1024
Your web designer friends will thank you for buying them this Browser Sketch Pad. The grid is already there, the browser is already there, all that is left is for them to get creative and sketch out those wireframes. for a 50 sheet pad.

Chalk Board Mug

p5608_column_grid_6
Designers love their coffee! (apparently) – I’m a tea man myself. Whatever your poison, the combination of caffeine and doodling can be very powerful one. Jot down ideas, or sketch out some of your very own artwork on your chalkboard coffee mug. A very unique gift and only or so.

Philips Wake-Up Light

490753678857214986_6d06f84975b0
If like me, you work at silly times of the day, waking up isn’t always a pleasant experience. This wake up light imitates sunlight to gently wake you up in a natural way, along with a FM radio, or your choice of wake-up sounds it promises to wake you up feeling ready for the day, and is scientifically proven to do a better job at waking you up.

3Doodler

Screen Shot 2014-12-12 at 01.03.49
Finally, you can draw in 3D. Nope, this is not the future, this is happening now. 3Doodler is the world’s first 3D printing pen and it is as cool as it sounds. The idea is to be able to quickly “sketch” in 3D to visualise ideas, or create fun little models. It’s not as expensive as you might think at only . Make sure to check out the video too!

Letterpress Cookie Cutters

Letterpressed_Cookie_Cutters_4-sixhundred
Ever seen type so good you could eat? Well now you can. These cute little cookie cutters have two sides, one to cut, and one to press. The result, these tasty looking letterpress cookies that look great and could even be used to make fun cookie messages!

Sensu Artist Brush & Stylus

sensu-brush-image-688
This Artist Brush & Stylus
by Sensu works on a variety of devices and it makes painting on your tablet or mobile that touch more authentic. The device promises to give you real-life brush control that you just don’t get elsewhere. Not only that, there’s also a second standard stylus nib for you to use when the brush isn’t needed. Two devices in one for just .

Clearcal Anti-Glare Film

antiglare
Sick of seeing your own reflection in your Mac? Is that big window causing chaos with your design work? A common problem, with an easy solution. This anti-glare film blurs out and softens the reflections behind you while keeping your screen clear and crisp. At or so it’s an easy one to pop on your christmas wishlist.

Social / App Pillows

creative-pillows
This Etsy shop is home to a collection of quirky pillows ideal for your home or office. A variety or apps / sites are available in a soft fleece finish, plus these are 100% handmade to order.

Smashing Books

smashing-book-4-landscape-v2b-1200px
The Smashing Managzine is a very successful and popular online design blog, and they’ve now got a very well received collection of design related books for sale. Touching on everything from mobile design to coding and freelancing there’s probably something here to suit your tastes. Available as either eBooks or hardcover books the choice is yours.

Sketch 3

Screen Shot 2014-12-12 at 16.26.41
The guys at Bohemian Coding have been hard at work improving Sketch, and have recently released Sketch 3 into the wild. Sketch seems to be aimed largely at UI designers, but it really offers a range of capabilities. The app is undoubtedly growing in popularity and it offers a solid alternative to any Adobe app when it comes to web/desktop/mobile/icons design.

LaMetric Dashboard & Speaker

30
LaMetric is a device that works in two ways, it displays funky live pixel notifications around anything you want; emails, business metrics, tasks, news and more, plus it also acts as a speaker. It’s fully customizable, so you can have it display whatever you like from either your mobile or computer.

Ugmonk Coaster & Mug Bundle

mug-bundle1_1024x1024
Ugmonk has put together a delightful set of 5 coasters and a mug in this sweet bundle. The coasters feature some great type punctuations and the mug comes in either black or white. If this particular set doesn’t grab you there’s a whole lot of choice over in the Ugmonk Store, so just pick up a giftcard.

Tile. Never Lose Anything Again

Screen Shot 2014-12-12 at 22.17.35
Tile
is a small device you attach to any item you don’t want to lose. It might be some important work, your wallet or phone, anything really. Should the item go missing, you can use the Tile app to hunt it down, it even plays a sound to help you find it. If the missing item is lost or stolen further away, Tile uses it’s network of apps to help locate your item. A smart idea that looks pretty neat.

NomadKey

nomadkey_parallax
NomadKey
allows you to always have a charging cable on you, without having to carry the full wire with you. This clever alternative fits in your pocket, or on a keyring ensuring you’ll always have a way of charging your smartphone without having to bring your cable with you.

Olloclip

olloclip-review-2
Olloclip
is a clip-on lens for your iPhone that give you 4-in-1 lens options in the one bit of kit. Whether it’s close up macro images, a wide-angle or a fish-eye that you’re after, this lens has it all. A variety of lenses are available.

Website Deck of Cards

DSC03249-large
The Website Deck by UXKits is a way to quickly map out website information architecture with your team or client, away from the computer. 54 cards included for just . As used by the Creative Market team!

Let Us Know Your Gift Suggestions

So there we have it, that’s my list of gift ideas for the designer in your life. Let me know what you think, and feel free to suggest other any useful, or fun little gifts for designers that you’ve found around the web.

Standard
Web design

Weekly News for Designers (N.264)


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

New Resources & Tools

bigpicture.js, a JS library that allows infinite panning and infinite zooming in HTML pages.
bigpicture.js, a JS library that allows infinite panning and infinite zooming in HTML pages

PhotoSwipe, a JavaScript image gallery for mobile and desktop, with gesture support.
PhotoSwipe, a JavaScript image gallery for mobile and desktop, with gesture support

Squire, an HTML5 rich text editor, which provides powerful cross-browser normalisation, whilst being supremely lightweight and flexible.
Squire, an HTML5 rich text editor, which provides powerful cross-browser normalisation

firefox.html, an experiment proof-of-concept implemntation of the Firefox UI in HTML.
firefox.html, an experiment proof-of-concept implemntation of the Firefox UI in HTML

10 CSS Preprocessors Worth Considering by Sufyan bin Uzayr.
10 CSS Preprocessors Worth Considering

The 2014 edition of our top 50 jQuery plugins of the year.
The 2014 edition of our top 50 jQuery plugins of the year

And the 2014 edition of our top 50 CSS tools & resources.
And the 2014 edition of our top 50 CSS tools & resources

New Learning Resources

A Bulletproof Guide to Using HTML5 and CSS3 in Email by Kevin Mandeville.
A Bulletproof Guide to Using HTML5 and CSS3 in Email

CSS Animation for Beginners by Rachel Cope.
CSS Animation for Beginners

7 Tips for Designing Awesome Animated GIFs by Andy Orsow.
7 Tips for Designing Awesome Animated GIFs

A small collection of dialog effects using CSS animations from Codrops.
A small collection of dialog effects using CSS animations for your inspiration

Responsive Type With Only CSS by Ryan Allen.
Responsive Type With Only CSS

The Urban Dictionary Of Design Slang by Suzanne LaBarre.
The Urban Dictionary Of Design Slang

Free UI Resources

Freebie: Teracyhq Wireframe Kit for Sketch.
Teracyhq Wireframe Kit for Sketch

Freebie: Beetle, a Responsive HTML Template.
Beetle, a Responsive HTML Template

Freebie: Simp, a free Agency WordPress Theme.
Simp, a free Agency WordPress Theme

Freebie: A Huge Christmas & New Year Vector Banner Kit (AI & EPS).
A Huge Christmas & New Year Vector Banner Kit

Freebie: Favicon and App Icon Template.
Favicon and App Icon Template

Freebie: 4 Free Flat Hero Illustrations (AI).
4 Free Flat Hero Illustrations

Freebie: Cathedral Typeface.
Freebie: Cathedral Typeface

…and finally…

What Google would look like with a Material Design makeover
What Google would look like with a Material Design makeover

You may also like to browse the Weekly News Archives.


The post Weekly News for Designers (N.264) appeared first on Speckyboy Web Design Magazine.

Standard
Web design

Weekly News for Designers (N.263)


This is our popular weekly design news post where we share our favorite design related articles, resources and freebies from the past week.

You can sign-up to our awesome weekly newsletter for some more amazing articles, resources and freebies.

New Resources & Tools

SVG Loaders, a collection of loading icons and small animations built purely in SVG, no CSS or JS.
SVG Loaders, a collection of loading icons and small animations built purely in SVG, no CSS or JS

CSS-On-Diet, a preprocessor for designers.
CSS-On-Diet, a preprocessor for designers

State of Web Type, up-to-date data on support for type and typographic features on the web.
State of Web Type, up-to-date data on support for type and typographic features on the web

Clappr, an extensible media player for the web.
Clappr, an extensible media player for the web

Free Ebook: Guide to Usability Testing.
Free Ebook: Guide to Usability Testing

10 New Frontend Web Frameworks Worth Considering.
10 New Frontend Web Frameworks Worth Considering

New Learning Resources

The State of JavaScript in 2015 by Jimmy Breck-McKye.
The State of JavaScript in 2015by Jimmy Breck-McKye

3D rotating navigation, powered by CSS transformations by CodyHouse.
3D rotating navigation, powered by CSS transformations by CodyHouse

An animated perspective mockup slideshow with 3D transforms by Mary Lou.
An animated perspective mockup slideshow with 3D transforms by Mary Lou

Thoughts About Responsive Navigation On Mobile Devices by Steven Bradley .
Thoughts About Responsive Navigation On Mobile Devices by Steven Bradley

Getting Started with Sublime Text by Petar Radosevic.
Getting Started with Sublime Text by Petar Radosevic

A brief history of web design for designers by Sandijs Ruluks.
A brief history of web design for designers by Sandijs Ruluks

Free UI Resources

Freebie: 72 Miniature Wireframes (AI, PSD, Sketch).
Freebie: 72 Miniature Wireframes

Freebie: A Highly Detailed Christmas Vector Icon Set (AI).
Freebie: A Highly Detailed Christmas Vector Icon Set

Freebie: Apple Watch GUI for Illustrator (AI).
Freebie: Apple Watch GUI for Illustrator

Freebie: iOS 8 UI Design Kit (Sketch & PSD).
Freebie: iOS 8 UI Design Kit

50 Free Resources for Designers from November 2014.
50 Free Resources for Designers from November 2014

…and finally…

How Browsers Market Themselves from daverupert.com.
How Browsers Market Themselves from daverupert.com

You may also like to browse the Weekly News Archives.


The post Weekly News for Designers (N.263) appeared first on Speckyboy Web Design Magazine.

Standard