14 magically meticulous design style guides

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/SQkekewhOro/great-examples-design-style-guides-3132070

This is heading directly into geek territory. But we are self-confessed geeks, particularly when it comes to logo design and typography. And that leads us to the meticulously regulated world of brand style manuals…

A style manual, or style guide, is a set of standards for the design of documents, signage, and any other form of other brand identifier. The reason for their existence is to ensure complete uniformity in style and formatting wherever the brand is used.

We've gathered 14 of the best to inspire you when you create your own brand style guide…

01. easyGroup

easyGroup’s brand guidelines try to keep things as straightforward as possible

It's hard not to love a brand identity that's based around the colour orange (Pantone 021 C to be precise) and Cooper Black, surely the most 1970s of typeface. 

Stelios Haji-Ioannou's easyGroup keeps things simple with its branding, but its brand manual still manages to run to 36 pages, covering matters such as the company strapline, do's and don'ts of using the logo, and a guide to easyGroup lingo.

02. Urban Outfitters

Urban Outfitters changes its logo often but has strict rules about its display

The average branch might look as though a bunch of squatters decided to hold a jumble sale in a derelict factory, but hipster bazaar Urban Outfitters takes its visual identity very seriously, as a quick flick through its brandbook will reveal.

The 42-page guide covers everything from Urban Outfitters' history and philosophy through to logo usage, typography, photography methodology and guidelines on the tone of voice to be used in communications.

03. I Love New York

We’re sure Milton Glaser approves of these cute treatments

Milton Glaser's I Love New York logo is a wonderfully simple and iconic piece of design, so you might not expect there to be a 50-page set of brand guidelines attached to it. However there's more to I Love New York than Milton Glaser's logo; that's just the most memorable aspect of a campaign launched in 1977 and refreshed in 2008. 

The scrupulously detailed brand guidelines cover all the bases for a campaign that represents the whole state of New York and not just New York City; there's a mission statement and brand pyramid, consistency and typography guidelines, plus a whole load of thematic logo treatments and logo usage guidelines to follow.

04. NASA 

style guides

This beautiful reissue is available to buy now

The National Aeronautics and Space Administration's Graphics Standards Manual was created by Danne & Blackburn in 1974 when NASA changed from its original crest-based logo to the 'worm' logotype that we are now familar with.

The manual has recently been revived thanks to a Kickstarter campaign to fund its reissue. Jesse Reed and Hamish Smyth's glorious new 220-page version of the case-bound NASA document comes with 'static shielding' packaging and can be purchased over at standardsmanual.com.

05. British Rail 

Bring it back!

Certain members of the Creative Bloq team have spent hours poring over the British Rail corporate identity manual (okay, it's me) and it is easy to see why. Epic levels of obsessive behaviour abound in the guide, which dates back to 1965, and some of the pictograms are a delight. Want to own your own copy? You're in luck; after a successful Kickstarter campaign, designer Wallace Henning has created a high-specification recreation of the original manual that you can order now; find out more here.

06. Channel 4 

The Channel 4 style guide is simple, clean and uncluttered for ease of use

Channel 4’s comprehensive style guide leaves no room for confusion on how its brand is used. The guide is 46 pages long, each of which is clean and clear, stating a single guideline per page, often accompanied by a graphic for visual reference.

07. Skype 

The Skype style guide lets illustration do all the talking

The Skype style guide is brilliant for many reasons – its pages of cool illustrations being one of them. The communication network hasn’t filled its guide with pages of industry jargon, it simply employs easy-to-understand explanations and graphics to get its point across.

08. Apple 

The Apple style guide is made up of 48 pages detailing exactly how the company’s branding is to be used

One of the biggest companies in the world, Apple has a comprehensive style guide detailing how its branding is to be used. Clean, clear and concise, this 48-page guide explains exactly how to use Apple assets – even where to apply stickers to your Smart car.

09. Adobe 

Adobe’s style guide goes into great detail about how you can use the branding, with some strict rules

Adobe is one of the design industry's strongest brands, and protecting that cast-iron integrity is this style document. So beware – do not use the red tag logo, it is for Adobe use only. (We do love it when you're forceful, Adobe!)

10. New York City Transit Authority 

The images of the New York City underground standards manual are a frustrating joy

We love this collection of photos of the New York City Transit Authority Graphics Standards Manual, designed by Massimo Vignelli of Unimark International, which feature a font that looks very much like Helvetica and some great pictograms. 

11. Barbican 

The Barbican has ultra-specific instructions for the use of its circle logo

The Barbican theatre’s identity “is not just a logo. It is a design scheme composed of a number of core elements that come together to create a distinctive look and feel that makes the Barbican brand instantly recognisable”. Which is why this guide is so important.

Having said that, the Barbican allows a degree of creative flexibility for designers tasked with using its identity, and takes you through exactly how to achieve that. Which is nice.

12. Firefox 

The Mozilla Foundation has introduced a new design language, Photon, for Firefox

Mozilla has ditched its old style guide for Firefox and introduced a whole new design language, Photon, to help designers create beautiful products for Firefox users. As well as useful guidelines and principles, the Photon Design System features reusable UI components, templates, and other resources for building consistent and recognisable products across all platforms.

13. Macmillan 

Macmillan’s guidelines focus on the charity’s brand values as well as style

Cancer charity Macmillan is another organisation that's dropped its brand document in favour of an online guide. So instead of having to comb through 67 pages, you're only ever a couple of clicks away from helpful identity design rules for everything from signage to infographics, as well as tips on how to use the brand's familiar green colours and which photos are best used as the image silhouettes you'll find in the charity's marketing material.

14. Boy Scouts of America 

No surprise that the Boy Scouts of America style document has strict guidelines for badge design

Dib dib dib! The quickest way to achieve your logo design badge is to follow the Boy Scouts of America's mildly militaristic manual. Just don't think of writing the scouts' tagline "Prepared. For. Life." without those all-important full-stops…

Related articles:

10 commandments of logo designHow to create a design style guide: 25 pro tipsSpeed up your web workflow with style guides

Incorporating Videos and Animation Into Your Website

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/yP_Mz1F2nyQ/

Do you feel like your website is static and boring? From small effects to gorgeous video backdrops, there are many ways to add flair to a still site.

But it isn’t to be taken lightly. Used incorrectly, you may bloat your storage, lock out users, or massively slow down loading times. Whether animation is meant to be the core design of your site or just a small decoration, this guide has a few tips and best practices for you.

Virtual Worlds

Types of Animation and Interactivity

There are many types of web animation, from fully interactive elements to simple hover animations or embedded gifs. With all these options, taking your website to the next level is easy.

CSS Animation

The most difficult part of CSS animation is knowing when to use it. It might be tempting to add a hover effect for every single button on the site. However, this can not only cause lag, but also serve as a distraction. Use small animations to draw the eye, help users navigate the site and find interactive elements.

Here are a few examples of animations you could incorporate – but it doesn’t end with these. The sky’s the limit!

Sliders, showcases and slideshows for photography, products or navigation
Hover effects such as buttons lighting up, text fading in, links appearing, etc.
Loading animations for large elements
Smooth animated side and dropdown menus
Welcome animations such as fading into the site or a greeting appearing
Transitions like elements sliding or floating in
Unique scrolling; scrolling may take you straight to different sections, move a layered background image or other parallax effects.

And you don’t need Flash, Silverlight or other plugins to run CSS animations. They’re very compatible and suitable for most websites. However, mobile users may not get to enjoy some effects, such as hovering.

FireWatch

Videos and GIFs

GIFs aren’t just for social media. A well-placed animation can look great even in a professional environment. Stock videos are gaining traction, so you don’t even have to take the videos yourself.

