21 January 2016

How to Keep Web Design Projects on Budget — Before They Even Start

As web designers, we understand that creating sites for clients is often a balancing act between giving them an attractive, functional site while keeping costs within budget.

There’s nothing more that will make clients unhappy than getting a bill that’s significantly higher than expected — and having to keep paying for more services as they upgrade and make changes.

Keeping design projects within budget doesn’t mean sacrificing quality, though. With the right approach, you can give clients exactly what they want while still keeping the costs down. The key, as with any small-business management strategy, is to have a plan and specific goals in mind before you even begin the creative and technical aspects of the project.

web design under budget

You might be able to stay afloat utilizing business credit cards, but if your projects routinely go over budget due to your grand vision for your clients’ sites, it’s time to rein it in.

Website Planning to Contain Costs

Consider your typical client meeting. Chances are your client comes in and starts the conversation with “We need a website. How much is that going to cost?”

Of course, this question is like walking into a real estate agency and asking “How much is a house?” There is a big difference in cost between a modest cottage in the suburbs and a mansion overlooking the sea, and the location, size, and features of a house all influence the price of house. The same goes for websites. The more features and complex the design, the more it costs.

That’s why a cost-conscious Web designer needs to focus on the company’s plan for the site to determine the budget. Just as you wouldn’t purchase a home that’s bigger or smaller than you need for the foreseeable future, you don’t want to develop a website that has features the client won’t use or lacks basic functionality. With a well-thought-out plan from the start, the job can be done efficiently and effectively.

So what goes in to a website plan? Before you even get into the quoting process, ask these important questions:

  1. What are you hoping to accomplish with the website? Is it simply informational, or do you need interactive elements like a shopping cart?
  2. What are your future plans for the site?
  3. What are your goals for the site, both short and long term?
  4. How often will you need to update the site?
  5. How will site updates be handled? Do you have the skills or team talent necessary to handle updates and changes on your own?
  6. How does the site fit in with your overall marketing plan? Will you need to make changes to align with your marketing; i.e., regularly refreshed landing pages?
  7. Do you have a branding strategy? How will the site align with that strategy?
  8. What do your competitor sites look like? What do you want to emulate or do differently?

By asking these important questions, you can work with the client to create a budget-friendly plan that actually addresses their priorities. By approaching the project as a member of their team, rather than just an order taker, the site won’t be bogged down by unnecessary features or have such limited or complex functionality that the business owners cannot manage the site themselves.

Building a Better Mousetrap

web design under budget 2

Often, website design projects go over budget because designers spend too much time building a better mousetrap. That is, they spend time developing technology for clients that already exists in a form that will be perfectly acceptable for the client. Again, this speaks to the common issue of giving clients “too much site.”

Sure, it’s exciting to develop a ton of cool features and make a whiz-bang website, but if that technology takes forever to develop, and is difficult for your not-quite-tech savvy client to use, you’re wasting time and money.

Therefore, once you have a plan in place, the next best way to save money is to use existing technology to power the site. This might mean using predesigned Web pages for those “quick and dirty” jobs, or incorporating open-source software that can be customized to the client’s needs. It’s possible that a client will come to you expecting that you’ll develop something unique for them, but if the product already exists, use it.

Keeping website design and development costs in check comes down to several factors, but planning and preparation along with using existing tools are the most important. Smart clients understand that a good website is going to cost them money, but by working with them to keep those costs in check, you’ll develop a loyal following and grow your own business as you help others grow theirs.

19 January 2016

10 Freshest Portfolio Themes for 2016

So it’s the new year and hopefully it’s been a great one so far. As we gradually come out of the holiday season bubble and into reality, let’s look at what our workflow has in store for us this year.

Designers are busy, creative and highly curious creatures. This however, often times lead to being scatterbrained and disorganization. Unfortunately, this lack of time/attention always means our dear portfolios suffer in silence.

