The Designer’s Guide To

Posted: | | Filed under: Design Survival | No Comments »

A guide to help new designers create, execute and maintain digital content for the web. Advice provided by international industry professionals, edited and curated by Richard Baird.

Get to grips with some coding basics

If you’re a web designer who’s just starting out (or even a seasoned pro who’s never gone near code) having a basic working knowledge of HTML and CSS will allow you to design websites with “real world” limitations in mind. What’s visually possible in Photoshop/Fireworks can’t always be translated very well into code, at least not without an awful lot of work!

Screen resolutions, user agents, smartphones, tablets etc all throw in their quirks into the mix when designing for the web. Basic coding and web design fundamentals will help you think about all these various scenarios during the design process  and how your artwork will translate into code. You’ll be able to produce more flexible designs which can cater for a wide range of situations and devices. Even with the growing use of HTML5/CSS3, the web still has limitations and by being aware of them you’ll  be able to produce visually appealing websites but with that added  flexibility.

Here are some websites to get you started:

Provided by @heinrichdsf

Problem solving

As web designers our job is to solve problems in a way that balances functionality with aesthetic considerations.

The function of a portfolio is to show your skills and express who you are to potential clients, visual creativity, originality and perhaps an experimental design can be advantageous in this situation. On the other hand, the function of a landing page is to generate leads and requires a mindset that places conversions over design.

From a design point of view, how can we assist in lead generation? We can bring more focus on CTA’s (call to actions) and persuasive content (such as: Testimonials, Guaranteed policies etc).

Testimonials tend to look better below the fold and often used to fill up empty space, but we need to remember that this kind of content plays a vital role in generating leads and delivering sales. Engage potential visitors with convincing content once they arrive on the landing page by placing it near the CTA.

Provided by @mizko

Consistency

Be mindful that when you are creating a visual identity that will need to be executed on-line make sure that you give your client clear guidance on how to apply this online, from Facebook to Twitter and across any blogs, this typically comes in the form of brand guidelines. Your hard work may suffer when passed on to a web designer who doesn’t have a clear understanding of how the logo should be applied, its colour values or dimensions.

Provided by @richbaird

Web Fonts

Now that there is a wide choice of typefaces available for on-line applications the chance to express a brands propositions with more expressive character choices is easier than ever. When developing a brand language be sure that your complete vision can be translated on-line by checking that your chosen typeface has a web version (and appropriate license) available.

Provided by @richbaird

Accessibility

Accessibility in web design is more than simple alt descriptions and skip navigation links!

A useful accessibility exercise when beginning a site build is to download a demo version of speech-browser software and run it over your pages. Listening to the outcome will give you some indications as to where your site is not meeting requirements for visually impaired users. Listening to how content is grouped will also assist you to improve on content delivery – which should always be the foremost consideration in designing any website.

It makes little difference how beautiful your design is, people ultimately visit websites for content. If yours isn’t accessible and well organised you can lose out on big sections of a web audience.

Detailed info about enhancing your site’s accessibility is freely available from W3C’s Web Accessibility Initiative (WAI).

Provided by @kattjayne

Accessibility part 2

The internet is available to everyone including people with disabilities; be it visual, motor or any other impairment. As web designers/developers we have a moral duty to ensure our websites are as accessible to as wide an audience possible. No one should be left out because they can’t see a specific colour or use a basic feature on a website. There are however limitations at times as to how much work you’ll be able to do depending on whether you’re working in the private sector, government or education as development work ultimately boils down to funding and time.

There is more work involved in developing and designing an accessible website but the ultimate reward is worth the effort. It’s also not as difficult as you may think to start creating accessible websites. By following many of the basics set out by the W3C and WAI you’re complying to standards and giving disabled users a better web browsing experience.

Many (but not all) disabled users use special browsers or screen readers to help them enjoy the internet just like you and me. Some are paid-for and some freely available. Whenever possible you should test your website in as many of these browsers to get a real sense of what your website looks like to these users. This will allow you to tailor your website and create a more efficient and friendly experience.

Designing and developing with accessibility in mind will give you a new skillset and a sense of satisfaction that you’ve helped others enjoy your website by being inclusive to those who aren’t as able as you and I.

Here is a list of resources to get you started:

Provided by @heinrichdsf

Wireframes

Wire frames are a great way of figuring out functionality of certain elements. It’s also a great way of clearing up how the structure of the site is going to work, and then designing around that. I use a 960 grid which is extremely useful.

Provided by @ellishollie

Project scope

Define the project scope correctly before you begin coding. This makes sure that both you and the client have a clear understanding of what to expect, when they can expect it, how much they will be charged for it and in what way it will be delivered.

Scope ‘creep’ can be the ruin of many good web professional/ client relationships but a clear definition will make sure that no-one feels aggrieved when the project finishes.

Provided by @StvCummins

Content is king

Design your web pages from the content out. Much like print design websites primary goal is good communication, make sure that you understand how the each component and piece of copy needs to structured before adding any design flourishes.

Suggested by @koucik

HTML5 and CSS3 Resources

Provided by @geekgrunge

Users come first

The web should be accessible for everyone, even those who still use IE, so keep in mind that if you want a website to be broadly accessible you have to work with IE in mind, (at least 8 and 9 – as of 1/2/12), visitors shouldn’t need to adapt to your site and should always come first.

Provided by @MrMorelo

Think analogue first

Ongoing debates about where to begin - Photoshop first, or to design “in the browser”- is a subject you should familiarize yourself with, prior to digging into your next project.

I’d like to direct your attention, though, to a preceding step in the design process: Sketching.

Design for all mediums, including web, print, product or fashion design should always begin with a clear head and a blank sheet of paper. The power of sketching allows instant visualisation of your ideas and will prove to be a tremendous time saver. Love they pen, or pencil, or crayon, or ink brush or whatever analogue tool your prefer, and sketch before you Photoshop, or code, or… well, you get the idea.

Provided by @e-known

Monitors

Make sure you are working on a good quality monitor, laptop and low light screens can fail to show lighter greys or add a slight yellow tint to colours. This is especially relevant if you are designing for people who are likely to view your content on a bright and high-definition 27 inch display.

I never work constantly on full brightness (due to headaches) but always bump it up to maximum once I start defining colours.

Provided by @richbaird

Designing in Photoshop

When designing in Photoshop, make sure you clearly name and group layers as someone else may have to build your design and it doesn’t help if all of these are the same.

Provided by @ellishollie

Keep it simple and use a website Framework as a base

Once you have defined the purpose of your website, drawn out wire-frames and then design the look and feel you’ll need to write the front end code. For larger websites this can be a timely task so it sometimes helps to use a CSS/HTML framework as a base to make things easier and faster.

A HTML/CSS framework provides the base CSS and HTML components you’ll need to build most front end website interfaces. Rather than spending hours building buttons, tabs, forms, and grid layouts yourself you can simply use a framework and then skin that framework to add your own flavor to it.

Building your website becomes as simple as choosing the right layout then arranging various components on the page. You’ll need to customize components to meet your specific needs but the framework should help speed things up.

Some popular website frameworks include:

Provided by @AdhamDannaway

Web fonts

Your shiny Mac is no longer your friend. Somewhere north of 90% of people will be viewing your sites on machines with a completely different text rendering engine to yours. Check your sites in as many of them as possible, they may look and behave very differently or be as well hinted as the traditional web-safe stack.

Provided by @RenaissDesign

 

Contribute!

If you are a designer and have any advice you would like to add to this article, please submit your contribution as a comment below and remember to include your Twitter ID so I can credit your tip.

 

Tweet This Article

 

Previous ArticleNext Article