Videos and gifs can be used to showcase a product, tell a story or simply for design. You can embed videos into the website, have them play when interacting with certain elements, or even use it as a stylish background. A bit of movement can turn a static site into a fun, interesting one.

Just remember that large videos and GIFs can take up a lot of storage space. Run them through an optimizer if you encounter problems. And though it’s less fun, you may wish to use YouTube to display product videos. Avoid epilepsy triggers like flashing or repetitive patterns – especially for large elements. Finally, remember that overusing animation can slow down a webpage, so utilize videos sparingly.

Artist View

Full Animation

If you want your website to be an animated experience, you’ll need knowledge of JavaScript’s Web Animations API and CSS. And if you want to create interactive animations, things are going to get tough.

There’s also the issue that some browsers and older computers either won’t be able to run your animations, or will get overloaded when they visit your website. Interactive animations that are too taxing might even slow down modern computers.

If you’re a new animator, CodePen is a great place to experiment. An animation-centric website is a huge investment, especially if you have no experience, so think carefully before you make that choice.

Blues Design

Creating an Interesting User Experience

By now, you should have a good idea what sort of animations you wish to incorporate into your site. Remember to follow animation best practices, watch the CPU usage and you’ll be ready to make your webpage a fun and exciting experience – not a slow, choppy mess.


Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js

Original Source: https://www.smashingmagazine.com/2018/04/analyzing-social-media-presence-ibm-watson-nodejs/

2018-04-04T13:00:50+02:00
2018-04-04T12:16:56+00:00
Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js

If you are unfamiliar with Machine Learning (ML) technology, it has existed in science fiction for many years and is finally reaching its maturity in our society. One of the first ML examples I saw as a kid was in Star Trek’s The Next Generation when Lieutenant Tasha Yar trains with her holographic opponent that learns how to fight and better defeat in future battles.

In today’s society, China has developed a “lane robot” that is a guard rail controlled by a computer system that can direct the flow of traffic into different lanes, increasing safety and improving traveling time. This is done automatically based on time of day and how much traffic is flowing in each direction.

Another example is Pittsburg unveiling AI traffic signals that automatically detect traffic patterns and alter the traffic lights on-the-fly. Each light is controlled independently to help reduce both the commuting time and the idling time of cars. According to the article, pilot tests have demonstrated a reduced travel time of 25% and idling time by over 40%. There are, of course, hundreds of other examples of ML technology that make intelligent decisions based on the content it consumes.

To accomplish today’s goal, I am going to demonstrate (using Node.js) how to perform a search with Twitter’s API to retrieve content that will be inputted into the ML algorithm to be analyzed. This way, you’ll be provided with characteristics about the users who wrote that specific content so that you can get a better understanding of your audience. The example application will be written using Node.js as the server.

It is beyond the scope of this article to demonstrate how to write an ML algorithm. Instead, to aid in the analysis, I will demonstrate how to use IBM’s Watson to help you understand the general personality of your social media audience.

Getting the process just right ain’t an easy task. That’s why we’ve set up ‘this-is-how-I-work’-sessions — with smart cookies sharing what works really well for them. A part of the Smashing Membership, of course.

Explore features →

Smashing TV, with live sessions for professional designers and developers.

What Is IBM Watson?

In 2011, Watson began as a computer system that attempted to index the (entire) Internet. It was originally programmed to answer questions posed in ordinary English. Watson competed and won on the TV show Jeopardy! claiming a $1,000,000 cash prize.

Watson was now a proven success.

With the fame of winning on Jeopardy!, IBM has continued to push Watson’s capabilities. Watson has evolved into an enterprise-level application that is focused on Artificial Intelligence (AI) which you can train to identify what you care about most allowing you to make smarter decisions automatically.

The suite of Watson’s services is divided into six high-level categories:

Conversation
The services in this category allow you to build intelligent chatbot’s or a virtual customer service agent.
Knowledge
This category is focused on teaching Watson how to interpret data to unlock hidden value and monitor trends.
Vision
This service provides the ability to tag content inside an image that is used to train Watson to be able to automatically recognize the same pattern inside of other images.
Speech
These services provide the ability to convert speech to text and the inverse, text to speech.
Language
This category is split between translating one language to another as well as interpreting the text to predict what predefined category the text belongs to.
Empathy
This category is devoted to understanding the content’s tone, personality, and emotional state. Inside this category is a service called “Personality Insights” that will be used in this article to predict the personality characteristics with the social media content we will provide it.

This article will be focusing on understanding the personality of the content that we will fetch from Twitter. However, as you can see, Watson provides many other AI features that you can explore to automate many other processes simply through training and content aggregation.

Personality Insights

Personality Insights will analyze content and help you understand the habits and preferences at an individual level and at scale. This is called the ‘personality profile.’ The profile is split into two high-level groups: Personality characteristics and Consumption preferences. These groups are further broken down into more finite components.

Note: To help understand the high-level concepts (before we deep dive into the results), the Personality Insights documentation provides this helpful summary describing how the profile is inferred from the content you provide it.

IBM Watson’s Big Five Personality Traits

Big Five Personality Traits. Image courtesy: IBM.com. (Large preview)

Personality Characteristics

The Personality Insights service infers personality characteristics based on three primary models:

The ‘Big Five’ personality characteristics represent the most widely used model for generally describing how a person engages with the world. The model includes five primary dimensions:

Agreeableness
Conscientiousness
Extraversion
Emotional range
Openness
Note: Each dimension has six facets that further characterize an individual according to the dimension.

Needs describe which aspects of a product will resonate with a person. The model includes twelve characteristic needs:

Excitement
Harmony
Curiosity
Ideal
Closeness
Self-expression
Liberty
Love
Practicality
Stability
Challenge
Structure

Values describe motivating factors that influence a person’s decision making. The model includes five values:

Self-transcendence / Helping others
Conservation / Tradition
Hedonism / Taking pleasure in life
Self-enhancement / Achieving success
Open to change / Excitement

For more information, see Personality models.

Consumption preferences

Based on the personality characteristics inferred from the input text, the service can also return an indication of the author’s consumption preferences. ‘Consumption preferences’ indicate the author’s likelihood to pursue different products, services, and activities. The service groups the individual preferences into eight categories:

Shopping
Music
Movies
Reading and learning
Health and activity
Volunteering
Environmental concern
Entrepreneurship

Each category contains from one to as many as a dozen individual preferences.

Note: For more information, see Consumption preferences. For a more in-depth overview of a particular point of interest, I suggest you refer to the Personality Insights documentation.

To be effective, Watson requires a minimum of a hundred words to provide an insight into the consumer’s personality. The more words provided, the better Watson can analyze and determine the consumer’s preference.

This means, if you wish to target individuals, you will need to collect more data than one or two tweets from a specific person. However, if a user writes a product review, blog post, email, or anything else related to your company, this could be analyzed on both an individual level and at scale.

To begin, let’s start by setting up the Personality Insights service to begin analyzing a real-world example.

Configuring The Personality Insights Service

Watson is an enterprise application but they offer a free, limited service. Once you’ve created an account and are logged in, you will need to add the Personality Insight service. IBM offers a Lite plan that is free. The Lite plan is limited to 1,000 API calls per month and is automatically deleted after 30 days — perfect for our demonstration.

Create the Personality Insights Service

Create the Personality Insights Service. (Large preview)

Once the service has been added, we will need to retrieve the service’s credentials to perform API calls against it. From Watson’s Dashboard, your service should be displayed. After you’ve selected the service, you’ll find a link to view the Service credentials in the left-hand menu. You will need to create a new ‘Credential.’ A unique name is required and optional configuration parameters can be defaulted for this login. For now, we will leave the configuration options empty.

After you have created a credential, select the ‘View’ credentials link. This will display the API’s URL, your username, and password required to securely execute API calls. Save these somewhere safe as we will need them in the next step.

