Web Design posts
Do's and don'ts of typography
As so much of the content available on the web is text it’s essential for web designers to understand the basic principles of good typography. Having such knowledge allows designers to communicate more effectively, enabling them to create better designs and websites that are easier to use.
For more experienced designers setting text may come naturally but for those who are just starting out I’ve decided to put together a...
The designer's secret weapon: an account handler
I’m a lucky person. Every day I get to do what I love, which is helping clients work out what their web project is going to look like.
As any good account handler or project manager will tell you, their primary role is to make sure that a project goes as smoothly as possible. This can mean managing people on both sides of the fence, and keeping everyone happy is no mean feat.
I’m a big believer that getting a project off to a strong start is integral to the success of that project, and for me that means helping the design team hit the ground running, and making sure they can begin doing what they do best as soon as possible.
I’ve read plenty of material recently describing account handlers as having a negative effect on the creative process of a project. These criticisms range from the account handler...
Designing the new, fully responsive wired.co.uk article pages
Recently, Condé Nast Digital undertook a complete redesign of the articles published on wired.co.uk. The aim was to provide a more content-first and immersive experience. These aims were established after research by our Information Architect.
We started on the path of fulfilling those aims over a year ago with the redesign of the GQ.co.uk articles and the introduction of what we call the ‘StickyScrollRead’ component, which allowed the editors to embed media that would be pulled out of the body copy at screen widths wider that 1000px and pinned on screen. That meant the user could continue to read the article and still refer to the peice of media that the copy was about. This proved to be a much more immersive experience and allowed the body...
Learn to count with CSS
Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.
This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers...
How to use the flexbox layout method (part 2)
In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.
Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.
We’ll...
What's new for designers, May 2013
The May edition of what’s new for web designers and developers includes new web apps, jQuery plugins and JavaScript resources, educational resources, wireframing kits, image tools, Photoshop extensions, web development tools, coding resources, and some really great new fonts.
Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.
As always, if we’ve missed something you think...
Common usability errors to avoid at all costs
One of the most important tasks on your plate as a web designer is usability. Usability is defined as a gauge of the quality of the user’s experience when interacting with your website. Any website you design should always be seamless from the standpoint of the user. They should find your site easy to navigate without having to first undergo special training. Usability is normally based on several different factors.
A person looking through your site wants their ease of learning to be top-notch. They’ll want to quickly learn the user interface so that they can jump right in and accomplish fundamental, navigational tasks. Efficiency of use is another factor: after they’ve learned to navigate your site, they’ll want to accomplish tasks speedily. Even if the user has used the site before, they’ll need to easily remember enough of the process to be able to use the site effectively the next time. This is called memorability. When they’re using your site, they may experience some errors, but are these errors frequent...
How to use the flexbox layout method (part 1)
With every new revision of CSS, a plethora of new, exciting attributes come to light; one of which being the understated display: flex approach.
The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).
In...
15 really creative 404 pages
We’ve talked about ‘Contact’ pages. We’ve talked about the ‘About’ page. You know what to put on these pages because, hopefully, you’ve thought long and hard about it. And you know exactly what to put on the inside pages, because you have your content for those as well. You think you’ve got it all covered, right?
Think again! You have the opportunity to design and make use of your 404 error page. And quite frankly, you’re not a cool kid if you don’t have a super cool 404 page. Why do we go...
Flat design sites that work
Whilst the term “flat design” might not be a phrase you’re yet familiar with, you will definitely have noticed the concept and the design features whilst browsing the internet.
For those of you that have noticed an increase in the “drop shadow” trend in web design, the easiest way to describe flat design is to say it’s the opposite of that. Flat design is designing a website that has left behind the drop shadow and the 3D effects, and that is by all intents and purposes flat.
Flat design looks modern, fun, fresh and refreshingly simple compared to it’s 3D counterpart. Flat design is embracing...
How to launch a startup
We all know that there are a few differences between small businesses and larger corporations, especially when they begin considering the web design aspect of their marketing plan and branding. And while for the most part, the nuts and bolts basics are often the same for both, small business owners and freelancers often have to make many more considerations before they get to the actual design.
Before approaching a designer, small business owners should already have some solid ideas of what they need and what they want (which can sometimes be two very different things) ready to present. Larger corporations have creative departments and teams at the ready to bring the company’s brand to the web with ease. The people at the top rarely have to get their...