Category Archives: internet

10 Free Video Tutorials For Learning Sketch

YouTube is the best place to teach yourself anything in the modern era. Techie subjects are covered in greater detail because most tech-savvy people also know how to record videos and get them online.

One of the newer design programs, Sketch, has been giving Photoshop a run for its money. This is an OSX-only program, but it’s made specifically for web and mobile designers.

It can feel a little strange coming from an Adobe background, but with the right tutorials anyone can learn it, and in this guide, I’ve curated the best Sketch tutorials to get you started with the basics and beyond.

iOS Calendar in Sketch 3

ios calendar tutorial

Mobile iOS apps are simple to design because they come with screen restrictions and clear guidelines for the designer. That’s why this iOS video tutorial is a great place to start learning Sketch.

Over the course of a half hour you’ll learn the fundamentals of icon design, vector creation, color selection, and keyboard shortcuts. The narration is easy to follow, and you can do all of this on your own with just a copy of the program.

If you’re hoping to learn more about icon design or mobile app design, then this video is for you.

Intro to Sketch for Web Design

intro web design sketch video

Alternatively you might be looking to use Sketch for website design. In that case you’ll love this brief intro from London designer Charli Marie.

If you’re a complete beginner then picking up Sketch can be a hassle, but this is particularly the case for websites where you need to consider responsive layouts, grid systems, and more intricate nuances like textures/patterns on the page.

Granted this video will not make you a complete Sketch master or an expert web designer. But it’ll offer a very clear introduction to the program so you can get up and running fast.

Simple Menu UI/UX

uiux sliding menu sketch

Diving into the more detailed side of design is this Sketch 3 tut covering how to make a sliding nav menu.

This video follows a very simple process of designing a slide out menu on top of an existing interface. Most mobile designers need to do something like this since the sliding menu is the most common choice for responsive menus.

And you can follow this tutorial with the newer version covering another method of designing a vertical slide-out menu.

Nike Store UI Redesign

nike store ui redesign

Another way to practice design is by re-creating interfaces. For example this tutorial teaches you how to redesign a Nike product page in Sketch 3.

It spans about half an hour with guides on working with vectors, basic page shapes, color schemes, textures, and pretty much everything else you’d need to learn.

This video will not make you an expert, but it’s definitely a fun way to get started in this design software.

Dropbox UI/UX Redesign

dropbox ux sketch video

Here’s another cool example from the same YouTuber teaching you how to redesign Dropbox in Sketch. It’s just about the same length of time, and the process feels similar, but there’s also a very unique methodology in this video.

You’ll learn more about matching the colors/textures/icons with Dropbox’s branding and how to design around the company’s image. So you’re not just learning how to use Sketch, but also how to design with specific goals and criteria.

Definitely a unique tutorial for web designers and the final result is fantastic.

Minimalist Website in Sketch 3

minimalist freebie sketch

If you’re looking for a simpler introduction, you might try this tutorial created by Hacksaw Academy. It’s one of the newest videos in this list, and it teaches you how to create a minimalist website mockup from scratch.

In total the video spans 15 minutes which isn’t too long for a design tutorial.

But the final result is also very simple, so beginners won’t feel too overwhelmed. This makes for an excellent starting point to pick up Sketch, but I recommend going beyond this tutorial if you really want to master the program.

Design a Landing Page

landing page video series

Designer Adam Rasheed went above & beyond with his landing page video tutorial covering all the major aspects of Sketch.

This tutorial breaks up into five parts with the very first video totaling over 90 minutes long. Talk about detailed!

You’ll learn about the proper workflow used to create a web page mockup and how you can follow this in future projects. Plus Adam gets into detail on how to create certain page elements like navigation menus, signup forms, and thumbnail galleries.

Basic iOS App Mockup

simple ios mockup sketch

The entire SketchCasts YouTube channel is full of great advice for beginners and experts alike. Sketch has a lot of features, and this channel covers all of them in practical lessons.

I specifically recommend starting with their iOS app mockup tutorial which feels more like a wireframe than a mockup. But you’ll learn all the fundamentals of designing a page by setting dimensions, grids, and proper alignments.

All the techniques you’ll learn in this video apply to professional design work no matter what type of interface you’re creating.

Button System with Nested Symbols

buttons nested symbols

If you wannt to get a little more technical then check out this tutorial on nested symbols in Sketch. This is a unique property of the software and you could learn it through other guides online.

But this 30-minute tutorial shows you visually how to create a Sketch library of buttons using nested symbols in your work. It’s an incredibly practical approach to nested symbols, and you’ll take a lot away from the experience.

However this is not really made for absolute beginners. You should at least have some comfort tinkering in Sketch before diving into this video.

Flexbox for Sketch App

sketch flexbox video tutorial

Modern web designers need to follow responsive techniques. This holds true for frontend development and basic mockup design/wireframing.

In Sketch this process is super easy and this tutorial shows you how it’s all done. This video guide uses the auto-layout plugin made solely for Sketch as a responsive design tool. If you’re a web designer moving into Sketch then this video is a must-watch.

But you can also read through the written article if you prefer that instead.

Fast Prototyping with Sketch, Invision and Craft

invision craft sketch tutorial

Before tackling a full mockup you may want to prototype your website or application. This is like a visual plan for how all your pages fit together and how users traverse the interface.

With this video tutorial you’ll learn how to setup Sketch and how to connect it with two other programs: InVision’s backend along with the free Craft plugin.

An excellent guide for skilled designers who want to work more with prototyping in their day-to-day.

These are my top picks for free Sketch video tutorials but there are many more released each year. If you want to continue the search, try browsing YouTube to see what else you can find.

Original Article:

How to Run a Heuristic UX Evaluation

User experience development and optimization is a broad field. There are many facets of web design to consider in the development of a website. The factors affecting user experience, or UX, span from content production and page layout to website interactions.

Being able to identify usability issues with a user interface is called heuristics. It encompasses broad, qualitative rules that help determine the usability of your website and the overall experience your visitors are having.