Testing The Personality Insights Service

To perform API calls, I am going to use Node.js. If you already have Node.js installed, you can move on to the next step; otherwise, follow the instructions to setup Node.js from the official download page.

To demonstrate how to use the Personality Insights, I am going to create a new Node.js project on my computer. With a command prompt open, navigate to the directory where your Node.js projects will be stored and create your new project:

mkdir watson-sentiments
cd watson-sentiments
npm init

To assist with making the API calls to Watson, I am going to leverage the NPM Package: Watson Developer Cloud Node.js SDK. This package can be installed via the command prompt:

npm install watson-developer-cloud –save

Before making the first call, the PersonalityInsightsV3 object needs to be instantiated with the credentials from the previous section. Begin by creating a new file called index.js that will contain the Node.js code.

Here is an example of configuring the class so it is ready to make API calls:

var PersonalityInsightsV3 = require(’watson-developer-cloud/personality-insights/v3’);
var personality_insights = new PersonalityInsightsV3({
“url”: “https://gateway.watsonplatform.net/personality-insights/api”,
“username”: “**************************”,
“password”: “*************”,
“version_date”: “2017-12-01”
});

The personality_insights variable is what we will use to interact with the API for the Personality Insights service. Let’s review how to execute a call and return a personality profile:

var fs = require(’fs’);

personality_insights.profile({
“contentItems”: [
{
“content”: “Some content that contains more than 100 words…”,
“contenttype”: “text/plain”,
“created”: 1447639154000,
“id”: “666073008692314113”,
“language”: “en”
}
],
“consumption_preferences”: true
}, (err, response) => {
if (err) throw err;

fs.writeFile(“results.txt”, JSON.stringify(response, null, 2), function(err) {
if (err) throw err;

console.log(“Results were saved!”);
});
});

The profile function accepts an array of contentItems. The ‘content’ item contains the actual content with a few additional properties identifying additional information to help Watson interpret it.

When this is executed, the results are written to a text file (the results are too large to write in the console). The result is an object that contains the following high-level properties:

word_count
The count of words interpreted
processed_language

The language that the content provided, e.g. (en).

Personality
This is an array of the ‘Big Five’ personality characteristics (Openness, Conscientiousness, Extraversion, Agreeableness, and Emotional range). Each characteristic contains an overall percentile for that characteristic (e.g. 0.8100175318417588). To ascertain more detail, there is an array called children that provides more in-depth insight. For example, a child category under ‘Openness’ is ‘Adventurousness’ that contains its own percentile.
Needs
This is an array of the twelve characteristics that define the aspects a person will resonate with a product (Excitement, Harmony, Curiosity, Ideal, Closeness, Self-expression, Liberty, Love, Practicality, Stability, Challenge, and Structure). Each characteristic contains a percentile of how the content was interpreted.
Values
This is an array of the five characteristics that describe motivating factors that influence a person’s decision making (Self-transcendence / Helping others, Conservation / Tradition, Hedonism / Taking pleasure in life, Self-enhancement / Achieving success, and Open to change / Excitement). Each characteristic contains a percentile of how the content was interpreted.
Behavior
This is an array that contains thirty-one elements. Each element provides a percentile of when the content was created. Seven of the elements define the days of the week (Sunday through Saturday). The remaining twenty-four elements define the hours of the day. This helps you understand when customer’s interact with your product.
consumption_preferences
This is an array that contains eight different categories with as much as a twelve child categories providing a percentile of likelihood to pursue different products, services, and activities (Shopping, Music, Movies, Reading and learning, Health and activity, Volunteering, Environmental concern, and Entrepreneurship).
Warnings
This is an array that provides messages if a problem was encountered interpreting the content provided.

Here is a CodePen of the formatted results:

See the Pen Example Watson Results by Jamie Munro (@endyourif) on CodePen.

Configuring Twitter

To search Twitter for relevant tweets, I am going to use the Twitter NPM package. From a console window where the application is hosted, run the following command to install:

npm install twitter –save

Before we can implement the Twitter package, you need to create a Twitter application.

Retrieving Twitter’s Access Tokens

Retrieving Twitter’s Access Tokens. (Large preview)

Once you’ve created your application, you need to retrieve the authorization keys required to perform API calls. With your application created, navigate to the ‘Keys’ and ‘Access Tokens’ page. Since we are not performing API calls against users of Twitter, OAuth integration is not required. Instead, we need only the four following keys:

Consumer Key
Consumer Secret
Access Token
Access Token Secret

The last two keys need to be generated near the bottom of the ‘Keys’ and ‘Access Tokens’ page. With the keys, here is an example of searching for Tweets about #SmashingMagazine:

var Twitter = require(’twitter’);

var client = new Twitter({
consumer_key: ’*********************’,
consumer_secret: ’******************’,
access_token_key: ’******************’,
access_token_secret: ’****************’
});

client.get(’search/tweets’, { q: ’#SmashingMagazine’ }, function(error, tweets, response) {
if(error) throw error;

console.log(tweets);
});

The result of this code will log a list tweets about Smashing Magazine. For the purposes of this demonstration, the following fields are of interest to us:

id
created_at
text
metadata.iso_language_code

These are the fields we will feed Watson.

Integrating Personality Insights With Twitter

With Twitter setup and Watson setup, it’s time to integrate the two together and see the results. To make it interesting, let’s search for #DonaldTrump to see what the world thinks about the President of the United States. Here is the code example to search Twitter, feed the results into Watson, and write the results to a text file:

var fs = require(’fs’);
var Twitter = require(’twitter’);

var client = new Twitter({
consumer_key: ’*********************’,
consumer_secret: ’******************’,
access_token_key: ’******************’,
access_token_secret: ’****************’
});

var PersonalityInsightsV3 = require(’watson-developer-cloud/personality-insights/v3’);
var personality_insights = new PersonalityInsightsV3({
“url”: “https://gateway.watsonplatform.net/personality-insights/api”,
“username”: “**************************”,
“password”: “*************”,
“version_date”: “2017-12-01”
});

client.get(’search/tweets’, { q: ’#DonaldTrump’ }, function(error, tweets, response) {
if(error) throw error;

var contentItems = [];

// Loop through the tweets
for (var i = 0; i {
if (err) throw err;

// Write the results to a file
fs.writeFile(“results.txt”, JSON.stringify(response, null, 2), function(err) {
if (err) throw err;

console.log(“Results were saved!”);
});
});
});

Here is another CodePen of the formatted results that I received:

See the Pen Donald Trump Watson Results by Jamie Munro (@endyourif) on CodePen.

What Do The Results Say?

Once we’ve analyzed the ‘Openness’ trait of the ‘Big Five,’ we can infer the following:

Emotion is quite low at 13%
Imagination is average at 54%
Intellect is very high at 96%
Authority challenging is also quite high at 87%

The ‘Conscientiousness’ trait at a high-level is average at 46% compared with the ‘Openness’ high-level average of 88%. Whereas ‘Agreeableness’ is very low at only 25%. I guess people on Twitter don’t like to agree with Donald Trump.

Moving on to the ‘Needs.’ The sub-categories of ‘Curiosity’ and ‘Structure’ are in the 60 percentile compared to other categories being below the 10th percentile (Excitement, Harmony, etc.).

And finally, under ‘Values,’ the sub-category that stands out to me as interesting is the ‘Openness’ to ‘Change’ at an abysmal 6%.

Based on when you perform your search, your results may vary as the results are limited to the past seven days from executing the example.

From these results, I would determine that the average person who tweets about Donald Trump is quite intellectual, challenges authority, and is not open to change.

With these results, it would allow you to automatically alter how you would target your content towards your audience to match the results received. You will need to determine what categories are of interest and what percentiles do you wish to target. With this ammunition, you can begin automating.

