Showing posts with label Dev & Design. Show all posts
Showing posts with label Dev & Design. Show all posts

Friday, February 10, 2017

Top 10 Free Design Tools For Non-Designers

Top 10 Free Design Tools For Non-Designers


TINYPNG
Compressing your images

CANVA
Design software for web and print

PIXLR
Online photo editor

FREEPIK
Free images

PIXABAY
Free images

GIPHY
Gif library and maker

ColorZilla + WhatFont
Design chrome extensions

FontPair
Helping choose the right font

SKETCH
Anti-Photoshop

ICON STORE
Free beautiful icons


Saturday, February 28, 2015

How to sell your design ideas to clients

Designers sometimes don't understand one thing about communicating design decisions to clients. In order to sell your ideas you need to, literally, sell them. You need to prove they can bring tangible benefits to the business and act as a means of selling stuff.
In convincing your clients you should forget the design itself, break the habit of arguing about the irrelevant and focus solely on things that are important to your client.

After all, we all usually strive for the same result but communicate in very different languages, see things differently and, what is even worse, don't trust each other - that is why agencies have account managers and sales managers onboard.
In this article, I laid down some of the core principles, which, I believe, can help designers - especially freelancers - to sell design ideas better, and above all, to find a common language with their clients.

01. Speak in a language of your client and act, literally, like a salesman


Your client is not interested in design trends and other design-related stuff, which you designers are crazy about. The one who hires you cares about one thing: How your design will earn them money.
As a result, when presenting your design ideas to clients, answer them the questions: How it will help to increase a conversion rate, make visitors opt in, reduce bounce rate and etc., rather than telling how your ideas meet the latest design standards.
That is said, you should act like a salesman. You must sell your design. And in doing so, you should focus solely on the tangible benefits your work will bring to the client.
If you are a freelancer and don't have account managers and salesmen behind your back, my suggestion for you is to take some time and read a book on business-to-business sales. This will definitely open your eyes and make you better understand how to communicate and sell your ideas to very different kinds of people.

02. Gain credibility by backing up your ideas with numbers and examples


Most decisions we make are heavily affected by different kinds of cognitive biases and irrational prejudices. For some reason, we usually just can't make rational decisions.
Decision making in design is even harder because you can't measure everything. You just can't put variables into some kind of formula and get the right answer straight away. Design always leaves space for the unknown. That is why credibility plays here a large role in convincing people.
The only way to gain credibility is either to have job titles ending up with at Facebook, at Dropbox in your resume, or to arm yourself with statistics, researches and design examples from the big players.
In case you haven't worked at Facebook yet, gather as much statistical information as possible. Find a scientific explanation for every major decision in the design. Why have you chosen that palette of colors? Why do you prefer the one-page layout over the traditional one?
Don't worry if you can’t find numbers to substantiate some of your decisions. In this case, find well-recognized players in the market that have something more or less similar to what you recommend for the client. After all, it's hard not to trust the biggest.

03. Show in the right context


Designers sometimes think they can make the client fully understand their ideas and see "the bigger picture" from a few sketches, or even a few words.
Unfortunately, most people who work in the executive roles don't have the ability to see things as you do. As a result, the presentation of design ideas is as important as the design itself.
In selling your design ideas to clients, put everything into context. Whether you are designing a logo, website design or product packaging, use mockup templates to simulate its real use and help your client imagine how the design will look like at the very end.
Just spend a few additional minutes and photoshop a logo protopype on a client's product or put a website design on that beautiful Macbook-with-a-cup-of-coffee mockup.
Once again, act like a salesman. Wrap up your ideas into context that is hard to resist.

10 brilliant tools for web design and development

If you've had a quiet time of it these last 12 months, then well done you, because the rest of us were sweating just to keep up with the base rate of change online. HTML5 has reached critical mass, responsive development continued to barrel along at full tilt, then there's audio APIs and WebGL…

