#5: Web Advice

When I first entered into the web classes, I had virtually no experience in web design. I haven’t ventured outside the realm of a little bit of forum bracket-coding. I was pretty conditioned to looking at strings of code though, as I had experimented with program coding before, but in regards to html and css– it was pretty new territory.

What Would’ve Helped Me

Research, research, research!

Before entering into the class, I wish I would have researched more web designs. A lot of my time during projects was spent researching general sites; either color palettes, particular theme categories, etc. On a regular daily basis, I usually go to the same pages over and over, and while the content updates, the general design stays mostly the same across the board. Often times I would search something generic on google, and click the links that offered a gallery worth of sites (ex. 50 Beautifully Brown Web Designs)

I also sort of wished I had practiced with vector more. Vector illustration and web seem to be going hand-in-hand together pretty well right now, but my vector skills aren’t particularly great. I maybe should have practiced more so I would have been confident enough to try a design incorporating them in.

Practicing more would have been beneficial, as was suggested over and over again. In regards to responsive design, especially: practice made the biggest difference. I really had to do it a few times before it finally “clicked”, and everything made a lot more sense.

Advice to Newcomers

To the new batch of students, the grid and math will really be most important (next to researching preexisting websites for inspiration), especially later on when responsive design becomes incorporated. Physically drawing out how the divisions must lie within one another is important and, if you are a visual learner to any degree, it will be incredibly helpful. The 960.gs grid site is of course an invaluable resource for figuring out the placement of items for comps.

I found that the math became especially important in regards to responsive design. Though guesswork is by no means the correct way to go about a design, it was often pretty effective early in the class. Once percentages get involved, breaking out a calculator really comes in handy. This is where the physical layout drawing also comes in handy—you’ve got to remember how the percentage is relative in order for it to be relevant and correct.

The majority of math incorporates figuring out basic algebra of “if my box is this big , and it’s already a third of the way filled … how much space does that leave me?” sort of math. It typically isn’t more complex than that.

Make sure to make a friend. If you aren’t friends with anyone in your class, sit next to someone friendly; problems WILL arise while you’re working. Just like with any project, be it design, a written paper, etc, sitting and staring at it for too long can cause errors. If something on your page is not loading correctly, sometimes a fresh pair of eyes on your code can help identify that missing semi-colon or pound sign.

For CSS3, the CSS3 Generator is a great resource to help you figure out nice techniques. CSS3 is relatively easy and capable of creating wonderful techniques; it shouldn’t be underestimated.

More than anything, one shouldn’t feel restricted just because it’s on the web.  The coding gets tricky, but as long as you are comfortable designing in general, everything will work out.

There is a ton a designer can do with web design—arguably even more than print! Make sure to research. Really, that was the most vital action I myself performed throughout the web classes. Smashing Magazine often has great articles, as well as good galleries. Just keep an open and creative mind. If you don’t know how to do something, turn to Google; chances are, someone else knows, and they might have the answer for you. Coding has a rhythm to it, once you get going.


#4: HTML5 Revisited

Today I will be discussing two large elements of HTML5: the new structural and text-level semantics, and the canvas feature. Both contribute important aspects of code that should be well understood.

HTML5 Structural and Text-Level Semantics

As Smashing Magazine explains, the main thing to realize about HTML5 is it’s striving to refine the language of HTML so that it makes more sense and is essentially more accessible, searchable, international, and interpretable.

For instance, a number of new semantics, including location-tracking (conveniently named <location> ) or time-tracking (also conveniently named <time> ) are available to help implement special features into a page.

Also, additional, potentially unseen elements like <credit> , which is similar to the <cite> tag, exist to offer a better semantics to a page. It’s important to remember, however, that not all of the new semantics will be applicable to older, or even simply different browsers. It’s important to be careful not to code a page too specifically to HTML5, and to remember how code may look to people who aren’t as up to date.

BornCCSed explains that the general semantics are pretty cross-browser compatible though. Rather than divs, the header, nav, footer, and other typical div blocks now have their own, semantically smart tags that serve, for the most part, the same purpose as the old <div=id”header”> tags offered. Even things like the new “figure” tag allow for a smoother and easier sense of coding. With <figure> instead of making a division for a lump of related parts within a random div, a designer can easily connect them with the associative tag.

