There’s no debating the fact that including images on your website or mobile app draws the interest of users and leads to stronger engagement. For example, posts that include images produce 650 percent higher engagement than text-only posts, according to a WebDAM infographic. Use of attention-grabbing images is only going to grow. Consider that by 2018, 84 percent of communication will be visual, as noted in the infographic.

But delivering a consistent experience — and the optimal image — across a variety of desktop and mobile devices still remains a huge challenge for developers. They need to consider the size of images — since larger files take longer to download, eat up bandwidth and have a negative impact on website performance and user experience — as well as the type of device on which its being viewed and the graphic design in which the image is placed.

Efficient image management is the key when you want to improve engagement with visually appealing images, offer faster loading pages with appropriate image formats, and deliver a consistent experience across a wide range of devices that require different graphic layouts, resolutions and viewports.

The goals: to improve development productivity, speed your website to market, and find a way to avoid creating multiple versions of each image to support responsive design. To help you meet these goals, there are four best practices you should employ:

1. Optimize images for better performance

Image optimization involves delivering images with the smallest possible file size while maintaining visual quality. Doing this will save bytes and speed the performance of your website.

To select the optimal image, you must understand all the various factors that influence the image’s file size and quality, as well as consider what actions may result in unnecessary bandwidth use, such as wasteful browser-side resizing, delivering static icons one by one and using a single image size across all delivery mediums.

One of the major aspects of image optimization involves selecting the correct format to deliver to your users, and avoiding use of unnecessarily high image quality images. You should look for a solution that dynamically selects the most efficient format — either traditional JPEG, PNG and GIF, or modern formats, such as WebP developed by Google and JPEG-XR developed by Microsoft — and automatically adjusts the compression quality appropriately for every scenario.

With growing use of responsive design, you’ll need to make sure that you also are able to scale and crop images to fit any page layout, on any device.

2. Simplify your workflow

There’s no doubt you have a specific workflow associated with adding images to your site or app. In many cases, a designer will create artwork, then the developer requests multiple sizes for display on various devices and multiple formats for different browsers.

Then they have to store multiple versions and write the logic that enables the right version to be selected and delivered to every user. If you’ve ever done this, you know it takes a significant amount of time, and can slow your time getting to market.

Ideally, you should automate the process as much as possible. Any solution you use should enable you to create one high-quality version of an image, which can then be dynamically transformed and delivered in the proper version to suit the viewing requirements of every user and every device. By doing so, you will save time and resources by not requiring your designer to designer to create multiple versions of every image, or do additional work if you need the images transformed in any way.

3. Move to HTTP/2

Even though websites have changed dramatically in looks and style over the years – from simple text-based pages to advanced in-browser apps full of images and videos – the underlying HTTP protocol really hasn’t changed – until recently, with the approval of the HTTP/2 protocol by the IETF. Use of HTTP/2 can help you optimize the user experience on your app or website even more.

Generally this new HTTP protocol will improve website performance; reduce the amount of bandwidth required by supporting header compression; improve latency and make it easier for developers to use optimized connections, by eliminating the need for domain sharding and other subtle performance tricks.

The biggest difference you’ll see when moving to HTTP/2 is with image-heavy pages. And the more images on a single page, the more improvement that will be seen. The reason: With HTTP/2, instead of requesting images sequentially or creating many parallel connections, the browser makes a single connection to the server, and optimizes the requests to all images over a single connection.

4. Leverage CDNs for globally distributed caching

Content distribution networks (CDNs) are large, geographically distributed network of specialized servers that accelerate the delivery of web content and rich media to internet-connected devices.

CDNs provide many benefits to various parties, including web users, content and application owners and service providers. These networks support faster page loads, improving the user experience, which ultimately lowers abandonment rates, increases impression, improves conversion rates, and strengthens customer loyalty.

These best practices will enable you to create a seamless, end-to-end process for dealing with images, including uploading, organizing, viewing, storing, delivering and managing all of the images. With the Cloudinary solution, you can do all of this quickly and effectively from a single platform, which will further help reduce the integration hassle and chaos, while improving team collaboration.

To see for yourself how Cloudinary can help your company establish best practices, sign up today for free.

[— This is a sponsored post on behalf of Cloudinary –]

20 Superb New Website Templates from GT3Themes – only $17!

Source