What Else Can I Do With Watson?

As I mentioned at the beginning of this article, Watson offers many other different services. With these services, you could automate many different parts of common business processes. For example:

Building a chat bot that can intelligently answer questions based on a knowledge base of information;
Build an application where you dictate what you want written to Watson by using the speech to text functionality;
Automatically translate your content into different languages to create a multi-lingual site or knowledge base;
Teach Watson how to look for specific patterns in images. This could be used to determine if a logo is embedded into a photo.

This, of course, is a very small subset that my limited imagination can postulate. I’m sure you can think of many other ways to leverage Watson’s immense capabilities.

If you are looking for more examples, IBM has an entire GitHub repository dedicated to their Node.js SDK. The example folder contains over ten sample applications that convert speech to text, text to speech, tone analysis, and visual recognition to name just a few.

Conclusion

Before Watson can runaway with technological growth, resulting in the singularity where Artificial Intelligence destroys mankind, this article demonstrated how you can turn social media content into a powerful understanding of how the people creating the content think. Using the results from Watson, your application can use the categories of interest where the percentile exceeds or is less than a predetermined amount to change how you target your audience.

If you have other interesting uses of Watson or how you are using the Personality Insights, be sure to leave a comment below.

Smashing Editorial
(rb, ra, yk, il)

Web Designers That Use FreshBooks Have Much More Time for…Well, Designing

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/ZWmjjZbaz-M/

Starting and running a small business isn’t all fun and games, but you knew that it wouldn’t be. You love challenges and you’re up for facing them head-on, but like most business owners you also look for ways to make your life easier. The biggest problem is that you’re too busy to find time-saving solutions. Ironic right?

Accounting is one of the most time-consuming tasks you have to take care of on a daily, weekly or monthly basis. Not every business person has a degree in accounting, and many have not even read a book on the subject, but it’s something that can’t be avoided.Unfortunately, a lack of experience or savvy can lead to mistakes and frustration.

Forget about hiring someone, Freshbooks accounting software is the solution you’ve been looking for.

1. FreshBooks Makes Billing Fast and Painless

FreshBooks does your billing quickly and efficiently. You already know how arduous, error-prone and time-consuming manual time-tracking, invoicing and expensing is, and the better solution is FreshBooks.

FreshBooks was created by web designer Mike McDerment, who needed a better way to handle the billing for his own freelance business. He knew he couldn’t avoid the billing process, but it was taking up so much of his time. That was the time he needed to be spending on other important aspects of his business. It didn’t take long before FreshBooks was created, and before he knew it over 10 million people worldwide were using it.

2. FreshBooks’ Major Benefits

Saves An Impressive Amount Of Time

FreshBooks users save an average of 16 hours a month thanks to the intuitive nature of the software and all of the available automation. That’s a cool 4 hours a week you can devote to other tasks when you let FreshBooks organize your invoices and send email payment reminders to clients and customers.

Your Professional Status Gets An Uptick

Creating invoices in spreadsheets and word processors takes a lot of time and doesn’t result in easy to use and professional materials. Beautifully-crafted FreshBooks templates allow you to simply fill in your information once and then automatically include your tracked time and expenses in specific invoices. What an easy way to impress yourself and your clients, and to save a ton of time.

Award-Winning Customer Support Is Yours to Enjoy

Since FreshBooks is super reliable and so easy to use, you may never have to give Customer Support a call. However, should a question or problem ever arise the Customer Support team stands ready to help out. Whether you’ve got questions about accepting online payments, automating your invoices, or just creating reports at tax time a friendly Customer Support Rockstar is your new best friend.

You’ve Got Enough Stress Already

FreshBooks is so easy to use and simplifies your billing process so much that all of your accounting stress will just disappear. Now you’ll have more time to deal with everything else in your business that might be a source of stress.

You’ll Always Be Ready for Tax Season

Doing your taxes will never be something you look forward to, but you no longer have to dread it. FreshBooks will help you justify every expense and every cent you take in, save you preparation time, and help you avoid costly mistakes.

3. FreshBooks’ Most Popular Features

Give Your Proposals a Professional Look

FreshBooks‘ style and formatting features will help you to better present your project outline, its scope, deliverables, and timeline – quickly and efficiently.

Expense Management

Come tax time (or any other time) you won’t find yourself shuffling through folders or boxes trying to organize and find your expenses. FreshBooks keeps your expense information in one place; plus, you can use the FreshBooks mobile app to add photos of expense receipts directly to your expense entries.

Custom Invoices

In FreshBooks, it takes 30 seconds for you to create and send an invoice. Choose a template, add your logo, choose fonts and colors, input the payment terms, and hit “Send”. Your clients get easy to read and well-designed invoices.

Take Credit Card Payments Online

The online payment feature is a win-win for you and your clients. They enjoy the extra convenience, and you won’t have to chase clients for money or deal with cash flow issues due to late payments.

Time Tracking

Time tracking helps you measure performance, but it plays a key accounting role as well. With this popular FreshBooks feature, you’ll always know the exact amount of time spent on a task and project and have the ability to instantly add it to an invoice.

Sales Tax Calculations

You’ll enjoy this feature if you’re tired of doing the math to figure out the tax on each of your expenses or invoices. FreshBooks does the math for you, every single time. Plus, all you have to do is click to get an invoice details report, expense report or tax summary report.

Project Management

Sharing files and messages with project stakeholders is key to successful project management but organizing and storing the information can be cumbersome and very inefficient. The FreshBooks Project feature ensures that information sharing is smooth and efficient, so stakeholders are always kept up to date.

Why You Should Try FreshBooks Now

If you’re not yet sure that FreshBooks is the right accounting solution for your business, give it a try. Your 30 day free trial allows you to evaluate all of the features of FreshBooks with no obligation. You don’t even need to enter credit card information, you just have to sign up and start building your business. Before you know it you’ll be saving tons of time and feel the accounting stress lift off your shoulders.

Start your free trial today, your business is accounting on you.


The 33 best photo apps

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/10yH2nekAxc/best-photo-apps-513764