Unfortunately however, the attempt to make everything more practical and smart does have its bumps. With the reintroduction of the <i> and <b> tags, on top of the <em> and <strong> tags, things get a little blurry.

The <i> and<b> tag must be used carefully, as they can now be styled within CSS. Classes are advised to be used with them.

<i> is used for changes in mood, such as in a dialogue or for foreign language. The <lang> tag may also be appropriate in some cases, to be used within the <i> code.
<b> is mostly for implicit, server-acknowledged emphasis. If something doesn’t need to be visible emphasized, but, server-side needs emphasis (such as for search optimization), then i might be the best answer.
Both <em> and <strong> retain their previous purpose. The <em> tag stresses emphasis, and <strong> strongly emphasizes elements. More information on this can be referenced at HTML5Doctor.

HTML5 <canvas>

The new <canvas> doesn’t really have any real equivalent to older HTML. It is, according to Sitepoint, “a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly” . Using JavaScript, a plethora of highly interactive features can be added to create a number of dynamic effects. Canvas can interact with text, shapes, colors, and practically anything else the mind wants to add to it. Currently however, only 2D image support is available, not 3D. With a little creativity though, faux-3D treatments can be simulated – all with a lot of specialty coding.

Specifically, <canvas> allows the creation of things like diagrams and graphs, but also allows unique interface, animation, and a use of javascript supreme enough to build games.
Within canvas, you can create new shapes, like lines and paths, irregular curves and arcs, etc. A number of effects like fills and strokes and gradients can be used, as can translation (movement) or complete transformation can be utilized.

However, as ThinkVitamin points out, the code is a bit messy still, and may be a little tricky to figure out exactly how to work it.

However, in regards to making certain animations or even still shapes, the trade-off is files with less memory usage and more control … but with more coding. It is surprisingly stable across browsers too, including mobile.
Using some of this code can allow you manipulate preexisting elements also. For instance, if an image needs to be recolored, a more code-heavy but less image-heavy solution would be to edit the color on it via canvas. (Visit here for more info).

Example of Canvas


I found this in-the-works placeholder HTML5 website, that is built in an interesting way. It is divided up using the new section tags, and within each tag is little bits of information. These sections are all sections of a single large page, but their way of division locks the user into each place until they use the aside section link to pass them forward.

The page is simply made, but the semantics are easy to understand, when design and code is compared. The canvas tag is used to make the “road” that weaves across the whole page. Because it is crafted, it appears to be a vector image, though despite its size, it doesn’t come with a massive loadtime.

The arrow will circle you back around to the first section you land on upon entering the page.

Relatively easy CSS3 properties are added to create minor animations, such as on the transitioning arrows and the final “Contact Us” link. The minimalist design works well highlight the transitions without bogging down the aesthetic, and the simple jquery to ease between the sections makes for a unique experience that adds dimension to the interconnected design of page fragments.

#3: Exploring HTML5

What is HTML5?

HTML5 is the latest update to the World Wide Web’s core language. It has been nearly a decade since the last major update with HTML4. This new edition strives to integrate many of the features that new technology and modernization wishes to implement (such as video, audio, animation, etc) directly into webpages without the use of plugins or external connectors. This means, instead of having to download player plugins like Quicktime and Flash, HTML5 can just embed the files right into the the HTML, like images. It’s already in the stages of being implemented across multiple browsers, but that’s not to say that it’s perfect yet; Flash and the plugin parade will still stick around for some time longer. (HTML5Rocks)

Positives of HTML5

Currently, Internet Explorer, Mozilla Firefox, Google Chrome, Safari, and Opera – on both Mac and PC – have some form of functionality with HTML5. HTML5 currently offers and explosion of positives, too.
One of the new additions that comes with HTML5 is the new set of semantic tags specific to the fundamental parts of a webpage that, in previous versions, was available only through use of named divisions. Now, instead of a <div id="header"> tag, there is simply a <header> tag, which can serve a similar purpose. (Seogadget)