You know what I mean – that one piece of work that’s *almost* done.

If you’re the type who knows what I’m talking about, and constantly find yourself overwhelmed by the amount of stuff to get done, consider reading Jonathan Mead’s post on how to get massive amount of s**t done.

And once you’re motivated enough, consider adding some life into your brain-power eating zombie portfolios. If you need some help, check out these beautifully crafted themes that I guarantee will save you a massive amount of time to make your work stand out!

Industry – Modern Portfolio Theme

10 Freshest Portfolio Themes for 2016

Say hello to Industry – a modern and minimalist WordPress theme for today’s creative professional. Crafted for designers, makers, artisans and photographers, Industry is made for anyone with stunning work and a story to share.

Liquid – Responsive Portfolio Theme

10 Freshest Portfolio Themes for 2016

Liquid is a fully responsive, modern, and flexible portfolio WordPress theme for creative individuals. Liquid enables you to quickly build your portfolio in a delightful manner backed by robust coding.

Agency

10 Freshest Portfolio Themes for 2016

Agency is a perfect theme for the creative agency, freelancer, or business. A fullscreen homepage, two portfolio layouts, and strong typography offer flexibility and minimalism in this awesome feature-set theme.

Workality Lite

10 Freshest Portfolio Themes for 2016

Workality Lite is fully responsive WordPress Portfolio Theme for creative people and agencies. Great for building a simple portfolio website through portfolio post type with four grid layout options.

BASK

10 Freshest Portfolio Themes for 2016

BASK is a not so simple WordPress blog. And that means it’s packed with a ton of features! It’s a clean and responsive portfolio blog that’s perfect for any creative portfolio. Highlight your work or photography with beautiful parallax technology using masonry framework.

William

10 Freshest Portfolio Themes for 2016

A minimalist and simple portfolio concept for creative agencies and freelancers. William is a polished creative theme for WordPress. Absolutely unique and mature design is what You need to inspire your website visitors. Make it easy with your new modern theme! William is suitable for agency, personal, portfolio, freelancer, creative and simple blogging websites.

Uncode – Creative Multiuse WordPress Theme

10 Freshest Portfolio Themes for 2016

A pixel perfect creative multi use WordPress Theme designed with terrific attention to details and performance. Powered by Visual Composer, this theme takes building a website to a whole new level.

Kvadrat – Contemporary Portfolio

10 Freshest Portfolio Themes for 2016

This contemporary portfolio theme comes equipped with an easy-to-use and powerful admin Interface that features a one-click import that automatically loads the home and inner pages quickly. There’s a huge collection of custom short codes that you can use to customize layouts with sliders, animations, parallax, transitions, galleries and more!

Hyper-X The Portfolio Website Designer

10 Freshest Portfolio Themes for 2016

Forget the backend, Hyper-X let’s you design your website from the theme options, giving you the ability to Live Preview all changes in real time! Responsive and retina ready, the theme comes with 3 premium plugins including Visual Composer, Ultimate Addons and slide Revolution!

Empire – A Fullscreen Portfolio Theme

10 Freshest Portfolio Themes for 2016

Empire is an easy-to-use fullscreen portfolio WordPress theme for freelancers and agencies. Graphic designers, illustrators, photographers or any type of creative is now easily able to create a quick & easy portfolio to showcase their work with a unique and creative touch.

15 January 2016

CLD Exclusive Freebie: Ancient Egyptian Hieroglyphics Set (Vector)

Today’s awesome freebie comes from our good buddies over at Freepik. With the best collection of free resources on the web, here’s another addition to the lot.

Hieroglyphs were called, by the Egyptians, “the words of God” and were used mainly by the priests. Hieroglyphs are written in rows or columns and can be read from left to right or from right to left.

Today’s freebie is a collection of intricate hieroglyphs that can be used stand alone or together to form your own Egyptian messages. Available in color and line art, these unique icons come in SVG and PNG. Get your mummy’s tomb after the jump!

