How to Be a Good Designer

I’ve been designing web sites and user interfaces for quite a long time now and thought I’d try to pass on what I think it takes to be a good designer. This isn’t about design techniques or theory, just how to interact with other people.

Rule 1. Don’t be a dick.
That’s really it. Don’t let your ego take over. You will inevitably have to present your work to others. Don’t presume that because you’re the designer that your opinion is worth more than anyone else’s. It’s a collaborative process and if you start feeling that you know best it will stop you listening to others. This leads neatly into…

Rule 2. Listen to others.
This isn’t because you have to or to be polite. If you actually listen and understand people’s views, opinions and concerns you can learn how to adapt your designs to meet their needs or explain how there might be a different solution to the problem.

Rule 3. Explain your thinking.
Don’t just present a design and let others judge it. Explain clearly all of the design decisions you have made. If you can justify these and articulate them clearly people will understand, you’ll have more of a conversation and, in turn, their feedback will be more constructive. It will also give them more faith in you – you don’t do things on a whim but your decisions are well thought out.

Rule 4. You don’t have to win.
It’s ok to not get your way. It’s important to show that you respect others’ opinions and concede to try their ideas. If their idea really was wrong it will come out over time and the next time they will be more inclined to trust your view.

What to Look For in a Web Designer or Design Agency

Imagine you’re a business owner or marketing bod and you need to get either a new website or you want a redesign of your current, slightly tired looking site. You need to hire a web designer or design agency. How do you tell the good from the bad?

Web designers range from the top end agencies who have major international corporations in their portfolios down to someone’s neighbour’s kid who made a website for someone once. Chances are you want something in between – not paying over the odds and not getting something held together by sticky tape.

Agency or Freelance Designer

I’d say your first choice is knowing whether to go with an individual or an agency. Traditionally agencies would cost you more as they had an office with bills and marketing costs whereas an individual might be working from their room. Today, with more home working, those lines are a bit more blurred and some very good agencies might be made up of remote workers. An agency brings some reassurance, that if a particular person is on holiday for 3 weeks, off ill or leaves then there’s usually someone else to pick up your work, whereas with an individual you might not have that fallback. By the same token, some designers have very sound fallback plans – working with other designers, passing all relevant access back to the client so it can be picked up by another freelancer. It’s really a case of asking the right questions and making sure you feel adequately covered for what you need.

It’s all about how it looks

Look at what the designers have done previously. Obviously consider if the designs look appealing but look slightly beyond that. Is each design tailored to the content of the site or business it represents or are they trotting out the same template for all their sites? An overuse of templates suggests that they’re bashing out sites as quickly as possible for maximum profit rather than really caring about doing a good job.

Actually, it’s not about how it looks

Looks are one thing but how a site performs for you is much more important. It needs to load quickly and display properly on any device. Some sites have great home page animations or big images which cycle to promote things. Whilst these may look great on a desktop they’re a nightmare on a mobile device without WiFi. If a user has to wait 30 seconds for your page to load and then pinch and zoom to read your page, do you think they’ll hurry back? Fast loading and appropriate sizing for all devices is essential.

Ask about page speed and responsive design. If they don’t seem to know about this, or view it as an extra, run, run fast, far away. Responsive design is not a “nice to have” like it was a few years back, it’s critical. Even if you think you’ll never have any mobile visitors, 1) you’re wrong, by the way, and 2) having a site work on mobile is a key factor in Google’s ranking of search results. If it doesn’t perform well on mobile Google’s search ranking algorithm will lock your site in a dungeon and make it eat nothing but porridge for the rest of its anonymous life. Probably.

Relationships

You also need to consider if you’re looking for a one-off piece of work that’s signed off and shipped or an ongoing relationship where they will keep working on your site. Make sure you find out costs for any future work – new features or pages or tweaks to existing stuff – even if you don’t think you’ll need it. It’ll give you a good idea of how they operate.

UK VAT

This applies to the UK. I’m not sure quite how Value Added Tax or equivalents work in other territories. If you’re a small business, individual, club, etc and not VAT registered yourself it may pay to find a freelance designer who is also not VAT registered as it will save you having to pay an extra 20%. This does imply that they’re working at a lower turnover level but for a smaller project this might be a better fit.

Summary

To bring that all together in a nice to do list, ask about the following:

  • Fallback plans if the designer is not available
  • Use of templates
  • Page loading times, especially on mobile
  • Appearance on different devices
  • Ongoing or future work
  • Are they VAT registered (if relevant)?

Developing in Codepen

A look at why and how I use Codepen for front end development work.

Background

I work on a web app with a development team. We use AngularJS with a RESTful API. My role is looking at the design and UX side of things and scoping out how a new feature will look and behave in a web browser, or, I should say, in various browsers at different screen sizes.

I generally do my work up front. I’ve always been a design in HTML and CSS kind of guy. To me, with my skill set, working in a graphics editor takes as long as coding it so it makes little sense for me to do the work twice.

Until recently, I’ve been using static HTML and then another developer has added the binding and data. Where the feature is on a new screen I can go a step further and create a dummy data object, to represent the data returned from the API, and actually do the binding as well as create any custom behaviour.