To ensure better performance, designers use a heuristic evaluation, which is a way to test the overall UX of your site and if the site has usability issues. Your website’s UX is important and can have a big impact on your business and the success of your website.

Image via

A heuristic evaluation is different than user-testing because you are utilizing usability professionals instead of users. Sometimes, this approach is referred to as an expert review since you are getting professional feedback about your UX.

There are over 200 criteria that can be used when a site is being evaluated. Most businesses will determine the specific probes they want to be included in the evaluation. Many experts base their questions and responses on Jacob Neilson’s 10 Heuristics for User Interface Design.

Here is a closer look at those 10 heuristics:

1. Visibility of System Status

The system or website should always keep users in the loop about what is going on. This information is given to users through feedback in a reasonable time.

2. Match Between System and the Real World

The website should cater to a specific audience. The language used through phrases, words, and concepts should be relatable to that specific audience and fit into their worldview.

3. User Control and Freedom

Users will inevitably click on something by mistake, leading them to a page they don’t want to be on. An exit or return option should be available to them for a quick return.

4. Consistency and Standards

Platform conventions have been put in place, so your users do not have to wonder what your website means. Most users are familiar with these conventions. If your site is consistent, it should be easy for users to navigate and know what steps to take to reach a goal.

5. Error Prevention

Evaluators check for situations that could lead to an error page for your user. A good error message will send readers back to where they belong. An even better solution is removing any error-prone conditions on your website.

6. Recognizing Rather than Recalling

Your website should not require its users to remember information. Objects, actions, and options should always be visible, allowing them to keep up with your website’s dialogue without missing a beat.

7. Flexibility and Efficiency of Use

Accelerators are often used to speed up the process and interaction between experienced users and your website. This means that no matter the level of expertise of your user, your site will function at the same speed.

8. Aesthetic and Minimal Design

There should be no fluff or irrelevant information on your website. The design should be aesthetically pleasing and seamlessly incorporate relevant content and information for your users.

9. Helps Users Recognize, Diagnose, and Recover from Errors

Error messages should never include code and should simply explain the problem to users. It should suggest a quick solution that is easy for the user to follow.

10. Help and Documentation

It is most effective to have a system or website that does not require any help or documentation. If your system does require it, it should be easy to find, read, and carry out.

How to Run Your Evaluation

Planning and running your heuristic evaluation can be a long process.

Companies with expansive resources should hire at least three usability experts to perform the evaluation. Your team will decide upon the guidelines to be used during the evaluation, and then each expert will evaluate the site separately. Someone who is comfortable with the site should be available to the experts to answer any questions and record the process.

Before You Start

It is important to have a clear focus of who your users are before you begin the evaluation process. Develop personas or story maps for your users and make sure your website design caters to those individuals.

Consider the different tasks your users do when they are visiting your website. Most businesses prefer to rank these activities in order of importance. Take these tasks and relate them to the guidelines that will be given to the evaluators.

Develop a Method

After you have determined your guidelines and tasks the experts should be evaluating for, develop a method. Your evaluation method will include a system of severity codes the evaluators will be basing their responses on. Once the guidelines and methods are in place and your experts have been trained on them, it is time to run the evaluation.

Write a Report

When the heuristic evaluation is over, it is time to study the responses and write a report on the findings. Just like data, here’s where you gather the intel and analyze it. At this point, you can show developers the problems your users may have and come up with solutions for them.

Though you offer a written report, present your findings in person, if possible. This evaluation was done to test the functionality and UX of your website, and those who are involved in the process need to fully understand the findings – some of that may mean face-to-face interaction.

You will be reporting to the team of developers and key stakeholders in the business, so present the information tactfully and make it clear the recommendations for changes are for the betterment of the business.

Your report should include a list of the specific heuristics that were used in the evaluation. This will show the starting point that gave you your results. Explain who the experts are and their backgrounds to the group.

List the issues you discovered with the most important first. Then, give the audience solutions to how these problems can be fixed efficiently.

Your findings and report may mean some extra work for the developers, so give them as much information as possible about the findings so they understand how the UX is being affected and what they can do to fix it.

Can You Run a Heuristic Evaluation Without Experts?

Small start-ups or freelance web developers may not be able to afford a team of experts to evaluate their web design. In these situations, a more informal method called the heuristic markup can be helpful. This method does not provide professional results but can still be beneficial when testing your usability and UX.

Using this process, you set aside a few hours to walk through the website. Try to separate yourself from the development and act as a member of your target audience.

Keep in mind one of the personas developed for the business and perform the tasks as you imagine they would. Keep notes of your experiences as you move your way through the website, keeping track of areas where you got stumped or see a potential problem.

Insight Into UX Can Boost Your Website’s Traffic

Sometimes, why a website works well for a demographic can be a mystery, and these heuristic evaluations take some of the guesswork out of the process. Regardless of the size of your business, a heuristic evaluation of your website allows you to gain knowledge and experience about what your users are seeing.

Their experience on your website determines how long they stay, if they buy your product or service, and whether they return. Conducting an evaluation is the best way to discover potential problems and develop the best UX for your visitors.

Original Article:

Ready to Dive into Mobile Development? Consult History First

Do you remember VisiCalc? If you do, you’re like me: old. VisiCalc was a big deal (way) back in the day. It was the first spreadsheet program for personal computers. I don’t mean in a GUI like Excel either, this was the early 1980s after all.

VisiCalc was transformative, a milestone in personal computing. In many ways, it took the novelty out of personal computing, which at one point was seen as exactly that. Nearly 40 years later VisiCalc is still thought of as a watershed moment, one of many more to come in the annals of personal computing history.

VisiCalc on the Apple II

Jumping ahead to the current millennium, it wasn’t even 20 years ago that most websites were built by hand coding HTML. Some alternatives to hand coding included highly proprietary, often WYSIWYG, tools like Microsoft Frontpage, Amaya, SiteSkins, and arguably the original ColdFusion.