cld-freebie-egyptian

egyptian

14 January 2016

Flash is dead! Here’s 10 Places to Learn & Master HTML5

When the big G announced last year that internet ads using Adobe Flash would be blocked/paused on Chrome, it became the nail in the coffin for the multimedia platform.

All good things must come to an end, but in a way, we couldn’t be happier. Good riddance to heavy interactive files that would increase load times and affect user experience.

So with HTML5 being recommended by both Google and the Interactive Advertising Bureau, it proves that this is the time to welcome a new learning challenge. If you haven’t caught on yet, shame on you. Not only is HTML5 a versatile language that works on all browser platforms, allows you to create more engaging and interactive content that mirrors Flash with more efficiency, but it’s going to increase your payday by a few more zeros.

To kick up your HTML skills a notch, we recommend checking out these places. Most are free resources, some are paid but offer a trial. Let’s get down to business shall we?

Udacity

Flash is dead! Here’s 10 Places to Learn & Master HTML5 Udacity

An online teaching start-up, Udacity offers “nanodegree” programs, which are both affordable and accessible. These programs are tailored to match your skills and availability so you won’t need to interrupt your lifestyle while still gaining a recognized skill. For HTML5, check out the Front-end Web Developer nano degree.

Adobe KnowHow

Learn HTML5 Programming From Scratch

Created by Eduonix Learning Solutions, you learn the basic of HTML through to its advanced features. Eduonix comprises of industry professionals who teach you the course from scratch. Perfect for beginners, the course fee is a mere $25 and is spread out over 5 chapters and takes 8 hours and 23 minutes.

Skillshare

Learn Basic HTML5 CSS and JavaScript Programming from Scratch Skillshare

One of the most popular teaching platforms around has a full course to Learn Basic HTML5, CSS and JavaScript Programming from Scratch. Taught by Richard Sneyd, founder and CEO of CyberMyth Games, the class incorporates completing projects and even has a community surrounding the topics you learn.

Code Avengers

HTML5 CSS3 Intro.1.1 Code Avengers

I really like the concept behind Code Avengers. Their teachings are all guided courses that show you what needs to be done step-by -step. So whether this is your first time coding, or you have tried it before – their are program offers practical coding skills to help you learn at your own pace.

Udemy

Learn HTML5 From Scratch Free HTML5 Tutorial UdemyPopular in the tech industry as a learning portal, Udemy offers a complete HTML5 programming course for beginners. There are over 46 lectures and 10.5 hours of content packed into this 7 section course. Created by Eduonix, this course is Free and only requires that you have the passion to learn.

Treehouse

Start Learning at Treehouse for FreeTreehouse prides themselves as a portal that will help you gain skills that can secure you a job, digital job that is. Perfect for beginners, you can learn HTML with a free trial and later for only $25/month. With great support, you can practice your skills live in their Code Challenge Engine and get help from members-only forums.

Shay Howe

Performance Organization Learn to Code Advanced HTML CSSCreated by designer and front-end developer Shay Howe, he shows us how to code advanced HTML & CSS in a blog post style. In his lessons (Total 10), he takes a deeper look at front-end design and development, expanding on what is covered in his beginner’s guide, and teaches the latest for any designer looking to round out their front-end skills.

Codecademy

Learn to code Codecademy

One of my personal favorites, Codecademy teaches anyone how to code interactively, for free! Join 4.5million students and take their HTML & CSS course over 7 hours. Once you’re done with this beginner course, you’ll be able to create websites by structuring and styling your pages with HTML and CSS.

Envato

HTML5 and You Envato Tuts Code Tutorials

Envato is the treasure chest for web resources and what better way to learn HTML5 than their series titled “HTML5 and You”. It covers everything from the new HTML5 elements, to microdata, to the new JavaScript APIs. Since each lesson appears as posts, this won’t feel like a class, but more of a discussion session.

