Posted on April 23, 2014

April Web Design & Development Resources Roundup

April showers justify time spent inside discovering these web design and development tools. Spring forward and check them out!

UNMINIFY – Free online tool to unminify (unpack, deobfuscate) JavaScript, CSS and HTML code, making it readable and pretty.

1_unminify

Type Finder – Type Finder is an online tool for finding reputable typefaces, created to help designers and font-enthusiasts select a proper typeface from a curated library of fonts.

2_font

BrowserSync – When you’re making responsive websites, there’s a lot of tweaking and testing to do. BrowserSync makes your workflow faster by synchronising URLs, interactions and code changes across multiple devices. It’s wicked-fast and totally free.

3_browsersync

4. Polar Polls – All about instant opinions and engagement to increase contributors, time spent, and more on Web sites and mobile apps.

4_polar

Cognitive Load – Simple advice on product psychology. A new resource by ribot to help you make better products by distilling the latest behavioural economics & consumer psychology research down into helpful little brain gems.

5_gem

Scroll Depth – A Google Analytics plugin for measuring page scrolling.

6_scroll

Chicks and Types – Lady-like typography inspiration.

7_adf

iOS 7 UI Kit Photoshop Action Set – All you need is this little 1.4 MB .atn file that creates entire default look iPhone mockups for your wireframes, design mockups or just quick ideas.

8_ps

Animation Download from {m} – Magic Animations in CSS3.

9_github

Mashape – API Glossary.

10_mashape

Posted on March 14, 2014

3 Vital Ways of Using Google Chrome To Maximize Productivity (And Sanity)

Technology should help us be more productive without debilitating our sanity. All too often, however, people get overwhelmed by the ever increasing amount of platforms and apps being thrown at them. Lost within multiple email accounts, stressed about the need for Facebook and Twitter posts, and scrambling to maintain a streamlined schedule, many people yearn for a staff of 30 people or a return to the simple days of the desk phone and the fax machine. Luckily, I have a super staff that has helped me with that, but many are not as lucky.

It doesn’t have to be so stressful. It doesn’t have to be stressful at all. You can take control of your digital life with a few simple Google Chrome applications and extensions. Here are 3 ways Google Chrome can help you take back your life:

momentum

1) Claim Your Digital Space

We’ve all been there. You go online to get work done and 20 minutes later find yourself reading a detailed psychological analysis of Justin Bieber. I stay on track with Momentum. This brilliant application allows you to replace new tab pages with a personal dashboard featuring an inspirational photo and a motivating quote. It shows you the weather (no excuse to Google that) and your daily to do list. Momentum reminds me why I’m online. It literally maintains my momentum.

Working online involves passwords. Lots of passwords. Everything from email to personal banking requires a code to enter. And yes, I forget my passwords just like everyone else. Some people keep an Excel document with all of their passwords or, even worse, use the same password for everything. This sacrifices security. I use 1Password to stay efficient as I move from email to Facebook to my bank account. Created by AgileBits, this ingenious app integrates directly with your web browser (it loves Google Chrome) and then automatically logs you into wherever you need to go. All of your different passwords are secured in one place, protected by the one password you need to remember (Yes, sometimes I forget that, too.)

Technology is constantly evolving, but human nature stays pretty steady. Smartphones and tablets may have edged out the landline, but Customer Relationship Management (CRM) is as important as ever. Since I spend so much time in my Gmail, I find the cloud-based Streak to be extremely helpful in conducting the timeless art of CRM. Streak runs right in gmail (and only gmail) and allows me to organize, automate, and synchronize sales, marketing, customer service, and technical support. I can create pipelines for all projects comprised of boxes that contain all relevant information for a given task.

boomerang

2) Be Your Own Scheduling Ninja