That too quickly changed, as websites grew in sophistication, as web standards evolved, and as a variety of desktop applications, like Dreamweaver, made it easier to build websites in ways that conformed to those web standards that were taking shape during those formative days of the modern internet.

Eventually we saw the first modern CMSs, content management systems like WordPress, Drupal, ExpressionEngine, Sitecore, and others. Nowadays with the likes of Squarespace, Weebly, and Wix, creating a website is far from what it was in the days of manually writing code, making it easy for everyday people (i.e., non-developers) to make their own website.

We’ve come a very long way, and these transformations, along with the standards that get defined in parallel, only continue today. While this all may seem like a straightforward narrative, it’s far from a neat and tidy story. These evolutions, in hindsight, look modest and even intuitive, but they took place on battlefields between open standards and proprietary tech.

History has a way of repeating itself and, in 2017, with the ubiquity of smartphones and mobile apps, we’ve found ourselves in a similar place. An article from 9to5Mac, back in August of 2016, puts it simply: “Latest Gartner data shows iOS vs Android battle shaping up much like Mac vs Windows.” Apple and Google have a stranglehold on the global mobile operating system market, with a combined 96%+ share worldwide. We’ve seen this movie before.

Adapting to these changing environments is critical for developers to thrive now and in the future. So what’s a web developer, who hasn’t made the leap to mobile app development, to do? Assuming you have ruled out building with, or sticking with, responsive web apps, what should you consider in your first steps into mobile app development?

With innovation happening so fast, with the tech du jour keeping developers jumping from one foot to the next, the first decisions any developer makes in their transition to mobile development are the most critical, if they’re to get on a stronger footing:

1. Understand the Lingo

There is a language barrier between web developers and mobile app developers. Native apps, native functionality, native code, progressive web apps, semantically speaking, there is a difference. The very definition of ‘native’ seems to be constantly evolving, and inviting debate in parallel.

Progressive web apps blur the lines of what has historically been considered a “native functionality” and what isn’t. Furthermore, web developers have grown accustomed to certain best-practices that have their mobile analogs, but not in all respects. There is no CSS for mobile, there is no Bootstrap for mobile. That won’t likely remain the case for too long as we start to see more frameworks arrive on the scene.

2. IDEs Versus Frameworks

This may seem intuitive to most web developers, but it’s worth noting that there’s a big difference between an IDE and a framework. An IDE, in this case, can best be thought of as the software used to develop a mobile app, most often installed on a desktop.

Frameworks are the libraries and the best practices that help you develop mobile apps and that provide a set of guidelines on how to develop them. Frameworks can sometimes have companion IDEs, such as Ionic and Xamarin, though not always. React Native is a framework, exclusively, whereas Xcode is an IDE.

3. Visual Development Tools

The best visual mobile development tools provide many of the benefits of frameworks with many of the benefits of an IDE, but without all the complexity. Much like there was a stigma using CMSs back in the day, there are stigmas with using visual development tools for building mobile apps, and some of those stigmas are legitimate.

First, not all visual tools are the same – some are much more powerful than others – and it all comes down to what you need in an app. AppMachine or GoodBarber, two popular visual development tools, are just fine for those looking to build simple apps that don’t need to be data-driven or don’t require native functionality.

The same can be said for many visual development tools. Some visual development tools are installed, like an IDE-lite, others are browser-based. Dropsource is in a league of its own, providing the benefits and control of many IDEs, but without much of their complexities, with the benefits and elegance of some visual tools, and provides you with the ability to build powerful data-driven apps (with any REST API), native functionalities like geolocation, push notifications, and also provides its users with the ability to download Swift code for iOS and Java code for Android.

4. Just Jump In

Many web developers got started in the best way – by diving right in. The best way to learn is by trying, building a prototype, learning how to get to the desired result, and ultimately finding ways of realizing their vision.

Sure, you could study and become proficient in Swift or Java, but with most apps taking many months (too many months) to develop, time-to-launch is critical. In 2017 there’s no excuse for taking many months to build and launch an app, the best way to get an app done is to quickly get to a prototype, an MVP, get users, and iterate from there. You need to move fast in today’s fast-paced world of mobile apps.

Whether you choose an IDE, a framework, or a visual tool like Dropsource, your selection criteria is multifaceted. Chief among that criteria should be getting to market, getting something into your users’ hands. Whichever solution removes the barriers between your idea and its implementation is the right decision.

Want to learn more about how Dropsource’s new mobile app development platform can help take your mobile development efforts to the next level? Click here to get started for free or contact us.

This article has been sponsored by Syndicate Ads.

Original Article:

10 Incredibly Detailed Free Mobile UI Kits For Sketch

You can find plenty of free mockups online, but most cater to Photoshop users. In recent years Sketch has grown rapidly with tons of plugins and free tutorials to help beginners move into this alternative UI design software.

This also means you’ll find tons of awesome Sketch freebies online ranging from complete mockups to detailed UI kits. And in this post, I’ve curated my top 10 picks for the best freebie UI kits for any Sketch user.

iOS Design Kit

ios sketch design kit

Every new release of iOS prompts an updated GUI kit and this freebie is by far the most comprehensive one to date.

It covers all the major elements for iPhone and iPad apps with free kits for most design software. You’ll find PSDs for Photoshop too, but you can download just the Sketch files with the same iOS-styled vector elements.

These elements all come in @1x size, but since they’re vectors you can easily resize them without any quality loss.

Google Now UI

google now uikit

One of Google’s lesser-known projects is the Google Now prediction app. Designer Manu Akash created a variation of the Google Now UI as a Sketch freebie.

This kit features a lot of the main application pages but also uses styles from the material design library. It’s a great freebie to keep saved if you want to design Android apps while following Google’s design styles.

Blog Kit

blog uikit sketch

Free blogging platforms like Medium have changed the face of writing on the web. And this free blog UI kit shows what’s possible with a great mobile application UI following that same tactic.