New semantic tags to better correspond with appropriate sections - SeoGadget

Another big selling point of HTML5 is of course the replacement of the plugins. Plugins were the work-around for elements that the older editions of HTML couldn’t handle. Downloading player plugins could be a big pain and, in some cases, even a little dangerous. With new tags to embed in multiple formats of video, audio, etc, now the players can be done away with.

HTML5 strives to make HTML more “clean” per se; by adding these new tags, the container-based model of webpages can become a little more contained in the coding, and be easier to search through and edit, with less divisions upon divisions upon divisions. These new tags also may help optimize webpages for search engines, as the main parts of the page now have a defining title to them, rather than a division tag.

Twitter's semantic division with HTML5 - O'Reilly Radar

HTML5 offers offline usage and storage that is surely convenient for people who can’t access any Wi-Fi and may want to, say, browse a mail client.

HTML5 is also being developed with its eyes focused on mobile use. While it isn’t being created specifically for phones, many of the cool tricks that work on regular desktop browsers are also functional on phones and tablets as well. (O’Reilly Radar)

Negatives of HTML5

While this new set of tricks is awesome and exciting for web design, there are drawbacks. One of the biggest ones right now is browser support. While most of the updated browsers can support most of the functions, there’s still a lot of trouble handling HTML5. Internet Explorer, as usual, is greatly lagging in support across most versions. However, they are not the only one. There’s also cross-OS integration issues, where while Mac users may be able to function fine on a browser, perhaps Windows users cannot, and vice versa.

The oh-so-dandy change of semantics also has some issues. Because HTML5 is still in development, many of these terms are ever-changing. This could turn certain portions of code obsolete with a fresh revision, and may required coders to need to make back-up coding, just in case.

There is also licensing issues for the media that can now be integrated in without plugins. Simply popping in an .mp3 isn’t always how HTML5 works. Media compression is often needed in order to be compatible with the browsers.

Exploring an Example

I decided to explore the site of BountyBev, an HTML5-built website promoting a selection of American beer. I tested it in the latest update of Google Chrome, Mozilla Firefox v6.0.2, and Internet Explorer 9, all on a PC only.

General Critique

The site is a fun and interactive experience to work through. Showcasing themselves and their crafted beers, the user gets to “take a drive” through the site via use of javascript and HTML5 techniques.

This little tag appears to move the user down the page faster if they try to scroll down manually.

The page has multiple ways of navigating; either by the top navigation (which has a fixed position), either by scrolling down manually, or at the end of each subsection. If you decide to manually scroll, you’ll find that the trek between sections has a long road (quite literally), and a little box will appear offering you a lift, in which it employs then the same reaction as if you had clicked the main navigation: a swift and smoothly transitiong roll down to the next subsection with an eased-out stop.

Though the background is an intense shade of blue, contrast with text weight and alternate color choice is kept strong to allow easy reading and a harmonious unity across the single page.

Browser Inconsistencies

The general look of the pages is the same across all three browsers (IE, Firefox, Chrome). There colors are all the same, none of the text seems to move or change, and the primary navigation carries the user across the page in the same, smooth transitional fashion.

However, there are some noticeable differences. Overall, Google Chrome functioned the best, with the most effects. Firefox stood in the middle, and Internet Explorer (as expected) had the least effects.

The different browsers were detected within the code.

When viewing the source code, the site does seem to detect and react differently to different browsers. This could probably be part of the reason the changes are noticible.

With Chrome, almost everything that has an interactive element, reacts in that smoothly animated way the navigation works; some links slowly tilt a little bit, or slowly transition from black to white, etc. With Firefox, many of these elements have an on-off sort of reaction: they have the starting stationary position, then on hover-state, go to the final frame of Chrome’s animation, so there’s no smooth middle animation with the hover state. With IE, some of these links don’t even have a hover state at all, and remain in whatever the final-animation-frame’s state at all times.

The different footer states: basic stationary version (left) and hover state (right).

For example, the form at the bottom of the page slowly tilts to type on, and the truck slowly rolls away. Firefox will also slowly tilt the box straight with a smooth animation, but the truck just teleports back and forth without any “driving”. IE’s truck will also teleport, but the box doesn’t tilt; it’s just straight and vertical from the get-go.