Codeschool

HTML CSS Code School

Code School courses are structured by ‘Paths’ based on the type of technology. They believe in learning by doing, and is structured for beginners to intermediate coders. Get started with HTML5 for $29/month, and go through each level (5 in total) and take their challenges to become a ninja.

So there you have it, 10 places on the web you can use to immediately enhance your skills (and pay grade). While this resource is a great starting ground, you might want to structure and plan how you’ll actually get down to doing it. Time, as we all know is an important commodity and managing it is crucial to doing anything. Here’s an interesting life hack article by Sean Kim on how to get more time to learn something new.

13 January 2016

Featured Work: Live Wild with HuskyFox Brand Identity

Today’s featured work comes from a branding company based in Seoul called HuskyFox. They create branding for clients and today, they’ve given us their beliefs of what their own brand means.

The name HuskyFox is a compound name of ‘Siberian husky’ and ‘Fox’ which stands for the two founders’ nicknames. Each of their members also have their own nicknames of wild animals. In turn, they maintain their responsibilities with the activeness and sharpness in its free atmosphere.
Their brand represents a sharp shape and red color reflecting lively wildness.
logo
Building relationships between brands and users via brand languages and visual elements, HuskyFox delivers solutions, sustain experiences with high values.
husk 91004c30933127.5639fb68aef75 ff448330933127.5639fb68b2c2e husky
For more of HuskyFox’s brand identify, head over to their Behance portfolio.

12 January 2016

6 Collaborative Tools to Increase Visual Communication and Productivity

Design is a collaborative process and very rare do we as designers create alone. For most of us who are lucky to work in a supportive and a creative environment, it is highly productive to be able to gather feedback.

As important as the tools we use to create, today we’ll be looking at some awesome tools to help simplify the flow of gathering information. If you or your team are still in the ages of manually highlighting details using Powerpoint slides or (kill me) Word, it’s best if you started exploring the list below.

Red Pen

List: 6 Design Tools to Increase Communication and Productivity

This might be the fastest way to get feedback on your designs. As a super basic Web app that lets you upload a file and share it with clients and team members, it’s main feature is that it’s extremely light-weight (zero setup time). If you’re like me and hate emailing large files back and forth, you’ll want to check out Red Pen.

Hightail

List: 6 Design Tools to Increase Communication and Productivity

Share files, get feedback and take projects from concept to completion, Hightail allows creative collaboration that leaves behind email. It unites everyone in your team—from creator to client, PM to CMO—in one intuitive platform. The Lite version which allows 5 spaces is Free.

Codesign

List: 6 Design Tools to Increase Communication and Productivity

This web app helps designers keep the feedback process clean, fast and organized. It’s a minimal project management for web-development and graphical-design that requires no prototyping. Codesign’s primary focus is to discuss and to point out fixes to be done. To put it simple, Codesign is “Invision on diet” — keeping the app as simple, as natural and as “fit” with features as possible.

Kivo

List: 6 Design Tools to Increase Communication and Productivity
The simplest way to work with someone else on a file. Kivo is a collaboration layer that sits on top of existing storage platforms and allows multiple people to edit a file at the same time regardless of file type or storage layer.

Wake

List: 6 Design Tools to Increase Communication and Productivity
As a private space to share and discuss design work with your team, Wake works on the web, desktop and mobile platform. It’s super easy for designers to share, enabling a more open and transparent design process. You can also shoot photos of analog work with the iPhone app and easily collaborate if you’re working remotely.

Relay.io

List: 6 Design Tools to Increase Communication and Productivity
If your design team uses Slack – the a cloud-based messaging app/collaboration tool, you can thank the stars for Relay. Synced with Slack, you can use Relay to capture screens directly from Adobe CC, Sketch, Chrome and share work in progress while discussing design with your team.

So there you have it guys, let us know in the comments which tool you and your team uses and if I’m missing out on more resources!