All Posts in CREATIVE
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.
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.
I recently attended the 2013 99U Conference put on by Behance. This was my first 99U Conference and I would highly recommend it to anyone who is serious about embracing creativity.
Sometimes reflection is even more important than new learning. Here are some key patterns that stood out to me:
Creativity is a discipline.
We are creative creatures but many of us are institutionalized (read as problems with our educational system) from a young age, which really puts a damper on that skill. If you aren't feeding your imagination and constantly being curious, like muscles those skills weaken or never develop.
Creativity can be taught.
I never really understood what went into creativity because I never stopped using my imagination. The Art of the Deal best selling author, Tony Schwartz, provided a jaw-dropping look into how he sees the creative process, which I will never look at the same way again.
Insight. First find and define the problem.
Saturation. This is the information gathering phase chock full of research. Most designers hate this phase because it isn't "creative" in their mind. From my perspective, the designers I respect most are all about saturating themselves in data and inspiration.
Incubation. This is where you walk away from ideas and thinking altogether, which Schwartz refers to as "thinking aside." He explains that when you shut your mind off, your brain is able to spark the best creativity, which is why ideas pop in your head during a shower, while walking in nature or when you are dreaming. This is often an area I totally ignored since I've never really had the luxury of time, but one I'll be looking to learn and apply in my ever-changing creative process.
Illumination. This is one step we are likely all familiar with. The infamous a-ha moment that stops you in your tracks.
Verification. This is the point where things start coming together; the part where you make it real. This part reminds me of the great scientists of history having an idea, testing it and learning from it.
Learn, modify and repeat. That being said, creativity isn't supposed to be easy, as Cal Newport points out, it takes a level of deep work and focused intent to develop skills and solve problems. Malcolm Gladwell talked about 10,000 hours being the time it takes to master a task. Nonetheless, we have scientific data to back how the brain learns things.
Ideas are nothing without execution.
I don't try to coin phrases, but I've been saying this one for much longer than Zuckerberg and others who take credit for it. I believed this so much that I built an entire company around it. I started my design career working for other agencies and turning "ideas" into reality. I would get handed what I call "pie in the sky ideas" with what felt like seconds left on the clock and had to figure it out. "Why" wasn't a question I got to ask. As a "vendor" it was all about making it happen, no matter how.
You will get your ass kicked.
Acknowledge the critic just don't give them an opinion.
Brene Brown reminds us that showing up will open us up for getting our asses kicked by critics in a visual analogy to the fights at the coliseum in Rome. Lowering your shield and being vulnerable is the only way you can truly create something amazing. Fail fast and don't get too attached to your work especially if you are in the design business. It's never about perfection, it's about solving a problem and iterating fast to improve.
Fail fast and iterate.
Agile thinking isn't a new concept. In fact, it's been being used by software developers for over a decade but its now making its way into companies on a much bigger scale. Embrace imperfection and testing to help you arrive at your product or project goals faster. For me, this means thinking in whiteboards, post it notes, rough prototypes and most importantly, involving customers and users.
I believe if one can embrace failure and constant iteration it will make for better creatives and more effective leaders and collaborators. Hope you enjoyed this post. You should follow me on twitter I post cool stuff sometimes. Now go make something you love.
I haven't been ignoring my blog, I've just been writing in other places. Here's some digital treats for your curious minds.
A comprehensive list of the skill sets that will take your project management offering from good to great. This list outlines the path for instant success with your team.
A prediction and call-to-action for today's CMO and aspiring CMOs to understand the trends shaping the role of the CMO and how technology will quickly become an extension of the CMO's responsibilities.
Helpful advice for working with designers to meet client and company expectations. From communicating properly to understanding their process, these practical tips can drastically improve the experience for both the designer and manager.
The benefit of mood boards in digital design projects for not just the designers, but all other members of the project team. Mood boards set a foundation for all future design elements.
A guide for designers that have been promoted to management positions that test their leadership and time management skills while pulling them away from their true love of designing.
Tried and true advice for acing an interview tailored to job seekers looking to do design for an agency.
Video has been an increasingly effective means of marketing and advertising. In this article, I attempt to cover the next big trend in video: the ability to shop the video you're watching.
Like my stuff? Please follow me @petesena and let me know!
Great design is about systems. No matter what the medium is great visual communications should aim to be accessible and adaptable to every display.
What the hell is a design system?
A design system is a combination of components and modules that define the visual attributes of an experience. These attributes come together to form rules that create the foundation for how a design translates from medium to medium and viewport to viewport. Think of design as building a house: design systems specify what materials, angles and styles you can use in the process. Creating a modular framework of visual language components ensures your creative holds up even in the most unforeseen conditions.
Elements of a design system
The basis of everything is content. Mailchimp’s amazing resource Voice & Tone shows us how to look at every aspect of content strategy broken down by situations and content types. Design without content is decoration, echoed by Jeffrey Zeldman in May of 2008 (and he won't let us forget that either).
A picture is worth a thousand words. Hopefully those thousands of words look good together. Almost every design system relies heavily on the usage of typography to help deliver its message. The combination of fonts used and their base size should start to dictate the typographic styles of the design system. To establish a balanced utilization of typography we typically leverage techniques such as Modular Scale. Tim Brown's amazing gift of Modular Scale functions like a musical scale in establishing a predefined set of harmonious proportions between fonts. Proportional percentage based sizes help us strike the right balance between control and sanity across all devices and mediums.
I tend to choose a few key device sizes based on the understanding of the audience and let these serve as a testbed to benchmark against (i.e laptop, desktop, ipad, iphone). This lets us balance the importance from large headers down to block quotes. Since most of what we do is digital, we generally think in terms of markup types. We can take inspiration from the BBC's Global experience language or from what we call our "UI Kit," which breaks down all the various types of content and how they will be displayed.
Color allows us to bring together contrast and is one of the simplest ways to unite experiences. We all remember the Starbucks green, the UPS brown and the Twitter blue. This recognition is because of repetition and a media-agnostic delivery of an established design system.
Iconography / Shape / Form
Some design systems rely heavily on the use of iconography and shapes to establish visual hierarchy and create an instructional system. Take the New York City Transit Authority Graphics Standards manual for example - or get inspired and contribute to the Noun project.
Grid & Visual Hierarchy
Grids help enforce rules for visual hierarchy. They show us the order modules take in the layout and how they are brought to life. Collapsing columns, transforming images into icons or shorter type driven interfaces are just a few examples of this brought to life.
Hop on over to mediaqueri.es and see how designs are transformed based on various viewport sizes.
Usage of imagery in a design system helps to evoke an emotion. Often photography composition in brands takes on specific treatments that help us recall images such as the silhouettes holding the iPod in the Apple commercials or the strong saturated images of athletes achieving the impossible by embodying the "just do it" mentality. Imagery creates a visual continuity to the design system and sets apart a brand from a stodgy stock website.
Tying it all back together.
No matter what kind of designer you are, or are striving to become, remember to think in Design Systems; not comps. Design is a job thats sole purpose is to solve problems and establish communication. Design isn't just art but rather the intersection of art and science.
Start with a mood-board and some content to begin to establish the visual language you are looking to create. Once you've started to establish the visual language translating it for different mediums tends to be a production task and not a conceptual one since the hard part is already defined.
I'm not going to force-feed you on the notion of designing in the browser, but being familiar with HTML/CSS and grid systems will be critical no matter what role you play in the design process.
We created Gumby, a responsive web design framework, to speed up how we transformed our designs into functional experiences. This framework helps us quickly translate all of the above elements of a design system into responsive layouts significantly faster than hand-coding and testing our own grid and layouts from a blank canvas. For more on that see the making of a responsive CSS framework.
Stay inspired and keep creating and making things. You should follow me on Twitter.
As a designer you are always on the hunt for inspiration, shortcuts, and resources that will help you focus on being creative faster. Here is a roundup of design resources that you can use on your next design project.
Little Ipsum - A menu let that lets you quickly grab latin sentences and paragraphs. No more going to websites to generate it.
BLOKK - Not a fan of lorum ipsum or perhaps your client has a hard time visuzling your layout with greek text. Blokk is free great font for quick mock-ups instead of lorum ipsum in your designs.
DottedPaper - Dotted paper for sketching
Gui Toolkits - A comprehensive library of design user interfaces for web and mobile apps
Placeit by Breezi - A great tool for those times you need to quickly toss your app mockup on a device (iPhone, iPad, etc) Great for presentations.
Subtle Patterns. Every designer worth their macbook can make a repeating pattern in Photoshop. Time just isn't on our sides these days. Subtle Patterns has a library of free repeating patterns for use in your next web design projedct.
Pattern Tap - Great inspiration of design and interface patterns. Learn from the best and submit your own.
Free UI Kits. Having UI Kits to get inspiration and as a starting place is super helpful when you are designing interfaces. Not every project is an opportunity either via time or budget to be able to start from a blank canvas. Here is a good site for pulling those resources when you need them in a pinch.
CSS Drive Image Palette - Ever have a great photo rich with colors and you want to base your design color palette of it? This tool will help you with your palette quickly just upload from an image or web URL.
Colour Lovers. A great site to share your color ideas and inspirations and be inspired by others palettes.
Adobe Kuler. Integrated with the Adobe Creative Suite this great tool is awesome for finding color palettes.
0 to 255. A great site for finding color variations based on a base color.
Icon Finder. For those times when you need a quick icon.
Typecast - Your type is going to likely end up online or in an app. Playing around with type fast is helpful.
Agile Designers - A great resource site for all types of resources from software, to fonts to icons.
TextureKing - A place for free stock textures of grunge, dirt, concrete. Super helpful for comping and design.
Business Model Canvas - If you are going to be a user experience designer you are going to need to understand business goals. This will help you work those out with your clients and teammates.
Typograph - A great tool for laying out Type scales using vertical rhythm
Sneakpeekit - Browser and Mobile Sketch sheets for designers.
Gumby Framework - We live in a responsive era. This CSS framework will make designing your site on a fluid grid easy and comes with a nice customizer tool for easily downloading HTML/CSS responsive out of the box.
If you found this inspiring or useful please share it with someone that might find it useful as well. These things take time to pull together and I wanna share my design resources with the community. Follow me on twitter @petesena
Every year I search for, collect, and read what feels like thousands and thousands of articles. Some of them seem to stick and make it to a special place in my evernote. I decided for a change to collect a random assortment of articles, tools and overall web goodies that lovers of marketing, creative and technology would find some use for. If you find these useful please shoot me some love on twitter @petesena, or share with me what you found useful. I'm going to try to do this every year as we approach a new year.
- The Performance Business Case
- The Life of Page 2.0
- Fewer Page Components
- Smaller Components
- Optimizing Images
- Parallel downloads
- Optimizing CSS
- Psychology of performance
Table of Contents
- Core jQuery
- HTML Forms
- jQuery and the Web Browser
Source Code Pro: Over 13.000 Downloads Shortly After Availability
- Web Forms:
forms framework – auto-saving drafts – file upload (and resuming large downloads) – <select> boxes – modal boxes – form accordion – dynamic labels – drop-down with images – tooltips –extended input – form validation – credit card validation (alternative) – email check –password complexity
- Web Typography:
repairing vertical baseline – align text to a grid – responsive measure – fixing widows – fluid line height – scalable headlines (or smart headlines) – Lettering.js – Kerning.js
- Little Time-Savers:
exchange rates and currency – date/time formatting – relative timestamps – number and currency formatting – cookies.js – zip.js – extra string methods – countdown.js – sticky content – Google Maps – interactive maps – progress bar – favicon notifications (or Notificon)
- Images, Maps, Graphs:
world maps – subway map – Google maps – open source maps – SVG fallback – gauges –graphs – timeline – Retina display – magnifying glass – interactive graphs – plots – time visualization
jQuery File Upload
File Upload widget with multiple file selection, drag&drop-support, progress bars and preview images. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
This jQuery plugin provides tool tips without being limited to cardinal directions. A grumble can be rotated around a given element at any angle, all 360 degrees and at any distance — with CSS. Works in Internet Explorer 6+ and modern browsers. Also, check Tipped, a larger library of various designs and implementations of tooltips with an extensive API.
The Widow Tamer
money.js: Open-Source Exchange Rates and Currency Conversion
A script that checks each image on your website, when it’s loaded by a user, and replaces low-resolution image with their high-resolution equivalent, if available. It’s assumed that you use Apple’s high resolution modifier (
@2x) to designate high resolution versions of images.
A Magnifying Glass With CSS3 And jQuery
This technique achieves an aesthetically pleasing visual effect. The CSS3
border-radius properties are used to create the magnifying glass itself, while jQuery is used to detect the cursor coordinates and mouse movements and present the larger image. And when your cursor moves off the image, the magnifying glass elegantly fades away. The included tutorial makes it very easy to learn and understand how to achieve this effect. The technique includes both a small and a large image in the markup, so optimizing the technique to load a larger image on demand might be a good idea.
With this jQuery plugin the common horizontal progress bar is displayed differently. The script uses HTML5 canvas and data URI encoding (vector graphics) to allow for visually appealing and variably sizable graphics. Also, it can be used to display feedback during long-running tasks.
A jQuery plugin that allows building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically add and remove elements from the grid. It is on par with sliced bread, or possibly better. MIT licensed.
A jQuery plugin that enables you to organize the page content in a dynamic and responsive layout. Once applied to a container element, it attempts to arrange its children in a layout that makes optimal use of screen space, by “packing” them in a tight arrangement.
- What makes a great project manager?
- 10 Tops for creating cost estimates: Allow for AM and PM time
- Cost only what you know, when building cost estimates
- Elinux raspberry Pi tutorials
- Cambridge University primers
- Youtube videos on raspberry pi
- Some package management tutorials and other from tech radar
- Learn via adafruit: Door triggers, VNC control, SSH connections
SiteSucker is a Macintosh application that automatically downloads Web sites from the Internet. It does this by asynchronously copying the site's Web pages, images, backgrounds, movies, and other files to your local hard drive, duplicating the site's directory structure. Just enter a URL (Uniform Resource Locator), press return, and SiteSucker can download an entire Web site.
App Store Optimization (ASO) app store SEO
If you haven't seen this you should (it's on iTunes, amazon, etc)
- Putting the focus back on the user - a look at user personas
- Defining and Applying Personas to UX Design
- Interaction design techniques for designers
- Equipping your design team for success with UX
- What are "Design personas" and how do I inject them into my web projects?
- What Lene Nielsen has to say about User Personas
- User research for building personas
Content Strategy is an emerging field of practice within the discipline of User Experience Design (UXD). It also describes in a professional context the roles, work products, knowledge, methodology, and perspectives of content strategists.
- “Content includes the text, graphics, video, and audio that make up an interactive experience.”—Kristina Halvorson
- “Technically, Web content can be anything that appears on a website, including words, pictures, video, sounds, downloadable files (PDF), buttons, icons, and logos.”—Richard Sheffield
- “Information and experiences that may provide value for an end-user/audience in specific contexts.”—Wikipedia
- “Everything is content.”—Rachel Lovinger quoting Chris Sizemore
- "Simply put, content is contextualized data."—Rahel Bailie
Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.
Kristina Halvorson, author of Content Strategy for the Web , defines content strategy as "the practice of planning for content creation, delivery, and governance."
Rahel Anne Bailie expanded the definition of content strategy as "a repeatable process or methodology that manages content within the entire content lifecycle." This definition recognizes that iterative content lifecycles go beyond delivery and don't necessarily begin with content creation.
In The Web Content Strategist’s Bible, Richard Sheffield emphasizes the importance of editorial process to content strategy.
The content lifecycle is a repeatable system that governs the management of content. The processes within a given content lifecycle are system-agnostic. The processes are established as part of a content strategy, and implemented during the content lifecycle.
The content lifecycle covers four macro stages: the strategic analysis, the content collection, management of the content, and publishing, which includes publication and post-publication activities. The content lifecycle is in effect whether the content is controlled within a content management system or not, whether it gets translated or not, whether it gets deleted at the end of its life or revised and re-used. The analysis quadrant comprises the content strategy. The other three quadrants are more tactical in nature, focusing on the implementation of the content strategy.
Rahel Bailie's methodology for content strategy.
In the analysis phase, the content lifecycle is concerned with the strategic aspects of content. A content strategist (or business analyst or information architect or writer) examines the need for various types of content within the context of both the business and of the content consumers, and for multiple outputs on multiple platforms.
The analysis has a bearing on how the content strategy is implemented in the other quadrants of the content lifecycle. On a new project with new content, this is the beginning of the process. Much of the time, the process will start somewhere else in the cycle; a lot depends on a multitude of factors involved in changing content from a current state to its future state.
Content collection includes the garnering of content for use within the framework set out in the analysis phase. Collection may be through content development - creating content or editing the content of others, content ingestion - syndication of content from other sources, or incorporation of localized content, or a hybrid of content integration and converge - such as integrating product descriptions from an outside organization with prices from a costing system, or the convergence of editorial and user-generated content from social media for simultaneous display.
The management quadrant is concerned with the efficient and effective use of content. In organizations using technology to automate the management of content, the management aspect assumes use of a CMS of some sort. In organizations with smaller amounts of content, with little need for workflow control, and virtually no single-sourcing requirements, manual management is possible. However, in large enterprises, there is too much content, and there are too many variations of content output, to manage the content without some sort of system to automate whatever functions can be automated.
The content configuration potential is enormous, and builds on the information gathered during the analysis and collection phases. The solutions will be highly situational, and revolve around the inputs and outputs, the required content variables, the complexity of the publishing pipeline, and the technologies in play. The most basic questions are around adoption of standards and technologies, and determining components, content granularity, and how far up or down the publishing pipeline to implement specific techniques.
The publishing quadrant deals with the aspects of content that happen when the content is delivered to its output platform and ensuing transformations, manipulations, or uses of the content. Publishing the content is only a point in the first lifecycle iteration; there are post-publishing considerations such as re-use and retention policies that require attention.
For instance, some specialize in content analysis, which roughly describes work with metadata, taxonomy, search engine optimization, and the ways in which the sound application of these concepts supports content.
Others outline web editorial strategies, guidelines, and tools, which may extend to organizational change management. This form of content strategy may be concerned with developing new forms of content, such as multimedia, or various “presence management” technologies like microblogging.
There is yet another stream of content strategy advancing information architecture goals. In this case, content strategy may only involve writing site copy for new website pages and adapting the content on existing ones.
All content strategists are familiar with a wide range of applications and tools, and frequently are responsible for implementing and training individuals to best use them.
- Library and information sciences
- Computer sciences
- Creative and performing arts
- Advertising and marketing
- Rhetoric and composition
- Technical writing and communication
- Professional editors and writers
- Liberal arts
- Management consulting
The work products -- or deliverables -- typical of content strategy are diverse and depend on the needs of the company and the background of the content strategist. Shelly Bowen provides this insight:
Some content strategists are also (deep down) writers, editors, designers, or information architects. This background influences not only the strategy, but also the deliverables.
- Summary of company goals
- Content inventory or audit
- Content assessment (quality and quantity)
- Content gap analysis
- Comparative content analysis
- Competitive analysis
- User personas
- User scenarios (think believable stories)
- Editorial strategy
- Core messaging strategy
- Sample content
- Content templates
- Search Engine Optimization (SEO) strategy
- Brand strategy
- Metadata strategy
- Style guide
- Copy deck
- Channel strategy
- Content conversion/migration strategy
- Content flow schematic
- Community and social strategy
- Visual presentation recommendations
- Content approval workflow
- Communication plans
- Community moderation policies
- Content production workshops and training
- Content sourcing review and plans (people, tools, budget, time)
- CMS requirements
- Business rules
- CMS requirements
- Usability tests
- Checks and balances
- Summary of company goals
- Success metrics
Consistency via Business Guys on Business Trips 
- Margot Bloomstein; "The Case for Content Strategy - Motown Style", A List Apart, 18 August 2009.
- Kristina Halvorson; "The Discipline of Content Strategy", A List Apart, 16 December 2008.
- Colleen Jones; "Make Your Content Make a Difference", Smashing Magazine, 12 April 2011.
- Colleen Jones; "Toward Content Quality", UXmatters, 13 April 2009.
- Matt Kinsman; "From Editor to 'Content Strategist:' Semantics or Fundamental Change?", Folio, 1 July 2008.
- Fred Leise; "Content Analysis Heuristics", Boxes and Arrows, 26 February 2007. 12 March 2007.
- Rachel Lovinger; "Content Strategy: The Philosophy of Data", Boxes and Arrows, 26 February 2007.
- Jeffrey MacIntyre; "Content-tious Strategy", A List Apart, 16 December 2008.
- Jeffrey MacIntyre; "The Next Big Headache for Digital Publishers", PaidContent, 6 August 2009.
- Karen McGrane; "Content Strategy: Content Is King!", From Business to Buttons, 11 June 2009.
- Peter Merholz; "The Marginalization of Content", adaptivepath.com, 22 May 2008.
- Kaitlin Pike, "Why You Need to Hire a Content Strategist", Web 2.0 interview with Margot Bloomstein, 7 July 2010.
- Theresa Putkey; "Exploring the Content Strategist Title", Boxes and Arrows, 22 May 2007.
- Erin Scime; The Content Strategist as Digital Curator, A List Apart, 8 December 2009.
Apologies for any typos, formatting issues or blatant description lifting I started this in my evernote and didn't have the extra time to invest to correct everything. Special thanks to some of my favorite sites for publishing such great content: smashingmagazine.com, Web designer depot, and of course google for showing my random searches to such great information.