The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the “Priority+ Navigation” concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it’s working out there in the real world.

Exposing long navigation menus on small screens is tricky. Hamburger menus are everywhere, although often discouraged. Displaying “just enough” navigation at every breakpoint can feel like an impossible task. This is especially true for template developers needing to accommodate an arbitrary number of menu items.

The Priority+ design pattern seeks to display as many items as possible given an arbitrary screen width, while making the rest accessible via a single click. I’ll go over the implementation I worked on at Goshen College that includes both dropdown menus and horizontal scrolling, which I’ve yet to find in the wild:

1. Horizontal scrolling with sticky item with pure CSS

Let’s start off with a simple horizontally scrolling menu:

See the Pen Priority+ nav with a sticky item by Micah Miller-Eshleman (@pranksinatra) on CodePen.

(For the curious, I’m using BEM naming conventions for the classes and PostCSS for some simple conviences like nesting and variables.)

Notice in the above demo how resizing the screen width above/below 480px toggles the stickiness of “GC Admissions”, the first menu item. This is achieved using two wrappers: an outer wrapper containing all menu items scrollable at 480px widths.

2. Adding buttons and dropdown menus

Here I’ve extended the prior demo with dropdown menus and click-to-scroll buttons. I needed some JavaScript to help with the scrolling functionality.

See the Pen Priority+ nav with dropdown menus and scroll buttons by Micah Miller-Eshleman (@pranksinatra) on CodePen.

A quick note on dependencies: I inline a partial classList, performance.now, and requestAnimationFrame polyfill for IE9+. Font Face Observer is used to detect when the Source Sans Pro font has loaded. jQuery helps make dropdown menus tab-navigable by listening to the :focus state of their child links using the focusin() and focusout() bindings. Please load it asynchronously (or find a lighter alternative).

2a. Click-to-scroll buttons

Buttons are important not just to enable horizontal scrolling for mouse-and-keyboard users, but to indicate that scrolling is possible. The concept was taken from the Apple.com iPhone page:

At it’s core, a button click scrolls menu items by updating the scrollLeft property of the relevant wrapper. This is then animated with an easing function to simulate smooth “momentum” scrolling.

You’ll also notice some logic for showing/hiding buttons, determining which wrapper to scroll, etc. To make these decisions, we listen to the menu’s horizontal scroll position and the window’s width (with debounced event handlers for performance).

2b. Dropdown menus on horizontal scroller

Building horizontal-scrolling dropdown menus turned out to be the most challenging part of this project.

The menu’s basic HTML structure consists of scrollable wrapper containing a list of menu items, some of which contain dropdown menus. Menu items are relatively-positioned and their dropdowns are absolutely-positioned so they scroll as a single unit but do not affect each other’s width.

An explicit height must be given to the wrapper so the dropdowns don’t get cut off. We then run into the issue of having a really tall wrapper that either pushes down or covers up subsequent content:

See the Pen Positioning scrollable wrappers by Micah Miller-Eshleman (@pranksinatra) on CodePen.

The solution I opted for was keeping the menu collapsed until it’s interacted with, at which point we transition immediately to state #3 (and vice versa). This is accomplished by listening for the mouseover and touchstart events on the component and the wrapper.

The demo is purposefully simplified with a single wrapper. For multiple wrappers, I actually toggle the overflow property (hidden/visible) on the .nav component instead of the height of individual wrappers, but it’s the same underlying concept.

If you find more elegant ways of doing this, I’m all ears!

---

A Priority+ Navigation With Scrolling and Dropdowns is a post from CSS-Tricks

I rounded up the ones I know about, mentioned a bunch of considerations you might want to think about when choosing, and linked up some demos.

And don’t forget you can create them by yourself, too!

Direct Link to Article — Permalink

---

SVG Charting Libraries is a post from CSS-Tricks

Whether or not you celebrate Halloween, there is something magical about that special spooky day, surrounded by mystery, horror, scare and trick-or-treat candies for kids and adults alike.

The modern-day spirit of Halloween shines through in its tradition; everyone can dress up like a monster, superhero, or nearly anything else. It allows our imagination to unfold and lets us be whatever we want to be — for that one very special day (and night).

The post Best Of Halloween: All Things Spooky appeared first on Smashing Magazine.