Designer Thomas Budiman created this blog/writing kit for Sketch with a focus on mobile app design. It spans many different types of interfaces like gallery pages, article archives, and signup/login forms for new users.

Move Mobile UI Kit

move ui kit sketch

Move UI is a free mobile app mockup pack created by Czech designer Volodymyr Kurbatov. This pack doesn’t focus specifically on elements, but rather on screen designs and interfaces for different situations.

But in these interfaces you’ll find all the common mobile elements like buttons, input fields, tabs, post archives, slideshows, and pretty much everything else you might use for a custom mobile application.

This freebie is hosted on Gumroad so it works through their checkout system, but notice it’s a whopping $0, so it won’t cost you anything to download.

Coffee Shop iOS Kit

coffee shop ios kit

For a very unique eCommerce-style UI kit check out this coffee shop freebie designed in Sketch. It mimics an iOS application for a local coffee shop with over 50 screens covering the shop menu, checkout, and product pages(among many others).

The coolest thing about this freebie is the ease of use. You can take this design and customize it however you want to create any type of mobile eCommerce interface.

Each element is a scalable vector and the text is all based on free Google Webfonts.

Social Leads App

social lead gui kit

Social media is a huge part of today’s web and this freebie offers a really cool start for mobile designers.

The interface kit comes with a handful of screens showcasing a social marketing application. The screens feature user lists, login fields, profile pages, and photo upload/edit screens for interactivity.

Many of these elements can be expanded to a full website layout so don’t feel constrained to a mobile design. This UI kit also follows the material design language so it’s best suited for Android or Google-type interfaces.

Bootstrap UI Kit

bootstrap ui kit sketch

The Bootstrap library is hugely popular amongst designers and it’s the fastest way to get a new project online. You can always start by coding the layout first, but it’s usually easier to work with a mockup like this BS3 UI kit.

This is totally free to download in both AI and Sketch format. Each element perfectly matches with the Bootstrap 3 kit, and it uses Glyphicons, just like Bootstrap.

If you’re designing with Bootstrap, then you’ll absolutely want a copy of this freebie.

And if you’re eager to move into Bootstrap 4 then check out this Sketch freebie of the BS4 grid system. It’s not a complete BS4 kit since that version is still in Alpha release, but hopefully we’ll see more of those freebies in the next couple years.

Harmony UI Kit

harmony ui kit freebie

This mobile map UI kit features all the pin drops, location arrows, and search features you’d expect from a geolocation app. The Harmony UI Kit by Dawid Młynarz is one of the newer Sketch freebies on this list first being released in mid-2017.

It comes with a dozen mobile app screens of map interfaces and search features for finding directions on a phone.

The UI kit is totally free but it’s also hosted on Gumroad so the download process can feel a little weird.

Tinder iOS UI Kit

tinder gui kit sketch

Here’s another niche mobile UI kit based on the Tinder interface. This freebie was created by Gilberto De La Garza and released for free on Sketch App Sources.

It comes packed with 15 different views for profiles, user lists, dating info, and photo pages. This interface kit mimics the Tinder application, but you can pick out smaller elements from this UI kit and use them on your own.

Sketch is perfect for iOS app design because it lets you resize elements without any quality loss. That’s why kits like this Tinder freebie are so valuable for newer designers just learning the ropes of UI work.

Mobile Wireframes

sketch wireframing gui kit

Digital wireframing is a huge part of any interface project. The process of wireframing and even prototyping helps you map the interface with clarity before designing the colors, textures, and typography.

This mobile wireframe freebie is an excellent place to start. It’s built specifically for Sketch and comes with 57 different mobile interface screens you can pair together.

All of these screens include vector elements that you can also arrange to your liking. A really fantastic UI kit for pre-design work and basic prototyping.

Original Article:

See Your Website as Users do with FullStory

The best way to learn what makes users tick is to see the web through their eyes. Imagine the experience. You might find that a user is confused by the UI that’s in front of them. Or perhaps you’d gain confidence (and a few high-fives) in seeing how quickly they can finish a transaction.

While you can’t literally get inside a user’s head, you can see exactly how they interact with your website. It’s possible with FullStory.

FullStory - More Complete than User Testing

More Complete than User Testing

FullStory enables you to replay user sessions and see every click, key press and page transition with pixel-perfect accuracy. What’s more, it’s a fully-inspectable re-recreation of your website – complete with DOM, JS console and assets. That means, for example, that when a JavaScript error occurs during a user’s session, you’ll see it. You’ll get a detailed log of every JS error from your customer’s browser.

It’s a complete solution that brings you more detail than user testing – not to mention much more convenience. Using the FullStory TV feature, you can auto-play all sessions or a saved segment. This provides you with non-stop insight into user interaction. You’ll become aware of patterns as they emerge – such as rage, error and dead clicks. It’s valuable information that will help you determine what’s working and what’s not. All of it can be done much faster than with traditional testing methods.

Take Advantage of FullStory's Powerful Tools

Take Advantage of Powerful Tools

It’s one thing to have access to session playbacks. But it’s quite another to hunt through mountains of them, looking for a specific type of interaction. That’s where FullStory’s OmniSearch really shines. You can find customers, pull up page analytics, build funnels and more. Even better is that this can all be done instantly – just start typing.

Searchies, as FullStory refers to them, are powerful visual insights. They consist of items like pie charts and funnels that automatically accompany each search and segment. So you not only have the raw session playback information, you also have convenient visualizations as well.

Plus, FullStory can integrate with a number of popular third-party apps. You can send FullStory data to collaboration apps like Trello, HipChat or Slack. It also works with support systems such as, HelpScout and Zendesk. You can hook into Google Analytics Universal and Google Tag Manager. Or, bring insights directly to your BigCommerce, Shopify, Squarespace or WordPress/WooCommerce site. There are a wide range of integrations available to meet your needs.

If you work as part of a team, you’ll love that FullStory is collaboration-friendly. Send individual session playback links to team members inside or outside of your organization. This makes it easy to gain valuable feedback and perspective from others.