Here is the definitive guide to the best photo apps around, covering iOS (that's iPhone and iPad) and Android apps. Some you won't have heard of, others you'll be more familiar with.

None are going to replace a great DSLR, mirrorless or compact camera (see our guide to the best cameras for creatives) and a couple of hours with a photo editor such as Photoshop CC, but they're all great at what they do.

Get Adobe Creative Cloud

Let's start off with apps to transform your current photo collection: photo editing apps. You'll also find apps for taking photos and artistic photo apps on the other pages of this article, so click through to those if that's what you're after.

The 5 best laptops for photo editing
01. Photoshop Lightroom CC for mobile

Platform: iOS, AndroidDeveloper: Adobe Price: Free

Adobe makes a number of photo apps but if you’re serious about photo editing on your device, you only need one: Photoshop Lightroom CC for mobile. It's a free app that gives you a powerful yet simple solution for capturing, editing and sharing your photos. 

You can shoot raw photos (on compatible phones), or transfer from your camera onto your device, and easily organise and tweak them, then automatically upload them to the cloud so they don’t take up space on your device. It has presets to keep your edits quick and simple, but you can also go deeper and fine-tune images to perfection. 

Signing up to a Creative Cloud account – including the Lightroom CC plan, adds the ability to work across phone, tablet and desktop with instant synchronisation.

02. Photoshop Express

Photoshop Express app on smartphone

Photoshop Express offers the sort of professionalism you’d expect from Adobe

Platform: iOS, AndroidDeveloper: AdobePrice: Free

As you would expect from Adobe, the interface and user experience of the Photoshop Express photo app for Apple and Android devices is faultless. It fulfils all the functions you need for picture editing and will probably be the one you turn to for sheer convenience. 'Straighten' and 'Flip' are two useful functions not included in many other apps.

However, none of the filters really jump out, and some are surprisingly naff for an app that comes from the developer for designers. Ultimately, if you are looking for a more professional tool, look towards Lightroom CC for mobile, but the cut-down feel and familiarity of PS Express will suit some.

03. Photoshop Mix

Platform: iOS, AndroidDeveloper: Adobe Price: Free

Photoshop Mix is an app that caters more for those looking to make big statements than those making subtle adjustments, and it’s none the worse for it. PS Mix enables you to cut out and combine elements from different images, blend layers and make adjustments to your creations on your device, and it majors in ease-of-use. 

Usefully, it live-syncs with Photoshop CC, meaning that when you make a change on your phone, it’ll show up instantly on your desktop – and you can take advantage of Creative Cloud benefits with an Adobe Photography Plan, which saves a fair bit of cash over a full subscription.

04. Photoshop Fix

Platform: iOS, AndroidDeveloper: AdobePrice: Free

With Photoshop Fix, you can make the most common image adjustments very easily, right on your smart device, without having to transfer your photos to a desktop computer and use expensive photo editing software. At your fingertips are the tools to liquify, heal, lighten, colour and adjust your images to perfection, plus you can experiment with painting tools and vignettes, control exposure, contrast, saturation and focus.

As with all Adobe mobile apps, having a Creative Cloud account opens up the ability to instantly share your work with other CC apps on desktop or mobile, but Photoshop Fix is probably best Adobe app for those just looking to make their smartphone photos better without requiring deep knowledge of editing tools.

05. Photo Editor by Aviary

Photo Editor by Aviary on smartphones says 'Create beautiful photos with over 1500 free tools' and 'Eliminate blemishes with a single tap'

Aviary strikes a balance between serious and playful
Platform: iOS, AndroidDeveloper: AviaryPrice: Free

Aviary is a pleasantly designed app that strikes the perfect balance between serious photo editing and playful photo decoration functions, without looking bland or childish. Since it was first launched, the number of tools has exploded from 20 to 1500, giving you plenty of room to play.

The 'Strato' filter creates one of the most convincing vintage effects from all the apps tested.

06. Google PhotoScan

Platform: iOS, AndroidDeveloper: GooglePrice: Free

It's all very well being able edit photos on your phone or computer, but what about those old pre-digital prints you have lying around? If putting them all through a scanner's too much for you, there's an app that makes digitising your ancient snaps much easier. 

Google's PhotoScan enables you to scan photos with your phone in seconds, without unsightly glare and shadows; head this way for some great tips on how to get the best out of it.

07. Pixlr

Pixlr screenshots

Pixlr has such a huge array of effects and tools that you can get lost in it for hours

Platform: iOS, AndroidDeveloper: Autodesk IncPrice: Free

Boasting over two million combinations of effects, overlays and filters, Pixlr contains enough tools to keep you busy for hours. You can also layer your images, add text captions, and it is also an excellent collage maker. Plus you'll also find an eraser to auto fix the colour and automatically adjust contrast. Not bad for a free app.

08. Fotor

Platform: iOS, AndroidDeveloper: EverimaginingPrice: Free

Looking for a flexible photo editing app that's easy to pick up and produces quality results? Fotor delivers all of this, and best of all you can download it for free. This versatile app enables you to edit, collage and share images, plus you can discover masterpieces snapped by other users.

Fotor also offers a focus feature, enabling you to control depth of field and clarity to simulate DSLR effects. Simply select a focal point, adjust the emulator to your preference, and create a high definition finish.

09. Qwik

Qwik photo editing app on phone screens

Qwik is crammed with filters, fonts and frames
Platform: iOS, AndroidDeveloper: Guillaume BabusiauxPrice: Free

Qwik describes itself as 'the fastest and easiest way to make pretty photos,' and with over 50 filters, plus tons of fonts and frames, it's hard to argue with it.

Edit your images in seconds with straightforward hands-on tools, and share them with Qwik's online community. With new filters and features being added every week, Qwik is constantly keeping itself fresh and exciting.

10. PicLab

PicLab photo editor on smartphones

Use the photo editor to quickly create trendy infographic images with this photo app
Platform: iOS, AndroidDeveloper: MuseWorksPrice: Free

PicLab is a nifty app for creating those inspiring images that you get all over the internet these days. You know, the ones featuring a photo – probably with at least one retro filter applied – with a helpful aphorism layered over the top in an attractive, friendly typeface. Yeah, those – like the silly AI-generated ones we've featured, but better. PicLab HD makes them an absolute doddle to create, enabling you to either snap a photo or grab one from your photo library, then go to town on it.

As well as adding typography – lots of fonts and full control over size, positioning, opacity, rotation, and colour – you can also layer illustrations, ornamentation and other design elements on top of your image. 

PicLab features full layer-based editing and also packs plenty of tools for making your original photo look its best, with loads of lighting and film effects to choose from as well as preset photo filters and adjustment tools for fine tuning the brightness, contrast, exposure, saturation, and the blur level of your photos.

11. Handy Photo

Platform: iOS, AndroidDeveloper: ADVA SoftPrice: $2.99/£2.99 (iOS), $2.99/£2.89 (Android)

The selling point of photo editor Handy Photo is its interface, which uses the corners of the screen to cater for rotating menu options. It's all designed to keep the central area of the screen clear, allowing you to use swipe gestures to tone your effects up or down.

It's a powerful photo editor; the UI isn't for everyone, but this is an amazing price for the effects you get. The 'Move Me' tool enables you to clip out objects and move, resize or flip them.

12. Facetune

Facetune photo editor screenshots

Hide your blemishes, wrinkles and more with Facetune’s photo editor
Platform: iPhone, iPad, AndroidDeveloper: LightricksPrice: $3.99/£3.99 (iPhone), $5.99/£5.99 (iPad), $5.99/£3.99 (Android)

Embarrassed about your laughter lines? Feeling blue about those blemishes? Fear not, Facetune is here! Grab a photo from your Camera Roll and start your makeover; you can remove unwanted freckles, blemished skin or hide bags under the eyes with Smooth; reshape that wonky nose or misshapen jawline with, er, Reshape; and make subtle tweaks of colour using Tone.

The results of this photo editor are truly impressive. You can share results over Facebook, Twitter and Tumblr – if you dare.

13. PhotoWonder

Photo Wonder app screenshots

Photo Wonder has a good collage feature with multiple layouts and photo booth effects

Platform: iOS, AndroidDeveloper: Beijing Baidu NetcomPrice: Free

Excellent user interface makes Photo Wonder one of the speediest smartphone photo apps to use. It also has a good collage feature with multiple layouts and photo booth effects. The filter selection isn’t huge, but many are so well-designed that you’ll find them far more valuable than sheer quantity from a lesser app. The 'Vintage' filter works magic on photos of buildings or scenery. Combine with 'Sweety' for a dreamy retro effect.

14. Rakuga Cute

Rakuga Cute app screenshots

Look beyond the cuteness and Rakuga Cute has some interesting features
Platform: iOSDeveloper: Tatsumi ElectronicsPrice: Free

At first glance this iPhone photo app seems aimed at Japanese schoolgirls rather than discerning designers, but Rakuga Cute actually contains some unusual editing functions which makes it an interesting addition to your photo repertoire.

The 'Mosaic' option lets you selectively pixelate any part of a photo, quite useful for blurring out license-plates, identities or should you feel so inclined, body parts as well.

Next page: Camera apps

15. Halide

Best photo apps: Halide

Halide puts pro camera controls at your fingertips
Platform: iOSDeveloper: Chroma NoirPrice: £4.99/$4.99

If you love the convenience of mobile photography but miss the control you get with a full-on SLR, Halide is well worth snapping up. It'll work as a simple point and shoot, but with a swipe you can open up a whole load of lovely manual options, giving you tactile control over focus, ISO and shutter speed, as well as a live histogram to help you get the right exposure. 

You can review your photos Tinder-style, with a right swipe to add them to your favourites, and a left swipe to trash them, and Halide can even export as RAW to give you more flexibility when you edit your shots.

16. Camera MX

Platform: AndroidDeveloper: Appic Labs CorpPrice: Free

The Android exclusive photo app Camera MX combines powerful enhancement tools with a beautifully simple user interface. Thanks to intelligent image prcoessing you can take visibly sharper snaps, as well as cutting and trimming them to perfection in the edit.

In the latest version you can create dynamic photos with the ‘Live Shot’ feature. By saving the last seconds before you actually take the photo, this app lets users capture moving snaps that can be relived and shared.

17. Lensical

Platform: iOS (iPhone)Developer: Apptly, LLCPrice: Free

Lensical makes creating face effects as simple as adding photo filters. Lensical is designed for larger displays and utilises one-handed gesture-based controls making it the perfect complement to the iPhone 6 and iPhone 6S Plus’s cameras.

18. Camera+

Best photo apps: Camera +

Camera+ is adored by iPad users and has subsequently arrived on iPhone – hooray!
Platform: iOS (iPhone and iPad)Developer: tap tap tapPrice: $2.99/£2.99 (iPhone), $4.99/£4.99 (iPad)

The Camera app that comes on the iPhone by default is not brilliant: yes, you can use it to take some decent shots, but it doesn’t offer you much creative control. This is where Camera+ excels. The app has two parts: a camera and a photo editor, and it truly excels at the latter, with a huge range of advanced features.

Camera+ doesn’t just limit you to editing new pics – you can quickly import your existing photos into the Lightbox so that you can breathe new life into them.

19. Clone Camera Pro

Best photo apps: Clone Camera Pro

Double up your images with Clone Camera Pro
Platform: iOS (iPhone)Developer: Peta VisionPrice: $1.99/£1.99

A smart photo-compositing app that allows you to double up on your images. Clone Camera lets you produce a ‘photo’ of a scene with the same person in it multiple times. It’s simply a case of taking up to four photos of the same person in a different location, and then selecting the areas you want to stitch together into the final photo. The app works best if you have a tripod, or can otherwise keep your device still.

20. Camera360

Best photo apps: Camera360

Camera360 offers a huge range of functions and no ads
Platform: iOS (iPhone), AndroidDeveloper: PinGuoPrice: Free

Camera360 is a remarkable smartphone photo app. It’s perfectly self-contained with a huge range of functions, no ads and no insistence in promoting paid content.

Touching the photo after applying a filter produces a nifty quick comparison of the ‘before’ and ‘after’ versions. One drawback is that the process of importing photos is slightly tedious, with one too many clicks involved. Tip: go to Enhancement>Night for a great filter to correct slightly dark or underexposed photos.

21. LINE Camera

Best photo apps: LINE camera

You can add text to your pictures in over 100 fonts and 20 colours
Platform: iOS (iPhone), AndroidDeveloper: Naver JapanPrice: Free

Sleek and easy-to-use, LINE Camera comes with a solid range of filters, borders, icons and stamps. You can also add text to your pictures in over 100 fonts and 20 colours, making this free smartphone photo app one of the best for typography. Check out Stamp>Heart Symbol>Shine for a nice selection of kitschy sparkle brushes.

22. Paper Camera

Best photo apps: Paper Camera

Paper Camera’s interface is quirky to say the least
Platform: iOS (iPhone and iPad)Developer: JFDP LabsPrice: $2.99/£2.99 (iOS), £2.39 (Android)

Filter effects aren't exactly a new thing, but Paper Camera takes a different approach to the post effects found in the likes of Instagram. What does it do? Well, it displays effects in real time on your camera as you're using it. There are some neat effects on offer – including cartoon, half tone and sketch.

23. Lifecake

Platform: iOS (iPhone and iPad), AndroidDeveloper: LifecakePrice: Free

Save and organise pictures of your children growing up with Lifecake. In a timeline free from the adverts and noise that clutter most social media channels, you can easily look back over fond memories and share them with family and friends.

Touted as ‘a time machine of your child’s life’, you can skip to select stages and compare different dates. You decide who can see your images, and because Lifecake is now a Canon company you can order a printed album of your precious photos.

24. VSCO Cam

Platform: iOS (iPhone and iPad), AndroidDeveloper: Visual Supply CompanyPrice: Free

Connect with amazing photographers from around the world, and create your own stunning photography with VSCO Cam. Create your own VSCO Journal to join in with the community and find inspiration form other users. Unlike other social platforms, your followers and clout are not displayed, giving everyone an equal creative playing field.

VSCO Cam comes packed with top performance features, including high resolution imports, and before and after comparisons to show how you built up your edit. Introduce yourself to the community by downloading it for free.

Next page: Artistic photo apps

25. Prisma

Best photo apps: Prisma

Prisma uses AI to turn your snaps into works of art
Platform: iOS/AndroidDeveloper: Prisma LabsPrice: Free

Better than any filter-based photo app, Prisma can transform your photos into masterpieces in the style of famous artists such as Van Gogh, Munch, Mondrian and Picasso. It uses an AI technique called style transfer to do its artistic magic, and it's no longer restricted to still images; it now works on video as well.

26. Instagram

Best photo apps: Instagram

With a few simple edits, Instagram transforms photos into works of art
Platform: iOS, AndroidDeveloper: Instagram, IncPrice: Free

Even if you're new to the world of photo apps chances are you've heard of Instagram. Capable of turning the most everyday photo into something glamorous thanks to its range of custom-designed filters and editing tools, Instagram has won over a legion of fans and dedicated users.

Put simply, there is a reason Instagram is so popular. It's powerful, versatile, and best of all it's free. Thanks in part to its ownership by Facebook, Instagram has also become a social media platform in itself. Instagram Stories let you communicate a diary of images to your followers, and offshoot apps Boomerang, Hyperlapse and Layout help you create striking video and collages.

And – praise be! – Instagram has finally tweaked its feed to make newer posts more likely to appear near the top. But please just make it chronological again!

27. PixelWakker

Best photo apps: PixelWakker

PixelWakker transforms your pics into pointillist art
Platform: iOS (iPhone and iPad)Developer: PixelWakkerPrice: £2.99

If you're a fan of pointillism then this is the photo app for you. PixelWakker breaks down your images into their component pixels and that's where the fun begins. You can apply one of four great effects – pixel image, dots, line, or colour rain – to your pics and watch in wonder as dot art unfolds before your eyes.

28. Sktchy

Best photo app: Sktchy

You’ll either love or hate sketch-based community photo editor app Sktchy
Platform: iOS (iPhone and iPad)Developer: Sktchy LLCPrice: Free

Connecting with people around the world in a new way, here you can choose from a selection of photographs, uploaded by the Sktchy community and create a portrait from that image.

Sktchy co-founder Jordan Melnick comments: “Our community of artists is growing every day because Sktchy is the perfect place for them to find inspiration and share their art with the world, in part because of the neat way we layer portraits over the photos that inspired them.”

29. Photochop

Best photo apps: Photochop

Photochop – Chop Up and Distort Your Photos does exactly what it says on the tin
Platform: iOS (iPhone and iPad)Developer: Big Bucket SoftwarePrice: $0.99/£0.99

We probably like this app for its name (in full: Photochop – Chop Up and Distort Your Photos) as much as for its function. It’s a cheap and cheerful little photo editor tool for mucking about with pictures. Simply pick a snap from your iPhone’s photo library, chop it up into a set of tiles and then go crazy.

You can either work directly with the tiles, dragging them around, rotating and resizing them to create a collage effect, or there’s a warp mode that works in the same way but results in a distorted image rather than a collage. Obviously it’s nothing you can’t easily do in any image editing app in a couple of minutes and you’ll be hard pushed to find a serious application for it, but it’s a fun graphical toy to have in your pocket.

30. Path On

Best photo apps: Path on

Add images to your text with Path On
Platform: iOS (iPhone and iPad)Developer: Peta VisionPrice: $1.99/£1.99

Path On lets you add funky text to photos in unique ways. You draw the path you’d like the words to take, then type in your message – the text then flows along the path. The custom options are the real killer feature here, with you being able to adjust the font, the letter space, and the alignment. Although it’s a little fiddly, Path On is probably the best adding-text-to-photos tool around.

31. Geló

Best photo apps: Gelo

Persevere with Geló and the results will speak for themselves
Platform: iOS (iPhone)Developer: James MoorePrice: Free

A splash of colour can alter the look of an photo dramatically. Give your iPhone shots some extra oomph with this cool app for the iPhone. Gradients have become a lost art in iPhone photography, but Geló fills that gap in the market well. It needs a little more patience than your average photo app, but persevere and the results are excellent.

Once you’ve taken or imported an image, you see a carousel of ‘gels’. Cycle through to choose a colour, tap it, and then it’s applied to your shot. Using the sliders you can tweak how the filter affects your shot, and you can easily apply specific RGB values though, that might mimic your favourite tints in iPhoto or Photoshop, say.

32. Retromatic

Best photo apps: Retromatic

Retromatic can be frustrating at times but it portrays a great vintage feel
Platform: iOS (iPhone and iPad)Developer: Peta VisionPrice: $1.99/£1.99

1950s-inspired photo app Retromatic enables you to import your photos, cut them out using an instant alpha tool, and then apply vintage effects to them. It's quick and easy to use, and looks great, although expect frustration if you want to do anything more than the basics. The instant alpha tool works well, but you have to hold down on the screen to make it switch between a brush and pinching to zoom.

33. Tadaa

Best photo app: Tadaa

Tadaa is great for fine-tuning photos
Platform: iOS (iPhone)Developer: MenschmaschinePrice: Free

Tadaa lets you adjust the strength of all its filters, which is ideal for people who like fine-tuning their photos with subtle effects. This iPhone photo app tries to get you to use its own social network, but you can still use all features without a login.

Click on the frame icon to access a nice range of photo film borders. Unlike Instagram and Magic Hour, you’re not limited to a square and can apply the film border to a photo of any size.

Related articles:

40 sets of free iconsThe best new art apps of 2016HelloGiggles' elegant redesign focuses on community

10 CSS Gradient Libraries & Webapps for UI Designers

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/rlN0Z7pyVBM/

Free online tools are the norm for modern designers. Why reinvent the wheel if you can save time with a free resource?

If you search around, you’ll find plenty of tools for patterns and color picking. But you’ll have a tougher time finding resources built around gradients.

That’s why I’ve put together this list of 10 free gradient tools, code libraries and design resources for web and mobile projects.

WebGradients

WebGradients homepage

On the WebGradients website you’ll find a whole slew of custom-made gradients to pick from.

They come in a variety of colors and styles, but they’re all pre-built and ready to go. Think of this as a library of gradients, with over 180 options altogether.

If you look in the top navigation, you’ll find download links for these gradients in both a PSD and a Sketch file.

Or, you can copy the gradients as CSS3 code, then add them right into your site. There are no wrong answers here – just lots of gradients.

Gradient Buttons

Gradient buttons

If you’re a web designer, then you know how painful it can be to match colors. This gets even tougher when you’re trying to match gradients.

Enter GradientButtons, a free open source library filled to the brim with gorgeous button designs.

The library is super easy to use and features plenty of gradients to choose from.

Have a look over the homepage and you’ll find different classes for sizes, font styles, colors and button formats. The project is also on GitHub if you want to dig deeper into the code.

uiGradients

UI Gradients

Have a look at the uiGradients library for some interesting CSS3 gradient choices.

In the top navigation (towards the left-hand side) you’ll see a button labeled “show all gradients”. Choose it to view a massive list of different gradient styles. Seriously, there’s a lot.

Pick whichever one you like and then copy the code for use in your site. You can also download the gradient as a .jpg file right from their tools panel (located on the upper right).

Gradient Animator

CSS Gradient animator

So, gradient animation. It’s a thing now. And the Gradient Animator tool is the perfect way to build this into a reality. Everything can run right through CSS3 with no JavaScript needed.

From the sidebar, click on “add colour” and pick at least two of them for your gradient. Change the speed to run a little faster, alter the direction, then click “preview”.

You’ll understand the benefit of this tool pretty quickly.

Colorzilla Gradient Editor

Colorzilla gradient editor

Every web designer should know about the Colorzilla gradient editor by now.

It’s been around for years and it was one of the very first webapps to let developers auto-generate CSS3 gradient code from scratch.

Really, this is a tool you have to bookmark. It also comes with pre-built gradients and is almost like a library for designers.

CSS Gradients

CSS Gradients open source

Here’s a neat library focused on CSS3 gradients that is available on GitHub.

You get access to all of the source code and a variety of gradient styles (linear, radial, etc).

There’s also a sample demo page featuring more of the “out-there” types of gradients. They look like patterns you can generate solely with CSS code.

It’s crazy to see how far the web has come since the release of modern CSS3 properties.

ColorSpace Gradient

ColorSpace gradient

ColorSpace has their own little gradient webapp that lets developers generate custom codes from a set of color choices.

This has a simpler interface than Colorzilla (in my opinion) because the controls just seem so obvious. The trouble is that ColorSpace’s tool only lets you pick two colors at a time.

With something like Colorzilla, you can add several colors together for one massive gradient.

This doesn’t mean that ColorSpace is a bad tool. But it’s best used for simple gradients.

Infinite Gradients

Infinite gradients library

On the other hand, we have Infinite Gradients. And yes, this is exactly what it sounds like.

In the top navbar you can add colors, lock certain choices and edit specific features of your gradient. The tool works by mouse control, where you drag along the canvas to edit the gradient style. Once you get it just right, you can copy the CSS3 gradient code and you’re good to go.

I’d call this more of a fun tool than a practical solution. Although, it can be really useful for creative designers out there.

There’s also an about page if you’d like to learn more.

Conic Gradient Polyfill

Conic Gradient Polyfill

The W3C specs have some details on conic gradients, but they aren’t widely supported by modern CSS3 standards.

Enter this polyfill developed to solve the problem. It’s a handy open source tool created by developer Lea Verou that forces conic-gradient()support through a polyfill.

While it’s not exactly the most-used gradient tool in existence, it does solve a real problem for web designers.

TinyGradient

TinyGradient library

TinyColor is a neat JS library that handles color manipulation and editing within a code library. Developer Damien Sorel took that library and built a TinyGradient option on top of it.

This works the same way. You manipulate gradients with JavaScript and they’ll work properly via CSS in all browsers. Pretty neat!

Gradients support RGB or HSV colors. Plus, you’ll get a lot of control with this very tiny, yet powerful color library.

If you’re a developer who loves playing with color, you should try TinyGradient in a small project. It works for all modern browsers and you can even pull the package directly via npm.


Illustration and Poster Design for Indiana Jones Trilogy

Original Source: http://feedproxy.google.com/~r/abduzeedo/~3/JCv0IDF1iio/illustration-and-poster-design-indiana-jones-trilogy

Illustration and Poster Design for Indiana Jones Trilogy

Illustration and Poster Design for Indiana Jones Trilogy

abduzeedo
Apr 02, 2018

Grzegorz Domaradzki created some stunning illustrations for the Indiana Jones trilogy. They feature all main characters that made these movies, probably the most entertaining trilogy ever. I know there’s a fourth movie, but we rather not count that one. There are 2 versions of the poster, in 8 or 6 color screen print with metallic links. As you can see from the images below, they are quite amazing. 

Illustrations

Indiana Jones Trilogy REGULAR edition / 8 color screen print with metallic inks

36 x 24 inches Hand-numbered / TIMED EDITION of 2750 / Printed by VGKids / APs coming soon.

Indiana Jones Trilogy VARIANT edition / 6 color screen print with metallic inks

36 x 24 inches Hand-numbered / EDITION of 250 / Printed by VGKids / APs coming soon.

Photos

For more information check out:

www.iamgabz.com
Facebook
Instagram

illustration


Expanding Grid Menu

Original Source: http://feedproxy.google.com/~r/tympanus/~3/jN2zzrzblic/

Today we’d like to share a little menu animation with you. The idea is inspired by an effect that can be seen in this video, right at the beginning: a couple of differently sized boxes slide out and fill the screen. We thought this might be a nice idea applied to a menu using CSS Grid.

GridMenu_featured

The demo is kindly sponsored by monday.com: Knowledge Sharing System perfect for your team. If you would like to sponsor one of our demos, find out more here.

We use anime.js for the animations and imagesLoaded for preloading the images.

Attention: Modern CSS properties at work, please view in an updated browser!

We’ve created two different styles; have a look at the screenshots and check out the demos.

To open the menu, click on the + info in the bottom left corner.

GridMenu_01

GridMenu_02

We hope you enjoy this little menu and find it useful!

References and Credits

Images by Unsplash.com
anime.js by Julian Garnier
imagesLoaded by Dave DeSandro

Expanding Grid Menu was written by Mary Lou and published on Codrops.

Collective #402

Original Source: http://feedproxy.google.com/~r/tympanus/~3/D-yWNWKQWMY/

C402_WOTW

Inspirational Website of the Week: The Mads

Smooth animations with playful interactions made us pick “The Mads” this week.

Get inspired

C402_sponsor

Our Sponsor
Mobile Authentication Simplified

With 5 minutes and a few bits of config, you can build an app connected to OpenID, Active Directory, OAuth2 or SAML.

Learn more

C402_template

Tabler

A well designed dashboard template with a responsive and high quality UI.

Check it out

C402_JS14

JavaScript in 14 minutes

A fantastic little guide that will get you started with the most important JavaScript concepts in an interactive way.

Check it out

C402_storyboarder

Storyboarder

A great tool to create story visualizations in a quick and easy way.

Check it out

C402_cssplanets

Solar System Explorer in CSS

A fantastic demo by Jamie Coulter where you can explore the planets and moons of our solar system in pure CSS.

Check it out

C402_spatial

Spatial Hash Canvas Particles

An experiment by Jack Rugile where he explores a basic spatial hash to reduce the amount of collision calculations.

Check it out

C402_plot

Plot Parade

A d3.js powered artsy chart generator by Krisztina Szűcs.

Check it out

C402_egg

Eggradients

Ready to use, trendy background gradients in the shape of eggs and with witty names 🙂

Check it out

C402_test

Unit Testing in JavaScript

A tutorial by Tania Rascia where you’ll learn how to perform unit tests on JavaScript with Mocha by developing a calculator app in Node.js.

Read it

C402_lagradar

LagRadar

A tool for tracing when your app drops below 60fps. By Ben Birch.

Check it out

C402_vfonts

Variable Fonts

A great tool for discovering and trying variable fonts.

Check it out

C402_contents

How display: contents; Works

An article by Ire Aderinokun where she explains the interesting “contents” value of the display property in CSS.

Read it

C402_cssapi

Working with the new CSS Typed Object Model

Eric Bidelman explains the new API for CSS that allows to work with values in JavaScript.

Read it

C402_mobbin

Mobbin

Get inspiration for the latest mobile design patterns from this curated gallery.

Check it out

C402_snake

How to create the snake highlight animation with anime-js

Mikael Ainalem’s tutorial on how to create an SVG highlight line animation.

Check it out

C402_hotspot

Hotspot 3D

A great way to compare smartphones. Made with WebGL.

Check it out

C402_Gstyle

Google publishes a JavaScript style guide. Here are some key lessons.

Daniel Simmons summarizes the most interesting and relevant rules from Google’s JavaScript Style Guide.

Read it

C402_musicvideo

Video Music

An arpeggiator that is controlled by the average hue from your camera. By Jake Albaugh.

Check it out

C402_vunits

Introduction to Viewport Units

Jen Simmons shows you how CSS viewport units can be used in creative ways.

Watch it

C402_Bootstrap

Learn Bootstrap 4 for free

A great course with 10 interactive screencasts that will teach you Bootstrap 4. Read more about it in this article.

Check it out

C402_modules

ES modules: A cartoon deep-dive

Lin Clark takes a look at what problem ES modules solve and how they are different from modules in other module systems.

Read it

C402_aria

Creating Accessible HTML: A Crash Course in ARIA Landmark Regions

Genevieve Nelson explains some useful details of ARIA Landmark Regions.

Read it

Collective #402 was written by Pedro Botelho and published on Codrops.

The Secret Sauce for Creating an Amazing Product

Original Source: https://www.sitepoint.com/the-secret-sauce-for-creating-an-amazing-product/

This article was originally published on Monday.com. Thank you for supporting the partners who make SitePoint possible.

9 out of 10 startups fail. This apocryphal statistic is generally accepted as fact because the simple truth is, building a successful business is hard.

There are many obvious factors that have contributed to monday.com’s success as a product and business—hard work, luck, determination—but much of where we’ve arrived today is thanks to the less obvious lessons that our founders learned the hard way.

When launching a new business and looking for a product/market fit, many people ask questions like:

Do we solve a problem?
Do people understand our solution?
Are they able to implement our solution?
Do we add value?

This is a good start, but it’s not close to enough. In this post, we’ll share some of our co-founders Roy Man and Eran Zinman’s hard-earned insights on how they built a strong business. They’ve both been developing and building products since they were kids and have a lot of successes and failures under their belt.

Beautiful design and excellent code don’t matter (at first)

Roy: “I built two startups that succeeded in some aspects but failed to turn into viable businesses. They were really good looking products with an excellent code base, but that didn’t help. It also didn’t help that people who saw these products were amazed and loved them—something didn’t work and I had no idea what.

So I went to my good friend and mentor Avishai Abrahami, the CEO of Wix, and told him that he had to show me how to get it right. So I joined Wix in 2010 when they were a startup of 80 people.”

Eran: “After I got my degree, I started my own company building a search engine for user reviews, where you could get an aggregated view of all reviews. I rented 15 computers that crawled the web 24/7 and put them on the second floor of my mom’s house. I got a call from our Internet provider who were like, ‘Uh, what are you doing?’

“I made every mistake you can make as an entrepreneur. I thought that you have to build an excellent product before you raise money. We kept improving it and perfecting it for a whole year while I burned through my life’s savings. Finally, my account was frozen, and I had to call it quits.

Working with your intuition is always wrong. You look at other companies and success stories and try to reverse-engineer them. It’s never like that. I thought, ‘I’m going to create the next Google. When I launch, it’s going to be perfect.’ I had no idea that I should have shared it with users and gotten feedback really early on.”

Roy: “When I joined Wix, I couldn’t believe how bad their codebase was. Their product design was pretty childlike, and the UI was horrible. Nothing acted like anything you’d expect. The Head of Product back then was proud of the fact that their ‘color picker’ was designed by a color-blind person.

Continue reading %The Secret Sauce for Creating an Amazing Product%