At first, I was tempted to use the heading “The Blogger’s 101”, as writing about bloggers seems to be the new black. I decided not to because I failed to see the difference. Whether you like to call it blogging or if you simply prefer the term “writing” is irrelevant. It doesn’t matter if you are or believe to be a blogger, editor, author or writer. In the end, all of the above do the same thing: they write. Of course, I hope they don’t all write about the same thing. And this is already one part of today’s article.

SEO: The Scourge of the Writing Guild

“Finding Topics Made Easy.” I could’ve just called it “How to Resolve a Writer’s Block.” This heading probably would’ve attracted more visitors, even though it’s not as close to the actual topic. Well, I probably didn’t think about SEO enough. Now it’s too late. By the way, about SEO. I’m about done with hearing this abbreviation. The correct placement of keywords and so forth.

How do book authors do it? Do they also write for search algorithms? No, they don’t. At least as far as I know. Surprising, eh? Books are still sold and read. I’ve also never heard of a discussion on ads in books and using ad blockers to avoid them. Is the whole SEO thing a little exaggerated after all?

Or maybe I should differentiate a little more. SEO is a more important for some online publishers than it is for others. If I were working in the marketing department of a toilet brush producer, with the job to create high-ranking content, I’d probably try to orientate myself by SEO all the time. Let’s be honest; I wouldn’t have much compelling content to offer anyways. So I would attempt to at least bring my company high up into the SERPS. This requires texts that are very different from the ones that a blogger or editor wants to write.

In the following, I don’t want to talk about the miserable people that spend their days trying to make a mass product stand out of another, almost identical mass product. So when your profession is to write about toilet brushes, because your boss demands it, you’re unlikely to gain much from this article.

When the Topic Flow Turns Into a Thin Trickle

However, if you are one of the people that have to produce content every day, but still have a certain amount of freedom when it comes to the topic, finding these topics over and over again is most likely one of your biggest issues. What do you consider attractive enough for you to believe that your readers want to read about it? At the start of your writing career, this is a minor issue. In the beginning, you should be bubbling with ideas.

By the way: if you are at the start of your career, and not bubbling with ideas, you should reconsider it. It won’t become any easier.

After a while, you’ll realize that

• there’s a fierce competition on the market of readable content. In other words: there is no lack of content, and there are plenty of articles on every topic.
• you’ve already written about everything you wanted to.
• your readers are becoming more demanding, because their time isn’t free, even if your articles are.

What can you do now? There’s a rather high risk that these insights will block you in different ways. Your inner filter will let a shrinking amount of ideas slide through; your writing flow runs dry. Should I recommend you to just turn off your inner filter? No, that wouldn’t be good either.

If it’s Simple, Anyone can do it

This would lead to your texts becoming more random, and more replaceable by other writer’s efforts. Of course, there are online offers, and even entire magazines, that have the effrontery to only publish me-too-content. Sometimes, the Techmeme-Techriver is directly copied, and published in another language.

Of course, you can do that, but it sucks. Do you want that? The texts created this way are the ones that will lead to machine intelligence doing the writer’s job in the future. Completely disregarding the fact that, even today, this type of text will only score you a pittance. You’d have to work to the absolute max to make ends meet. Apparently, this makes the entire problem just grow bigger.

Your readers dislike random content just as much as you do. Why should they visit your page when three dozens of other blogs and magazines have already reported on the same things that you post? Certainly, this would be the easier way for you at first. But keep in mind: if it’s easy, anyone can do it. In the long run, even that will become difficult, as it will create a competition, which will not be won by the one with the better words, but by the one with the better financial situation.

For a while, it looked as if list posts were the best thing since canned beer. In fact, this was true, but only until literally every writer out there started creating lists. Today, there’s still a market for list posts, but its supply is only superficial. Take a look at a basic list post. The writer decides on a proper search term, enters it into Google and turns the first page of results into an article. Your readers can use Google on their own, though.

What to do Now?

So how do I find topics that make me stand out of the masses, but still stay close to interests of an actual audience? I do have to mention this limitation, as otherwise, you could also be pretty much the only one in your branch if you decide to write about tonsil stones as your main topic.

List Posts Still Work, If…

When you enjoy creating lists, you can still do that. However, you should avoid simple Google results. For example, when you promise to deliver the “10 Best Websites for Project Management”, you should do just that. However, the previously mentioned hazard called SEO may just lead you to list up the first ten search results of the Californians from Mountain View. That’s the ranking round you’d join if you do so. Sounds paradoxical, doesn’t it?