Using the Identify API, you can send customer information directly to FullStory. That makes customer data searchable within the app. Custom User Attributes allow you to populate unique user fields. For example, you can add a customer’s subscription level or their lifetime spend amount. Privacy is also a priority and FullStory makes it easy to exclude sensitive customer data by using a simple point and click system.

Start Using FullStory for Free

Start Using FullStory for Free

When it comes to how users interact with your website, it’s time to stop playing guessing games. Instead, sign up for a free account with FullStory and see what you’ve been missing. The insights you’ll gain will make for a better website and it just might make you a hero.

This article has been sponsored by Syndicate Ads.

Original Article:

10 Things to Do with 10 Extra Free Minutes as a Web Developer or Designer

We all have an extra ten minutes throughout the day: waiting on the train, during our morning commute, surfing the web, taking a walk through the park, waiting for your friends to get ready.

You’d be surprised at how productive you can be in just a 10-minute timeframe. Here are 10 things you can do as a freelance web developer or designer with your 10 minutes:

1. Research

Take a little time to look into current market and design trends. Look at your competition, and see what they do good and what you can do better. Read an article or blogpost about what’s new in the world and take notes when you can.

Think about your own personal vision and how you can incorporate market and design trends into what you do without losing your personal flair. Might we suggest some fun reading material to get you thinking?

2. To-Do Lists

Write up a to-do list by hand. Crossing off an item is one of the most refreshing feelings in the world. Rank it by priority, project size, due date, whatever. Better yet, write out a todo list and accompany it with a set of goals you have, for the week, month, several months, years. Figure out what you hope to gain or do in the future, and make sure what you’re doing reflects that.

If you want to be the best designer this side of the Mississippi, and you notice everything on your todo list is blog-writing, then something’s up and you need to reevaluate.

3. Sketch/Journal

Bring a sketchbook or journal with you wherever you go. When you get a bout of inspiration, take a few minutes to jot it down in your journal. Brainstorm ideas for projects or things you might want to do.

You’ll never know what ideas come to you in the moment, and it’s important to capture those feelings and thoughts so you don’t forget them. Pay attention to the small details around you.

4. Pictures

Use the time you have to take pictures of the things around you, either for Instagram, your own memories, moodboards, or for inspiration.

If you see a shirt with an awesome design, then snap a pic for the memory book and later inspiration. If you see a logo on a car while shopping, then make it last.

5. Rebranding (Others)

It can be a strong exercise to look up companies you love with websites you hate, and start drawing up ideas for how you’d redesign it. You can work on it little by little every day.

It may not make you money right away, but you can add it to your portfolio or, hey, you could even submit it to the website and see if they’d be interested in a redesign!

Facebook OS X Redesign by Lorenzo Bocchi

6. Update Your CV/Resume/Portfolio

Make sure your CV/resume is up-to-date with all of the projects you’ve been working on and the skills that you’ve gained. Add in what you can from recent freelancing contracts – and make sure you have the appropriate links to showcase your work.

Update your website by adding anything from your portfolio that’s not on there yet – and go through what you do have and remove anything that pales in comparison to your newest work. Delete, delete, delete. Some things simply aren’t worth showcasing on your website anymore.

7. Social Media

Maintain your brand and update your social media accounts. Post that you’re looking for work and link to your portfolio so that your friends and family remember you next time they’re itching to make an app or need a website for their start-up or a design for their new t-shirt line.

Hey, you could even work on cleaning up your social media to make sure it accurately reflects who you are now – not who you were in high school.


Do some jumping jacks, or some crunches, or some lunges, or even get a jump rope! Stretch or do some yoga or breathing exercises. It’s important to look away from the screen and utilize methods to help you find your center and feel relaxed for what you have to work on next.

Not every free 10 minutes you have needs to be productive.

9. Meditate

Continuing from the above, your extra 10 minutes can also be a crucial time to reflect on how your day has been, your week, your workload, and the things you’ve been doing. Have you had trouble with clients? Too much on your plate? Worried about money? You have to recognize something is an issue before you can figure out how to fix it.

Take a break from the bustle of your hustle and have a few minutes to just think about what’s making you feel good and what’s leaving you feeling empty or dissatisfied, and then figure out how to fix it. Hey, you could even take this time to figure out if a mentor might help you develop your skills and find how to get the most out of what you’re doing.

10. Clean

No, I know what you’re thinking, but we’re being absolutely serious. A clean workstation or home can bring peace of mind like no other. It’s not procrastination if it’ll help get you into a better headspace later on to work better and stop thinking about how much cleaning you have to do.

Original Article:

How to Price Your Web Design Services

How you set the price for your services will greatly affect how prospective clients will view your business. For those that are new to the business of freelancing, there’s always the temptation to set your prices lower in order to get more projects or interests.

When you do this, what you are doing is attracting bargain hunters that do not see the value of your work, and not clients for the long-term. When you set your rates low, you are sending a signal that you don’t care about how you value yourself or your business.

So how do you set a price for yourself? Just like motivation, pricing yourself involves two things – the internal and external.

Internal Pricing

Internal pricing is what you keep to yourself and do not reveal to clients. It involves how you include all the necessary factors or elements when calculating how much you should charge your clients.

This guideline is called the MAR or Minimum Acceptable Rate – the most acceptable lowest rate you are willing to work for.

Calculating the MAR includes your personal and business overheads divided by the number of hours you have to work on a project.


You also have to add taxes on top of that.

For example, your personal overhead (food, shelter, clothing, and other necessities in order for you to live) costs $30,000/year while your business overhead is $5,000/year. And then, let’s say you are willing to work for 6 hours per day on a certain project for 48 weeks, which is equal to 1,440 hours.

So add the two overheads, which is $35,000 and divide it by 1,440 hours, you get $24.31 – this becomes your Minimum Acceptable Rate. If you add the tax, say 20%, that would be around $29.70.

This calculation, of course, varies since each person has different considerations and variables. The bottom line, however, is you use it as a guideline and never go below your MAR, only higher.