Those among us who are fortunate enough to have that staff of 30 will usually have one person whose entire job is dedicated to scheduling. The rest of us who do our own scheduling must be especially strategic with the use of technology. I rely on Boomerang Calendar. This Google Chrome app allows me to schedule meetings with ease and efficiency. I simply click a few times in my calendar when I’m free to me, a message gets sent the person I want to meet with, he or she clicks which of those times work, and the meeting is added to both our calendars. It works with all emails, is great for coordinating a group event, and removes the truly horrifying possibility of double (or triple) booking.

Busy people don’t just need to schedule meetings. They need to schedule when to send emails and when to update Facebook and Twitter. With Boomerang for Gmail and Buffer I can do just that. Boomerang for Gmail lets me write a message at 2 a.m. and schedule it to be sent at a later time. I can track messages and schedule reminders, all inside my Gmail account.

The Google Chrome app Buffer lets me do the same thing with my updates on Facebook, Twitter, and any other platform where I maintain a presence. I can set my posts up at night and schedule them to post throughout the day, while I’m probably too busy in meetings to post them in real time. And even if I had the time, only through Buffer can cross platform posts happen instantaneously. Buffer also lets me quickly share whatever I’m reading on the web with my social media community.

evernote

3) Browse With Purpose

OK, there’s nothing wrong with exploring online content and finding new things. But you don’t want to end up jumping from link to link about the Biebs. I use Feedly to stay focused on the news that matters to me. This high-end “RSS Aggregator,” or what most of would call a newsreader, requires a Google Account to use and is the descendant of the beloved Google Reader. It allows me to browse all the new stories from all the sources I’ve selected. It’s like a customized newspaper waiting for me online, and while it doesn’t mean I’ll never get swallowed by the banality of the web, it does make it a lot less likely.

When I find an especially good article through Feedly, I utilize the Google Chrome apps Awesome Screenshot  and Evernote Web Clipper to take notes and share it. Awesome is a screenshot app and then some. I can capture all or part of a web page, annotate and edit it (including blurring sensitive or confidential information), copy and paste it into my Gmail and send it to friends and colleagues.

With Evernote I no longer find myself copying the link from an interesting article and then emailing it to myself, or keeping notes on an article in a Word document. Evernote lets me bookmark the page, mark it up with notes, and share it with whoever I want. In the future, when I’m searching the web, my Evernote account automatically shows me what I’ve taken notes on in the past (hopefully it wasn’t Justin Bieber).

Technology can overwhelm you. Don’t let it. Take a deep breath and take some time to set up some or all of the above apps and extensions. From maintaining your online momentum to disciplining your online browsing (and all the scheduling that goes on in between), you’ll be in control and you’ll feel in control.

Posted on March 12, 2014

February Web Resources Roundup

Here’s a fun little round up of some helpful tools for your next design or dev project.

Image Alpha – PNG mini is a great way to crush your PNG’s into small file sizes

1_ImageAlpha

Master Every Day’s Typographic Adventures – A pocket guide to good typography

2_Typography

Best Photography of 2013 – For beautiful inspiration and scroll through this gallery of 40+ of the most stunning photos published from the North last year

3_Photography

Medium.com – CSS Blend Modes could be the next big thing in Web Design

4_Medium

Shape Hover Effect with SVG – Step by step through markup, CSS and Javascript to achieve shape hover effect

5_Shapehover

Photoshoplr – Smaller png’s right out of photoshop

6_Photoshoplr

Kerntype – How good are you at typography? Prove it!

7_Type

Hello Duo – Duo is a web browser that allows you to keep an eye on mobile without losing sight of the desktop.

8_HelloDuo

The Pattern Library – A little trippy, a lot of inspiration!

9_Pattern

Minimal Device Mockups – 23 Free & Flat PSD files for minimal mockups

10_MinimalDevice

Apple Icon Font – Featuring every Mac ever made

11_AppleType

CampaignMonitor – The top 100 email marketing campaigns of 2013

12_100

Alphabet Animation – An entirely HTML/CSS animated sketch for each letter made for 26 days