If you take it seriously, list posts require much more effort than articles that are not compiled of multiple products or services. You promise an evaluation. Thus, you should be able to evaluate. To do that, you won’t get around looking at as many different alternatives as possible, to be able to make a qualified choice.

It’s advisable to write about your selection process in the article, to let your readers judge how you arranged your choice, and for what reason certain products or services ended up in your overview.

It’s also a good idea to list potential list members that didn’t make it on there in the end. Ideally, you even mention why the respective candidates had to stay off the list.

Sounds like lots of work? It is just that. However, this will set you apart from about 99 percent of all the other list creators. This is not the standard procedure. But, from the reader’s point of view, this is not understandable. They will ask themselves why they should blindly follow your evaluation, without knowing how and why it came out this way. Just look at a couple of list articles on the web, and you’ll see what I’m talking about.

It is quite easy to find ideas for list articles, by the way. Look at what the big publications do, and do it better. This takes effort, but it’s not difficult.

Extensive Considerations Instead of Short Notes

As you’re reading here on Noupe, I’ll assume that you are quite receptive to IT. So let me choose an example from this section.

Every hour, new tools for web designers and developers flow into the web. It doesn’t matter if they are small or large JavaScripts or any other kind of tool. The report on these topics often goes as follows: the respective author picks the new release from some type of context, like Producthunt, and describes it in three paragraphs.

This would be okay if the article wouldn’t just cover information on the developer and the license – both of which are missing often enough as well -, but at least show how the tool works, and if there are other, maybe even better alternatives for the same application area. However, to do that, the writer would have to actually look into the topic, and wouldn’t be able to just rewrite the developer’s short intro on Github. Phew, work.

The randomness of the articles created this way will certainly prevent more than a handful of designers and developers from reading them. Do it differently. Pick the tool carefully. Don’t take any random one just because it pops up somewhere in your news stream. Explain what it does and why you recommend it. Publish a complete article.

These topics are found in your filter bubble, just like all the others. The only difference is a stronger preselection and a more in-depth report.

Neutral Observations Don’t Have to be Boring

When it comes to potentially controversial topics, you’ll also have an easy time finding a way to stand out. Most writers already limit themselves to one perspective before starting to write. And that perspective will be held onto throughout the article. If the reader is lucky, he’ll know that there are other views on the topic, letting him go in-depth on his own. If not, he’ll be left with superficial information, which basically means he’s left uninformed.

Thus, you should make it your habit always to look at all sides of a topic. Also, display opinions that may not correspond to your own views. Neutrally show all different views surrounding question x, and which reasoning is given for each standpoint. In the end, choose one of the views, or even develop your own, and explain why you got to this opinion.

For one, you’ve now extensively worked on your topic, and you’ve also brought in your own evaluation. Your own opinion is important; the entire business of social curation only works based on the evaluation of those that others want to rely on.

The nice thing about this approach is, that you can simply jump onto current topics, and make them your own with the method of all-around display. You’ll often find other perspectives in the comments of articles that are written in a very one-sided fashion. You’ll often see passionate comments as to why the author is completely wrong, and how it should actually be defined.

You’ll also find this type of interaction in social media. For the quick success, it’s often worth digging up shitstorms and bringing them into context in a neutral, factual way. You’ll be surprised how easy it is to set yourself apart from the rest this way. Unfortunately, objectivity is no valuable asset in today’s media anymore. This doesn’t apply to the readers, though. They enjoy getting to see all sides of a topic.

Conclusion: Essentially, it’s not the search for topics that’s difficult. Most writers just don’ approach it freely enough. When you keep an open mind and view and are not afraid of work, almost nothing can happen to you. Topics are like money on the street. They lay around. You just need to bend down to pick them up.

A couple of months ago I wrote about using WebPageTest, and more specifically its RESTful API, to monitor the performance of a website. Unarguably, the data it provides can translate to precious information for engineers to tweak various parts of a system to make it perform better.

But how exactly does this tool sit within your development workflow? When should you run tests and what exactly do you do with the results? How do you visualise them?