external pricing

External Pricing

External pricing is what you can discuss with your client. It is the price which corresponds to the value you bring to the project. It is the price which, when given to you, will make you work better.

With regards to external pricing, here are a few tips to keep in mind:

1. Keep Your Eye on the Competition

Be aware how much others charge their services in order to have an idea. However, others’ rates should not influence yours because it is most likely that some freelancers, especially new ones, are undercutting their own services.

It might be difficult to charge higher against most freelancers, but it will determine the sustainability of your career as a freelance designer.

2. Never Set Your Price by the Hour

When you go to job sites or job markets, a lot of projects are set by the hour. Although there is no problem with this, charging by the hour has its disadvantages.

For one, when you charge a client by the hour, they will always be conscious of the time. When you start to put in longer hours, your client might start to complain what’s taking you so long.

Sometimes, it will only take you minutes to do certain changes that will greatly impact the website. If this happens, you are undercharging the value you are bringing to the table.

Furthermore, charging hourly limits your creativity which, in turn, limits how much value you can give to the project. Therefore, it is much better to be upfront to a prospective client and tell him how much you charge along with the process involved in the project.

You can mention the steps and strategies you’ll do to help them reach the goals of the website. When a client sees the value you can bring, they won’t hesitate to agree to your rate. In fact, they might not even ask, and offer you a higher fee when they understand your value.

3. Charge According to Your Value

Value here does not just refer to your time, but also to the whole experience of working with you. Remember that you are not just giving your time, but also your expertise. This includes your services, how you made the project, and the outcome of the project.


4. Spend Time Talking with Your Client

Freelance web professionals often make a mistake of closing the deal quickly. What happens then is that in order to seal the deal, they will agree to every whim of the client in fear that they might walk away.

On the one hand, a client will ask you how much you will charge and how long will it take without discussing the details because the reality is, there are still a lot of clients that are looking for bargains. Therefore, it is wise to exercise precaution before diving into any new project.

How can you do this?

First, find out what your client really wants to achieve. Do they only want a website redesign? Do they want to introduce a new product or direct more traffic to their website?

You can also present various options instead of one. One is the basic package that includes what they want and the premium package which includes other things your client doesn’t know they need until you present it to them.

Lastly, make sure you set the payment terms as well as how the project will be completed, which includes upfront payment, milestones, and, of course, the deadline.

5. Always Set Your Price Based on Your Client’s Goals

Don’t just focus on the immediate result your client wants, but their overall goals. You are the expert and most of the time, clients don’t really know the real scope of what they need.

Learn to read between the lines and ask questions in order to know what they really want and need. You’ll be surprised how open they are in discussing the process with you. Clients that want shortcuts are those who will give you the biggest headache, so make sure you avoid them.

Original Article:

Building Digital Credibility for a Better User Experience

The design of your website does more than offer a way for people to find you on the web – it builds the credibility of your brand. Your website’s UX creates brand associations to gain traction with your customers.

In today’s technological society, it takes more than a pretty website to turn the heads of consumers – though a pretty website helps. Your site must contain credible content, have reliable navigation, and feature structured layouts to have a competitive edge and stay relevant in your industry.

Know What Consumers Are Looking For

When determining if your site is credible to your consumers, you must have an understanding of your target audience.

Deliver products and experiences that meet their needs to be seen as trustworthy. Define your target audience, then design a website interface that meets their needs.

Create a Great First Impression

In a world filled with instant gratification, we make quick judgments about people, products, and experiences. Current research suggests users form their first impressions of your website in just .05 seconds!

This is where your visual appeal is most important. The other factors come into play after you have captured their initial attention.

The design of your website and the first look your users receive upon arrival tells the story of your business. You must catch your users’ attention in a way that feels personal to establish credibility. Your consumers need to have faith in the story you are telling and the products you are offering.

To give them that faith, spend some time thinking about the details – color, navigation, and font size all make a difference for user experience.

Color schemes have a huge effect on the perceived value and credibility of your business, so spend some time considering the colors of your site. Your favorite colors may look cool to you, but if they come off as unprofessional, they could cost you business. Conversely, if colors seem too old school and your target audience is millennials, you may be seen as out of the loop.

Your navigation bar – regardless of your target audience – should be clear and easy to navigate. If your users are older, ensure that there can be no confusion when navigating the site. Keep your font type and size in mind, too. Curly fonts can lack gravitas, and fonts that are too small are frustrating.

Offer Credible Content

One of the most important ways to be credible to your readers is by providing them with reliable and meaningful content. Consumers who are visiting your website want to read about your products and how they have helped or served people in their community, but they don’t want to feel like they are stuck on a used car lot, so don’t be overly salesy.

Include content that relates to your business but doesn’t feel overly promotional. Offer something of value on your site – consumers are giving you time, give them something in return. It’s a win for you in more ways than one – you’re seen as a thought-leader in your industry, and the higher engagement time on the website means better rankings.

Article by Ruslan Siiz

Up-to-date content shows consumers you are maintaining your website and the information on it. If a user can tell your site has not been updated in months, they won’t stay long. Presenting new information to your users shows you are committed to giving them the latest information regarding your business. It builds trust that you will deliver for them in the future.

Your credible content doesn’t stop at what is written on your site. Photos need to be relevant to your business and set the tone for what you stand for. Appealing photos say a lot about the quality of your business and can make your users feel confident about your brand.

Going out of your way to find images to match your brand and values builds trust. Choosing stock images is easy and doesn’t require much thought – that thoughtlessness shows.

Improve Navigation and Usability

Confusing or malfunctioning navigation is one of the most frustrating things you can encounter on a website. And, at this point in the tech race, users don’t have to put up with it. If your navigation is confusing, you can bet there’s a competitor whose site navigation is clear. Making users work to navigate your site is just asking them to leave.

One way to make your site look professional is to make its usability seamless. When it isn’t, it suggests other aspects of your business might be flawed or created lazily. When users have an easy experience navigating your website, they have a better overall image of you as a professional in your industry.

