Magzter Gold (Sitewide AU)

Magzter Gold (Sitewide AU)

Digital Delivery

Web Design For Beginners October 17th, 2016 Digital Back Issue Cover

Web Design For Beginners Magazine (Digital)

(0)

Single Digital Issue

Web Design For Beginners 8th Edition

$7.99

Powered By Zinio

Zinio

Satisfaction Guaranteed

Instant Start

Also available on ZINIO Unlimited logo

Get unlimited access to Web Design For Beginners Magazine (Digital) & 5000+ other magazines

1-month free trial

Renews at $8.99/month after trial.
Cancel anytime.

Get unlimited access to Web Design For Beginners Magazine (Digital) & 5000+ other magazines. Renews at just $8.99/month after trial. Cancel anytime.

Start Trial Learn more

60 Articles

Welcome to Web Design for Beginners

The Internet is ubiquitous across so many aspects of our lives that it’s difficult to imagine living without it. As a platform for consuming media, connecting with others and discovering new ideas and information, the web is unparalleled, and as such web design is a more prevalent and more important skill than ever. While some may be deterred by the seeming complexity of the web design process, first timers will find this newly revised edition of Web Design for Beginners to be an essential handbook. Spelling out all the basics, it will teach you how to use HTML and CSS to create and style your website, before honing the user experience with more advanced techniques. You will also discover how to use Photoshop to produce graphics, SEO to get your…

Welcome to Web Design for Beginners

Essential guide to web design

The web made its debut back in 1991,adding a graphical user interface to the internet. As such, web design was born. In its infancy, web design was heavily restricted by technology and hardware, with a web presence being little more than black text on a white background. Thankfully, technology and web design have reached a far more creative and imaginative stage in their evolutions. Skipping past frames, tables and animated GIFs, web design has become far more sophisticated and will continue to grow and develop. Look back a couple of years and take note of what was ‘on trend’ and how the underlying infrastructure helped shape a website. The progression of web design has always gone hand-in-hand with technology, and technology never takes a backward step, which in turn means…

Essential guide to web design

An introduction to HTML

The majority of webpages are made up of one or more files that are downloaded to a computer, which in turn are interpreted by a web browser and finally rendered out to screen. At its simplest, a web page is a plain text file that contains special instructions about what kind of content is contained within. These instructions are written in HTML – the language used on the world wide web. HTML, or HyperText Markup Language to give it the full name, is the core building block of a web page. HTML is a markup-based, human-readable language that’s designed to be simple to write, and easy to understand. A markup language is one where bits of data are literally marked as being of a particular type. So, for example, a…

An introduction to HTML

Create a basic layout

In this tutorial we’ll make an HTML5 layout for a simple webpage. While initially HTML may look confusing, there’s a relatively small amount of code that you'll need to remember. There are a few basic building blocks such as

which you will find yourself using regularly, then others such as which you will use much less often. If you have made pages before in the past usingHTML4 then you should feel at home, just be aware of the new tags. If you've not written any HTML before then good news, as it’s now easier to understand! HTML5 has added in a lot of new elements which help the browser interpret the layout of the page easier.

Create a basic layout

While links may seem like a simple element to add to a webpage, they are the key building blocks of the entire internet. Imagine having to type a different address into the browser for every single page you wanted to visit on the web! Similar to pages within a book, separate webpages within a website help to break up content by topic or purpose. Then, by adding in a navigation bar or something similar to your site, it means that visitors will be able to quickly move to the content that they are interested in. Links are also one of the most important elements that Google and other search engines use to find and index your site. The kind of content that you link out to, and the kind of…

Create lists in your website

Lists are an effective way of presenting important information in a way that’s quick and easy for your audience to read and digest. They are also a good method for giving a brief overview or introduction of the content to follow, helping your users find what it is they are looking for. Coding up a list in HTML is quick and very straightforward, and once you’ve got the hang of the basics you can start to apply your own styles using CSS to make them really stand out from the crowd, which we’ll come to later. There are two main types of lists in HTML: ordered and unordered. An ordered list starts at one and then increases. This is useful when you need to prioritise certain entries and give preference…

Create lists in your website

Learn to use div tags

An HTML page is made up of a series of tags that tell the web browser what to display and where. The main building block of a page is a div tag, short for division. If you look at a newspaper page, you will see that text is grouped together in columns. Images with captions are also together with a margin around them. A div in HTML is similar to this, and it’s usual to group together content in a similar way. While HTML5 has added a few new tags with more semantic names such as ‘header’ and ‘footer’, the main body of most pages is still constructed using divs. There is no limit on how many divs you have within a page and most webpages you visit online will…

Learn to use div tags

Create a three-column layout

HTML and CSS essentially allow for a huge range of freedom when designing your pages, but there are a few layout principles that have developed over the years which it’s a good idea to follow. If you have a quick look at some of your favourite sites on the internet it’s quite likely that they will use a column layout, akin to a newspaper. A common layout for a site is to have the site or company logo at the top of the page, then have a column down the left for navigation or links, a main content section in the centre, and then a sidebar on the right with supplementary information or Facebook and Twitter feeds. This is then commonly rounded off with a site-wide footer containing copyright information,…

Create a three-column layout

An introduction to CSS