13_letters

Crisis Management Guide – Social media is all the rage but what about when things go wrong?

14_crisismngmt

 

Posted on January 3, 2014

January Web Resources Roundup

Well we made it. 2013, it’s been real, but we’re ready for the new adventures, challenges and opportunities 2014 has in store. Here’s to this month’s discoveries I pass on in hopes of helping fellow designers and developers. Cheers!

Color Template – Check out this color choosing tutorial by RocketDesigns

1_colortemplate

Streamline – 1640 Icons for Designers & Developers

2_streamline

Voix.js – A JavaScript library to add voice commands to your sites, apps or games

3voix

SpinKit – Simple CSS Spinners

4_SpinKit5

Social Kit – Customizable templates for your online cover images, profile pictures and ad banners in a free up-to-date Photoshop plugin

5_SocialKit

430+ FREE storyboard illustrations – Shared by Julian Burfurd on Dribble, these vector files are great for sketches, storyboards and pitches

6_illustrations

Headroom.js – A lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll

7_headroom

Framer – A prototyping tool for animation and interaction on desktop and mobile

8_Framer

Maskew – A mobile-friendly JavaScript library for skewing the shapes of elements

9_maskew

2014 Marketing Outlook - A shameless plug for Digital Surgeons’ top 10 digital marketing trends & predictions for the new year

10_DS

Posted on December 3, 2013

December Web Resources Roundup

As we all get in the holiday spirit, reflect on the past year and prepare for the new year, I share with you another round of design and development resources. Thankful as always for the innovators, creators, developers and thinkers that inspire me every day.

Responsive Comments – a purely client-side solution to conditional loading in responsive web design

responsivecomments

Videogular – an HTML5 video player for AngularJS with themes, plugins, bindings and much more

videogular2

Reportr – your life’s personal dashboard. Track everything that happens in your life and visualize data in different ways

reportr

Ghostery – be a web detective, build an information foundation, get in control and speed things up

ghostery

SVGeneration – making the web a more beautiful place, one SVG graphic at a time

svgeneration

Seene: Share Life in 3D – lets you capture, share and discover 3D photos easily and instantly, all on your iPhone

1seene

Content Snippets – collects copy examples from websites & apps, to serve as inspiration for writers

2content

PhysicsJS – a modular, extendable, and easy-to-use physics engine forJavascript

3physics

CSS Specificity – with icons inspired by “The Shining”

4cssspecs

Renamy –  Multiple layers renaming Photoshop plugin

5renamy

Snazzy Maps – color schemes for Google Maps

6snazzymaps

FlatIcon – largest database of free vector icons

7icons

Snap.Svg – an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen

8snap

Typecast Test Drive – Get your typography preview on

9typescreen

TYPEFLIGHT – Have a look and take your pick

10printshop

Unroll.me – Toss the junk with one click, combine your fav subscriptions and brace yourself for a whole new email experience

11cleanupinbox

Type Scale – A visual calculator

12visualtype

iPhone GUI PSD – A Photoshop template of GUI elements found in the public release of iOS 7

13ios7

Posted on November 8, 2013

November Web Design & Development Roundup

Remember to not let your full inbox and 8 paged to-do-list become a wall. The pressure of this industry is never going to go away but we can’t let that prevent us from seeing beyond and taking advantage of opportunities to learn new things. Rather, lets take it day by day, decision by decision, lesson by lesson, looking for opportunities to grow and be better.

I uncover new tools, discover fresh perspectives and am genuinely inspired each and every day. Each month I create a summary of a few cool resources I came across, hoping to reach out and share some light with fellow marketers, designers and developers.

1_GoogleWebDesigner

Google’s Web Designer Tool – Bring ideas to life across screens with Google’s new Web Designer tool

2_Reform

REFORM – Ideas can come from anywhere. Maybe from this tool.

3_Usability

UsabilityHub – Learn how visitors will interact with your design before launching.