Thankfully, the degree of change correlates positively to the problem-solving efforts of the developers and designers everywhere, dug into their respective specialities.

Niche tools

As a result, along with the larger corporate-backed applications, we have a huge host of small tools and libraries, each designed to solve a particular problem or preserve a certain set of possibilities. A couple of these projects have become institutions: Modernizr, keeping the technical playing field level and PhoneGap holding the mobile market open for web types.

Most encouragingly, there's room for some 'just for the hell of it' type experimentation. And even a bit of self-congratulation, evidenced by the fact that Google felt confident enough about some tools to package and prink them into the Yeoman project.

Indeed, this is a handsome list, with good representation for most slices of the development pie. From full-scale IDEs to small, exotic libraries with beautiful aesthetics. But what gives this year its character is the poise that these tools exhibit. Within it's niche, each one shows that we use are beginning to outdistance the problems, freeing ourselves up to give more though to the creative possibilities of the web. How's that for joyous tidings? Happy Holidays!

Read More - How to become A Good Android Developer

02. Fontello

Price: Free
Why is it so hard to find a set of icons that covers all the bases with a consistent look and feel? One of life's great mysteries perhaps. Well, wonder no more because Fontello not only has all the icons you need but you can pick and choose the glyphs you need and compile these into your own minimalist set.

