Author Archives: John

Author Archives: John

Designers who illustrate and code

Designers who illustrate and code

Design trends, technologies, influences, colleagues, mentors, and practice are constant teachers. I worry about the learning of two focuses that regularly intersect with my work: drawing and coding. If you are a designer, you have run into the edge of your abilities in both of these situations. There's nothing wrong with this, but it happens enough to me that I wonder if there is ever going to be an "enough" learning for both. That leads to more questions: Am I proficient enough to make great work? What am I missing? Am I getting lost by focusing so much on my role as a designer?

If you follow this line of questions enough you can eventually feel overwhelmed and defeated by the idea, having seen so many great portfolios and projects. So what should we do? Is having your head down and focusing on design the right answer, or do we need to push ahead and constantly drive toward exploration in related fields?

I believe it depends on your needs and goals. Sometimes I work with developers that manage my designs within an application. My goal is to have at least a conversational knowledge of coding capabilities so that the work I do supports the methods used by developers. Knowing what a framework or language is doing can be helpful to managing expectations and keeping ideas close to reality.

In the case of illustration, a basic ability helps to think convey ideas to clients or colleagues. If you are a visual learner it will support your creative process. On a regular basis I find it helpful to draw out a concept before going to the computer, or working through an idea with a rough sketch to share with someone else.

Small steps add up over time

After reading this and deciding to increase your abilities, how do you start? The path you choose is personal but learning small amounts at a time is helpful - as well as setting workable goals. Start small, stay small, and be consistent. Instead of setting out to build an app or redefine an illustration style, take five minutes at a time to read (and re-read) a tutorial or simple concept. Take five minutes to make a series of gesture drawings of objects in your studio. If you find that something holds your attention longer - great. Practice as long as you like but commit to something small and be consistent.

Inktober

Inktober

Here are all of the illustrations I made for the Inktober event in October.  
Advice for new designers<br/> (or anyone on the job hunt)

Advice for new designers
(or anyone on the job hunt)

Recently, a colleague emailed to see if I could provide tips to a recent graduate looking for work. Though I am working in a different field than the job seeker, I think my suggestions were helpful. I'm sharing my them here along with some other ideas I had because they apply to other vocations.

Tell everybody, and make your role easy to remember.

The first step to finding work is to let everyone know that you're on the hunt. Don't write off friends or family as irrelevant contacts, thinking they will be unhelpful to your search. It's impossible to guess about what others know about open positions. Speaking with friends may jog their memories about a position they read or heard about. Make sure friends and family know what you do. That sounds funny but it's disappointing when you get a job listing from a friend that isn't clear about what you do. Try to summarize your job in one sentence. Give an example of a project they can relate to as well. This will help them retain the information by providing a frame of reference. A short description of your role will also help when you meet new people who ask "What do you do?" and the example helps to solidify your role in their mind. A solid job description also helps as you attend meetups, talk with mentors, go to parties, meet friends, or speak with colleagues asking for tips on finding work. As I mentioned, a job can come from a person or place you didn't expect and this will help you to be prepared.

Walk through an internet search of yourself to see what employers see.

While you're looking over your resume, remember that you have a record online. To see it, go into private browsing (to be unaffected by your past search history) and look up your name. Curate your visibility online, marking accounts as private or pruning posts to link to professional profiles. If you have no search presence, this is a chance to claim an identity for yourself. You have the ability to change your search engine visibility. How? First, start social media accounts. LinkedIn and Twitter are most helpful in professional settings. Next, set up your own site and start writing. Yes, start a site and begin writing. The knowledge you have is valuable to others and helps you to show up more in searches. Writing about your profession reenforces your expertise while helping others to learn. Imagine getting an interview question that related to something you already answered in a blog post. Writing also helps to clarify your own thinking and is a skill applicable to every job. If you are able, make videos that share your expertise. This will help your presentation abilities during interviews and video is easier than ever to produce.

Don't wait for a job to start working.

If you're looking for work, finding clients in the meantime is a great idea. Freelance projects can boost your social skills and strengthen your work. In interviews, freelance project give you have more to talk about. For extended periods of job searching, freelance could help fill gaps in in employment. Freelance can help take some pressure off of financial needs at the same time. If you are working on side projects, make them worth your time! Work on projects that take you closer to the work you want to do. Imagine 6-12 months of side projects where your work is relative to a dream job you have always wanted. With gradual progress on related projects you can shape your resume to be an even greater match for the job you always wanted.
Your project is stuck, here’s how to fix it.