Now that we have the ability to obtain performance metrics programmatically through the RESTful API, we should be looking into ways of persisting that data and tracking its progress over time. This means being able to see how the load time of a particular page is affected by new features, assets or infrastructural changes.

I set out to create a tool that allowed me to compile and visualise all this information, and I wanted to build it in a way that allowed others to do it too.

The wish list

I wanted this tool to be capable of:

• Running tests manually or have them triggered by a third-party, like a webhook fired after a GitHub release commit
• Running recurrent tests with a configurable time interval
• Testing multiple URLs, with the ability to configure different test locations, devices and connectivity types
• Grouping any number of performance metrics and display them on a chart
• Defining budgets for any performance metric and visualise them on the charts, alongside the results
• Configuring alerts (email and Slack) to be sent when metrics exceed their budget

Before proceeding any further, I have to point out that there are established solutions in the market that deliver all of the above. Companies like SpeedCurve or Calibre offer a professional monitoring tool as a service that you should seriously consider if you’re running a business. They use private instances of WebPageTest and don’t rely on the public one, which means no usage limits and no unpredictable availability.

The tool I created and that I’ll introduce to you during the course of this article is a modest and free alternative to those services. I built it because I don’t have a budget that allows me to pay a monthly fee for a performance monitoring service, and I’m sure other individuals, non-profit organisations and open-source projects are on the same boat. My aim was to bring this type of tooling to people that otherwise might not have access to it.

The idea

The system I had in mind had to have three key components:

1. An application that listens for test requests and communicates with the WebPageTest API
2. A data store to persist the test results
3. A visualisation layer to display them, with a series of graphs to show the progress of the various metrics over time

I really wanted to build something that people of all levels of expertise could set up and use for free, and that heavily influenced the decisions I made about the architecture and infrastructure of the platform.

It may seem like an unusual approach, but GitHub is actually a pretty interesting choice to achieve #2 and #3. With GitHub’s API, you can easily read and write files from and to a repository, so you can effectively use it as a persistent data store. On top of that, GitHub Pages makes the same repository a great place to serve a website from. You get a fast and secure hosting service, with the option to use a custom domain. All this comes for free, if you’re okay with using a public repository.

As for #1, I built a small Node.js application that receives test requests, sends them to WebPageTest, retrieves the results and pushes them to a GitHub repository as data files, which will then be picked up by the visualisation layer. I’ve used this approach before when I built Staticman and it worked really well.

The diagram below shows the gist of the idea.

Oh, at some point I needed a name. I called it SpeedTracker.

You can see it in action here or jump straight into using it by following this link. If you want to know more about how it works under the hood, what it was like to build it and where I see it going, then read on.

Building the dashboard

I’m a big fan of Jekyll. For those of you who are not familiar with it, Jekyll is a program that takes structured content from files in various formats (Markdown, JSON, YAML or even CSV) and generates HTML pages. It’s part of a larger family of static site generators.

It’s particularly relevant to this project because of its native integration with GitHub Pages, which enables any repository to automatically build a Jekyll site every time it receives new or updated content and instantly serve the generated HTML files on a designated URL. With this in mind, I could make the API layer write the test results to JSON files and have Jekyll read and output them to a web page.

By storing the data in a GitHub repository, we’re putting people in control of their data. It’s not hidden somewhere in some service’s database, it’s on a free, open repository that can easily be downloaded as a ZIP file. And by using JSON, we’re choosing a universally-accepted format for the data, making it easier to re-use it somewhere else.

To cater for the requirement of being able to test multiple sites with different devices, connection types and locations, I introduced the concept of profiles. Every test must run against a profile, which consists of a file (see example) that holds information about the URL to be tested and any parameters to be passed to WebPageTest.

In this file, you can also define an interval, in hours, at which tests for the given profile will be repeated. You can change this value, or remove scheduled tests altogether, by changing the interval property in the profile file.

The challenge now was how to deliver results for multiple profiles and offer some basic date filtering functionality (like being able to drill down on results for the past week, month or year) from a static site backed by a bunch of JSON files. I couldn’t simply have Jekyll dump the entire dataset to a page, or the generated HTML files would quickly get prohibitively large.

Jekyll meets React

I started by organising the files in a folder and file structure so that test results were grouped by date and profile. Jekyll could cycle through this structure and generate a list of all the available data files for each site, along with their full paths.

With that list in place, I could build a client-side application that given a profile and a date range, could asynchronously fetch just the files required to display the affected results, extract and compile the various metrics and plot them on a series of interactive charts.

I built that using React.

Performance budgets

A good way to get a team in the right mindset about web performance is to define budgets for one or more metrics and abide by them religiously. Tim Kadlec explains it in this article a lot better than I ever could, but the basic idea is that you specify that your website must load in under a certain amount of time on a certain type of connection.

That threshold must then be taken into account every time you plan on adding a new feature or asset to the site. If the new addition takes you over the budget, you have to abandon it, or otherwise find a way to remove or optimise an existing feature or asset to make room for the new one.

I wanted to give budgets a prominent place in the platform. When creating a profile, you can set a budget for any of the metrics captured and a horizontal line will show in the respective chart alongside the data, giving you a visual indication of how well your site is doing.

It’s also possible to define alerts that are triggered when any of the budgets is exceeded, so that you and your team can instantly be notified via email or Slack when things aren’t looking so great.

A centralised service

The core idea behind this project was to make this type of tooling free and accessible to everyone. Making it open-source is obviously a big first step, and the fact that you can use free services to deploy both the front-end (GitHub Pages or Netlify) and the back-end (Heroku or now) definitely help. But still, I felt that having to install and deploy the API layer would create barriers for less experienced people.

For that reason, I built the application in such a way that a single instance can be used to deliver test results to multiple sites and GitHub repositories, so effectively it can work as a centralised service that many people can use. There’s a server running a public instance of the API, available for anyone to use for free.

This means that all you need to get started is to install the Jekyll site on a GitHub repository, add the username speedtracker-bot as a collaborator, configure a profile and a couple of other things and you’re set.

The screencast below can guide you through the process.

Where to go from here

If this tool succeeds at helping some of you improve the performance of your sites, I’ll be very happy. If you use it and decide to donate some of your time to help make it better for everyone, I’ll be even happier!

Straight away, I can think of some things I’d like to see happening:

• Add support for annotations on the charts to mark specific events, like an infrastructural change or important feature release
• It’s already possible to have a GitHub webhook triggering a new test, but we could go a step further and actually read the contents of the webhook payload to create annotations on the charts to mark a commit or release
• Make it easier to display custom metrics
• Add support for scripting
• Better documentation and tests

If you feel you can help, by all means pitch in. If you have any questions or issues in getting started, send me a tweet.

Happy tests!

---

Building a Website Performance Monitor is a post from CSS-Tricks

Wenting Zhang created 512 (!) icons with just HTML and CSS. Usually just one element, the occasional extra element thrown in, and drawn with things like borders, backgrounds, and box-shadows.

Looks like the same bug bit Wenting that bit Nicolas Gallagher. Taking the shapes that CSS can make and combining them to draw.

Predictably, I’m going to point out that SVG would be a more-ideal tool for this. Less fragile, easier to maintain and style, scaleable, etc. I mention that not to take away from this impressive project, but because I’d love to see a similar project where the icons are drawn with hand-crafted paths and golfed.

Direct Link to Article — Permalink

---

CSS ICON is a post from CSS-Tricks

In this tutorial, we’re going to learn how to create custom brushes in Adobe Photoshop.

Download Adobe Photoshop.

Read More at Create Custom Brushes in Photoshop

In this month’s edition of what’s new for designers, we’ve included color tools, icon sets, automation tools, design tools, printables, Sketch plugins, and more. And as always, we’ve also included some awesome new free fonts!

Almost everything on the list this month is free, with a few high-value paid apps and tools also included. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @cameron_chapman to be considered!

Color Library

Color Library lets you separate the colors in an image to print with colors other than CMYK (or RGB). Pick two, three, four, or five-color palettes.

Paperworks

Paperworks lets you keep all of your receipts, invoices, and payments in one place. It even automatically scans your inbox for things to add.

Kap

Kap is an open-source screen recorder that uses web technology. It’s easy to use and fast, plus it’s extensible.

Hero Patterns

Hero Patterns is a collection of repeatable SVG patterns for backgrounds on your digital projects. Select foreground and background colors prior to downloading.

Fireflies.ai

Fireflies.ai is a Chrome extension that acts as a personal assistant for your daily tasks. It has natural language processing to automatically identify and suggest relevant tasks.

Push by Zapier