Surprisingly, all the elements mostly hold up really well. The changes that do occur are pretty minimal, and a lot of transitional javascript effects are still functional across all three browsers, which is impressive.

#2: Exploring JQuery

Jquery is the simplified JavaScript library that allows unique effects to be implemented into HTML. With these scripts, a designer can add all sorts of functions that may have not otherwise been possible with CSS manipulation alone.

Pros of JQuery

There are a number of reasons to use JQuery within a website. For one, it can add a lot to a page. Unique transitions for images or navigation, tool-tips, or seemingly anything can be added to enhance the content within a page to make it special and engaging to its audience. Actions that a designer may have thought only something like Flash could have performed can possibly be implemented. JQuery is also cross-browser; it even appears to support some of the older versions. Currently, the library of scripts is enormous, and the spectrum of commands contains tons of options to be chosen to add.
On that note: it’s not particularly complicated to implement. There are tons of tutorials and documents, both in verbal and even video form, that can guide a designer into adding scripts into their pages. With so many programmers and users, that means there’s a large community of people all working together to update and create new and enhanced scripts for pages. And, because of this community, many of the scripts are free of charge!

Cons of JQuery

Such a large opensource community means people that anyone can upload nearly anything. Not every script is going to be a premium, perfect script. In some cases, finding just the right script to customize may be a real challenge, or worse, a designer may implement a “bad” script. Too many or too poorly-scripted effects can turn the page cheesy and gimmicky.
There is also the matter of the file itself. Running JQuery still requires JavaScript code, from which it was born. The server must therefore load up this small albeit still influential element. It can potentially slow down a page significantly, especially if there are more than one instance. There are also some reports that phones may reject JQuery scripts, so special precautions may need to be taken to appeal to the mobile audience.

Interesting Plugins

jQueryTOOLS Tooltip

This script allows a customizable and fancier-than-default tooltip to hover over whatever the designer wishes. It smoothly appears and can have multiple adjustments for size and position of appearance. It can also include various things, from not only text, but image too – so a designer can get a little creative with its use.


This script allows a second window to smoothly slide out from the edge of the browser window and display content via clicking a link-trigger. By clicking anywhere on the main frame of the page, the box smoothly slides away and disappears completely. This could be very convenient for pages that need copy, but don’t need it constantly present. For example, for short pages that are dependent on the graphics. This peek-a-boo panel can offer additional text that isn’t integral to the page at all times, and can conveniently disappear to reveal the rest of the content without leaving the viewer confused and without direction.

SlideViewerPro 1.5

This plugin allows the page to include a slideshow based on one single unordered list. The images will gently slide to whichever image is clicked, without showing the other images included. A footer-bar will can also gently animate to include a caption if desired, to give a little extra information. There is also ( – ) and ( + ) buttons to switch image sets, so as to allow a large lot of images if that was so desired. All features can be specially tailored to fit the needs of the designer.


This script offers a zooming-lens effect for images. This could be extremely beneficial for people who have very large and/or very detailed graphics, such as illustrations of photos. This allows the designer to upload that image so that it starts at a reasonable, full size, but allows viewers to hover over selections and get a close-up, detailed view to see all the intricacies without having to print it out and stand across the room. It also has a grayscale-to-color mode, which could maybe be used in specific creative interactive scenarios.


This script allows a bar, containing customizable content, to slide out from one direction or another. This bar can remain hidden, or it can slide out or appear all at once. Like the PageSlide plugin, it can hide certain bits of content, however, with a smaller and more carefully shaped box, it can also work well with things like navigation, as explained with the following example.

JQuery in Action

The portfolio site of Martin Balhar relies heavily on the use of JQuery, implemented via MooTools. This site, while not written in english, it easy enough to navigate that you don’t even necessarily need to be able to read the content to know what to expect, and to be engaged by the aesthetics of it.

Homepage & Nav