Your project is stuck, here’s how to fix it.

Every project gets stuck in one way or another. Sometimes a tough spot in a project stops progress permanently. Let's talk about why that happens and how to fix it. Finishing a project (or choosing not to complete it) is work worth doing.

Problem: Overwhelming workload. You took on too much or a project seems too ambitious.
Solution: Break it apart! Small steps and a crossed off list are little successes you need to get things moving again.

Problem: Lost direction. Aspects of the work have changed or you learned something new that affected the work required.
Solution: Look back at original plan. Where were you headed then, and what changed? Is the problem you were trying to solve still there? Changing course isn't a death sentence for a project.

Problem: You are distracted.
Solution: Remind yourself why this is important, and that none of us can know how finishing a project will be helpful until the work is done.

Problem: You or someone else talked yourself out of the idea. Or, you did the work mentally and felt good about a future outcome.
Solution: Return to a small commitment you can be excited about, and revise your goals.

Problem: Scope creep (similar to lost direction).
Solution: Make sure you can deliver on the basic idea and see if it is enough to build on later. Get the pressure off for other aspects of the work by fulfilling the project's basic needs.

Problem: Bad neighbors - Coworkers who won't follow through are dragging you and your project down.
Solution(s):
1) Check their interest level. It can help to remind them of the stakes of finishing the project.
2) Give constructive feedback and set managable expectations.
3) Consider removing them from the project. If it is a personal project, remember that nobody will be as excited about your project as you are. If money is involved, keep good records of your conversations and always follow through.

Repeat steps 1 and 2 as long as you are able without compromising your motivation and intentions. It is easy to blame others for the way a project is going, but letting the problem continue is a choice.

Problem: Fear of the unknown. What will working on this project do to your current commitments? What if you get stuck? What if it fails? What if...?
Solution: Remember that anything new or different is uncomfortable at first, and that this is how we grow. There will always be aspects of the work to worry about. If worry is a problem, try to turn it into excitement. What can happen if you succeed? If you fail and finish the work anyway, what could you learn from that? Could you learn things to roll into a future project? If your friend was worrying like this, what would you say to them?

Stuck projects will happen, what you do about it is what matters.

Bulletproof branding

Bulletproof branding

bulletproof-branding We ask a lot of logos. It must represent your business. It must be unique. It must help to establish and reenforce branding. It must show up clearly in many different situations. It must be timeless. It must be easy to read. It must help your business to stand out among competitors.

These needs leave us with a big task, and there are lots of ways to fall short. If you find out your logo has problems after the launch it can be frustrating and expensive to fix - especially if you have print pieces involved. Here are some ways you can test your logo in progress before running with it.

co-logo-cropped
Selection lines show the square.

Think inside the box. The web is boxes, in boxes, in boxes. Your logo or a variation needs to be in a shape that can tolerate trimming. On your website you control the space given to the logo. But what about everywhere else? Social media profiles all ask for square dimensions, or that your logo can be cropped to fit in a circle. Here's an example I made that makes good use of the space social media profiles allow. Without the text below and only an icon, it would still "hold" a square shape.

Reproduced in other formats: one color, reverse color and more. Another way your logo can be beaten is by having no one color or reverse color options. What if your logo is printed in white on a colored shirt? Are these effects that cannot be reproduced with one color printing? Embroidered? What about the common one-color "sponsored by" section in the footer of websites? Those are designed to be surrounded by other logos and outside company branding.

logo-embroidered
Original and embroidered one color variation.

Next to other logos, how do you compare? Thinking of situations where you are compared to competitors is important - self awareness in this can affect your visual impact. Food companies spend a lot of time comparing their packages to competitors, knowing that they will be side by side on a shelf. You may not have that much trouble but you are being compared to your competitors wether you know it or not.

Speed is important, filesize is important. I talk about this a lot, because slow speeds can turn visitors away. Loading a large logo slows down your site. Using fewer effects, limited colors, and bringing in .svgs to serve logos are all helpful. Size pictures to the space in which they will be used - shrink the file itself and not with css. Doing any of these will help but they also work well together to make a site load quickly.