Navigation Ideas by Oykun Yilmaz

Provide Answers through Effective Layouts

The layout of your website can do even more than just provide effective navigation; it gives users a guide for finding the answers and information they need. Consistency matters from page to page – it should feel like an extension of the identity you’ve created with your brand.

F&W UI Kit by Scott Wakefield

Backgrounds, color choices, navigation tools, and your content’s voice should all have a common feel. Keeping this information consistent can build a positive UX, encouraging users to trust and return to your business.

You may want to tuck away certain aspects of your site, but don’t try to tidy the site up so much that users can’t find what they came to the site to see. Don’t make users click too many times to find important information.

Like a newspaper, the top left corner is the most prominent area – use that precious real estate wisely. National Geographic does a great job with their layout design – consider how clear the info is and how nothing crucial is hidden.

Maintain Information and Links

One of the fastest ways to lose credibility is by having outdated information on your website or links that don’t work. Want to diminish your chances of being a valuable resource? Offer what looks like value with a broken link. Not only will it drive away users, your reputation takes a hit – along with your rankings.

Wrong information tells your users you don’t care enough to keep the information on your website up-to-date, which may make them believe your brand will not provide them with a good experience.

Design Work Is Never Done

With the never-ending development of technology and responsive website elements, you must always stay on top of your design. If your website begins to seem old or isn’t providing enough to your consumers, they will lose trust in your company.

Creating design elements and building your brand to be credible and trustworthy takes more than good intentions and caffeine. Website building and design is business building – create a brand identity using your site, and it will increase your reputation and help you with you every aspect of your business.

Original Article:

Perfect Web Design Proposals, Every Time

If you’re a freelancer, then you’ve probably experienced the anxiety of staring at the blank white space where your cover letter or proposal needs to go. Not only do you have to sell yourself, but you have to show that you can do the work, that you understand the client’s needs, that you can fill them in a specific timeframe, and that you’ve specifically tailored your proposal to them.

Before I started being successful at getting freelancing gigs, I made the big mistake of having a generic pitch that I would copy and paste into each cover letter section of Upwork while applying to a bunch of jobs all at once.

I hardly got any work because the clients could not only tell that I was just recycling something I’ve used before, but also could tell that I had not fully read their proposal. If you want them to take the time to hire and work with you, then you need to take the time upfront to invest in writing a solid proposal.

Maybe you’ve seen that 20 other people have already applied for the project you’re absolutely sure that you could easily and successfully accomplish.

Proposal Template by Darian Rosebrook

The competition for freelancing gigs is fierce, but at least half of those proposals were generic copy/paste applications, and the others were a sentence or two about how they’re qualified without much more detail.

We’ve compiled a set of tips to help you take the time to craft the perfect proposal that will get you your next freelancing gig. Remember: presentation is everything.

1. Read Through the Proposal and Take Notes

You’ll need to do your research before writing your proposal. Read through the entirety of their posting to determine several things:

  1. What their timeline is
  2. What their budget is (and if it’s even worth your time!)
  3. What product their ultimately asking for
  4. Who their target audience is
  5. What skills they’re requiring or seeking
  6. What previous projects they might want to see

Once you’ve done your due diligence in parsing apart their request, then you can set out to writing a proper proposal. Though we urge you not to use a generic, copy/pasted proposal, it is always a good idea to have a set outline for how to structure your proposals to make writing them faster while simultaneously demonstrating that you understand the needs of the client.

Once you get the job, it might be a good idea to have a standard form like this one you can send the client to show you’re professional and that you care about their input.

2. Create a Standard Form for Applying (But Only a Wireframe)

We recommend something like the following:

I am a(n) [specific word for what they’re looking for, like designer, writer, or developer] with [skills] and with experience in [jobs or projects specifically related to the kind of project they’ve established] which you can view here [provide links to your project]. I also have experience working with/for [their target audience, and what experience you have writing for them, etc.]. I can complete your project in [insert timeframe] for [your price point].

It does not need to look like this, but having a standard form is different from recycling the same proposal insofar as this way you have a quick and handy guide to turn to so you’re not working on a proposal for hours, while also being able to be original and specific in your proposal.

Don’t forget to be specific about your skill-set. Do you have 5 years of experience in graphic design, or did you get your B.A. in Professional Writing? Don’t make them sift through 300 pages of your skills – make it simple, easy to read, yet expansive enough that they see you can handle every component of their job.

Remember that the client has work to do, too. Communicate this to them and make sure you get what you need from them.

Soulmates Proposal by Charlie Isslander

3. Be Original and Specific

You don’t have to spend 40 hours a week writing one proposal, but you do need to spend more than a few seconds crafting something up if you really want the job.

Think about how much time the client spent in crafting their proposal and posting it to find people to help them – you should ideally be spending however much time you imagine they spent on their job posting as you do on your proposal.

Let us first reiterate: do not copy and paste. Yes, it’s an easy way to quickly get your name out there, but clients can see right through that. The worst offense is when you don’t even mention their project or what specifically about their project you could provide value for.

Your client will be able to see through your vague, generic proposal in a few seconds. Sometimes, this is such a problem that clients will request in their proposal for a freelancer to put words like “pineapple” or “unicorn” at the beginning of their proposal before submission to make sure they’ve read and understand everything about the job posting.

Showcase your work! If you don’t have many samples to send in, especially if you’re just getting started, then it would be a good investment of time and energy in developing some mock-ups to provide to a client when they ask. Better yet, don’t wait for them to ask – show them upfront! Get a website to direct your clients to in your proposal.

Redesign a few of your favorite websites, draw up a few logos for fake companies, write a few blog posts about anything – this will largely depend on what you do and what you’re applying for, but make sure you have something to prove you can do the job.

4. Present a Timeline

This is crucial, and is more than just saying that you could finish the job in two weeks. Be as specific as possible by parsing apart their project into smaller tasks and provide a timeline for each. For instance, you could say that research and brainstorming will take three days, with a little time for communication with the client on your ideas and working their feedback into it, and wireframing will take two days, and so on.