Cascading Style Sheets, commonly abbreviated to CSS, is a language used for describing how HTML should be presented. CSS documents provide all the format, colour, positioning and other characteristics of a design that you will see on virtually any webpage. Originally introduced alongside HTML4, the language was designed to separate the structure of a document from the presentation, improving the control of a design for web designers. CSS also helped to improve accessibility of web pages, reduce HTML code complexity and crucially the amount of repetition of markup that had to be created to describe how a page should look. As well as these benefits, the separation of form and function allows different designs to be displayed to users according to their device, simply by providing a different style sheet.…

An introduction to CSS

Centre your page

When you’re designing a webpage, you have to remember that a browser window can be almost any shape and size. Desktop computers have a wide range of screen sizes, and mobile phone and tablets are used to browse the web too. Your nicely designed page could be ruined if you simply allow it to flow into the browser window, regardless of the latter’s size or shape. By creating a wrapper you can specify the width of the webpage content and its position in the browser window. It is an essential part of the design process. A ’wrapper’ is a commonly used name for apiece of CSS code that is used with a div tag to size and position the content of a webpage. A div tag is placed at the…

Centre your page

Define text & heading styles

Every webpage contains text and it is frequently the main content. You should therefore ensure that it looks good by choosing the fonts and styles to fit your design and the image you want to portray. There might only be a small amount of text if the main content focuses on images, but even so, there will be titles, links and captions. There's no getting away from text on webpages. You can add CSS code to a webpage to define how the text is displayed, but placing it in a separate .css file and linking to it in the page's head section means that the same text styles are applied everywhere in your site. HTML font tags have been replaced by CSS font-family definitions, old-fashioned and tags are…

Define text & heading styles

Style your lists to stand out

Although some web pages may require a lot of text, it is generally best to keep it brief and to the point. People scan a page for interesting content and then move on if they don’t spot anything straight away. Lists are therefore very useful for drawing the visitor’s attention to some content and for presenting it in a way that can be digested quickly. The HTML

tags are used to create ordered (numbered) and unordered (bullet) lists. They are useful if unexciting, but with CSS list-style type you can change the bullet to different shapes like a circle or square. It is even possible to replace it with an image that's specially created to fit in with your site’s design and colour scheme using list-style-image. You…

Style your lists to stand out

Turn lists into navigation bars

Website navigation is an important topic and it is something that you need to put some thought into as you are designing your website. At one time we would have used button images created in a paint or photo program and then used JavaScript to create a rollover effect when the mouse hovered over one. But that’s yesterday’s technology and modern sites use CSS instead. A CSS navigation bar looks like a regular unordered list in the HTML of the page, but using CSS we can manipulate the list elements and turn them into the website’s navigation. Instead of the list running down the page, the list elements can be displayed across it instead. We can style the links just like any other text and create a custom look for…

Turn lists into navigation bars

Format images using CSS

A webpage would be pretty dull without any images on it. Some images may appear on every page, such as a graphical website logo or heading, while others may be specific to each page. You will need to create the images for your site before you start. Remember to use them sparingly and keep the file size as small as possible to ensure that your webpages load quickly. If you’re having trouble, we will go into further detail later in the book. Images are inserted into webpages using the HTML tag, and there are attributes to position it left and right, set the size and so on, but those are dated. If you use CSS to format images instead, there are many more options available to you. For example,…

Format images using CSS

Style a two-column layout

Using HTML and CSS to create and style at wo-column website layout – one of the most common layouts – is surprisingly straightforward and very flexible. Almost all websites today use some kind of column layout with at least a sidebar and main content areas. So it’s one of the basic skills to have when designing websites, and once you understand these fundamentals you can move on to bigger and more elaborate designs. In this tutorial, we are going to open up our favourite text editor (we will be using Adobe Dreamweaver, but the humble NotePad or TextEdit is fine) and learn how we can shorten, lengthen and swap any column we need just by using CSS. Then we will discuss CSS floats, why we use percentages and a few…

Style a two-column layout

Create a header

Having clean and clear header for your website can be the difference between a successful and user-friendly experience and a cluttered and disorganised website that no one will want to visit again. You don’t want a first time user coming to your site and not know how your navigation works, or your company branding and logo hidden under a load of useless graphics or text – it doesn’t even really matter how effective the rest of your layout is. Yes, this sort of thing has been known to happen(more often that web designers would like to admit), that is why so many designers are turning to a relatively new role called user experience or ‘UX’. In this tutorial we will take a look at how we can create a simple,…

Create a header

Create a sidebar

A sidebar is without doubt the area that is most often created by web designers because it’s the most needed. It can hold all sorts of content: things such as extra navigation links, a search field and perhaps some small thumbnail images that relate to your website – it can be anything. So in this tutorial we’re going to create a simple page layout that has a functional navigation and a nice and simple sidebar that includes some content within. We’re going to include within the sidebar a list of links for that extra navigation we mentioned and a search bar above and also some thumbnail images at the bottom to act as though we have a Flickr section – very useful for any photography based sites. So open up…

Create a sidebar

Add content to your website

Adding content to your website is either done dynamically using a content management system (CMS) or by hand. Either way, you are going to have to learn how it’s styled and what options you have. For instance, will you have just text or text with images? How about a video that’s either embedded using YouTube’s, or your own flash or HTML5 player? Of course your choices should be dependent on what niche your website caters for and thus knowing who will be visiting your website. So in this tutorial, we will add a few elements of content where one will include a video (which you can grab whatever video you want, you don’t have to use our one) and also some text and an image. So open up the index.html…