Push by Zapier is a Chrome extension and app for building small, single-purpose workflows that live inside Google Chrome.

Disrupt Cards

Disrupt Cards are like a Silicon Valley-inspired game of Cards Against Humanity, with references and situations that will likely only make sense to those in the world of tech.

Internet Curated

Internet Curated is a collection of more than 100 resources on the web. There are collections for apps, design, business, development, inspiration, and more.

Mastodon

Mastodon is a free, open-source social network server that’s decentralized. It allows anyone to build a social network seamlessly.

Figma

Figma is an interface design tool that offers up real-time collaboration tools. It works for designing everything from icons to responsive layouts.

Break

Ever started a project and then realized 8 hours later you were still sitting at your desk, without taking any breaks? Break will remind you to take frequent breaks from your computer, which in turn increases productivity and reduces strain on your eyes, joints, and hands.

UI Movement

UI Movement is a curated collection of animated UI designs, including everything from chat to menus and more. You can also subscribe to their weekly newsletter to get the best UI inspirations delivered to your inbox.

React Color

React Color is a collection of color pickers from Photoshop, Sketch, Chrome, Github, and more.

FramerJS Club

FramerJS Club is a showcase of FramerJS prototypes and articles. There are examples of tools, inputs, modules, games, and more.

Open Color

Open Color is a color scheme for UI design that’s provided as CSS, SCSS, LESS, Stylus, Adobe library, Photoshop and Illustrator swatches, and Sketch palette.

Greyprint

Greyprint is a starting point template for icons, symbols, and glyphs. It includes pre-made styles (for Photoshop, Illustrator, Sketch, and Affinity Designer) to speed up your workflow.

Affinity Designer 1.5

The newest version of Affinity Designer brings a host of UI, UX, and web design tools to the app, including tools for responsive designs.

Sneakpeekit

Sneakpeekit is a set of printable grids for design wireframing. There’s a precision grid, browser and grid, 2-up and 4-up grids, and more.

TheDirectory.io

TheDirectory.io is a directory of digital design agencies. It also includes tools to find a job at one of the agencies listed.

Sketchode

Sketchode is a Sketch plugin that provides graphical representation of any project, and aims to smooth the hand-off from designer to developer.

90 Free Line and Solid Icons

These 90 Free Line and Solid Icons are available for both Sketch and Illustrator. They include things like magnifying glasses, hearts, stars, message icons, and more.

The Vox Media Designer’s Toolkit

The Vox Media Designer’s Toolkit is a look a the tools the team at Vox uses most often to brainstorm, moodboard, design, prototype, and test.

Cat Ipsum

Need some filler copy? Love cats? You’re in luck with Cat Ipsum then!

Jpeg.io

Jpeg.io lets you convert any major image format (jpg, png, gif, svg, bmp, eps, psd, tiff, and more) into a highly optimized JPEG file.

Citysets

Citysets is a growing collection of free city-based icon sets. So far it includes, London, New York, Paris, and Sydney.

Ghostlab

Ghostlab lets you connect any number of browsers and devices for synchronized browsing. It automatically tracks changes to your local files and refreshes them on all connected clients.

Enformed

Enformed is an easy way to manage HTML forms, with no PHP, Javascript, or server-side coding.

TransparentStartups

Transparent Startups lets you see how much revenue a variety of tech startups are actually making on a monthly basis. It includes data from 39 companies, some you might not recognize, but also ones you probably will (Buffer, ConvertKit, etc.).

Qlutter

Qlutter is a collaboration tool for teams that helps you plan, measure, and reach you own long-term goals.

Community Bot

If you use Slack for communicating with a community, then you’ll want to check out Community Bot for your community management.

Google Noto Fonts

Google Noto Fonts is a family of typefaces that support all languages with a harmonious look and feel. It has multiple styles and weights and is available free to all.

Nomes

Nomes is a free font with stark differences between thin and thick stroke lengths that make it great for headlines, posters, flyers, and more.

Alva

Alva is a minimalist geometric font for posters and headlines, that solid character glyphs with accent lines.

Wild Youth

Wild Youth is a hand drawn brush script font that’s modern with a distinct influence of adventure and nature.

Devious

Devious is a handmade font with a simple, antique feel.

Cornerstone

Cornerstone is a straightforward modular font that’s perfect for sports-related or urban designs.