The client will appreciate not only that you’ve taken the time to adequately think about your commitments and their needs, but also will appreciate that you understand the complexities and nuances of what they’re asking. It will demonstrate your seriousness about the job, and will help the client better understand what working with you will be like, and what the greater process of the project will look like.

Last Thing

Remember that as a freelancer you’re selling yourself and your services, and you have to see yourself, your work, and what you provide as a business.

Don’t make your proposal five pages long. Keep it short, sweet, succinct, and economic. You want to be as specific and narrow as possible, as well as descriptive as possible when explaining your process and their project, while also being as succinct as possible so that they know quickly and immediately that you’re the right freelancer for the job.

Think about it this way: pick 3 skills, pick 3 recent projects, and break the timeline into at least 3 tasks for your client. Now go forth, and get working!

The biggest takeaway? A little extra time spent on a proposal can bring you much better contracts, meaning fewer jobs with higher payout. You can work less by working better.

Original Article:

10 Free Must-Have Web Design Plugins For Adobe Photoshop

Adobe is the world leader in design software. They offer everything from vector design to print work and with their release of Adobe XD, they now offer web prototyping .

And while these programs do have a lot of features, they also leave room for more. That’s why I’m covering the best plugins for all Adobe CC designers who create anything from mobile apps to website mockups. No matter what your experience level is, you’re bound to find something here that’s useful.


invision craft plugin

Starting off the list is InVision Craft which is by far the biggest plugin around. It’s available for Photoshop and Sketch, both of which offer the same features.

Craft is more like a library of plugins with many different features mixed in together. You can design prototypes, automate dummy content, and automatically sync design resources to the cloud. All from the Craft plugin panel.

This plugin is free and will remain free forever. I thoroughly recommend trying this out and see how it improves your digital workflow.


fontea plugin

Typography is a huge part of web design and with Google Web Fonts you can go much further than the default system fonts. That’s exactly why Fontea was built: to help web designers craft beautiful typography without relying on pre-installed font families.

With Fontea you can select from hundreds of Google fonts for free. These can all be embedded into your websites, so they’re perfect for any project. And you can quickly flip between different styles without downloading anything.

HTML Block

block html plugin

The free HTML Block plugin lets you write code and convert that directly into elements in Photoshop. This is like the reverse of a code exporting plugin since you can now import code directly to Photoshop files.

Developers will specifically like this plugin since it’s often easier to create buttons, menus, and columns with CSS first. If you prefer coding over Photoshop’s shape tools and layer effects, then installing this plugin will save hours of frustration.

PS Pen Panel

ps pen panel addon

Photoshop was not meant to be a vector editing tool. However it does have these tools and it’s one of the best ways to design vector elements for the web.

The biggest annoyance is jumping between different pen tools and opening the preferences menu to switch the “Snap Vector Tools” setting on/off. The PS Pen Panel solves this problem entirely.

It’s a free plugin that adds a new panel into the GUI. This panel is made for vector designers that constantly craft icons in Photoshop rather than Illustrator. It may take some time to adjust to, but it will speed up your workflow.

Note: this plugin is 100% free but it still goes through the site’s checkout process. It’s just the way their plugin system is designed, but this pen panel is free to download so don’t let the website confused you!


ai to svg plugin

There’s a lot you can do with the HTML5 canvas element and web SVGs. But that extra step of exporting SVGs and coding them into canvas elements can be a time sink.

With the AI2Canvas plugin you can automate the Illustrator export feature with ease. This lets you create vector graphics and export them into HTML5 canvas code automatically. You can even add rotation features to create animated effects, all from Illustrator!

To learn more, check out this demo video.


copio adobe plugin

If you want to copy a layer in Photoshop you can always duplicate with the click of a button. But you’ve never been able to copy a layer from one file and paste it into a different file.

With Copio that can all change. This simple free plugin adds full copy/paste support for any layers you want to move into other PS files.

Normally you’d have to drag & drop the layers, and this can be tedious trying to match your cursor over the specific Photoshop file tab. With this plugin, you just select the layer and copy/paste using Copio’s keyboard shortcuts. Designing in Photoshop just got a whole lot easier.

Cut&Slice Me

cutandslice me plugin

Retina devices increased the time spent designing a mobile app. But they also brought these requirements into responsive web design where even websites need @2x and @3x images to look crisp on every screen.

Using the Cut&Slice Me plugin you can automate the export process with properly sized and properly named images. You just select which devices you need to support, and this plugin takes care of the rest.


photoshop composer plugin

Adobe Photoshop is a great program for mockups because of its layer comps feature. These comps let you restyle interfaces with different colors, user states, and features while keeping them all in one document.

Composer takes layer comps to the next level. This plugin lets you update similar elements across all layer comps so that you don’t need to go through them individually.

So let’s say you have a logo in the top-left corner of four different layer comps. You want to move it to the center. Traditionally you’d need to drag it across the screen for each layer comp four times.

With Composer you select all layer comps, move the logo, and you’re right as rain.

Long Shadow Generator

long shadow generator plugin

Modern design trends coupled with material design have really pushed for the long shadow effect. It’s so popular that Photoshop users have a Long Shadow Generator plugin that recreates this in one click.

You select the shadow length, opacity, and direction along with the color type. Then just click “Generate, ” and your long shadow is applied to any element you like.


css3ps plugin

I couldn’t wrap up this article without mentioning one code exporting tool. CSS3Ps is probably the best free option out there with full support for modern CSS3 properties.

First you design elements in Photoshop, then select those layers and click the CSS3Ps button.

It’ll automatically output pure CSS3 code along with classes to recreate those elements on your page. This works on everything from text layers to buttons, and it even supports multiple layers simultaneously.

Check out this demo video to catch a glimpse of how this plugin works.

These are just a few of my favorite plugins for web designers, but there are always new ones released so be on the lookout for more Adobe CC plugins on the horizon.

Original Article: