So without any further ado let me tell you what anyone who wants to be a web designer ought to know:
- How the internet works
- How websites work
- How to best present your content
- How to build for mobile
- Best practice principles
If you don't know this, you're not a web designer because you're not able to do what is required of a properly functioning website.
1. How the internet works
The Internet is a global system of interconnected computer networks that use the standard Internet protocol suite (often called TCP/IP, although not all applications use TCP) to serve billions of users worldwide. It is a network of networks that consists of millions of private, public, academic, business, and government networks, of local to global scope, that are linked by a broad array of electronic, wireless and optical networking technologies. The Internet carries an extensive range of information resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support email. ~ Wikipedia
The worldwide web works by connecting sites via links. You need to put content on your website for people to link to. This means that your content needs to be accessible and visible. SEO depends on it. Now there are black hat tricks you can employ but if your visitor arrives at your artificially-popular website and finds nothing of interest there, he or she will click off and go elsewhere.
2. How websites work
A website, also written as Web site, web site, or simply site, is a set of related web pages containing content such as text, images, video, audio, etc. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform Resource Locator. All publicly accessible websites collectively constitute the World Wide Web. ~ Wikipedia
Websites require content. You don't need reams of it but you do need to let people know what you've got to offer them, who you are, and how to get hold of you. If you don't provide a justification for clicking that link, you're letting your reader down. Ask anyone to tell you about their favourite website, then ask them to give you some reasons for why they like it. At the very least, they'll indicate in some way, shape or form that it's the content, first and foremost, then the colours, etc. The websites I use the most are Google Search, then Twitter, then YouTube. Why? Google is the best search engine, Twitter is the best social media site for political discussions, and YouTube is the best video hosting site. Your website needs to be the best for what you're doing or you're going to fall behind the ones that are.
3. How to best present your content
Nobody makes a point of going to a particular website because it is pretty. People go to websites that have the things they want on them. When I go to the sites I mentioned earlier, it's to find items on the internet, to discuss political issues, or to watch cat videos.
I don't use Google Search because it's got a clean white interface, I use it because it brings up the items I search for. I don't use Twitter because of all the whitespace, the layout or the pretty features, I use it to find and discuss things I'm interested in. I don't use YouTube because of its layout, navigation bars, or thumbnails, I use it to play my favourite videos. Understand that and you'll understand the purpose of design in website building.
The role of design
On the left is a screenshot of a website I designed for a client who didn't have much content for me. I chose a layout that would put the most important content front and centre so people could see at a glance what it's about. She wanted to avoid cheesy Halloween references and have a lot of whitespace, which I've provided. The concept at work here is the hierarchy of information; you have to decide what the reader needs to see right now. When you can't decide between one thing and another, use a layout that provides both.
The point is, you ought to build from the content out. If you fail to understand that and you fail at design. You might be a bit artistic and you might be practical and able to code, but if you want to be a web designer you need to understand information hierarchy before you get onto SEO (search engine optimisation), accessibility, and user experience (UX).
4. How to build for mobile
There are many ways to build for mobile, but if you use WordPress you can simply upload and install a responsive or mobile theme. There are loads of those, and many are free. I prefer the responsive ones because they adapt well for screens of different sizes and many of them have carousels and other features that adapt according to the size of the screen.
I usually take extant themes and make changes to them rather than trying to build from scratch because PHP must be included in the theme to make it work. I had this conversation with a service provider who creates themes. It's great to be able to build themes but since the layouts tend to be similar it's a lot of trouble to go to just to make something that looks like the free ones, except for the colours, etc.
I can also build from scratch using the 960 grid. It adapts for screens of different sizes. I use breakpoints to serve images of different sizes according to the screen size on which they're being viewed but when I'm being lazy I just make all my images 200px wide.
5. Best practice principles
These are the principles I live by as a web designer:
- Build from the content out. If you haven't got content, you haven't got a website. Think about it; what is the reader going to see when he or she gets there. Is it going to encourage them to do business with you? They are not going to do business with you on the basis that your site is pretty, but because they believe you are trustworthy and will deliver on your promises.
- KISS — Keep It Simple, Stupid! The amount of convoluted code and layers of content, etc., that end up on some websites is astounding. Don't drown your message in complexity and clever features you don't really need.
- Avoid clutter — you need whitespace to separate items, which helps to draw attention to them. If you have too many items of different colours on the page, you will make it unnecessarily complicated and confuse the reader.
- Remember that the background colour, fonts, and images as well as in your videos and text comprise the message you are sending to your readers. Choose each element carefully. Research the language of colour, use appropriate fonts and images, and include your keywords in your text.
- Don't use any element that is either superfluous or detracts from your message. That stock image of the pretty girl with the headphones on is only relevant if you're promising customer services via real people.
- Use fancy fonts for headings to accent your content and use the standard Helvetica, Arial, Verdana, or Times for the body text as a rule. Do NOT use Comic Sans.
- Make your logo or header banner big enough to see but don't make it too big. Viewers haven't come to see your logo or banner, they've come to see your content.
- Make sure there's enough contrast between your body text and your content background colour. Pale grey on white doesn't show up well and remember that contrast settings can differ from screen to screen.
- Don't use white text on a black background for body text. It's harsh on the eyes.
- Cross-browser compatibility: on WP it's all done for you as a rule, but be sure to check on older browsers to make sure your site can be seen as intended nonetheless.
- Don't use tables except to display tabular information, e.g. goods and prices. They don't show up well on mobiles.
- Information hierarchy — decide which information is the most important and put it front and centre. If you can't decide between two or more items, put them all there in a layout that gives them each a spot on the same line. This may mean using a stacked column layout, but this will only work on larger screens. WordPress themes that provide stacked column layouts and work on mobile are available for free.
- Make information accessible — no one should have to dig to find it. Use a dropdown to display all your pages and provide a sitemap and/or extra menus. Check for broken links. Nobody should ever click on a link that leads to nowhere. Provide a search box so your readers can find what they're looking for.
- Keep your images small if you can. If you must display images larger than 200px, have a responsive solution to serve smaller images for smaller screens.
- Only use scripts and features you need. If you don't require them to get your message across, you can do without them.
- Don't believe the SEO snake oil salesmen. Google is weeding them out and basing its search results on how relevant your content is to what you're doing. The idea is to screen out ad farms and SEO traps with no real content on. Link building, etc., has some value but it's not the be-all and end-all of search engine rankings. Content is. Keep it relevant and often updated. Use a blog to add more content. Use Pages for the site information and Posts for the blog.
- Keep your design up to date. Website fashions change and that retro thing is getting old because it's overdone. It's best to stick to a timeless theme than go for a fashionable one you'll have to update in a year or so. That's why it's best to start with a simple design in the first place.
Conclusion
Content precedes design. Design in the absence of content is not design, it's decoration.— zeldman (@zeldman) May 5, 2008
I've been living and breathing that since I first read it, and the results are websites that are functional first, then pretty. I add elements suggested by clients, working for the client's best interests because my success depends on theirs. This means educating the client on what works best for them in terms of design. Copying the look and feel of other websites is impossible without copying the content; they may find this hard to understand but it's the content that gives the site its look and feel to a greater degree than the backgrounds and banners.
No comments:
Post a Comment