The homepage appears to be composed of a three separate JQuery elements. The first is a unifying graphic to be explained later. The central navigation then uses the Fx.Slide code to gently animate a horizontal navigation bar out from the right. Hovering over the small arrow pops out the nav, and keeps it out without annoying snapping away. While it is dark in color, to mesh with the mood of the homepage design, it offers transparency to soften the intensity yet still retain contrast for the text links. This transparency also prevents the background graphic from being cut awkwardly and becoming completely unreadable; instead, it enhances the design already well-made on its own.

A navigation bar appears upon rollover of the arrow (LEFT). The links have a JQuery highlighting hover-state also though (RIGHT).

The links themselves then utilize the last bit of JQuery. They have an animated hover-state, where a white block flips over the word, highlighting it against the black bar. This allows them to stand out obviously against the semi-opaque background; due to the font choice and weight, a simple color shift might not have been enough to stand it apart from the other options.

The graphic is bold and energetic and quite modern, and when paired with the scripts, it helps define the designer’s abilities right off the bat. The navigation starts with the vital contact information, including his Twitter and LinkedIn, and is followed with a short list of various aspects of gallery.

The pages are not responsive, which may be alright due to the amount of JQuery on the page.


Since this is a portfolio site, the pages are made up pretty much exclusively to displaying various pieces of work created by the designer. The pages are unified via two things: (1) the JQuery sliding navigation bar, and (2) the miscellaneous “flip-page” animation.

The central navigation changes color to better suit the displayed page's design scheme.

Across the pages, the nav-bar remains, though it changes colors to better suit the overall scheme of the page its displaying. This allows the bar to be visible, but not distracting or detracting from the design display. Because it is also fixed, there’s no need to scroll back up and hunt for that blended-navigation arrow. The selected state of the links then simply changes color to a brighter white. While this wouldn’t have worked well with hover-state, focusing on what page you’re on at that very moment isn’t as important as knowing which link you’re about to click, at least in this scenario.

The sub-pages themselves are large and, while they don’t contain links to the actual functioning projects, display enough shots to give a mood. The custom backgrounds and layouts for each page also helps make each project appear special, as well as develop a mood for each project.

The bottoms of each page contain a thin, fixed, semi-opaque footer (similar to the navigation) that contains information about the project, including its date of release, the client, and what the designer contributed to. One minor detail that I noted, was that on both Chrome and Firefox, due to my own settings, a url-bar pops up the moment my cursor touches anything on the page, obstructing my view of the footer until I take it out of the window.

The footer is detailed (TOP) but depending on browser settings, that can be ruined if the page is touched with the cursor (BOTTOM).

Connecting the Pages

All of the pages are interconnected via giant JQuery arrows. When the cursor hovers over the left or right side of the screen, a very light, mostly transparent triangle appears. The arrow faces whichever direction is more relevant for the cursor location. The arrow is translucent enough to be barely distracting, and it also alludes to instruction on what to do. If you click on the right side, it will automatically transition to the next page on the list, and it will likewise go back a step by clicking on the left. This offers another way to flip through the pages without having to clonkily open and reopen the main navigation – which is of course always present should the viewer want to skip to a particular page.

Overall Look-and-Feel

The page is easy to navigate, as there are various facets to move. The pages are all labeled well, but in a way that’s not distracting. The designs are organized in an intelligent fashion that allows optimal viewing of the work, without actually viewing it first hand. The customized pages for each project help enhance the mood and overall reaction the viewer has.

#02: Project01 Moodboard

For this first project, I am going to design a page with a heavy influence from ink, specifically artist pen and/or washes. I plan to hand and/or tablet create the images via illustrative techniques. At the moment, I’m not positive how to treat the ink specifically, so I have researched various styles for inspiration.

On my board, I have included three main styles, which can be further broken up into sub-styles. I can possibly do rough ink-blot washes, that are mostly abstract, or abstract in general form of the objects. I also included tighter lineart, that’s either very fine and stylized or a little more rough and sketchy. I also included some combination style, that combines some detail linework with ink washes (either black or colored).

I don’t want it looking too traditional and serene, so I also chose a few energetic abstracts and animal/creature inspiration. I actually might do something with cats, since mine have been a pain lately. Either way, I want it to be somewhat messy, either by blotchy washes or heavy detailing.