Monophone Grunge

Monophone Grunge is a fancy, vintage-style free font that’s great for headers and branding.

Buffalo

Buffalo is a free monoline script font with a vintage look and feel.

Humger

Humger is a free grunge sans serif display font. It includes uppercase, narrow glyphs and is free for personal and commercial use.

Hane

Hane is a free vector font that’s inspired by exciting city life, with architecturally inspired glyphs.

Gorgeous Flower Power Graphics Mega Bundle – only $25!

Source

It has already become a tradition that each September we cling to the screen and enjoy Apple’s annual fall keynote. The event where the Goliath of the IT industry presents its new, skillfully upgraded and re-imagined gadgets. This year was no exception. Everyone was eager to see the flagship device in the iPhone series, aka iPhone7, which has been long talked about. The rumors around it were incredible; surprisingly, some of them turned out to be true, like the absence of the headphone jack that evoked mixed feelings; or the water-resistant body that was actually a long hoped-for improvement.

While the enhancements mostly have touched on the functionality, capabilities and user experience, the design and cosmetic part almost stayed the same. Iphone7 shamelessly takes after its predecessors iPhone6 and iPhone6 Plus, so there were no surprises except for some minor changes in exterior and official color range (here we should say goodbye to Space Grey and welcome Jet Black). Last but not least, it comes with the latest release of the iOS operating system that brings some changes to system features.

If you are into all that and look forward to dealing with the new product but still waiting for your role model thereby craving for some valid mockups to present your applications in brand-new frames then we can help you. We will save you from the hassle of transforming renders of iPhone 6 into iPhone 7 and making adjustments to iOS 9 in order to match it to iOS 10. We provide you with ready solutions that boast of high quality and meticulous attention to detail. Our collection of the finest incredibly realistic iPhone7 mockups and a handful of iOS10 UI packs will help you to proceed to your work of crafting interfaces and creating presentations that will be tailored to the new Apple product, looking up-to-date as ever. Use them as starting ground, base kit, sample or just a source of inspiration.

Black Matte iPhone 7

Creator: Virgil Pana
License: Declared as Free, no proper license given.

iPhone 7 Mockup for Sketch and Photoshop

Creator: Roberts Ozolins
License: Declared as Free, no proper license given.

iPhone7 Plus

Creator: Modisana
License: Declared as Free, no proper license given.

Realistic Black iPhone 7 Plus Mockup

Creator: Anthony Boyd
License: Free for commercial and personal use.

Printable iPhone 7 Templates (iOS 10)

Creator: Matthew Stephens
License: Declared as Free, no proper license given.

iphone 7 After Effects Mockup Template

Creator: Issara Willenskomer
License: Declared as Free, no proper license given.

8 Photorealistic iPhone 7 Mockups

Creator: COBE
License: Declared as Free, no proper license given.

iPhone 7 & 7 Plus Jet Black PSD Mockup

Creator: Graphicboat
License: Declared as Free, no proper license given.

iPhone7 Wireframe

Creator: Oleg Sukhorukov
License: Declared as Free, no proper license given.

iPhone 7 Jet Black Free Mockup [PSD]

Creator: Ramotion
License: Declared as Free, no proper license given.

Wechat App for iOS10

Creator: MONK DESIGN
License: Attribution-NonCommercial-NoDerivatives.

The Ultimate iOS 10 UI Kit

Creator: DesignHooks
License: Open Source.

iPhone 7 PSD Jet Black Mockup

Creator: Pixeden
License: Declared as Free, no proper license given.

iPhone7 Sketch Mockups

Creator: Rahul Das
License: Declared as Free, no proper license given.

iOS10 Music and News Concept

Creator: Bhasker Sharma
License: Declared as Free, no proper license given.

iPhone7 Design Mockups

Creator: Modisana
License: Declared as Free, no proper license given.

Realistic Gold iPhone 7 Plus Mockup

Creator: Anthony Boyd
License: Free for both personal and commercial use.

Home App, iOS 10 – Start Screen in Sketch 3

Creator: Egor Miller
License: Attribution-NonCommercial-NoDerivatives.

iOS 10 Notification Widget PSD Template

Creator: chipotoole
License: Declared as Free, no proper license given.

iOS10 GUI

Creator: Great Simple Studio
License: Declared as Free, no proper license given.