You are on top of the world right now; great clients, amazing projects, and a well-honed portfolio. Yet, in the back of your mind a humbling question looms. Can I do this forever? Do I have another 30 to 40 years of this in me? Being relevant as a designer for the duration of an entire career is a daunting task.
Here's a humbling reality check. There will always be web designers more talented than you. Peruse sites like Cargo Collective, Coroflot, and Carbonmade at your own risk. While inspiring it's also incredibly easy to become disillusioned. The number of talented designers competing directly against you grows each year. New ones join the workforce every year. Just like you, all these designers are hungry for work.
Yet, there's a game-changing secret they don't yet know; design "talent" can only advance your career so far. If you want to be more than just a flash in the pan, you need to diversify your skills and evolve beyond just slinging the hottest pixels. If longevity is an important aspect of your web design career, start preparing to expand your talents.
1. Learn your graphic design theory and history
Start with the design basics. How can you expect to master an expertise if you don't know any of the fundamentals? Professional athletes understand. All sports training starts with grasping the core skills. Design proficiency isn't much different. To understand the principles of design is to decode how design works. Want to pull the strings in your audiences' brain? Learn the underlying patterns to the craft. If terms like "repetition and variation," "contrast," "rhythm," "balance" are foreign to you, it might be time to hit the books.
If you have a strong understanding of design history, you now have a mobile library of inspiration (ie your brain) to always draw from. Pull from this knowledge with purpose. Don't stumble through a historical design style without an understanding of how and why it originated.
When your art director tells you she wants to see "Paul Rand" mashed with "The Designers Republic", you'll have a frame of reference. Your ability to understanding the AD's point-of-reference and solve their problem visually will ensure you will stay on the top of the list of their favourite designers to work with. Can design history mash-ups work? In 2004, this teaser campaign was one of my first attempts at bringing together two different influences into a single art direction
2. Generate ideas
Need to create ideas? Don't stare at a blank computer screen. Successful designers learn how to generate concepts and avoid jumping into Photoshop too early.
First, articulate the design problem. Don't have a creative brief? Learn to write one. Provided a poor brief? Make it better. Don't be afraid to ask more questions to ensure you feel empowered to truly tackle the problem. Take ownership.
Once you are prepared, plan, moderate, or participate in a quantity-not-quality brainstorming session (designshack.co.uk/articles/inspiration/10-tips-for-effective-creative-brainstorming). Chop up a large challenge into smaller tasks. Sometimes, a 15 minute focused pow-wow will help beat a two hour session. Only after the session should any ideas end up on the cutting room floor.
For the ideas that survive, don't be afraid to sketch until a solution become clearer. Sketching doesn't have to be pretty, either. Some designers pour over theirs, meticulously solving every element on the page before moving to the scree. Others make them loose, rough, and fast. Regardless, test and tweak ideas quickly. Moving through a volume of ideas rapidly before settling on a desired solution will take your design in a favourable direction faster.
Need more techniques for your idea toolbox? I'd recommend Graphic Design Thinking: Beyond Brainstorming. Focused on real-life case studies, it showcases outcome based tactics that designers can employ to gather information and generate ideas to solve many different types of design problems. Get your nose out of Photoshop and read these three books. It will provide a much wider view of the design industry
3. Sell your work
While "coffee is for closers," the spoils of design successes go to those who can instill confidence in their clients. One-on-one with your smallest client or unveiling new work to a poker-faced 60-person committee, you must be prepared to establish trust in how you talk about design.
Become accustomed to talking not about the surface-level obvious, but the purpose in your work. Your design isn't "clean," it's reducing the cognitive load allowing for the calls-to-action to provide clear pathways for the user. That typeface isn't used because it's cool. That typeface is the right typeface because it's historical context aligns with the content and is highly readable on screen.
If you can't talk elegantly about the work you create, you've left the door open for someone else to. Don't let that happen. Confidently selling ideas is crucial. Here, your author humbly attempts to explain a design concept to colleagues from the United States Holocaust Memorial Museum
4. Become a better writer
Virtual workplaces ensure we will be communicating more frequently in non-verbal situations. Until the full-body Star Wars holograms become reality, the words you write need to inform, persuade, and delight in your absence.
Writing is another form of creativity. The more you work the "writing" muscle, the more you'll learn. Cennyd Bowles wrote a cracking blog post providing editing tips for designers. His insights can help less seasoned writers recognise the erroneous patterns in their writing. Be comfortable turning the jumbled mess of thoughts in your head into organised, written ideas. Your words become an extension of yourself, providing additional opportunities to share your ideas when you're not present. Writing is hard. If you have trouble focusing while writing (like I do), I'd recommend IAWriter
5. Surround yourself with people more talented than yourself
"When you get the chance, surround yourself with talented people, even if they're your 'competition.' You'll learn more from them than you'll learn from 20 years of schooling."
— Heather Shaw, web designer, California
Can you learn in a vacuum? You can't. If you don't work with talented people that you can constantly learn from, think about changing jobs.
If you are lucky enough to be surrounded by elite designers, watch their habits. Study their processes. Your rate of growth as a designer will accelerate. You'll be able to witness how successful designers do what they do. No book or interview or online tutorial will ever be able to replicate that. Don't have any talented people around to inspire you? At least have some interesting toys on your desk to keep you company
6. Work alone / work as a team
When you are on a team, can you successfully integrate with the personalities and talents of the team? If you are a freelancer, can you manage yourself and your projects despite wearing all the hats? Being adequately prepared for both is an utopian situation. Very few of us have that type of discipline built-in. Take small steps towards being prepared for both scenarios.
The best preparation is to delve into projects outside of your 9-to-5. If you work inside of a team, bring something to life on your own. A great example is what Phil Coffman concepted and executed with Method & Craft. If you already work solo, join forces with some like-minded professionals to bring something to life. Look into local coworking spaces or professional organisations where talented folks fraternise and collaborate. New to working with a team? Learn to let go of control. If you can learn to trust your teammates and earn that trust back, you'll forge a strong professional bond. Phil Coffman's Method & Craft website is an inspiring example of a side project brought to life
7. Handle conflict professionally
This industry begins to feel "small" after only a few years. It's incredibly important to perform your craft virtuously. What type of reputation do you want to project to your contemporaries? Employers, coworkers, colleagues, and clients; all of these roles in your professional life aren't necessary one-time cameos. You will cross paths with them again. If not, your interpersonal skills will act as your proxy. People talk, reputation spreads and if you make a habit of burning bridges, it will come back to haunt you.
You'll meet people who you won't see eye to eye with. They might be your boss or your client. You might even manage one. As hard as it might be, treat all of these people with respect. The best way to do this? Be honest with them. Let them know that you disagree with either their actions or intentions... but never disrespect the person. Business should remain business. When you are doing it right, business should never be personal. Even when you might be the one being disrespected. Be choosy about where you mix friends and work. For instance, my Facebook account is for friends and family but Twitter is where I connect with businesses, colleagues, and clients
8. Accept that you have limits
Yes, you used to draw when you were a kid. Does that make you the best candidate to create an illustration for a paying client? Who doesn't like to take snaps with our iPhones and turn them into nostalgic bits of memory via Instagram? Software doesn't make you a master of lighting photography. Know that there are skilled people out there with specific expertise. Thankfully, these talented laborers want to work with designers just like you! Seek out these talented people. Create a bucket-list of all inspiring folks that you must work with before you say sayonara to your 9-5.
Copywriter and creative director. Photographer and art director. Illustrator and designer. Together, each pairing strengthens the work. Different talents can combine to create something that is greater than the sum of its parts. These two (or three or four) talents can push each other to achieve new levels of creativity in their work. For SXSW Cogaoke 2, the Happy Cog design team reached out to a local illustrator we respected. A few emails later, we were collaborating on the new site and poster for the event. Work with people you admire. Happy Cog's SXSW party Cogaoke gave us a chance to collaborate with amazing illustrator Tom Whalen
9. Value making relationships, not just connections
You'll never know when the next job or job opportunity will show up in your inbox. The spoils come to those who take the time to nurture their network. That includes past coworkers, friends you've made at conferences, and the multitude of designers who inspire you. Reach out to those you admire. It's not dubious if you have an honest interest in the work someone is doing. If you are in this game to collect business cards, your intentions will show. Someone won't have a beer with you and talk shop? Spend your time and energy elsewhere. Just because I have your card, doesn't mean we actually know each other
10. Be forever curious
"Whenever possible, practice new techniques, try new tools, take risks, push the envelope – this forces you to challenge your creativity, combats stagnation and can help keep you relevant."
– Lawrence O'Toole, graphic designer, NYC
You've been blessed with the ability to create for a living. Have you taken a look at what type of creator you are? Avoid being the "hunter-gather" type, scurrying for inspiration in every new project. Instead, think like an agrarian; cultivating and honing your talent and influences over time.
Your design-garden should reflect your interests. I use LittleSnapper to organise the digital bits that catch my eye. In my collection you'll find print, photography, fashion, numerous web design patterns. Spend a few moments tagging and organising these snaps and over time you'll amass a respectable representation of where your tastes lie. If nothing else, you'll have a fantastic reference library that will be curated to your interests.
If you'd prefer something more tactile, start an analog collection. In Aaron Draplin's studio you'll find a personalised horde of industrial metal plates and long-forgotten packaging that reflect his commitment to fueling the muse that speaks to him. Want to find your muse? Look up the local flea market and go on a graphic design scavenger hunt. Make gathering design inspiration part of your day-to-day routine. LittleSnapper is an easy easy tool to help
Conclusion
"Find out about the world. Read interesting books and magazines, watch intelligent films, listen to music by people who play their own instruments and sing their own songs, travel to countries with a different culture to yours and have as many meaningful conversations as you possibly can."
– Espen Brunborg, designer, United Kingdom
A career is like a slab of marble waiting to be turned into a piece of artwork. Like Michaelangeo, who could see the form inside of the unblemished stone, you can begin to shape your career in the vision of your choosing. It takes thousands of infinitesimal decisions. Those small choices compile to alter the course of your professional trajectory.
Have faith that while possessing oodles of talent is important, there are other valuable skills necessary in our industry. Live life. Take risks. When shaping your "career-sculpture", remember that well-rounded design prowess will take you further down that path.
Every industry veteran has his or her preferred billing method. Some prefer fixed pricing arrangements while others prefer straight hourly billing. Regardless of individual preference, each billing method has its perks, and the decision should be based on which method is in the best interest of your firm, yourself and your client.
The simple fact is, nothing lasts forever: our services, clients, rates and talents are all products of our times. The days of a simple and straight-forward six to eight page informational website are behind us. Simple websites have become more data-driven. Web and mobile applications have become more prevalent. Stability, security and scalability are not only best practice considerations, but also the expectations of clients investing large sums of money in their website build or redesign.
New technologies and more complex solutions lead to higher budgets, greater lead times and increasingly variable scope. Under the circumstances, it is more important now than ever to re-evaluate your billing structure.
Three of the most standard, industry recognised billing methods are:
1 Firm Fixed Price (FFP, often referred to as “Fixed Rate”)
Put simply, you provide work to clients based upon a fixed price and scope. Generally speaking, clients appreciate this method, as they can manage their budget without unexpected surprises. While fine and dandy for the client, the burden falls on the shoulders of the developer to develop a crystal-clear and concrete scope for the contract and to ensure that the project is implemented within scope and under budget. Margins have the potential to be higher with this billing method, but it’s our responsibility as developers to make sure that we profit during these engagements, as we take on the majority of the risk.
The Fixed Rate method can also turn you into the “Scope Police”, because the onus is on you to ensure that any work outside the original agreement is charged for, to make sure that you are compensated for the extra time and expense.
The key to success under the Fixed Price method is managing client expectations along with profitability. To that end, a successful vendor must clearly communicate expectations from the outset and to alert the client whenever a change to the job falls outside of the job’s original scope. Otherwise, you may as well start doing everything pro bono.
2 Time and Materials (T&M, often referred to as “Hourly”)
Like any good ex-con or divorcee can tell you, attorneys love this billing method. Under Time and Materials billing, each hour (or minute) that is spent performing services for the client, from brainstorming solutions to management of the client’s project, is billable. First and foremost in the “benefits” column, this method can be lucrative. Provided that you are a fastidious enough record keeper that you can account for your work in fractions of the hour (attorneys typically charge in tenths of an hour), every minute that you work is a minute that you are getting paid for.
Much to your client’s chagrin, this can get expensive. As a result, depending on the client’s resources and financial abilities, they may or may not like this type of arrangement, as risk of change in scope, hardship or your incompetence falls squarely on their shoulders. Consequently, under this arrangement, it is all the more important that the client is provided with the scope of the work and a realistic (and honest) estimate, based on your understanding of the job, based on your prior industry experience. If a change is required, it’s much easier to continue moving forward without any addendum, provided that overage is documented.
Interestingly, in the interactive industry, we have seen many requests for T&M based contracts, with clients thinking that this would help them secure projects at a lower cost. For smaller development shops with less time or capacity to thoroughly bill for all time spent on projects, this may be in fact be true. However, it is important to also look at the motivators: FFP contracts encourage the vendor to be efficient, whereas T&M contracts encourage the vendor to be as slow as possible.
3 Cost Plus
While smaller shops may be sticking to FFP contracts and the mid-size firms are optimising T&M contracts, the big systems integrators have discovered the best of both worlds. “Cost Plus” contracts offer a baseline contract that only covers costs, with an opportunity to cash in on a bonus (aka the “plus”) by exceeding client expectations at the end of the contract. While a 3% bonus may not sound like a lot for a six-figure contract, firms supporting enterprise projects with large multi-million dollar budgets have found that managing these projects correctly can be very profitable.
With cost plus contracts increasing in popularity at the enterprise level, it is important for firms with big growth aspirations to have the appropriate corporate structure for these types of contracts, as supporting a cost plus engagement requires more infrastructure and governance of the corporation’s time and financial tracking systems to ensure excellent product delivery, support and customer service. Want to be a big time firm for the government or private sector? Get your ducks in a row with regard to the above models and brush up on your understanding of Earned Value Management (EVM). This contract model requires extremely detailed planning, scoping and evaluation setting before contract initiation, a talented project management office (PMO) to lead the implementation, and very advanced financial management and accounting structures to set the company up for success.
In addition to the monetary “plus” bonus at the end of the contract period, firms and clients both benefit from focusing on innovation and excellence rather than cutting corners to up an FFP profit or dragging out a project to increase T&M hours. One point worth noting is that by constantly striving to exceed client expectations often results in repeat business, so you would do well to move away from a “launch and leave” approach to client management.
So which billing method is better?
Some argue FFP while others argue T&M. Proponents of each have valid points, and ultimately which method is chosen is a matter of personal preference and individual circumstances. That being said, we argue there is no almighty billing arrangement sitting on high. No billing structure works best in every given situation and each have their selling points. But consistency in your contract approach will greatly reduce administrative and management burdens.
As such, the prudent entrepreneur should carefully consider the options and be strategic about their contracting approach. It is important that businesses in our field re-evaluate our billing methods as the industry, as well as individual market players, continues to evolve in terms of their internal culture, types of services and clients. Billing arrangements of the past may not continue to be good fits for modern clients.
Make sure your firm is managing for the present but structuring for the future. In order to make that determination, here are a few considerations to determine which method is right for your next engagement.
Corporate culture
What works for the firm’s management styles and approaches? Is this a firm that operates on a project/account basis? Or does it instead function as a matrix organisation, supporting clients in a more agency-style environment? Does your firm have a management approach that is part of your core competency and offering, such as an Agile shop? Or does your firm pride itself on having the flexibility to uniquely support a variety of client needs and management approaches?
In selecting a billing method, or combination of methods, to pursue, you will need to think hard about the impact on your corporate culture. If you are an Agile shop running in sprints, the FFP model is very risky. Are your employees and managers going to be empowered and encouraged to recommend an alternate course when additions to scope run the project from black to red? Furthermore, can you afford to stay in business under that model? Running flexible projects with inflexible budgets is a tricky proposition.
On the flip side, if you are a focused firm with renowned experts in XYZ technologies, you will find your firm quickly unable to meet market demands and raising hourly rates can stave off opportunities unnecessarily. Choosing FFP in that situation can deliver a benefit to both the client and the firm, allowing the team to focus on efficiency and excellence in products as opposed to finding cash-rich clients and spending half of your time itemising and legitimising your bills.
Risk adversity/openness
FFP puts the risk on the firm, while T&M puts the risk on the client. Before determining where the risk should lie, you need to balance the needs and risks of a particular project to your firm and determine whether this falls within acceptable parameters of risk to both your firm and your client. As a project becomes more novel, falls outside of previously cultivated competencies of your firm or if your firm would have to work with business partners it has never worked with before, uncertainty increases. Likewise, when dealing with more risk adverse clients, uncertainty and their willingness to agree to hourly billing are inversely related. This situation incentivises flat fee arrangements, when possible. At a minimum, it makes it all the more important for you and your client to have an unreproachable meeting of the minds as to scope and estimated cost.
Market and client demands
Many clients prefer FFP because it allows them to confidently budget what they will have to spend for an online presence. However, an experienced T&M shop should be able to provide a reasonable range for the project and install reporting mechanisms that ensure transparency in billing. Industries may differ in their approaches to contract models, with clients like the government often requiring FFP for lower level (under six figures) while still requesting hours (and ensuring that our taxpayers get the best of both models), while many private firms prefer T&M as a way to manage their vendors and control the risk.
Nature of the work
Some projects do not fit the FFP method right away. For example, software development projects (ie custom modules, R&D work or extremely custom integration efforts). This is also the case with projects that require a truly Agile environment. Agile approaches require Agile budgets and by nature cannot be firm or fixed.
Client relationship
If the client accuses you of “nickel and diming” them with every billing cycle, you will waste a ton of time dealing with them and be unlikely to receive future work. Under a T&M arrangement, this leads to more time on the project and even higher bills for the client. This can lead nowhere but to a bad relationship. Not good for your brand, not good for your reputation and not good for follow-on work. Just plain not good. Clear communication and understanding, along with timely and regular billing, are key in keeping good client relationships during a T&M contract.
Project management
Diligent watching of scope is critical for any contract model, but you may need more reporting with T&M, as the client is responsible for the risk. Transparency and project management must be balanced, as the client pays for your time as a project manager as well as your time as a designer.
Try creating basic burn rate trackers, and for larger projects report on EVM. We have found it very effective to work with our clients collaboratively to determine their pain points, areas of interest, and what questions their higher-ups want answered. Make sure your client’s project manager is fully equipped with this information in advance and you can avoid those difficult and disappointing invoice discussions down the road.
Future growth
Where you are now may not be where you want to be in five years. Think about your firm’s strategic plan and monitor the procurement trends of the industry. If your firm is becoming a larger enterprise player, start planning the infrastructure for Cost Plus contracts now. If you are determined to remain a small, boutique firm, you will retain your flexibility and can utilise process and structure to reduce reporting and management burdens regardless of the contract type.
Whether you (or your client) are big, small, old, new, rich or poor, proper scoping and complete transparency from initial negotiation onward is key. In web development (as in life), if you do not understand the needs, risks, hopes and fears of all parties concerned, your contract will be a roadmap to disaster. Considering these seven factors, and thinking and acting strategically when it comes to contracting models, will reduce headaches and increase profitability, giving your team time to focus less on billing and more on innovating.
The grid isn’t primarily a visual design tool, it’s a user-experience aid – like lanes on a street. A good grid will establish a norm, and a rhythm of viewing a website so that users aren’t thinking about where to read or view next, they’re intuiting it because of the order and hierarchy you’ve established on the grid.
If everything followed the regimen of the grid, though, we’d all go cuckoo from visual boredom. Sometimes we want a design to have elements that pop out of the lines and say, “Hey, look at me! I’m cool for breakin’ the rules”.
Define the grid
If you don’t first define a strong grid, then breaking it won’t mean anything. A strong clean grid with a clear structure and plenty of white space for breathing room is one of the most important parts of a good visual structure for your content.
There are a ton of resources on designing on the grid, but I recommend a thorough read of Mark Boulton’s handbook, Designing Grid Systems for the Web, from Five Simple Steps.
Break the grid
A subtle breaking of the rules can be a great way to draw attention to a detail in your design. Done right, it can help your design break away from that constrained and boxy look – a common critique of web design.
An image pulled out beyond a border, or a sticker label stuck over a bit of content will go a long way to add a nice, defiant detail to your design. Too much of this technique will kill the nuance, though, and you’ll lose the interest. Choose your rule breaking carefully.
Five examples to check out
1. Apple Apple.com’s iMacs pop over the well-defined edge of the main frame of content, giving the sense that these Macs will not be constrained. 2. Gene's Sausage Shop You can use a badge, sticker, banner or ribbon to break the grid and deliver a little fun as Gene’s Sausage Shop & Delicatessen does here. 3. ShweplantisAimee Duplantis and Matthew Shwery’s wedding site uses a frame to define an image then gives it more interest and extra presence by letting a part of the image break the border. 4. Andy Clarke The subtle but effective image overlapping on designer Andy Clarke’s portfolio is a great way to keep an image stack fresh. 5. The Style Spy Images aren’t the only way to break the grid. Fashion blog thestylespy.com’s headline script flies out to suggest energy and fun. If you've seen any examples of sites subtly breaking the grid, why not mention them in the comments?
No matter how you measure it, mobile computing is growing astronomically. Daily usage, smartphone penetration, cellular subscriptions, search traffic, ad impressions, app sales: everything is up. It seems inevitable that mobile devices will overtake traditional desktop and laptop computers as our primary computing platform, perhaps in the relatively near future.
This massive growth presents software developers with amazing opportunities, but also significant challenges. The explosion of mobile platforms and devices has created an unprecedented level of fragmentation, and it's going to get worse before it gets better. Development, testing and distribution of an app for multiple platform/device combinations can be prohibitively expensive.
In this article, I'm going to share my process for determining the best development approach for an app and discuss some of the more popular tools that have emerged to address the fragmentation problem.
Spoiler alert: I'm not going to crown a winner at the end. The correct approach for your project will depend on your development resources, business model, target market and a half dozen other factors. My goal here is to provide information that will help you make an informed decision. For the sake of discussion, I'm going to assume that you are interested in developing apps for iOS, Android, and at least one more platform (eg Window Phone 7, BlackBerry, mobile web, etc...).
Web vs native
Web vs Native is a hot button topic, so please hear me out before branding me a heretic.
I believe that if you can build your app as a web app, then you probably should. Conversely, if you can't, you shouldn't. In most cases, you'll end up somewhere in the middle with a mix of web assets (eg HTML, CSS, JavaScript, images, audio, video, etc) and native code. Determining the right balance for a given project depends on the specific requirements involved. I'll walk you through the process I use to help make this determination: it might not be a perfect fit for your organisation, but it should at least get you started. Please feel free to customise as needed.
All of the development project work we get at Mobiquity comes from enterprise clients. Large companies, by definition, have to reach enormous groups of people with their products and services, so we never have the luxury of ruling out large chunks of the market based on their choice of mobile platform. In other words, every project is a cross-platform project.
When evaluating a new enterprise-class mobile project, I start with web as my default approach, and then ask three questions in an attempt to rule it out.
Does this app need access to device hardware that the mobile web browser can't access?
For example, a barcode reader app needs access to the camera, and therefore can't run in a browser. Ditto for an app that needs to record audio, run in the background, receive push notifications, etc. When an app does need a feature that isn't available to a web app running in a mobile browser, I try to determine what percentage of the app is based on this feature. In other words, is the camera feature the basis of the whole app, or is it just a nice to have?
Who is the audience for this app?
There is a big difference between distributing an app to the general public vs your employees or affiliates. If the app is going out to the general public, the only really viable distribution options are the app store specific to the platform, or as a web app. If the app is internal for employees only, the options are ad hoc, third-party app stores (eg Apperian), sideloading or as a web app.
How memory intensive will the app be?
Things like extensive animation with layers and opacity, very large data sets, file encryption or decryption, and complex map-based interactions can all contribute to a clunky user experience in a mobile web browser.
With the answers to these three questions, I can make a pretty strong determination between web or native. For example, if I'm given a request to design a B2E app that allows employees to manage their personal profile and benefits information and doesn't need to use any of advanced hardware features on the device, a web app is the obvious choice. If on the other hand, I'm asked to build an immersive mapping application with augmented reality layers that requires access to the gyroscope and will be sold to the general public, a native app is the obvious choice.
In cases where I determine that native is the appropriate path, I have a second series of questions I ask to decide if the app should be pure native or a native web hybrid.
Splitting the difference: native vs hybrid
These days, it's quite common for a native app to contain at least one or more WebViews. Normally, a WebView is used inside of an app to display HTML without having to bounce the user out to the web browser on the phone. Examples of mobile apps that use WebViews are the official Twitter and Facebook apps, the native App Store and iTunes apps on iPhone, the Bank of America mobile app, and hundreds (thousands?) of others.
A hybrid app takes the WebView from a supporting role and moves it centre stage. The native code portion of the app essentially becomes a dumb wrapper for the guts of the app, which are built with HTML, CSS, and JavaScript. Static file assets are bundled in the executable, and network data and dynamic assets are retrieved using standard Ajax calls.
Technically, hybrid apps are native but they are built so differently from typical native apps that it makes sense to draw a distinction between the two approaches. This often raises a couple questions: Q: If I'm going to build a native app anyway, why would I use HTML in a WebView instead of the standard approach (ie using the native framework)?
A: The main reason to use a hybrid app is that it addresses the fragmentation problem. Remember, we're talking about building cross-platform apps. Since the WebView components of all the major smartphone vendors have more in common than not, you can build an app with HTML and have it run on lots of different devices. If you use the native framework, you're going to have to rebuild the app from scratch for each platform. Q: If I'm going to build my app with HTML, CSS, and JavaScript, why wouldn't I just ignore the app stores and host it on my web server?
A: There are two big reasons:
Business requirements
There are lots of business cases that might require you to distribute your app through a platform app store. For example, you might want to charge for downloads. Or you might know that your target audience will only discover your app in the app store. Or, maybe you're building the app for a client who demands app store distribution.
Hardware access
Even though hybrid apps are primarily made up of HTML, CSS, and JavaScript, they are technically native apps and are installed on the device. Installed apps are not restricted the way that web apps running in a mobile browser are. Therefore, hybrid apps can access the advanced hardware features of the device using JavaScript. For example, JavaScript code running in a hybrid app can control the camera on a device. This same JavaScript code would fail if the web app was running in a browser.
I'm pretty confident that most people who travel through this decision tree will end up picking a hybrid approach. In those cases, you'll need to pick from a wide range of tools available for building mobile apps using web technology. Following is a list of popular options broken into categories. I'll briefly summarise each and offer some insight about when I would consider using one over the other.
Tools for cross-platform mobile development
The following group of products are JavaScript libraries that take some of the pain out of tough or tedious JavaScript coding tasks when building mobile web apps or hybrid HTML/native apps.
jQuery
jQuery is a hugely popular (and deservedly so, IMHO) JavaScript library that presents a unified API for common JavaScript web dev tasks like DOM traversal and manipulation, Ajax, and event binding. It uses a selector syntax based directly on CSS, so web designers typically find it very easy to start using jQuery.
jQuery is rigorously tested across all A, B, and C grade browsers (desktop and mobile), has a vibrant developer community and excellent docs, and is completely free open source software. The only potential downside of using jQuery for mobile development is that it's significantly bigger than it needs to be because it contains a fair amount of code targeted at fixing weaker desktop browser.
If I'm working on a website that is designed to be viewed in a desktop browser, you can be sure I'll include jQuery, even if that means potentially sending jQuery over the wire to mobile browsers. There's just too much value in the xplat testing that the jQuery team does to rule out the library based on a largish file size. That said, if I'm working on a site or app that won't be available to desktop browsers, I don't use jQuery.
Zepto
Zepto is meant to be a lightweight drop in replacement for jQuery specifically for mobile devices. Because Zepto makes no claims of support for older desktop browsers (think IE6) it can do pretty much everything you'd want to do with jQuery, but with a much smaller footprint. If you're familiar with jQuery and are working on a site or app that’s only going to be available on mobile devices, you should take a look at Zepto.
XUI
XUI is a very lightweight JavaScript library built specifically for mobile browsers. The emphasis is on simplifying just the most commonly used programming operations using the least amount of code possible. In other words, it's just the basics. The syntax is simple but it is different than jQuery so it can take a little getting used to.
Lawnchair
Lawnchair is a very lightweight JavaScript library that abstracts client side persistent "NoSQL style" data storage. It uses the adaptor pattern and supports multiple fallback approaches. The syntax is straightforward and simple queries are supported. When I want to add client-side persistence in a mobile app, perhaps for performance reasons or to support offline features in a mobile web app or site, I'll reach for Lawnchair.
Miscellaneous
New mobile JavaScript frameworks are cropping up constantly. Honourable mentions in this category include now.js, backbone.js, and underscore.js. For a constantly updates listing of JavaScript tools that are useful in mobile development, check in regularly with microjs.com ("Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit!").
JavaScript UI frameworks for mobile
jQuery Mobile
jQuery Mobile is like jQuery UI for mobile. It's a widget library that converts semantic markup into a familiar, finger friendly format. It's built on top of jQuery and as such has best-in-class support across A, B, and C grade mobile browsers. It's a fairly young but very ambitious project that aims to create the best possible mobile web experience on the largest number of browser. That being the case, the total file size is a bit on the large size but it's a great choice if you're creating a mobile version of a public website.
jQTouch
jQTouch is very similar to jQuery Mobile in that it's a widget library that converts semantic markup into a mobile-friendly format. The difference between jQTouch and jQuery Mobile is that jQTouch is specifically targeted at class A WebKit browsers on small screen devices. This means that jQTouch can use WebKit specific features to deliver a higher level of polish with a less code than jQuery Mobile. So I tend to use jQTouch when I know my users are going to have a WebKit mobile browser. Furthermore, Zepto support is supposedly coming soon, which means that jQuery will become optional. This will significantly lower the overall file size and runtime processing overhead.
Sencha Touch
Sencha Touch is a full featured widget library based on the Ext JS JavaScript library. Like jQTouch, Sencha Touch specifically targets class A WebKit browsers, but apps built with Sencha Touch can automagically reconfigure themselves to take advantage of the larger real estate of a tablet device. Also unlike jQTouch, Sensa Touch is not markup-based. Rather, developers write JavaScript code in a client-side MVC style. This is extremely powerful, but comes with a fairly steep learning curve, and it's a pretty hefty download. Sencha Touch is a good fit for medium-to-complex web apps that will be deployed to smartphone and tablet devices running WebKit browsers.
SproutCore
SproutCore is an open source JavaScript framework that was originally created to help web developers create advanced web applications for desktop browsers. In fact, it was so powerful and polished that Apple used SproutCore to build the original version of MobileMe. Because of its desktop browser origins, I've always found SproutCore to be too large to be practical for mobile development. That said, I know that their team is doing a lot of work in this area and I'm sure they've made progress since I last played with it.
Native tools for cross-platform development
PhoneGap
PhoneGap is a cross-platform mobile development solution that allows you to write a mobile app with standard HTML, CSS, and JavaScript and then wrap it in a native app shell. Currently 10 mobile platforms are supported. If you need to access any network resources, you'd retrieve them as you normally would in any modern web app (ie Ajax). Furthermore, PhoneGap exposes a bridge that allows your JavaScript code to access native device features that would normally be off limits to a mobile browser (eg camera, contacts, speakers, mic, etc...).
PhoneGap is not a widget library, it doesn't compile your HTML down to native code, and it doesn't submit your apps for you. Because your app is executing JavaScript at runtime, it can be hard to achieve as polished an interface as can be done with compiled code. I use PhoneGap for all my hybrid app projects. See above for more on how I determine whether or not hybrid is a good approach for a given project.
Titanium Mobile
Titanium Mobile is a cross-platform mobile development framework that enables you to write JavaScript which is then compiled down to native code for the iOS and Android platforms. Titanium is marketed to web developers and is often compared to PhoneGap although the two are actually quite different. With Titanium, you write your apps against the Titanium framework, as opposed to writing standard JavaScript that would run in a browser. From a syntax standpoint, writing a Titanium Mobile app looks a lot like writing a Sencha Touch app – ie it will immediately look familiar to advanced JavaScript developers but newer devs might experience a bit of a learning curve. If you only want to create native apps for iOS and Android, you might want to take a look at Titanium Mobile: it's a great way to avoid learning Objective-C and the Android SDK.
Corona
Corona is a proprietary SDK that uses the Lua programming language to deliver visually rich native application experiences on iOS and Android. It has full-featured physics and tweening libraries, as well as powerful rendering engine that takes full advantage of the GPU. These features make it perfect for immersive game development, but Corona is also useful for traditional mobile app development. I haven’t done any game development, so I haven't used Corona on a client project but I expect that to change soon. If you have to create an immersive pure native experience on iOS and Android, I'd recommend taking a look at Corona.
Mobile Enterprise Application Platforms (MEAPs)
A MEAP is a soup-to-nuts platform that can be used to manage the entire lifecycle of a mobile application across multiple platforms with a single backend. It's outside the scope of this article to get into a detailed comparison of MEAPs. I've only included them because RhoMobile is sometimes considered a competitor to PhoneGap, when in reality they are not the same thing at all.
I don't see "pure web app" and "pure native app" as an either/or proposition, but rather as opposite ends of a spectrum. The question isn't as much about which approach you're going to use for your app as it is about how much of your app will be made of HTML, CSS, and JavaScript.
Your goal should be to use as much HTML as you can without negatively impacting the user experience because the more HTML you use, the less you have to worry about fragmentation. And the less you have to worry about fragmentation, the more awesome stuff you can build. The world could use some more awesome stuff, so get out there and start building!
We’ve heard it all before, “Never mix business with friendship”. Some of us have ignored this (sadly, I have my hand raised). For those of us that have, you can probably attest that it either ended great or quickly turned a great relationship into a well, not-so great relationship.
I have no problem calling a friend who may be a plumber to check out a leaky faucet – a quick, straightforward, one-time favour. Designing, well that’s different. Requests are open to interpretation. It requires a much longer engagement. There are different creative styles … you get the point.
Over the past few years, I’ve had my opportunities to work with both friends and family. I should also say that nearly all of them have been miserable. Good friends have been lost, others have become more distant. I don’t blame any of them: I blame myself. An iPhone app screen design, currently in development, for a friend in 2011Based on my experiences, here are three “Golden Rules” that I’ve made that I wish I knew looking back in hindsight.
Manage communication. Most of us wouldn’t want a Friday night client phone call. Be clear about hours to talk business and hours to talk personal life. If you’re a person who has business hours of 9 to 5, enforce that. No exceptions. This means no talking about the project while hanging out with mutual friends on a Saturday night. This also means no talking about the project when you go to their house for dinner. If your mobile phone rings at 9pm on a Friday night, hope that it’s to figure out what plans are for the evening and not how to improve that subpage design. Break this #1 rule and social events will no longer be social events. Family dinners will no longer be family dinners. Drinking with the boys will no longer be just drinking with the boys.
Manage expectations. Just like you would be clear with your clients, it’s equally important to be clear with your friends or family member. Don’t dance around the subject because you don’t want to ruin a relationship. If you wouldn’t promise a client a particular turnaround, don’t promise it to a friend. No “squeezing in” because they are a friend. Friends, family, clients – if you have a great working relationship with clients, manage your friends and family the same way.
Feel free to terminate the project. If you need to, end a project before it ends your friendship. Just like clients don’t like to drag out engagements that are no longer a good fit for one of the parties, don’t drag out your project because it’s a friend or family. If they are ruining your “poker night” by talking business, you no longer talk about personal issues, or you feel that working with them is changing your relationship, end the project. They may be in a bind because you’re either doing them a favour by not charging them or charging them lower than what you’d charge your Fortune 100 client but that’s a small price to pay in the grand scheme of things.
That’s all folks; three simple rules. Had I known or been more conscious of this when working on projects for friends and family in the past, it would have resulted in a much different set of experiences and outcomes. Don’t let what may start as a “favour” end in fury. Do yourself and your personal relationships a favour and manage communication, manage expectations, and know when to say when.
Web designers sure are downright resourceful. We've converted the industry's most powerful photo editor to a web design app. Whether you use Photoshop or have found a happy alternative, there's no denying the vast array of tips and tools that are available for Adobe's cornerstone software. Finding worthwhile plug-ins, patterns, textures and the like can be extremely difficult given the proliferation of sites offering dated and unusable add-ons. No worries, my friend. I've highlighted some stellar ones below that not only mirror contemporary web style and but easily integrate in to your workflow today.
1. Subtle Patterns
Subtle Patterns is a great collection of beautifully applied textures and patterns, both sophisticated and contemporary. At the bottom of the page, creator Atle Mo gives you the option to download all of them as a .pat file to import right in to Photoshop. It's like he knew we'd be so lazy to have to import each one. Try using them subtly and in various combinations. I find it hard not to use them.
2. Extensis' Web Font Plug-in
Extensis, which offers WebINK as a web font solution, has pioneered the web font plug-in effort. Let's hope this is the first of many web font solutions for Photoshop, since it allows designers to practically apply typefaces without committing to purchasing them. For those who haven't signed up for WebINK, this plug-in may be the tipping point that gets you to do it. Since it's dependent on installing Suitcase Fusion 3 (font management software), you get a bonus opportunity to try that out as well. If other font services don't begin offering such plug-ins, it may be time to switch.
3. Layer Style Jailbreak
Don't be held captive by the handful of options in your layer effects panel. This tutorial by Luke Holder shows you a very under-utilised feature: separating effects on to their own layers for further manipulation. In his example, you'll learn how to take a drop shadow out of the effects and on to its own layer, where you can shape it using the Free Transform tool. You'll never have to work so hard to make a page curl shadow again.
4. GuideGuide
With the flux of fluid grid systems, there's no shortage of templates available. For those bold enough to make their own system, GuideGuide is essential to placing a string of guides perfectly. After wondering why Photoshop didn't include a guide builder like InDesign, Cameron McEfee took matters in his own hands and made this incredibly usable plug-in. If you're anything like me, moving guides into place manually always leaves them one pixel off where I want them to be. Thanks, Cameron.
5. Make Photoshop Faster
It's endearingly called the "pinwheel of death" – the moment when the Photoshop sits thinking about seemingly nothing and everything at the same time, with no end in sight. Dan Rubin gives us two incredibly easy but powerful tips to improve the performance of Photoshop by adjusting the cache levels and image previews. Our collective operating systems thank you, Dan.
6. Photoshoptimize
Proving there are tons of little secrets to improving Photoshop's performance, Antonio Carusone shares a few more to help you speed things up. I'm certain there's even more lurking about the interwebs, but these certainly help shave off impatient moments waiting for Photoshop to process your artwork. Plus, "Photoshoptimize" is a fantastic wordplay.
7. Adobe Kuler
Adobe's Kuler, a community built around colour inspiration, creation and workflow, has been around for some time now, so its inclusion on this list might surprise you. However, it's now fully integrated in Creative Suite 4 and 5, which means it's that much more convenient to reference when working in Photoshop. You can access it by going to the Window Menu and finding Extensions > Kuler. It's a live feed of the online community.
8. Sprite Generator
Creating CSS Sprites can be a hassle, and thankfully there's plenty of tools out there to help. Even better, Richard Dare offers a solution that works right from Photoshop. It automates the process by choosing files in a folder you select, and the only editing you need to do is to remove any unwanted extra space.
9. 1140 Grid
For those just getting started with grid systems, you'll find there's a ton out there, each with their rationale as to why 940px or 960px or 978px is the preferred size. Andy Taylor's 1140 pixel grid is an interesting one: it works down from 1140 (for a 1280 monitor) as a fluid grid. I especially appreciate embracing a larger screen instead of capping off your design for 1024 monitors. You can download the Photoshop templates right from the project page.
10. Expanding Universe Toolset for Managing Screen Resolutions
Sometimes designers are so fortunate as to have a project with a target browser or device to design to. In this case, Punchcut's Expanding Universe Toolset for Managing Screen Resolutions is amazing. It includes a collection of layered PSDs, each providing common devices for comping and design presentations. It's refreshing to see someone's keeping up on all the devices out there.
11. Photoshop Secret Shortcuts
What would a showcase of Photoshop tools be without tipping our hat to those PSD Ninjas out there? Web Designer Wall has a ton of stealthy secrets to work in to how you use Photoshop that, if nothing else, will make you look like cool in front of your friends. This one has been around for a bit, but it still proves worthy today since we all could stand to be more proficient and efficient in Photoshop.
12. Colorotate
Kind of an "Adobe Kuler on steroids", Colorotate is another resourceful colour plug-in to Photoshop. The similarities are apparent: colour palettes and community contributions. The main difference between the two is that the presentation is in 3D, helping some of us grasp colour relation much easier (since it's said that our brains understand colour in 3D). At $9.99, it's an inexpensive, yet powerful tool.
13. Layer Vault
If you work in a group (or even if you don't), the benefits of version control are numerous: revision history, easy contributing and unified workflow. Though usually prevalent in web development, Layer Vault has a version control product for designers. One of the more significant features is a Visual History, enabling you to revert easily and share your work. No Terminal command lines. Just an elegant user interface that runs in the background while you keep Photoshopppin' all day long. Slick project page as well.
14. HSL Picker
Photoshop's built-in colour picker gives you a wide array of systems, including RGB & CMYK. For all you CSS3 and Sass junkies that have moved on to HSL (Hue, Saturation, Luminosity), this system is nowhere to be found. Brandon Mathis developed a handy HSL Picker that can take your hex values and convert them to HSL. As he explains, the benefit to using HSL is in meaningful colour relationship, where changing a value such as luminosity turns your colour from a brown to a cream.
15. Layer Styles
Wouldn't it be cool if CSS had something like the Photoshop Effects Panel? Wonder no more – Felix Niklas developed this nifty tool, which lets you adjust CSS3 properties such as Drop Shadow, Inner Shadow, Background, Border and Border Radius right in your browser, giving you a live preview of the result. This tool is especially useful for those who are just getting their feet wet with CSS3 or prefer a visual representation of what each adjustment does. After utilising just a few of these, you'll see just how different your Photoshop experience can be. No longer are you bound by the confines of a photo editor. These manipulations help save you time and open up font and colour possibilities that would have been hard to achieve otherwise. The sign of a pro is one who won't be controlled by the way a tool was intended to be used. Rather, they transform their tools to fit their needs.
There are certain things I see over and over again in this business that make me cringe like I’ve been forced to chew on a tinfoil sandwich. Like the wireframe that’s nothing but a big rectangle with three equally-sized rectangles underneath it – “There’s your homepage” – or any other kinds of design that come from utter lack of inspiration.
The following are the short list of things we should never do again (or at least wait until they can be done with some semblance of retro-hip irony). I’m sure there are lovely examples out there of these elements or techniques being used tastefully, properly, or in inventive ways, but I’m going with the thought that 99 per cent of the time, if you’re doing this stuff, you just aren’t trying.
1. The page curl
In the early days of The Barbarian Group, while working out our processes and company documentation we created Form 9987AF234PC – The Page Curl Waiver. Essentially, we decided that any designer was allowed only one “page curl” for their entire design career. The waiver encompasses everything from the faux rolled-up corner of a piece of “paper” in a flat design (ValuPak style), to one of the all-time worst pieces of interaction design ever invented: the click-and-drag-the-corner-of-an-image-to-literally-turn-the-page Flash trick. Our waiver may say you get one “page curl”, but really, the web would be a much better place if none of us ever used one again. Silverlight PageCurl 1.0 adds a page curl effect to any web page, shows a customisable image and opens any website in a new browser window when clicked...
2. The book metaphor
A not-too-distant cousin of the page curl is the (overused and misused) book metaphor. I’ve been guilty of having to work on a couple of these over my career, and I’ve reviewed comps of far too many journal, scrapbook, school notebook, newspaper, legal pad, moleskine, spiral-bound, trapper-keeper, 16 And Pregnant titles style high-school sketchbook metaphor designs. Every time I see one of these, all I can think to myself is, “Wow, they really didn’t try very hard”. Now, there may be some cases where a very talented designer can make this metaphor work, but as a general rule: don’t go there.
3. Doors
Using animated door-like panels to conceal and reveal content, including such classics as: Star Wars style spaceship doors, garage doors, revolving doors, elevator doors, etc, should go away and never return. Thankfully, the decline of the Flash microsite has helped make the use of “doors” all but disappear. With all the new JavaScript animation fanciness people are using these days, we could see a resurgence. Let’s not.
4. The 45˚ arrow
What to do to spice up that white, black and red, big-Helvetica based design? The drop-shadow isn’t working, and the fat horizontal bars don’t seem to be moving the eye across the page properly.
Enter the 45˚ Arrow. You know the one. The second slot in your Photoshop’s trusty custom shape tool menu. Hold down shift and rotate to 45˚. Stop it. There are plenty of other elements to poach from mid-century Swiss graphic design, yet somehow this little dingbat has been a go-to for web designers for as long as I can remember. Let’s call a moratorium on this one. Maybe in 10 years it can be retro once more.