You can, of course, download the entire set of icons from theGitHub repository (actually it's several sets) but thefontello.com interface makes customising your font so easy it's the only sensible approach. The project is open source but as always, donations would be appreciated.

03. Proto.io

Price: Free - $49/Month

A good prototyping tool should allow you to get up and running fast but also provide enough depth that you can refine your ideas to the point where they don't need you leaning over a user's shoulder saying things like "Just ignore that bit for now".Proto.io does just this.

It also handles all the touch gestures you might want, tackles animations and provides for sharing and commenting. It's smooth to use and thankfully, there's a free plan too.

04. Foundation 3

Price: Free

Responsive design seems to have gone from zero to about a thousand miles an hour in no time flat. And things are still changing fast enough that small development shops are hard-pushed to stay up to date, let alone conduct their own R&D. That's where Foundation 3 comes in.

Developed by ZURB, an agency with the resources and experience available to throw at the responsive problem, Foundation 3 can act as a blueprint for your own projects, a rapid prototyping tool or even as an object lesson in how to address some of the web's must current issues.

The latest release introduces a simplified grid structure and makes the jump to SASS/Compass, allowing for a more readily flexible approach to styling. Though it makes sense to work with SASS if you are planning to have a look at Foundation 3, the customisable download is conceived to allow a straight CSS version too.

Read Also: Debunking 10 Common Blogging Myths

5. Dreamweaver CS6

Price: From £344.32

Fluid layouts, CSS3 transitions and enhanced PhoneGap support lead the charge in the latest update to Adobe's web design all-rounder. There's no denying that Dreamweaver CS6hits the ground running.

The problem which Dreamweaver has always had is the difficulty of balancing it's across the board functionality with the need to keep out of the user's way. CS6 actually manages this pretty well.

The new fluid layouts are handy but in fact are the least convincing new feature. That accolade probably goes to CSS3 transitions which are, with Dreamweaver's help, fun to explore.

06. Cloud9 IDE

Price: Free/$12 per month Premium

This year the browser-based IDE finally came of age with a number of promising projects offering fully-featured apps which make collaborating from anywhere on even large-scale projects. Among these, Cloud9 has the edge.

The code editor is very usable. Code completion, smart drag and drop document trees, FTP integration and all that, but it's the connectivity which makes Cloud9: If a team are hacking the same file, each user is identified by their own coloured cursor. A chat module closes the feedback loop.

Integrated with the likes of GitHub, capable of working offline, and generally intuitive to use. If you want a 'code anywhere' solution, look at this one first.

07. Sencha Touch 2

Price: Free

There's no denying that the mobile/touch device has changed web development for good. It's a broader, more heterogenous world out there and everyone wants a piece of the action.Sencha Touch 2 aims to put that dream within reach of HTML5 developers.

An improved API, stronger docs and training materials as well as firmed-up native integration with many leading devices all make Sencha Touch 2 a serious contender for the mobile development framework of choice. There is a learning curve but, since Sencha aims to be an end-to-end package, at least there's only one slope to climb.

08. Adobe Edge Inspect

Price: Free
A great little app for mobile developers, formerly known asAdobe Shadow, which cuts a huge amount of hassle from the design process. Just pair your devices (Android and iOS) with your main machine. Then the sites you browse to are echoed direct to every connected device.

If you've got conditional code or responsive templates then these should work fine. And if you want to tinker with the code, just hit the angle brackets next to your paired device (in Chrome) and away you go.

09. Brackets

Price: Free

You'd think by now that the concept of the code editor would be pretty mature. There's so many out there and they're all so similar it's easy to imagine that the final blueprint has been found. Brackets shows that even at this level there's plenty of possibilities left to explore.

The central goal for Brackets seems to be a removal of all the repetitive little tasks we fold into the development process. Browser reloading, editing an element's CSS, function searching. Full credit to those involved because, even at beta stage, Brackets is refreshingly good to use. Check out their YouTube channel.

And if you'd like an augmented experience, now you can sign up for Adobe's creative cloud and get Edge Code. Built on Brackets, Edge Code adds some excellent features for typography and PhoneGap.

Read More - Top 5 SEO Tips of 2015

10. Modernizr 2.6

Price: Free

Leading with improved geolocation, WebGL and a host of community contributed detections, the latest update toModernizr delivers some important new detects for the progressive enhancement cabal to get their teeth into.

Version 2.6 of the popular browser capability detection tool updates a couple of dependencies too, but the largest volume of new detects comes from the community. The list itself makes interesting reading: css-backgroundposition-xy, css-subpixelfont, svg-filters, vibration…

If you're keen to make use of the latest features in a responsible fashion then this is one library you need to keep up to the minute.

Read More - How to become A Good Android Developer

Monday, February 2, 2015

30 Free Video Tutorials for Learning Web Design

Getting started in web design can be quite difficult. For readers, there are tons of great free tutorials online. However, some people find visual instruction to be more effective for their learning style.
Instructional videos are an incredibly rich learning tool and could be just what you need to finally learn web development properly. We’ve compiled a list of over 30 excellent screencasts for beginners across a number of web technologies and disciplines. 

NetTuts

NetTuts is one of the best providers out there for free content related to learning web design. They have a wealth of articles and video tutorials for learners at all levels. Here are a few for beginners in HTML5, CSS3 and JavaScript.

The Ultimate Guide to Creating a Design and Converting it to HTML and CSS

“This screencast will serve as the final entry in a multi-part series across the TUTS sites which demonstrates how to build a beautiful home page for a fictional business. We learned how to create the wireframe on Vectortuts+; we added color, textures, and effects on Psdtuts+; now, we’ll take our completed PSD and convert it into a nicely coded HTML and CSS website.”
screenshot

How to Make All Browsers Render HTML5 Mark-up Correctly: Screencast

“HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5’s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.”
screenshot

How to Build a Lava-Lamp Style Navigation Menu

“One of our readers requested a tutorial on how to build a lava-lamp style menu. Luckily, it’s quite a simple task, especially when using a JavaScript library. We’ll build one from scratch today.”
screenshot

JavaScript from Null: Video Series

“This screencast series focuses exclusively on JavaScript, and will take you from your first “Hello, World” alert up to more advanced topics.”
screenshot

How to Convert a PSD to XHTML

“I continue to be amazed by how well Collis’s “Build a Sleek Portfolio Site From Scratch” tutorial continues to perform. It’s been months, yet it still posts strong numbers every week. Considering that fact, I decided to create a screencast that shows you exactly how to convert a PSD into perfect XHTML/CSS.”
screenshot

Slice and Dice that PSD

“In today’s video tutorial, we’ll be slicing up a PSD, dicing it for the web, and serving it on a warm hot plate. Our design sports a neat “Web 2.0″ feel and comes courtesy of Joefrey from ThemeForest.net. Be sure to visit his profile if you have the chance.”
screenshot

Doctype TV

The guys at Doctype put out frequent screencasts on subjects ranging all over the web design spectrum. Below you’ll find videos to get you started on Ajax, grid-based design, CSS3 columns and building your first jQuery plugin.

Grid Based Design and AJAX 101

“Nick gives an overview of grid based design and Jim breaks down the basics of AJAX.”
screenshot

CSS3 Columns and jQuery Plugins

“Nick deconstructs CSS multi-column layouts and Jim shows you step-by-step how to create your very own jQuery plugin.”
screenshot

TutVid

TutVid is a web design tutorial site that offers free instructional videos. You can also buy a given video to receive a higher resolution downloadable version along with any associated project files. Below we’ll look at a few of the available Dreamweaver tutorials.

Dreamweaver CS4: Styling Tags with CSS

“Learn all about styling tags and how to write CSS code in Dreamweaver. By the end of this tutorial you will have a good understanding of how to write CSS, how CSS works, and how you can write your CSS code in Dreamweaver.”
screenshot

14 Steps: How to Use Divs

“We will take a look at a whole bunch of the things you want to be sure to know when starting to use Divs. Learn all about placing and using Divs as well as styling them with CSS in Dreamweaver!”
screenshot

Create a Basic XML Document

“In this video we will quickly run over XML, what it is, and what it is used for. We will then sit down and write out our very first XML document just a simple list of six people. We will use Dreamweaver, but really any text editor is fine. We will cover creating writing the actual language, adding attributes, as well as how we create our own tags and just some basics to get you going writing your own XML document.”
screenshot

Create a Full CSS Website

“In this video we will start with a folder of images and in about 30 minutes construct a very simple 2 column layout using CSS to style our page! We will learn all about using divs, creating CSS rules, targeting divs, creating a background, and so much more! Start learning to harness the raw power of Cascading Style Sheets to create, layout, and style your web pages today!”
screenshot

Themeforest

Themeforest is an Envato marketplace that sells website templates of various types (HTML, WordPress, Joomla, etc.). The site also has a blog that posts some really helpful content from time to time. Check out the screencasts on PHP and jQuery below. 

Diving into PHP Video Series (11 Parts)

“Today marks the beginning of a brand new series that will show you EXACTLY how to get started with PHP. Just as with the “jQuery for Absolute Beginners” series, we’ll start from scratch and slowly work our way up to some more advanced topics. ”
screenshot

jQuery for Absolute Beginners

“Starting today, I’m launching a daily video series that will teach you PRECISELY how to use the jQuery library in your own projects. We’ll start out by downloading the framework, creating our first function, examining syntax, and more. Every day, I’ll post a five-ten minute “training regimen” that expands on what you’ve already learned. So there’s no reason to fight it anymore! Learn this dang thing and start earning more money on ThemeForest.net with your new-found skills.”
screenshot

CSS Tricks

Chris Coyier over at CSS Tricks pushes out a steady stream of incredibly educational video tutorials. His site currently has 84 free to download screencasts that cover various HTML, CSS and JavaScript techniques and tips. Below we’ll look at six that should be helpful to beginners. 

Converting a Photoshop Mockup (part 1 of 3)

“In this first-ever video podcast, I start the conversion process of an Adobe Photoshop mockup of a website, into a real live CSS based website. This is pretty rough here folks, I’m sure these will get more focused with time.”
screenshot

CSS Formatting

“Being organized and using good formatting in your CSS files can save you lots of time and frustration during your development process and especially during troubleshooting. The multi-line format makes it easy to browse attributes but makes your file vertically very long. The single-line format keeps your file vertically short which is nice for browsing selectors, but it’s harder to browse attributes. You can also choose how you want to group your CSS statements.”
screenshot

Converting a Photoshop Mockup: Part Two, Episode One

“There has been LOTS of great feedback on the first series of Converting a Photoshop Mockup into HTML/CSS. So let’s do it again! Every website is different will require different conversion technqiues so there will be plenty to learn this time around that will be different from last time.”
screenshot

Designing for WordPress: Part One

“In part one, we will be downloading and installing WordPress. Then we will install the “Starkers” theme by Elliot Jay Stocks to start with a completely fresh slate for our new design. No sense starting with the default theme, it’s more trouble than it’s worth! In part two, we will go over the theory behind designing for WordPress and how it’s much like “working modularly” and actually get started designing. In part three, we will finish up the design and start in with some more advanced functionality.”
screenshot

HTML & CSS – The VERY Basics

“This video is the VERY basics of what HTML and CSS is, for the absolute beginner. HTML and CSS files are, quite literally, just text files. You don’t need any special software to create them, although a nice code editor is helpful. You can create these files on any computer and use your web browser to preview them during development. You can think of HTML as the content of your website: a bunch of text and references to images wrapped in tags. CSS is the design of your website. It targets the tags you wrote in your HTML and applies the style. Keeping these two things separate is key to quality web design.”
screenshot

Building a Website: HTML/CSS Conversion

“In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn’t actually “slicing” the Photoshop file, but looking closely at it and trying to mimic what is done there with correct markup and CSS techniques.”
screenshot

Victoria Web

Victoria web is a sort of online web school currently in beta. They have a small handful of free video tutorials for web developers. 

Getting Started With PHP

“Looking to begin learning and creating PHP applications? This video demonstrates tools used by industry professionals in order to get their applications up and running quickly and effectively.”
screenshot

jQuery Introduction

“Introduction to the jQuery JavaScript framework. You will learn how to use CSS selectors in order to modify DOM objects, sliding them in and out of view, fading, and creating custom animations.”
screenshot

Entire Web Design

“Learn to create this entire dealership website from start to finish. Covering various techniques such as layer masks, clipping masks, reflections, shadowing, and more.”
screenshot

ShowMeDo

ShowMeDo is a source for instructional videos on working with open-source technology and software. 

The basics of Javascript

“In this video I show the basics of Javascript. The <script> tag begins in between the tag. It could also be in between the <body> tag. That is why we call the message() function from within the onload attribute in the <body> tag (That is, when the page loads). Outputing simple text on the html page and alert boxes, defining a function and an if/else clause, gives us an immediate and general feel of what Javascript is.”
screenshot

Python from zero

“This series of videos is a very basic approach to python programming for beginners. In the hopes that the audience will stay tunned until the pygame tutorials, which will show how to make simple 2D games with no prior knowledge of computer graphics.”
screenshot

Other Sources

The videos below are from scattered sources around the web. It’s always good to learn from as many separate sources as possible to make sure you’re getting a thorough education. 

Creating a WordPress Template – Part 1 of 3

“An in-depth three part walk through for creating your first WordPress theme.”
screenshot

Modify WordPress Theme – Video Tutorial

“This is the 3rd video of Advanced WordPress Video Tutorials. This video tutorial is showing how to work with some WordPress theme codes, that is how to add autoresponder code to the blog sidebar, how to put banner in the single post and similar things.”
screenshot

How to make a wordpress plugin

“A short video tutorial on how to make a wordpress plugin.”
screenshot

Creating a Website: From Start to Finish

A three part series that takes you from designing a website in Photoshop all the way through coding in HTML and CSS.
screenshot

jQuery Online Movie Tutorial by John Resig

“John Resig, creator of jQuery javascript library, has posted an online video about how to make an accordion style menu using jQuery. Pretty basic stuff… but a good intro to jQuery if you’re new to this.”
screenshot