4_InterfaceTools

Interface Tools Photoshop Plugin – A grouped panel of the most handy tools

5_Meregely

Mergely – View and merge changes between documents built entirely with HTML5

6_PSDtemplates

Branding/Identity Mockup Templates – Present your company in a modern way with

7_inabrash

In a Brush – Typography showcase

8_atjs

AT.js - a GitHub like autocomplete library

9_UIcloud

UI Cloud – The largest user interface design database in the world

10_rulers

Rulers – JavaScript library allowing Photoshop-like rulers and guides interface on a web page

 

Posted on October 3, 2013

October Web Design & Development Roundup

The leaves are changing, the weeks are flying and amidst it all, great tools are often buried in my twitter feed. Each month I like to take the opportunity to create a roundup of cool resources I found worth sharing with fellow designers, developers and marketers. Check them out!

Vex: makes dialog boxes sexy again.

1

Custom Elements: wrappers, toggles, scrolls and more.

15

QuestionMark.js: a lightweight, cross-browser, modal window that displays shortcut keys for your app.

5 copy

AnimateScroll: jQuery Plugin for animating scroll.

8

Adobe Generator for Photoshop CC: this update to Photoshop CC (v 14.1) allows new workflows, especially for web designers, screen designers, and anyone who needs to extract image assets out of a Photoshop document.

10

Precog: now 100% open sourced.

13

ChooseALicense.com: have no fear, ChooseALicense is here.

16

Sidebar Transitions: effects for off-canvas views.

17

Fun with Sass & font icons: add or remove icons from elements via your stylesheet using easy to remember catchwords.

14

Background check: automatically switch to a darker/lighter version of an element depending on the brightness of images behind it.

2

BlendMe.in: search thousands of assets, including popular icon packs, without leaving Photoshop.

3

Iconic: advanced Icons for the modern web.

4

TypeNovel: great site showcasing typography in the wild.

6

TypeNight: a collection of Nightly hand-lettered type.

9

 

CloudConvert: fight incompatibility of file formats! convert over 100 different file types all within the cloud

7

Mobile Design Kit: flat and free.

11

 

 

cadc-responsivewebdesign
Posted on September 27, 2013

The world has gone mobile. But has your web experience?

The Connecticut Art Directors club along with ConnCreatives presents a one-night mini-conference with three Connecticut agency owners, who will speak to such topics as responsive design, device-agnostic design, information architecture and advanced web typography.
We’ve all been there pinching, zooming, scrolling and squinting – never knowing what you’re going to get. A brands web experience these days is the experience. Peter will take a look at some key user behaviors on mobile and talk about how to go from rigid to responsive with a device-agnostic strategy that focuses on design systems and shows some practical ways to plan and execute a responsive design project.


Posted on September 5, 2013

Web Design & Development Resource Roundup – September Edition

Here’s the September round-up of resources. Scroll through these creative and techy tools to get inspired, learn some shortcuts and hopefully uncover some treasures you’ll be able to come back to again and again.

HTML, CSS & JavaScript related resources:

For all you context loving developers, restructure HTML in a responsive manner with Intention.js.

1

Parallax.js reacts to the orientation of your smart device or cursor, offsetting layers depending on their depth within a scene.

2

Scroll-overflow menu for mobile by Hugo.

5

Countable is a JavaScript function to add live paragraph, word and character counting to an HTML element.

6

FlowType.JS is responsive web typography at its finest: font-size and line-height based on element width.

9

Javascript loading bars are all the rage. NProgress is a JavaScript library to help you achieve it.

10

Tridiv is a web-based editor for creating 3D shapes in CSS.

12

Emmet LiveStyle introduces live bi-directional CSS edit of new generation.

20

Swipe. Press. Tap. Flick. Precomposed Touch Gestures.

23

Tf3dm: Get Free 3D Elements.

24

Just-add-water CSS Animations: Animate.css.