Working on existing screens has been much more difficult. It’s almost impossible to add new data, binding and behaviours without breaking the existing code. To use a dummy data object I need to intercept the real data retrieval and replace the object, which stops the page working when wired up again. However I work things, I’m having to check in code which is not releasable.

A new way of working

I’ve started using Codepen to abstract away the new feature. I set up a new pen, import any existing dependencies and then create the HTML, CSS and JavaScript for the new feature in isolation.

This means that the original project code does not get touched and broken. As the next developer brings in any model/schema changes he/she can bring in my front end code so we don’t have any breaking check-ins.

By importing the dependencies – JavaScript libraries, CSS – we avoid any clashes or inheritance issues and additional work trying to integrate my code.

It also means I can give the new feature my full attention without having to use other parts of the screen, for example, if I’m working on a modal window, I don’t have to go through the usual page processes in order to call it.

I’m using Codepen in the way it was intended, as a front end playground, an environment where I can experiment with different ways of doing things. The results are displayed in a frame, updated instantly as you type, which makes working much faster – no more manual refreshing or rebuilding.

From what I’ve described up to this point, this abstraction could be done by making a copy of the page but copying the HTML page, the CSS and JavaScript and changing all of the references between these files is quite a headache. Believe me, I’ve been there enough times.

One of the massive advantages of Codepen for a designer is the ability to fork pens, so you just hit one button and you’ve got an exact copy of the pen you were working in, making it very easy to create a few variations of a design.

As each pen is available on a public URL it’s easy to share designs with colleagues or clients and they can see a working prototype – much better than a static screenshot. It also means that links can be embedded in documentation. Personally, I feel that now web animation has become mainstream, it’s important to be able to show how screen elements transition between states, how things appear/disappear and demonstrate where the user’s attention is drawn through processes. Static screenshots just don’t cut it any more.

Final point. Designing in the browser with work stored in the cloud is awesome for design. I could be out and about and suddenly see some inspiration for something I’m working on or get a new idea. Rather than hope I’ll remember it, I can quickly create a new pen or fork an existing one and add some code or notes there and then from a phone or tablet. I don’t have to hope I’ll remember or wait until I’m back at my desktop. It’s exactly what the web should be.

How to choose the right web host

web hosting serversIf you’re starting a new site, it’s very hard to know how to pick the right web host. Which company should you host your site with? How much should you be spending?

There are a number of factors to consider.

Disk Space
This is the actual physical space on the server for your files. If you’re just using text, screen resolution photos and a few icons and graphics then you really won’t need much space at all. A few megabytes will do. If you’re going to be working with high resolution photos, audio or video files then you might need more.

Data Transfer
This is the amount of data that is downloaded each month. It’s a combination of the sizes of files on the site and the number of visitors. If your site is well optimised and you’ve kept your files as small as can be then, again, you probably won’t need much data transfer. With a new site things are usually slow to start of with but then snowball as the site grows. YOu need to keep an eye on the monthly data transfer (your web host should give you this) and upgrade to a higher transfer limit only when you need to.

Reliability
Many web hosts talk about their “uptime” – the proportion of time that your site will be up. It’s usually 99.9% or higher. With greater reliability comes a higher price tag. YOu have to ask yourself if your site going offline for a short time is really such a bad thing and what it would cost you. Obviously, if you’re a massive site like Amazon then being offline for even a minute could cost you thousands but, in reality, for many new sites it’s probably better to risk a few minor outages and save money on the hosting.

Support
Finally, it’s worth weighing up what kind of support you will receive. If you’re new to working with web hosting, managing email accounts or have specialist requirements, e.g. working with ASP.NET, then knowing that there’s someone there to help you can be valuable.

With a new website my advice would be to start small and let the hosting grow with the site. As the numbers of visitors increases you can naturally afford to invest more in your hosting. Only pay for what you need. Start with a small hosting package on a shared server and upgrade as you need to.

Static Website or Content Management System?

If you’ve decided you want a website, the next decision to be made is which kind – a simple, static website or a Content Management System (CMS)? Let’s have a look at the pros and cons of each kind.

Static website

Pros

  • As it’s simpler it’s quicker. I can produce a static site in a matter of days at a push.
  • When it comes to design, there are no restrictions.
  • It’s cheaper. Cheaper to initially build and cheaper to run.

Cons

  • If you want to update it you have to contact the web developer and wait for him/her to update the content for you.
  • If you want to use an XML sitemap you have to have it updated manually each time you change your content.

Static Website

Content Management System

Pros

  • You can update the site’s content whenever you want, from wherever you want, provided you’ve got an internet connection.
  • It’s even possible to update your website by email.
  • As the site structure is dynamic all navigatoin is handled for you. For example, if you add a new page it automatically appears on the menus.
  • Your XML sitemap is automatically updated every time you change the site’s content, meaning the search engines can keep up you.

Cons

  • It’s more expensive. The set up takes longer and the web hosting costs more.
  • The web designer doesn’t have quite as much creative freedom as he’she has to fit in with the CMS framework.

Content Management System

Conclusion

In the end it boils down to how much content you are dealing with and how frequently that content is going to change.

If you are starting up a new business it may be worth taking advantage of the tax breaks allowed as start-up costs and go for the CMS.

Click here to get your iherb promo code now!