Add content to your website

Add content to your footer

In the past, the humble footer was not much more than a slim strip of colour with nothing more interesting than the copyright text written within. But in many modern websites, we have seen a huge improvement in footer designs and the content held within them. These days, they are a lot higher and contain allsorts of content, which can include contact forms, newsletter sign-up fields, social media integration and much more. Ours for instance, in addition to a newsletter sign-up field and generic About Us text, features another set of links for navigation, so our readers don’t have to scroll back to the top or to the sidebar if they want visit another page. As crazy as it sounds (and this would have sounded incredibly crazy no more than…

Add content to your footer

WordPress 4.4: What’s new?

The release of WordPress 4.4 is nicknamed‘Clifford’, after the jazz trumpeter Clifford Brown. Each major release of WordPress has a new default theme. Twenty-Sixteen offers a fluid grid design, flexible header, optional sidebar, selection of colour schemes and more. Some exciting changes and improvements and some noticeable new features are also in the latest update. WordPress users will be happy to hear images will now be responsive out of the box. You will no longer need to crop images or supply mobile-friendly images. As soon as you upload images in WordPress, it will then be able to automatically crop them to size. All images will be included in the srcset attribute, browsers can now select the best size and serve the appropriate image without wasting bandwidth with improved performance. “Images…

WordPress 4.4: What’s new?

10 must-have plugins

Datafields WordPress by default only provides basic content fields. But you may need more flexible data fields for radio buttons, image uploads, a data picker, a colour picker and so on. Child theme Ever wondered why custom work has been overwritten? Have you ever customised a WordPress theme, made modifications and then noticed that a new update has been released for the theme that you had been working on? Then did you later find that when you tried to update your theme, your website broke and lost all the changes? This is where the power of child theme comes into play. A child theme will preserve your changes separately, whilst maintaining the main parent theme updates. A child theme will also help make your theme future-proof. Previously you could easily…

10 must-have plugins

Download, install and set up a self-hosted site

WordPress has become synonymous with the term blog, and with good reason. The web publishing platform is free to download, easy to install and simple to use. Add into this already appealing mix the fact that there are continual updates and development, swathes of themes and literally thousands and thousands of add-ons and it’s hard to see what’s not to like. WordPress itself comes in two distinct flavours:either hosted via www.wordpress.com or selfhosted via www.wordpress.org, as we explained earlier. In this tutorial we are focusing on the selfhosting option, which relates to users who already own a domain name and web space. The WordPress site extols the virtues of its famous 'five-minute installation’ and undoubtedly WordPress can be installed in five minutes, when you know what you are doing. However,…

Download, install and set up a self-hosted site

View and organise WordPress dashboard modules

One of WordPress’s many strengths is its simplicity, and the Dashboard is an area where this simplicity truly shines. Offering everything you need right from the get-go, you can quickly get on with the actual work of editing and posting to your site without distraction. As well as a side panel that offers navigation, the Dashboard is made up of modules. These are small widgets that provide you with information from various portions of your site, such as comments and links. As with most elements of WordPress, the Dashboard is customisable so you can set it up exactly as you wish and position the most important elements within easy reach. “You can set your dashboard up exactly as you wish” Over the following nine steps we will show you how…

View and organise WordPress dashboard modules

Take your first steps in creating a WordPress blog

Getting a WordPress blog up and running is much simpler than you might think Once you've completed the initial installation process, getting a post online takes a matter of minutes. The foundation of any blog is its posts, and getting these right is paramount to a successful, informative and compelling blog. So ensure you have carefully considered every detail before you get going. It is worth noting that the styling of a blog post is predetermined to a certain extent by the current theme. Nevertheless, the Posts window provides enough ammunition to ensure your posts are well presented and neatly styled. First things first: the title is perhaps the most important element of any blog post, so make sure it's relevant and appealing. Next is the text; again make this…

Take your first steps in creating a WordPress blog

Edit your WordPress blog posts with ease

WordPress is designed in such a way that creating a new post for your blog is as simple as typing it in. You won’t, however, always get your blog appearance or text just how you want it on your first try. What's more, if you’ve got a news-based site or content that's time sensitive, you might need to update a post with new information as it becomes available. You may even find you simply need to go back and correct a typo. Thankfully, this is not a challenging task. A WordPress blog is a dynamic site where nothing is ever fixed and final, and every word and image can be tweaked and adjusted until you are 100 per cent happy. In this tutorial we will guide you through the various…

Edit your WordPress blog posts with ease

Post images into your WordPress blog

It almost goes without saying that good images are a crucial part of any blog – yours or anyone else’s. Even if your site is not particularly visually oriented, you’re not running a photography business for example, a well-chosen image displayed on the front page of the blog is second only to post titles in encouraging visitors to click through to read your content. Images can also be used to help pace the reader by breaking up longer posts, transforming large swathes of text into more digestible chunks. If you want to drive traffic onto your blog and keep it there, then you need to make it look good – textonly pages will drive people away, and that’s the last thing that you want to happen. Adding images to posts…

Post images into your WordPress blog

How to resize your images to fit your post

When working with images on your blog, it is vital that you consider the importance of resizing those images as a way of enhancing both the look and usability of your site. Dragging the image handles, as we showed in Step nine, will change the physical dimensions of an image as it is displayed on a webpage, but will have no effect at all on its file size. If your site is image-heavy, and if you are working with photos especially, your original image files might run into several megabytes apiece. Put a handful into a single post and the size of the page – and the associated bandwidth requirements – will mount up. You might find that even with a fast connection your site’s visitors won’t appreciate having to…

How to resize your images to fit your post

Using the Featured Image option

One of the greatest things about WordPress is the way it takes care of things quickly and easily that would take an experienced designer/developer a while to achieve otherwise. It just makes things easy, and the Featured Image option is no exception. The basic idea behind the Featured Image function is that many bloggers, on their homepages, want to display an image that is associated with a post. However, implementing this has always been a bit tricky. Previously, users had to take advantage of custom fields, which would allow users to specify additional information relating to a post. In this case, that additional information is the location of a thumbnail image. So since the introduction of version 3.0, the user simply uploads a single image, designates it as a featured…

Using the Featured Image option

Embed external media in your WordPress posts

Creating posts in WordPress entails writing content that is interesting and engaging. This may be a daunting prospect but you’re not just limited to text. WordPress includes the facility to embed media within posts. This means you can place images, music, videos and more in a post to help bring your blog to life. Don’t worry if you don’t have any content of your own to begin with. You can embed content from other online sources. Think of it as creating a web link to something on another website. This linked content will then play from within your WordPress blog. You can embed content from services such as Vine, Tumblr and SoundCloud to name but a few. In earlier versions of WordPress embedding content was a more technical task. It…

Embed external media in your WordPress posts

Support for embedding

By default WordPress can only embed from websites that appear on the Whitelist. It’s possible to work around this by installing a plug-in but there is a risk. Content lifted from an untrusted source could expose your set-up to malware. This is why the Whitelist exists, to prevent accidental embedding from malicious websites. Support for newer services is available with each new release of WordPress. By keeping WordPress updated you will ensure you have the most embedding options available. If your blog is hosted on the WordPress servers then it is updated automatically. Users with self-hosted WordPress blogs will need to go through a manual update process. WordPress will prompt you when a new update is available. Before proceeding with this it is important to create a backup of your…

Support for embedding

Add special features to the text

It is easy to type in a block of text, but it won’t look very exciting to your visitors and it will be hard to read. We have looked at breaking text up into paragraphs, alignment and so on, so now let’s move on to more exciting things like bullet points and numbered lists. A series of bullet points is a great way to emphasise features, functions, items and important things. Make them short and snappy and readers can quickly scan them to get the information they need. Numbered lists are useful too and you don’t even need to type in the numbers because WordPress does it for you. All you need to do is type the first one and click the toolbar button. You can then add as many…

Add special features to the text

The science of SEO

The future of SEO Over the past few years Google has become increasingly effective at targeting what it considers to be low quality sites, reducing their prominence in the search results and leading many to espouse the mantra that “SEO is dead”. In truth, the idea that “SEO is dead” has been resurfacing every few years for over a decade and highlights nothing more than the rapidly evolving nature of search marketing as a whole. Go back a couple of years and rankings fundamentally came down to two things – the total quantity of links from external websites and on-page relevance, derived from incorporating the desired target keywords. Thankfully, this is no longer the case, with the websites in question that attempt to manipulate search results being actively penalised, and…

The science of SEO

Designing for SEO

Even with the rise in awareness about SEO over the last few years, it is still true that lots of great-looking websites being created have poor SEO. However, if it is considered early enough in the design process, this needn’t be the case at all. Rather than hindering SEO, good design can actually improve the chance of ranking well. If we consider some of the metrics that matter the most, it’s the designer who is in control. After all, a great-looking site is more likely to get increased page views, have a lower bounce rate and, most importantly, earn more links to its pages. The earlier in the design process that you can start thinking about SEO the better, as the early structural decisions can make a big difference and…

Designing for SEO

Are you sure your content is up to scratch?

When Google crawls your site it will use a number of indicators to assess its relevance and then index it according to its perceived value. The content of your website is one of the clearest signposts for Google to work out what keywords and phrases your website should be ranking for, so it is crucial to get this section of your SEO strategy right. What does Google consider to be good content? Recent Google updates have indicated that thin content pages with little or no relevant content are not likely to be ranked as highly as websites with more substantial, well-written content. Blog posts, interactive animations, videos and infographics are just some of the many ways in which you can engage your audience and drive traffic to your website. Written…

Are you sure your content is up to scratch?

Ten mistakes to avoid

01 No sitemap A sitemap is an XML _le that feeds data to search engines about a website’s most important pages such as the date of the last update and the importance of a page compared to others. All of this allows its spider to crawl the site more intelligently and economically. Although creating a sitemap can’t solely guarantee search engine success, it is certainly a quick win and relatively easy to implement. 02 Failed canonical domain check When a domain fails a canonical check, this implies that the home page is accessible through more than one URL. For example, webdesignermag.co.uk/index.php, webdesignermag.co.uk/home.php and webdesignermag.co.uk all load the home page. Having multiple URLs load identical content is a problem because inbound link equity can become divided and it diminishes the overall…

Ten mistakes to avoid

Analysing analytics

Track conversions Unlock the full potential of GA by going beyond tracking web stats. GA allows you to set up goals and events to measure how well you meet your objectives. Set up goals to track discrete actions such as form _lls and transactions or set up events to measure interactions that are independent of a page load – such as video plays or document downloads. “Backlinks are a key ranking factor in Google’s ranking algorithm, and although the level of their importance has decreased slightly over recent years, evaluating them is a key part of SEO” Understanding the metrics behind your website is fundamental to being able to affect how the search engines rank your site. You can use Google Analytics to help inform you on how your current…

Analysing analytics

Improving your results

Sessions The best way to improve organic sessions is via rankings. If your site appears first in the SERPs, there is a likely CTR (click through rate) of around 33%. The importance of rankings is shown by analysing the CTR of a result in tenth position, which averages about 2%. There are many ways to increase a website’s ranking for any individual term. The most common – and arguably most effective – method is creating content and getting links with that search term in mind. Page load speed Page load times are now a significant factor in Google’s ranking algorithm. Use free tools like Google PageSpeed to identify where you need to spend the time. Once you have identified the pages with the problems and which elements need attention, you…

Improving your results

Get more people to visit your website

SEO (search engine optimisation) is not a feature that you may be aware of when first setting up a new website, but understanding how it works can make the biggest difference of all to ensuring that you drive as much traffic to your site as possible. The quality of your website’s content must always be paramount, of course; but no matter how good the quality, you still need to make sure that your website stands out and competes against the millions of other sites that are also trying to attract the same visitors. There is no guaranteed way to ensure lots of traffic, but to not make use of SEO techniques is probably to ensure that your new site takes a long time to get off the ground, with the…

Get more people to visit your website

Use Google Analytics to understand your audience

No matter how much e_ ort you put in to a website or how great your content is, you need to understand what your audience is looking at and what they are interested in to keep growing your site. You can use web services that claim to understand your tra_ c, but by far the most recognised service is Google Analytics. It can show you, in great detail, which parts of your site are successful and which parts require extra e_ ort to receive attention from the masses. You can monitor all aspects of your site, from social networking impact to the number of people visiting on mobile devices, and more general statistics including visitor numbers and when they visit. The basic Google Analytics service is free and includes all…

Use Google Analytics to understand your audience

Create a Google Sitemap for easier searching

A Google Sitemap is important for a variety of reasons. Firstly, it tells Google how your site is structured and ensures that the search provider is aware of every page present on your site. This provides for new sites with lots of varied content, making sure they are properly structured in the Google mechanism, not to mention the site itself. As a result, the chances of search results coming your way are much more favourable. In fact, a sitemap is more important for new sites because Google is less likely to be aware of the extent of your website's content if you are yet to establish external links from other sites; this can spell a long road ahead towards gaining recognition from the biggest search provider of all. A sitemap…

Create a Google Sitemap for easier searching

New ways to work with Photoshop

With the development of HTML5 and CSS3, ‘designing in the browser’ has become common practice. Photoshop has taken a back seat for most web designers, as better standards and new technologies have allowed for more creative freedom when working with code. With the ability to create gradients, round corners, drop shadows and more with ease in CSS, it sometimes feels like Photoshop’s bloated feature set is steadily becoming obsolete. However, a new movement has started, bringing Photoshop back into the web design fold and repurposing its powerful tools for brainstorming sketching and wireframing. Many designers have criticised designing in the browser for what Andy Budd (CEO at Clearleft) described as, a lack of “even the most rudimentary tools, like the ability to draw lines or irregular objects through direct manipulation”.…

New ways to work with Photoshop

Create great backgrounds for your website

Background images are an essential part of designing a website, so being able to create a tiled image – one that repeats without seams – is especially important. After all you don’t know how long your pages will be. We can find inspiration all around us for repeat patterns, whether it’s a bee’s honeycomb, parquet flooring or some vintage wallpaper. While it’s true to say that styles and fashions come and go, often at an alarming rate, there are those that are always fashionable – timeless designs that work whatever the era. ‘Vintage’ suggests age, refinement, sophistication and experience. In this tutorial we’re going to create a classic fleur-de-lys in Photoshop. We’ll start from a sketch and work this up into a fantastic vintage wallpaper tile, which will repeat perfectly…

Create great backgrounds for your website

Design effective header and footer graphics in Photoshop

Have you ever browsed the web and come across a website that has a really beautiful header? Do you wish you had something equally stunning sitting at the top of your website? Having a unique, memorable identity on the web can be the difference between a user remembering your site and the same user instantly forgetting it. The most important rule on the web is to ensure your site has great content that compels return visits, but, given the choice, most people would also like their site to look nice. Of course this can present a challenge, especially if you feel you’re lacking inspiration, artistic ability, or both. Fortunately, you don’t really need either! Some basic Photoshop techniques can be used to take a very simple concept and make it…

Design effective header and footer graphics in Photoshop

THE PERCEPTION OF COLOUR

Why colour matters If asked, “Why does colour matter?”, the most obvious answer would be, “Because if the world was black and white, it would be a boring place”. Colour matters for many reasons. Familiarity, is one. We know bananas are yellow, the sky is blue and the grass is green, and if that changed it would throw us. In nature, such changes aren’t likely, but what if overnight someone decided that hot taps should be pink and cold taps should be purple? Or that green no longer meant ‘go’ at tra_c lights? We know blue is cold and red is hot. No other message is needed; colour gives us all the information we need, which is true of most places in the world. So, in many cases, colour transcends…

THE PERCEPTION OF COLOUR

What colours mean

Colour psychology has long been the source of much debate, but attempting to label colours with specific meanings or emotions is rather like trying to classify what effects different flavours have on us. It’s personal opinion, and each individual’s understandings and perceptions of colour will vary vastly, depending on personal experience. So while you can’t guarantee it will have the desired effect on a viewer’s reception, clever colour choice can – according to research – boost your chances of evoking particular associations in the viewer’s mind. GREEN ENVIRONMENTAL, FRESH, HONEST It’s been found that people relate better to colours that resemble those that they experience naturally. Green represents the earth, nature, growth and honesty. In China, green is the symbol of health and prosperity. It’s also widely recognised as the…

What colours mean

Building a brand

Who owns red? Who owns orange? Who owns purple? Reaching a stage where your brand is recognised through colour alone is a testament to how e_ective a marketing tool it is. But there’s more to colour selection than something that looks nice on packaging, TV adverts and magazines. Finding the right colour is not an easy task and is something of an art form for many brands – not to mention a major commitment. Let’s look at easyJet, which is a great example thanks to its easily recognisable branding. They arrived and turned the air travel industry upside down with their no-frills cheaper way to _y. It was a simplistic, bold move, and they needed a bold colour to convey their message of value and e_ciency – who else could…

Why is Facebook blue?

In a study conducted in the Fourties by Faber Birren and again in 2003 by Joe Hallock, which explored the perception of colour, some interesting correlations arose surrounding why certain colours in branding evoke particular feelings and associations better than others. The results begin to explain why brands select the colours they do. The most surprising result was that both men and women voted blue as their favourite colour. It wasn’t by some small margin either, as 35 per cent of all females surveyed would choose blue over any other colour, followed by purple at 23 per cent. However 57 per cent of men cited blue as their favourite colour with the next choice being green at 14 per cent. Looking at how this breaks down into age, blue appeared…

Why is Facebook blue?

Pick the perfect palette

RED OR DEAD Red is one of the hardest colours to work with, but can also be one of the most memorable when done correctly. Coca-Cola are a testament to that. Think carefully before selecting red for your designs though, and consider speci_cally what type of red. Try it out on several types of screen. It’s not the easiest colour to work with in print, nor read from, but if done well it can create a look of high energy and excitement. PRIMARY’S COOL... When handled with care and consideration, the vibrancy of the primary colours – red, blue and yellow – can create an impactful and powerful look. Think Google and ebay for great examples of where this has worked well. The bright, contrasting colours mean everything else has…

Pick the perfect palette

Tools you can trust

ADOBE KULER Over the years, the designer’s sidekick, Kuler (pronounced ‘colour’), has gone from behemoth flash website to nimble HTML5 application, plugging directly into various Adobe desktop apps. A crowd-sourced platform for thousands of colour palettes searchable by phrase, it also provides a wide variety of options (or “Color Rule”) for creating your own unique palette. There may only be five colours to choose from at any one time, but you can explore the most popular palettes and find inspiration. The beauty of using the Kuler app is the variety and intensity of colour that it can provide. If you are on the lookout for a palette that will provide a winning collection of colours, this is undoubtedly a tool you need in your creative arsenal. What’s more, it gets…

Tools you can trust

Colour trends to follow

Just as trends in design come and go, colours do the same, albeit less frequently. You’ll always have the classics: black and white, blue and grey, green and yellow and so on. Depending on the application, good design shouldn’t really follow a trend but be based on suitability for purpose. Let’s suggest fluorescent pink is the colour of the moment. It’s in all magazines, adverts, even cars are being sprayed in it. Now if you were asked to design a flyer for a club night, you’d be wise considering this as an option. Propose that same fluorescent pink to a client who runs an exclusive private wealth fund, however, and suddenly you’ll end up looking considerably less smart. Recent colour trends Making predictions on what is going to be the…

Colour trends to follow

Make a CSS expanding navigation menu

Navigation menus are vital to the success of any website. The navigation menu on a website is like a road sign on a street or a level directory in a shopping centre. You can’t decide on your destination without knowing all of the options available to you, and reaching that destination would be impossible without _rst knowing where you are. Just like in real life, navigation in web design is very important and plays a major role in a website’s usability, as well as in the user experience. Nowadays you can see plenty of di_erent types of navigation menus with interesting, creative and unusual designs. In this tutorial, we will look at how we can develop a simple and clean navigation menu. The menu will expand horizontally and, when closed,…

Make a CSS expanding navigation menu

Create CSS animated background text

Over the last few years a ‘less is more’ aesthetic has taken root in web design practice and presentation. At present, the use of text rather than images to create initial impact on a website is becoming more and more widespread. The old slide shows are being replaced with bold, stark fonts and plenty of white space. There has also been, however, the re-emergence of the font as an image in its own right. This technique is predominantly being used as an artistic element rather than a simple means to deliver language and communicate a specific textual message. For this reason, typography has become a far more creative endeavour in web design than it has been in many years. Here we will explore just one way of turning text into…

Create CSS animated background text

Make image hover effects in CSS

In addition to the recent trends in web design towards typo graphics, there has also been a shift in the use of images. As broadband speeds increase and web delivery methods refine, it’s no longer detrimental to the load-time of a website if it‘s heavy with large images. This enables imagery to be used as part of more interactive elements, such as navigation links. CSS now provides a wealth of possibilities to animate, embellish and enhance online imagery, and turn your images into interactive elements. In this tutorial, we will look at the process behind creating an image grid, complete with CSS hover effects and animated captions. It’ll be easy for you to animate your webpage, making it more beautiful and interactive. “There has also been a shift in the…

Make image hover effects in CSS

Animate a strike-through text effect

The problem with descriptive language is that the addition or omission of a single word, or even a comma, can give a completely different meaning to the message being communicated. Creative design can use this flaw in language to emphasise the difference between one meaning and another. In our example, we use the text ‘I am not invincible’ with animation to emphasise the omission of ‘not’, thereby changing the meaning of the sentence. This effect has been used to good advantage on the McClaren agency website to emphasise the agency’s excellence. This tutorial shows how standard CSS without support from JavaScript can be used to redefine the standard ~~tag to present an animated strikethrough effect. The advantage of this approach is how it can be applied to websites containing…~~

Animate a strike-through text effect

Add a shopping cart to your site

There are many ways in which you can sell items online. You could use eBay or Amazon Marketplace. You could sell direct to companies that buy specific items. Or you could go it alone and set up your own store via your personalised website. Maybe you want to be able to control the user experience or perhaps you have just one item for sale and want to centre an entire web offering around that specific product. Whatever you want to do, it is easy to create a shopping cart for your website. We will be using PayPal for this tutorial. PayPal is an accepted standard for online payment transactions and people are familiar with it. It means you have a solid name behind you and also the higher likelihood that…

Add a shopping cart to your site

Create email newsletters and let people subscribe

In order to promote your website or the subject of your website, you may consider producing an email newsletter. These are sent out to subscribers, keeping them up-to-date with the latest additions to your webpages. The idea is that it keeps driving tra_ c back to the site among those who have already expressed an interest in it, allowing you to show them that you are still up and running and that there's plenty of content to keep visitors coming back for more. In order to be e_ ective, you will want to add a newsletter script to your webpage. This will produce a form into which people can insert their contact information and sign up for your regular updates. This is a great way to capture marketing data for…

Create email newsletters and let people subscribe

Add social media buttons

Over the past few years the web has increasingly become a true social platform. Networks such as Facebook and YouTube now boast over a billion users each. For someone involved in creating a website, this is a terrific opportunity. Social networks democratise content sharing, so that if your website strikes a chord with users of these networks, the networks themselves become a effective promotion platform. There’s nothing to stop you from regularly posting a link to different pages on your website and encouraging your friends and followers to share your link, but this is really only scratching the surface of the power of social networks. Instead of relying on you to post, it can be far more effective to encourage visitors to your website to post to their wall or…

Add social media buttons

Add Twitter Cards to your site

Twitter is a great way to engage with your visitors, and can help to drive traffic to your website. An ideal way to encourage visitors to tweet a link to your pages is to include a tweet button in your design, but a shortened link isn’t the most eye-catching, attention grabbing advert for your website. Fortunately, there is a way you can enhance tweets that link to your website, whether it’s you sending the tweet or one of your visitors. This is done with the help of Twitter cards. What are Twitter cards? Twitter cards make it possible for you to attach additional information to tweets when your website is linked within a tweet. These cards can take a few different forms, and will show up slightly differently according to…

Add Twitter Cards to your site

Code contemporary CSS text effects

The purpose of design is to help convey information, whether it be descriptive or measurable. We often think of design as being about imagery and take the actual content for granted. Despite visual information being the first part of a website likely to be noticed, content is king and it is the textual information that delivers the main purpose for the website’s existence. With this in mind, we as website designers should always consider how the role of typography can be used to convey meanings through the appearance of text-based information. Before the emergence of CSS3, the only way to integrate fonts with visual effects would have been to use graphic images. This technique unnecessarily increases page-download size, makes the page less maintainable, difficult for search engines to read and…

Code contemporary CSS text effects

Web design glossary

Above the fold Anything that resides in the web browser window when your webpage first loads is referred to as above the fold. Imagine it as a large newspaper – above the fold is the top part with the name of the paper. Accessibility This is the extent to which a website can be used by people with a disability. Ideally, a website will be accessible for people with visual and hearing problems and those who are colour blind or physically disabled. Address bar Also referred to as the URL bar. This is where you type in the web address in a browser. AJAX Standing for asynchronous JavaScript and XML, AJAX is a group of technologies which include HTML, CSS and JavaScript. It allows data from a web server to…

Web design glossary

In This Issue

Description

Details

Reviews

Recent Digital Issues Browse all

Recent Web Design For Beginners Digital Issues Browse all back issues

Web Design For Beginners Magazine (Digital) Subscription October 15th, 2014 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 3rd Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription April 2nd, 2014 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 2nd Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription June 20th, 2013 Issue

Web Design For Beginners Magazine (Digital) Web Design for Beginners 1st Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription September 1st, 2012 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners: $7.99

Web Design For Beginners Magazine (Digital) Subscription April 1st, 2016 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 7th Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription October 7th, 2015 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 6th Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription April 15th, 2015 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 4th Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription October 15th, 2014 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 3rd Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription April 2nd, 2014 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 2nd Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription June 20th, 2013 Issue

Web Design For Beginners Magazine (Digital) Web Design for Beginners 1st Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription September 1st, 2012 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners: $7.99

Web Design For Beginners Magazine (Digital) Subscription April 1st, 2016 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 7th Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription October 7th, 2015 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 6th Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription April 15th, 2015 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 4th Revised Edition: $7.99

Web Design For Beginners Magazine (Digital) Subscription October 15th, 2014 Issue

Web Design For Beginners Magazine (Digital) Web Design For Beginners 3rd Revised Edition: $7.99

Customers Also Viewed

Windows 8 The Complete Manual Magazine (Digital) Subscription May 6th, 2015 Issue

Windows 8 The Complete Manual Magazine (Digital)

Windows 8 The Complete Manual 1st Revised Edition: $6.99

Windows 8.1 Made Simple Magazine (Digital) Subscription March 4th, 2015 Issue

Windows 8.1 Made Simple Magazine (Digital)

Windows 8.1 Made Simple: $7.66

Web Design Tips, Tricks & Fixes Magazine (Digital) Subscription January 9th, 2015 Issue

Web Design Tips, Tricks & Fixes Magazine (Digital)

Web Design Tips, Tricks & Fixes Vol 3 Revised Edition: $11.99

Windows 8: The Complete Guide Magazine (Digital) Subscription December 6th, 2012 Issue

Windows 8: The Complete Guide Magazine (Digital)

Chapter 2: $4.99

Wealth Magazine Special 財訊趨勢贏家 (Digital) Subscription September 6th, 2024 Issue

Wealth Magazine Special 財訊趨勢贏家 (Digital)

No.71_Sep-24: $3.09

White Sposa Magazine (Digital) Subscription December 30th, 2024 Issue

White Sposa Magazine (Digital)

3 Issues: $7.28 ~~$7.80~~

What's on TV Magazine (Digital) Subscription April 26th, 2025 Issue

What's on TV Magazine (Digital)

(1)

51 Issues: $32.30 ~~$45.90~~

Wired Italia Magazine (Digital) Subscription March 5th, 2025 Issue

Wired Italia Magazine (Digital)

4 Issues: $10.81 ~~$21.60~~

ワイン王国 Magazine (Digital) Subscription April 4th, 2025 Issue

ワイン王国 Magazine (Digital)

6 Issues: $74.80 ~~$74.82~~

Windows 8 The Complete Manual Magazine (Digital) Subscription May 6th, 2015 Issue

Windows 8 The Complete Manual Magazine (Digital)

Windows 8 The Complete Manual 1st Revised Edition: $6.99

Windows 8.1 Made Simple Magazine (Digital) Subscription March 4th, 2015 Issue

Windows 8.1 Made Simple Magazine (Digital)

Windows 8.1 Made Simple: $7.66

Web Design Tips, Tricks & Fixes Magazine (Digital) Subscription January 9th, 2015 Issue

Web Design Tips, Tricks & Fixes Magazine (Digital)

Web Design Tips, Tricks & Fixes Vol 3 Revised Edition: $11.99

Windows 8: The Complete Guide Magazine (Digital) Subscription December 6th, 2012 Issue

Windows 8: The Complete Guide Magazine (Digital)

Chapter 2: $4.99

Wealth Magazine Special 財訊趨勢贏家 (Digital) Subscription September 6th, 2024 Issue

Wealth Magazine Special 財訊趨勢贏家 (Digital)

No.71_Sep-24: $3.09

White Sposa Magazine (Digital) Subscription December 30th, 2024 Issue

White Sposa Magazine (Digital)

3 Issues: $7.28 ~~$7.80~~

What's on TV Magazine (Digital) Subscription April 26th, 2025 Issue

What's on TV Magazine (Digital)

(1)

51 Issues: $32.30 ~~$45.90~~

Wired Italia Magazine (Digital) Subscription March 5th, 2025 Issue

Wired Italia Magazine (Digital)

4 Issues: $10.81 ~~$21.60~~

Reviews

0

0

0

0

0

No reviews yet

Ask a Question

Click stars to rate

Please select a rating for the review.

Please enter title for the review.

Please enter content for the review.

Please enter order number.

Please enter your first name and last name.

Only letters allowed for first name and last name.

Please enter your email.

Upload photo

Cancel Submit

Processing...

Thank you for your feedback! Your review has been submitted and will be published soon.

OK

Be the first to ask a question about this product

Please enter content for the question.

Please enter at least 10 characters.

Your question can not be more than 150 characters.

Please enter your first name and last name.

Only letters allowed for first name and last name.

Please enter your email.

Submit Processing...

Thank you for your question! Your question has been submitted and will be published soon.

Answer this question

Please enter content for the answer.

Please enter at least 10 characters.

Please enter your first name and last name.

Only letters allowed for first name and last name.

Please enter your email.

Submit Cancel Processing...

Thank you for your answer! Your answer has been submitted and will be published soon.

OK

×