25

RandomUser is an API that provides you with a randomly generated user. These users can be used as placeholders in web mockups, and will save you time from creating your own placeholder information.

11

Design related resources:

Canva is an “amazingly simple graphic design” tool giving anybody anywhere the opportunity to get creative, collaborate and design.

3

Basilig: Over 300 design elements specifically for prototyping –  a set of freehand icons for mockups.

4

iPhone5 flat design mockups with front, horizontal and 3D views from Pixeden.

flatphone

The iOS 7 Design Cheat Sheet by Ivo Mynttinen.

8

Get inspired by Type Hunting.

13

HTML5 Device mockups – With Pixelsign, you can embed your designs and products in a variety of devices that keep their aspect ratio respectively.

14

Colorgorize is a web design gallery sorted entirely by color. You can browse sites, or search by specific color.

15

Social Media Spec Guide from Visual.ly – the only dimensions you need to know if you are designing content for social media.

16

Productivity and efficiency hacks – Cheat Sheets for PhotoShop and Illustrator Keyboard Shortcuts by who else than LifeHacker.

17

MockuPhone: Great tool for placing images on mobile device screens.

18

TypeWonder is a fun little beta for making picking web fonts fun.

21

SnapMyAd: User created social ads.

22

Pulling this stuff and sharing with ya takes a lot of time. I’m a pretty busy dude, but want to spread inspiration and great digital tidbits with fellow designers, developers and marketers. That being said please share this with someone you think will love it as much as you did, or just shoot me some love on twitter @petesena. Thanks and happy creating!

Posted on August 5, 2013

Web Design & Development Resource Roundup – August Edition

For designers & developers, makers & shakers, and anybody in-between, (friends, family, co-workers) – here is a roundup of some interesting tools and digital tidbits.

Let’s start with design-focused resources…

FilterFactory – This awesome site applies SVG Filters on image with export feature.

Stylify Me – For those times when you need a “styleguide,” and nobody made one, gain a quick overview of site colors, fonts, sizing and spacing here.

Retinize It – Photoshop actions for slicing retina graphics. A time-saver for our designers and developers.

Tiff – A visual typeface comparison tool.

They Make Icons – Download Free PNG, ICNS, ICO icons.

Tactile Design Kit – Download physical, interactive web design kit for engaging your clients in discovery as a PDF, EPS or AI file

UI8 – 704 UI Icons delivered in PSD, AI, EPS and SVG format.

UnSplash – Free hi-resolution photos for your next presentation or design project.

Macaw – The code-savvy web design tool we’ve all been waiting for.

WireKit – Try using this tool to make wireframing your next iPhoneApp in Photoshop a little easier.

Meet the Ipsums – Definitely the most fun Lorum Ipsum generator – For those times you will get to the copy later.

DPI Love ♥ Know your screens and easily find the DPI/PPI of them all.

Web Font Generator for Mac OSX

Now for you techies who care a little less about color and a little more about code…

Effeckt.css – A work-in-progress promising awesome performant CSS transitions & animations.

Casper – Responsive site screenshots made into less of a tedious headache thanks to Casper.

Ring.js – Wish JavaScript offered multiple inheritance like most languages? Wish granted.

Flippant – A mini javascript/css library to easily recreate that card flipping effect you always wanted.

Ghostlab. Synchronized testing for web and mobile.

Screenshift – A high impact ad format built using responsive design

CSS Selector Matches – A really interesting script to visualize CSS selectors

Real-Time Insights – By Google. Therefore it’s great.

Welcome Mat – Remember when making ASCII art was something we wrote C++ programs to do? This makes it easy & visual

Grid Calculator – This will come in handy for sure.

 

 

ScreenSiz.es – Screensize or popularity contest? How about greatness.

Firechat – Open source chat built on Firebase. No server code necessary.

AmI.ResponsiveDesign.Is – A quick test to see if your site really is responsive.

Older Posts