Those are the known troubles to address. For the rest, you have to plan for less than ideal scenarios.

Small, large, upside down, distressed, sun faded, in the wrong color, used by non-designers and those with other skillsets can all play a role. Test your logo. Document colors, include type and as many formats and file sizes as you expect will be needed. Organize and label the files well, too. The easier you make following guidelines the more they will be used.

I hope this helps, leave a comment if you have other ideas.

➽ More branding examples here
Common problems in responsive websites

Common problems in responsive websites

responsive-sitesI can speak for all designers when I say that the acceptance of responsive design is a huge step in the right direction. Mobile views are where users are and will continue to be if the trend continues.

There are some things to watch out for when making a site responsive before calling it "done", and all can be found by testing. Here are a few things that keep showing up in sites I see, and ways to fix each problem.

Type bloat. This is the first sign that the site still needs to be adjusted, or was built with mobile as an afterthought. Text that looks fine with lots of space on the left and right in a wide column becomes stuffy on a mobile device unless type is given room to fit the space.

The solution is to look at it on a small device. When a smaller phone isn't available, I try to simulate what a site would be like for someone on an early smartphone to help content stay legible.

Sorry, mobile users.
Stuffy, bloated text in mobile view.

The order of content. You have multiple columns on a desktop, but if you design on the desktop to start, what will happen to your site in one column? If you have ads on the right, will they appear on top of your site's content or at the end - or should they show up at all?

The solution for each situation is different but the first step is testing the page to make sure elements flow throughout in an expected way (unless you want to design with mobile first and head this problem off sooner).

Speed loss from frameworks. Many designers like Bootstrap, Foundation, etc. for the way they make getting a site together quickly. The biggest trouble (besides sites looking the same) is that so much of the code is unused by your site at the end of the project. Every visitor to your page will have to call on the entire framework to load a few elements for your site to appear. It can affect their data usage and your site's speed.

To help counteract this you can use a framework in the mockup stage and build the site with only what you need. Keeping the framework handy as a mockup tool will allow you to revisit areas in the future without the need for the entire framework at once.

Web-friendly images. The most common way to slow down a site is to keep pictures larger than needed. Stock photo sites, cameras and our (sometimes) fast connections are to blame here. If they load quickly for us, why should we think otherwise for a site? Unfortunately, unreliable internet speeds keep this a problem.

Web safe images can help. Photoshop's "save for web" is a fairly easy way to see the file size of your image while comparing quality. Be careful to provide images for retina displays as well if needed. There are some methods of providing images to viewers based on CSS but none as easy as "save for web" right now.

This might seem like a lot, but it adds up to a better site for your visitors and is well worth the effort.

If you need help, send me a message and I can help keep your site looking good and loading quickly.

Growing and improving with web standards

Growing and improving with web standards

web-standards

Many designers are self taught and self teaching. There are always improvements and changes in web standards to incorporate into practice. This pace is overwhelming at times, and everyone experiences this once in a while. If you're new to dealing with web standards you might feel frustration on a regular basis. Fortunately, the systems in place for learning and keeping our cool are as relevant as ever. Let's look at a few mindsets you might experience and how to deal with them.

Problem mindsets:

Impostor syndrome: If you have ever felt like you fooled your way into the project and everyone is smarter than you, blame this mindset bias. Every designer and developer has felt this way at some point. It is also important to remember that everyone is at a different level of learning. There is no "yes/no" impostor state.

Comparison: Another way to hit the wall is by comparing where you are with other designers to the detriment of your learning. I believe a level of comparison helps us to learn and gain perspective but if it gets out of hand can cause you to rethink too much of your work.

All or nothing thinking: This is an easy one to run into thanks to the level of information that exists for the self teaching designer. Trying to understand everything at once is sure to make you feel overwhelmed.

Solutions:

Resign to not knowing (yet). Every time I feel overwhelmed this is step one to restarting. No designer has a grasp on everything happening with the web. Allow the reality of learning to settle back into your practice and make progress at your pace.

The web is resilient. When you're learning, you will discover that the way you have been working isn't quite up to date anymore and you have outdated pages on the web. Relax - there are some very old pages online that are still legible. Some newer features for the web aren't even used much until browsers "catch up" with compatibility. That said, your old pages are an excellent chance to bring new learning into practice. Updating old work is a chance to learn, not another problem.