For color palette, I would like to focus primarily on white and the various shades of ink-wash black, with color introduced into the text and possibly the images themselves. The color will help detach the text from the images as well as create a bit of hierarchy and contrast.

#01: Responsive Revision

The final project I created for last semester’s intro to web class is a very inflexible design, unfortunately. While that’s well and fine if we lived in a age where websites were viewed solely on a computer, such is simply not the case. If this was an actual, purposeful website created with the intent to exist and be maintained to an open public, it would be far more beneficial to create it with a responsive design adaptable to multiple media formats outside of a standard monitor.

Navigational Challenge

Shrinking the browser's window destroys the navigation completely.

As the site is set up now, the bulk of content rests off to the left side. This is due to a large, precisely positioned navigation that merges with a background image. As it is is set now, minimizing the width of the page chops up the page. The navi-leaves will shift with the main content if the page is widened, however they will freeze up and disappear upon shrinking. The content also freezes, however, the background image continues to fly off somewhere on the left side of the screen.

While the design originally was created to make it look as if the leaves are attached to that background image, they include enough detail that I think the stem wouldn’t be necessary. This should allow rescaling to be possible to a small degree. For a minor resize, such as a tablet accommodation, the leaves may be able to simply rescale via a max-width property addition. In regards to phones, instead of the navigation being floated off to the side, the float would have to be disabled so that the navi-leaves jumped into where the main-content box would be. I never fully completed the bottom of the background image, as it wasn’t necessary, but I would detail in the rest of the image so that the navigation could sit within the smaller size.

In order for the navigation to withstand a tiny size (320px), it would have to take a drastic re-positioning..

Primary Header Changes

All of the pages contain basically the same header treatment. A fluid grid, with a min-width, would naturally be applied to all of these pages. The background image would need to scale in size, as would the h1 header texts.

The header banner images might need a little extra editing. While the homepage image is probably square enough in shape to withstand scaling, some of the other banners are too narrow. For a tablet size, they can retain their narrow height. However, in smaller formats, its simply too thin in proportion. It’d be best if some of the banner is cropped (via changing the widths to percentages during the appropriate query) so that it’s more squared like the homepage image.

The em unit, which the pages are built on, would continue to be utilized to ensure proper proportioning. Currently, the three items are stacked on one another, which appears to be an adequate system for sitting smaller units. The container would also need to resize down o fit this as well.
While the page, as it is now, is more left-weighted, it would have to change to a center justification with minimal background color in order to accommodate the smallest potential size (a phone).

General Page Restructuring

The pages are currently all set to a two-column grid with a static margin/padding on the nested text and image. This prevents the text from fitting comfortably into a resized window. These settings would also have to be fixed into a flexible state with max-widths applied. While flexible margins and padding will help for minor page reshaping, anything drastic will create a problem. The serif text won’t be able to scale down too much, due to its decorative design, so at some point, the dual-column float will have to be disabled (like the navigation) so that it becomes one column.

As the page is now, the grid isn't fluid. The margins aren't flexible.

Most of the pages include minimal images, or images that are already pretty small. All the numbers running down Health tips page wouldn’t even need to scale. Similarly, the Body page’s images are pretty narrow, so that they’d probably be fine (with the fluid grid in effect, the images might catch on a class max-width scale and shrink a minor bit).

However, there is an anomaly page. The Remedies page has a pattern created for all the offered remedies, but the images themselves are a problem. As they are made now, the text (which also serves as the title introducing the subsection) is saved onto the image file. If the images scale, the text will become too small and/or the image will be shrunken to the point of being unrecognizable. This page is highly non-responsive. The best remedy for this page would be to either scrap the text+image merge and recreate the file so either the two were separate, or to remake so that the image would more comfortably scale without losing readability.

Simply scaling down the image (left) makes the title equal size to the subheads and the image very small. Reworking the image file itself (right) will allow a larger, clearer image, with a title of greater hierarchy.

#08: The Audience

