Get the list of 10 Tools We Use When Designing for WP That Cut Our Work Time in Half (by the Way, 7 of Them Are Free).

RESOURCE #1: 10 TOOLS WE USE WHEN DESIGNING FOR WP https://www.codeinwp.com/blog/codeinwp-nn-99234h23m362/ Thank you for subscribing! HERE'S THE CONTENT WE PROMISED YOU: 10 TOOLS WE USE WHEN DESIGNING FOR WP THAT CUT OUR WORK TIME IN HALF (BY THE WAY, 7 OF THEM ARE FREE) START READ · · · · 1 · · · · STYLE TILES: style-tiles Description: Style Tiles is a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Why we use it: Style Tiles lets us easily display style ideas to our clients. Instead of creating an entire webpage every time, we can just display the general theme to our client in a detailed, but not too detailed, framework. With Style Tiles, we simply iterate the Tiles instead of the entire website, streamlining the process, but still resulting in an awe-inspiring end product. This also helps when creating a responsive site as you don’t have to create multiple formats over and over again, as all formats will share the theme presented by the Style Tiles. style-tiles-2 style-tiles-3 style-tiles-4 · · · · 2 · · · · PIXEL DROPR: pixeldropr Description: Pixel Dropr lets you create, use, and share your pixel collections in an instant. You can download free and premium refill kits at the Refill Store and drag and drop elements into any Photoshop document. Why we use it: Pixel Dropr allows us to keep track of elements (e.g. icons, buttons, UI kits, photos) through collections, and easily place them into other Photoshop documents. If we make an icon for one page, we can easily just drag-and-drop it onto another page just by finding it in its respective collection. We can also buy pre-made refills (collections of Photoshop elements) in the Refill Store. This helps because instead of importing every element individually or redesigning it, we can just drag-and-drop it from a well organized plugin. pixeldropr2 · · · · 3 · · · · ICOMOON: icomoon Description: The IcoMoon App lets you browse and edit thousands of icons and generate icon fonts. Premium services are available with Amazon Web Services powered hosting. icomoon2 Why we use it: IcoMoon is one of the best resources for icon fonts. With 3,500+ available icons, we can always find the one we need. IcoMoon offers three main services: Vector Icon Packs, The IcoMoon App, and font hosting. The Icon packs are fully scalable and come in multiple formats. They come with a 16×16 design grid, so they’re easy to edit with software like Photoshop. We can then download and edit them, import our own icons, or make an icon font. · · · · 4 · · · · FONT FINDER FOR FIREFOX AND WHATFONT FOR CHROME: whatfont font-finder Description: Font Finder and WhatFont let you easily analyze fonts on a webpage. Simple idea, but really useful. Just select the text, and the font information shows up. Why we use it: Font Finder lets us analyze text just by highlighting it and then right-clicking. With Font Finder, we can see the color code, background color, font family, font size, line-height, vertical-align, and virtually every other piece of information possible. WhatFont works very similarly. Hovering over some text gives us an insight into the font parameters, and left-clicking brings up the font family, font size, line height, and a visual sample in a static window. · · · · 5 · · · · UNSPLASH: unsplash Description: Unsplash is a resource for non-copyright, beautiful, high-resolution photos. These photos can be used without worry of breaking copyright. Ten new photos are posted every ten days. Why we use it: Unsplash is the absolute best resource for copyright-free high resolution photos. The photos on Unsplash are stunning. You can find there everything from beautiful landscapes to well-timed photos of people in the city. All the photos are CC0, meaning they have been dedicated to the public domain and all rights have been waived. There really isn’t any better resource for non-copyright photos. · · · · 6 · · · · COLOR.: color Description: Color. is an easy-to-use tool that helps you easily find the color you’re looking for, just by moving your mouse around the screen. Clicking saves the color to the side for reference. Why we use it: Sometimes it can be hard to find that perfect color. With color., we can find exactly what we’re looking for, just by moving the mouse around the screen. Back and forth changes the hue. Up and down changes the lightness. Scrolling changes the saturation. A simple click saves the color in a box on the side. The hex code for that color is shown in that box, so you can use it when you need it. Instead of having to hunt through a spectrum, we can just move the mouse around until a color catches our eye. · · · · 7 · · · · BOOTSTRAP: bootstrap Description: Bootstrap is a front-end framework for developing responsive, mobile first projects on the web. Bootstrap includes support for the two most popular CSS preprocessors: Less and Sass. It works on all devices with one code base. Why we use it: Bootstrap makes the development process a lot easier and more efficient for us. It works for basically all devices and projects. Instead of having to use multiple frameworks, Bootstrap lets us use one framework over multiple devices. It also provides us with extensive and beautiful documentation with hundreds of live examples, code snippets, and more. bootstrap2 · · · · 8 · · · · JETSTRAP: jetstrap Description: Jetstrap is a 100 percent web-based interface building tool for Bootstrap. Projects are responsive, and can be built lightning fast with a drag-and-drop interface and full access to HTML and CSS. Why we use it: Jetstrap lets us build wherever, whenever without having to worry about downloading anything. It lets us build responsive, fast Bootstrap projects efficiently and on the go. Instead of digging through docs, we can just grab snippets of clean markup and quickly use all, even the complex components. We can design with a drag-and-drop interface and/or HTML/CSS/JS. We can also export the project to HTML. Once we’ve completed a draft, we can test it with the push of a button. We can also quickly and easily share the project with others, letting clients and team members see progress in real-time. · · · · 9 · · · · PLACEIT: Description: App screenshots are always better in context. PlaceIt processes your screenshots and places them onto example devices, such as iPads, iPhones, laptop screens and about a dozen more. placeit Why we use it: A picture is worth a thousand words, especially with an app or website. That’s why every good app or website advertisement includes a screenshot. But a regular screenshot is just boring. That’s where PlaceIt comes in. With it, we can take that screenshot and display it on a relevant device in a relevant environment. For instance, with a website about accounting, it would make sense to display the site on a laptop in an office. With PlaceIt, we can do that easily. All we have to do is choose a stage type, device and background, upload the screenshot we want, and the rest happens automatically. · · · · 10 · · · · FONT AWESOME: fontawesome Description: Font Awesome is an icon font designed for Bootstrap. It includes 369 infinitely scalable icons made with vector graphics, doesn’t require JavaScript, controllable CSS, and works well on retina-displays and desktops. Why we use it: Icon fonts are awesome. Font Awesome makes them even more awesome. With hundreds of scalable icons in one Bootstrap-compatible font, it’s definitely the most efficient icon font available. We can take each icon, change some elements about it with CSS and scale it as much as we want without losing quality. The icons also work great on desktops and retina displays, since they’re vectors. One of its other big perks for us? It’s free for commercial use. fontawesome2 FEEL FREE TO POKE AROUND SOME MORE Since you’re already here, we encourage you to poke around the site some more to find even more interesting info. —» The blog is the best starting point «—. RESOURCE #2: 9 MORE WAYS TO CHANGE THE WAY WORDPRESS WORKS WITH FUNCTIONS https://codeinwpblo-vertigostudio.netdna-ssl.com/wp-content/uploads/2014/12/9-MORE-Ways.pdf RESOURCE #3: AN EXAMPLE PROPOSAL YOU CAN USE WHEN PITCHING YOUR WORDPRESS CHECK-UP PACKAGE TO CLIENTS