Measure your progress. This is something I do to keep myself on track. By comparing yourself now to where you were last week you can see progress or identity problems instead of feeling overwhelmed by an unhelpful mindset. Identifying what you don't know is a good first step to learning.

Finally, go take a walk. That fixes everything you can't process yet.

There are more problem mindsets - and ways of dealing - than I mentioned. Leave a comment to talk about how you handle it.

Why WordPress works for small business

Why WordPress works for small business

wordpressFor a business new to the web, I often point to Wordpress as the content manager for their site. Here are some reasons:

Wordpress is easy to install and learn for for people at all skill levels. Wordpress is compatible with every hosting company at this point, and installs in minutes on a hosting account. There are also default themes to help you get started.

The admin area, or dashboard, is easy to understand. I have worked with people who only use email and Word on their computers and they quickly pick up Wordpress. On the administrative side, I can hide areas of the site that are more technical for users who aren’t comfortable around the entire dashboard.

Low cost (free to install). Wordpress is one of the most widely used content managers on the market today. There has been consistent community involvement of the development of Wordpress through plugins and addons, as well as providing support on Wordpress forums.

Lots of plugins. The additions made by the community through plugins are invaluable. Wordpress can bring in contact forms, connect with your analytics account, publish to your social media account when posts are made, help you sell items, adjust SEO to your site and more.

Safe and easy to backup. This comes at a caveat: As long as Wordpress is updated it’s fairly safe, and there are many plugins to help extend this security as needed. The catch is that keeping Wordpress updates from installing can put a site at risk. I notice that Wordpress support offers updates on a regular basis to help prevent trouble before it starts.

Customization. This is one of the biggest reasons I like working with Wordpress. Sites like Squarespace and Wix have some customization in their templates but can suffer from homogenous design since settings are limited by the content manager. Wordpress allows for more flexibility to create unique sites. Part of my job as a designer is to help a business stand out, and customization is an important aspect to making a great website. The catch is with that level of customization available, the technical requirement increases as well - meaning learning a little HTML and CSS.

A summary:

Squarespace/Wix: Greater monthly cost, less flexibility/easy to update, needs less maintenance

Wordpress: Greater learning curve, needs more maintenance/most cost is upfront(DIY can be free), more design options

➽ If you need help with a content manager regardless of the service let me know.
Creative Sprint project

Creative Sprint project

I'm part of the Creative Sprint project, where I'll be making illustrations of locations in Pittsburgh. I'll update this post each day in April.

Larger versions are on instagram.
Here's the whole set: pittsburgh-creative-sprint Here they are separately: I’m part of the Creative Sprint project, where I’ll be making illustrations of locations in Pittsburgh. I’ll update this post each day in April. Larger versions are on instagram. Here’s the whole set: Here they are separately:
Are you a designer or an artist?

Are you a designer or an artist?

Yesterday I talked about design as a service. The idea is that you are not designing to be creative, you're making something that helps other people to communicate more clearly. That's a good definition of design.

art-timeChances are, these can send you to places where you might not feel like you are doing your most creative work. If you're like me, you chose a path in design because you enjoy art in general. In your day to day work it isn't certain that you will find an intersection between design and art you want to make. You can end up in a creative field and are not creatively challenging yourself if you're not careful. This can lead to frustration, feeling less creative and ultimately delivering work that isn't your best. How do you handle this?

Punch out of your design job once in a while and make art.

That's really it. Here are some reasons:

Creativity in art can influence your design thinking. The exploratory process of making art is a good practice for when creative solutions are needed in design. Science supports this idea. I'm out of my element with the science behind this but thinking creatively in art will support creativity elsewhere.

Remind yourself of the difference between art and design. Art is expression and design is communication. If you're making art outside of design work you will be "scratching an itch" so to speak. This allows you to include art as needed in design, instead of needing to include art in design.

There is room to be creative in design and you need to be ready to deliver - it's part of why you're qualified to do this work. When we are being creative we grow more than when we feel that our work is repetitive. Challenge yourself. If the work you are doing isn't challenging to you then you might not be giving it what you are able.

If you are an art-friendly designer and want to start a practice, today is a good day to begin. Creative Sprint starts today, 30 days of ideas for being creative. I'll be doing it as well.

There are many more benefits to making art outside of your original profession. I encourage you to find them - for your sake and for the sake of your work.