One of the most important aspects of web design (even more than in print design, in my opnion) is the target audience. While the internet is becoming increasingly integrated into everything, and therefore increasingly more prevalent within society, it is still a subject that many people feel uncomfortable using. My own family fumbles with the the web, and I’ve been called in more than once to figure out how to reset the homepage or bring the page back a few pages.

Web design requires a functionality element. A person’s lack of technical know-how shouldn’t instantly dismiss them from being able to view a page. Designers need to keep this in mind; who’s using the page, and for what, will make all the difference in terms of design.

Determining the Audience

Imagine putting a chic and highly interactive website in front of your grandma; chances are, if she’s anything like mine, she will find the elements by accident if I don’t offer hints and guiding. That’s not to say the page is necessarily poorly designed; it’s probably just not intended for someone with traditional and subdued tastes.

There are a number of factors that should always be taken into consideration, as suggested by the site Ariesgdim.com:

  • The Age Group The design between children, teenagers, adults (young and mature), and seniors are all very different in design. The color palette, scale, experimentality, navigation placement, etc. are all mostly unique to each age group.
  • The Nationality A person’s background can affect the design. Different cultures have different tastes. Little American girls might not care much about rugby.
  • Any Special Interests What does the viewer like? What sort of lifestyle do they lead? What niche do they fall into within society?
  • Their Income If your selling to a high-income audience, cheap and tacky design probably isn’t going to win a following of wealthy visitors. However, more than that, a low-income visitor might not have the money to have a strong high-speed internet that can load the 500mb of data posted on the site.

There’s more to it than that of course, but it’s the little details that should be taken into consideration before a design is thoroughly executed.

Appealing to the Audience

There are a few factors to consider when performing the actual design. First and foremost, once the audience has been identified, think about the layout from their perspective. VandelayDesign offers some of these suggestions:

Overall Design
For instance, children lack the experience and advanced reading skills of an adult, and are typically drawn to exciting interactivity (source ) A monochromatic, 8pt serif-text site with a business table graphic won’t be anything appealing to them. Elderly viewers, by contrast, typically prefer more straight-to-the-point, relaxed styles that are easy on the eyes and easy to navigate (source).

A child's website (top) has a completely different atmosphere from an elderly citizen's website (bottom).

An elderly citizen most likely doesn’t want a hip and fully-animated navigation dequence and and everytime they want to click a link. In certain instance, a lot of adults probably don’t either. The position and styling of the navigation is a major factor.

Fun and graphic navigation might be appropriate for younger audiences (top) whereas a simpler, straight-to-the-point approach might be better suited for older users (bottom).

Of course the visuals that are most appealing to different. What a little girl is attracted to will be completely different from what a mature adult working-class woman will be. Font choice also plays a large part; kids like fun bright fonts, for instance. Some older audiences might like more classic black fonts, with lighter or more condensed weight.

Children like fun exciting graphics, such as that of familiar cartoon characters (top). Other audiences might like more mature subject matter, such as vacations and fashionable accessories (bottom).

The actual written vernacular makes all the difference as well. Just because you as the designer, or as the content-producer, might feel incredibly confident using multi-syllabic, highly articulate jargin, the average viewer probably does not. Using a more colloquial speech pattern will come off as not only overly-complicated, but welcoming to any viewers. However, if your site is about something that requires a scholarly level of diction, then that is a decision that needs to be made.

The left and right appeal to two totally different levels of education and interest.

Having an understanding of the audience you’re targeting can also affect how your page is found. Knowing how they think can help you, as the designer, decide how to tag keywords on the page. Google Keyword Tool can help a designer figure out some relevant keywords that a particular group of people might be searching into Google to find your site.

Tags for a popular pet food website.

External Communication
The target audience will determine how a user can contact the owners of the site. Both extremes of age (young and old) probably aren’t super-linked up with all the hottest social media sites. A twitter feed might be an appropriate major factor on a music site aimed at teenagers, for instance.

It's not appropriate for all sites to dedicate a special segment of the page to its social media outlets.


The audience determines too many factors of the design to not be incredibly aware of. The whole point of a website is to cater to other people, and to educate them with whatever content the website offers. Being aware of who they are, as personally as a possible, will make for a better viewer experience and rear, therefore, more success.