Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 19 2013

14:05

7 Best Practices of Responsive Web Design

Advertise here with BSA


Considering the rate at which the mobile web is growing, it’s becoming crucial that your website be ready to accept visitors who are coming in from a widely assorted array of different devices and screen sizes.

This is where responsive design can come into the picture and save your day nicely. However, with responsive design, as with anything in website design, you need to make sure that you follow along with some crucial best practices if you want your responsive site to actually work well and provide the flexibility it’s supposed to.

Mobile Users Deserve the Same Quality of Browsing Experience

7 Best Practices of Responsive Web Design

One of the first and foremost principles to keep in mind when creating a responsive design site is making sure that the site is built so that the browsing experience is evenly the same for all users across the board.

This means that your site’s appearance and visual structure should change without ever creating content and function losses for users of any specific device or screen size. A visitor accessing your pages from their desktop should be getting the same sort of browsing experience as a visitor coming in through their smart phone or their tablet.

This means flexible everything and requires that you ensure all of your image, content and grids are fully fluid and will reconfigure accordingly on a wide assortment of screen sizes, such as these, which are only a small sampling of the very most popular screen sizes you’re likely to deal with.

The result should be a site that converts as nicely as this example does.

7 Best Practices of Responsive Web Design

Design your Site with Responsive in Mind

When you’re wire framing your site layout together for coding into a real design, understand that there are layouts which are ideal for responsive design and those which are not, meaning there are designs that convert to assorted new sizes better than others thanks to their layout.

This means designing as simple a site layout and HTML code as possible and using simple mechanisms for core elements such as navigation and menu options, using HTML5 guidelines and doctype, and a simple overall core layout.

What you should avoid completely are things such as overly complex divs, useless absolute positioning, and fancy Javascript or Flash elements that will just complicate site adjustment on the whole.

Pay Attention to your Breakpoints

Resolutions can be defined in an assortment of breakpoints, but there are several major sizes that you need to focus on more than any others. These being:

<480px (which applies to older, smaller smartphone screen sizes)

<768px, which is ideal for larger smartphones and smaller tablets

>768px, which applies for everything bigger such as large tablet screens and desktops screens.

Also, these can be used too if you’ve got the energy and time:

<320px, which is great for older small, low res phones

>1024px stylesheet for wide screens on desktops.

These are the key breakpoints to focus on and especially the first three as well as the full desktop resolution, which is greater than 1024px.

Make your Images Flexible and Workable

With a simple design, you can make your images flexible as well to a certain degree. The easiest way to accomplish this is by simply using adaptative sizing and resizing their width.

You can do this in a variety of ways, but one of the easiest methods through which to achieve it is with this handy little tool: Adaptive Images. Bear in mind that sizing accordingly for mobile users is probably your best bet on a responsive design site if you want decent load speeds, which are absolutely crucial.

7 Best Practices of Responsive Web Design

You could also use variable breakpoints and store multiple image sizes in your data for different screen resolutions, but this might become a problem in terms of bandwidth usage, and you cannot create your site with the safe assumption that all of your viewers will have access to powerful bandwidth.

Allow Compression of Site Elements and Content

Use a program such as GZIP to compress your page resources for easier transmission across networks. You’ll have lowered the number of bytes sent per page or element and made your content easier to browse and access from devices with varying or low bandwidth.

Furthermore, you can speed things up even further by removing any unnecessary white space and line breaks. Doing this will reduce file sizes overall and keep things flowing more smoothly.

Get Rid of Non-Essential Content

In order to make your mobile friendly responsive design site really shine in a very easy to achieve way, simply bear one thing in mind: Some content and content elements were never meant to be used in a mobile context and would never work there.

7 Best Practices of Responsive Web DesignImage by Trent Walton

If you have these elements at play in your website or potential site layout, then get rid of them immediately for any mobile setting. You can do this by adding a .not_mobile class to specific elements that you’d like to see removed when your site is viewed in a mobile context or you can simply get rid of such elements permanently from all versions of your site.

Remember the Bottom Line

The above are just some of the major best practices you can try out, some of the more important ones.

Ultimately however, if you want your responsive design site to work well, you need to build it so that it can load and function quickly on devices that will often have low resolution, small processing power and sometimes weak bandwidth access. This means a simple, well organized site that conforms to its core function with maximal focus.

Tags: Tips

November 12 2013

14:18

Designing Mobile Forms and Inputs

Advertise here with BSA


As the number of smartphones continues to skyrocket, the importance of mobile web design grows alongside it. Web designers are now forced to take into account mobile users and mobile devices when designing websites. The smaller screen size of smartphones forces designers to take a new approach to user interface elements. Elements and styles that work well on desktop can appear broken when viewed on smartphones. User friendly form inputs that encourage completion and submission are essential when designing an effective mobile friendly website. Today we will look into how you can design attractive and user friendly form elements and inputs.

Labels

First we will start with designing and choosing an appropriate location for your input’s labels. Choosing a location for your mobile input labels is important and if you are not careful they may not be visible or may present problems to your mobile user. Labels to the left or right can easily be cut off so it is often best to top or bottom align mobile input labels. Field zoom can exacerbate the problem by cutting off labels when zooming in. Short labels are also recommended as screen size is an important asset and long labels will often be compromised by field zooming. As the image below shows google aligns their input labels on top to ensure they are not cut off.

Designing Mobile Forms and Inputs

Elements

Due to the smaller screen size of mobile devices it is essential to keep the form as simple as possible. One way to achieve this by combing elements into one field or by removing unnecessary ones. For example instead of requiring street, city and zip you could simply ask for the address. By reducing the number of elements and simplifying the form you are able to quickly and easily improve your user’s mobile experience. Another strategy to simplify your mobile form is by removing unnecessary inputs and keeping only what is truly needed for the form. For example if you have a form that asks for name, email, message and how you heard about us consider removing the how you heard about us field. It is unnecessary and only complicates the form. Removing it allows the user to complete the form easier and increase the chance of the form being submitted. Descriptive tags and links can also be removed as a way to free screen space and improve your forms usability.

Orientation

The orientation of a mobile device drastically changes the viewing dimensions and it is important to take changes in orientation into account when designing your mobile forms. It’s essential to test your form in both orientations to make sure your users won’t face any problems when filling out your mobile form. Google does this well in their Gmail web application and when your phone changes to portrait landscape the screen adapts to give a wider text box.

Designing Mobile Forms and Inputs

Designing Mobile Forms and Inputs

LinkedIn shows you what can go wrong when designing inputs for mobile devices. After clicking on an input and then switching orientations the keyboard dominates the screen and you can no longer see what you are entering.

Designing Mobile Forms and Inputs

Designing Mobile Forms and Inputs

As mobile device usage continues to grow innovations will be made in mobile web. The mobile web is still in its infancy and it is exciting to see what is to come.

Tags: Tips

November 05 2013

13:30

How to Build a Website that Adds Value to Your Brand

Advertise here with BSA


Brands are powerful. When a business is successful in creating a brand, it almost works as if the power of inbound marketing is at play (even without the actual digital equivalent of the entire inbound marketing process). Customers trust the brand enough to spend their hard-earned money on your products and services. They’d go out of their way to spread the word. Customers don’t think twice before buying products or services of particular brands ñ irrespective of the price ñ since they believe in what they will get in return. Brands have value embedded in them.

Brands, however, are not limited to large business groups and companies worth billions of dollars. Everyone should strive to create a brand and that includes individuals and small businesses. Since building your website is usually the first step towards the entire subset of work that goes into building your brand, here are ways to make your website work for you to add value to your brand:

Simplicity succeeds for a reason

How to Build a Website that Adds Value to Your Brand

Simplicity is almost always a part of success stories for a reason: it’s just the way we humans are. We might fancy something complicated but we won’t be happy with it. Simplicity has a way of easing up things. It has a way of getting things done. Simplicity is in everything from effective writing to some of the world’s best designs. Try anything complicated and you’d lower your chances of success.

Keep your web design simple. If you are a small business, all you’d need are a couple of pages about what you do and a blog (and maybe even a well-laid out store). You’d not need a ton of pages with content bleeding through the edges. You certainly don’t need flash. You get the drift, don’t you?

Make the website for others, not for you

Let’s go back to life 101: no one cares about you; at least not as much as you think they do. Most businesses end up building websites to show off how large or successful they are. Their “About us” page extends into multiple scrolls and almost reads like an unfinished book. Their blog posts are almost always about the conferences they participated in, the weekend party they had, an employee’s birthday they celebrated, and the brand new features of their product.

While all of that is good, it’s just not that important. Focus on building and maintaining a website for your readers, visitors, or customers. Don’t make it about you, because your customers don’t care. It’s your customers who buy from you, so why build a website to satiate your craving for personal branding (use your personal website or blog for that)?

Invest in the “first impression” elements

How to Build a Website that Adds Value to Your Brand

Since all businesses start from scratch and have no brand to speak of, there’s no empirical evidence on how good your products or services are at this juncture. A few things, however, can still make customers trust you. These elements might seem mundane and insignificant, but they aren’t. Assuming you started with a catchy name to build your brand on, create a logo that is simple and yet captures the significance or meaning of what your brand stands for. Developing a logo like that requires investment but it is well worth the effort.

The colors you use for your website, the placement of buttons, the way text is aligned, the responsiveness of your website, and the graphics will all create those important first impressions that will be your only trump cards when you are just starting out or when you are in the initial stages of building your brand.

The copy talks: So, what does it say?

Brands help customers gain impressions of what your products and services solve their problems. While the logo, the graphics, and the overall look of the website does determine first impressions, your website copy helps solidify these first impressions.

When customers begin to read your web copy, dig your posts on your blog, and even notice nuances such as writing ìGo on. We know you want to read more… instead of just read more you know that your copy is working for you. It’s no coincidence that some of the greatest copywriting samples are the reason why some businesses still rock the boat.

What is your marketing story?

How to Build a Website that Adds Value to Your Brand

Sonia Simone of CopyBlogger writes about five things every marketing story needs: you need a hero, a goal, the truth, and a moral. Among other things you need the power of storytelling. You’ll need to persuade, motivate, inspire, and captivate your audience. Merely doling out ads by the dozen, writing bland copy that you hope will drive conversions, and publishing trite content regularly because everyone talks about content marketing these days isn’t going to help.

You will need a story. Your business needs a purpose. Identify that purpose and find a way to reiterate this purpose throughout your website. Make it all easy for your customers to know you, love what you do, and trust you to solve their problems.

No value is possible with glitches

Most websites have links that lead to 404 pages. Worse still, clicking on links (broken) take customers nowhere. The navigation is too clunky, pages load slowly, and most of the important content goes below the fold so visitors have to scroll to read what you are all about. The design is uninspiring at best with nothing more than all-too-common royalty photos. Some pages don’t even load completely, and you sometimes have problems with shopping carts, irresponsive buttons, or forms that just don’t function.

These might seem like little things but it’s these little things that matter. Customers are notoriously low on patience. Once they leave, you have lesser chances of getting them back to you (even with new marketing methods such as retargeting).

Get all this right and you are on your path to create a brand. Your business is now on the verge of providing value (and also being able to communicate about it) well enough. While a lot of things go into websites, copy, your marketing strategy, and your brand, these are at least the beginning steps you need to take.

How does your website achieve the critical task of communicating value?

Tags: Tips

October 18 2013

13:00

What is Swiss Style Typography?

The world would probably thank Switzerland for the invention of the Swiss knife but the world could not thank it any better for the popularization of the Swiss Style. That though this famous design style isn’t originally Swiss-made, the touch of the country is still present even to the smallest detail of the design.

Swiss Style typography, though traced from Russia, Germany and the Netherlands, was made popular by Swiss graphic designers. They have used it with many Swiss cultural institutions, political advertisements and a lot more because it was thought to have suited the drastically increasing global postwar market. It was used in street signs, maps, public service announcements, etc. In this demand, institutions, corporations and small firms needed a universal identification method that could be easily related to them. The trick was, the method should be universal enough to be understood by every citizen of the world. The Olympics was one good example of a global institutional event Swiss style helped because it has used the simplest symbols using the most universal colors possible.

Swiss style emphasizes on neatness, eye-friendliness, readability and objectivity. Its foundations go back to its strong reliance on elements of typography and universality. This basic knowledge of universal understanding made Swiss style earn its moniker dubbing it as the ‘International Typographic Style’.

Being modernist by nature, the Swiss Style served as the forerunner for the graphic web design trends. It is in this reason why it is called the King of Web Design. It can be easily identified for its immense simplicity and exhortation to beauty and purpose. These two principles are often manifested in the use of asymmetric layouts, grids, sans-serif typefaces, left-flushes and simple but impactful photography. These elements are produced in a simple but highly logical, structured, stiff and harmonious manner.

 Being the King of Web Design, it is but natural that the Swiss Style would have an impact to our websites. This is why studying this design style helps web designers and graphic artists to produce impacting, simple and aesthetically arranged outputs. Designers take lessons from the Swiss styles applying the norms on simple yet artistically and clearly delivered messages by:

  • Preserving uniformity and geometry
  • Allowing wider spacing
  • Using of grid systems
  • Structuring information
  • Keeping minimalism
  • Using sans serif fonts
  • Using different fonts sizes
  • Using of effective photography

Sizes, Shapes, Swiss!

 Swiss style works are generally attentive to the use of uniform design elements and geometric figures. It focuses on preserving the consistency of the shapes and their sizes. Most graphic artists practice the use of shapes collated together to form unique abstract designs. The use of polygons, rather than intricate lines and calligraphic designs assure the simplicity of the work. It also spices up the whole image, making it look sharper and purpose-directed. Aside from that, colors, text manipulations and abstract devices are also combined with shapes to produce a remarkably clear message to its spectators.

Breath in, Breath out

 It has been stressed out in almost every design school that whitespace is important. Most starting designers tend to discount this fact. And that’s what separates them from the better designers. In a work of art, whitespace is a very important element. It literally and figuratively breathes life to it. Having each element in the design will produce visual impact and readability. For a web page, using this technique will subtly influence your readers to think that there is organization in the web page and could convey an impression of a better output as well.

The popular belief is that a work would be perfect if there is nothing to add to it is clearly not the ways of the Swiss design. For Swiss designers, removing unnecessary elements makes it perfect. They believe that a work will be perfect if there is nothing to remove in it. So, instead of adding elements, they do the otherwise.

Nitty Griddy

Gridding is the usage of a very stable framework that allows designers to logically arrange the information they put in the page. This system, a practice that  is traced up to the medieval times, enables artists to easily identify where to put information and what kind of information is to be put.

Since the Swiss Style is characterized to be logical and purpose-oriented, the usage of gridding is very much recommended as it gives ease to the designer in doing the work and gives the readers easy access to the message the work is trying to send.

Info-manic

It is clear that the Swiss Style is information-oriented. This is why designers should think of the information dissemination activity more than anything else. It should send the message before entertaining the people of its art. Swiss Style should be more focused on the semantic arrangement of data rather than the aesthetic placement of it. The readers of the typography should feel like they are reading rather than seeing. That they are actually studying data rather than appreciating it.

A-B-C-D-Elementary!

The modernity of the Swiss Style connotes a very rudimentary feel. Using minimal designs to make the reader focus more on what is really important is the main goal of the Swiss Style. The fewer the distractions, the better. Removing all the distracting elements and making the elementary and only the important details remain is the basic principle of the style. This is to ensure that the true and main purpose of the design is met.

What’s Your Type?

Typeface is the core element of visual communication. It is the most direct and easiest route for the message to be delivered. In the Swiss Style principle, it would be an abomination for a designer to put into jeopardy the quality of the typeface for the design Typefaces should be presented in the most simple, expressive, and universally understood manner. For Swiss Style artists, the usage of letters in the simplest way possible is the best way to do it.

This is why a lot of artists who are into Swiss design use sans-serif typefaces. These are fonts that do not use serifs or ‘hats and shoes’. They are commonly single stroked, meaning, they have a universal brush-width and stroke size. Common forms of this kind of typeface is Helvetica.

Does Size Even Matter?

Of course it does. Font size matters in the Swiss Style. The difference in font size and the contrasts of typefaces arrives to the impression of visual impact and hierarchy of data presentation. It suggests separation or sifting of the important ones to the less important. Normally, the larger the font size is, the more important it becomes – similar to HTML heading tags where web crawlers prioritize H1 over H2 and H3.

Foot of Photography

Though the Swiss Style is generally focused on types, it is not discounted that photographs are good elements for the Swiss design. Most Swiss designers tend to use photos than images as the former gives an impression of realism and drama to the whole design. Commonly, these photos are taken without color, meaning, black and white.

The Swiss Style follows a very simple philosophy. Less is more. Just like any Swiss product, this design style is focused on its function rather than its look.This norm should guide all aspiring Swiss Designers. You should put what is needed and nothing more.

If you have a problem with this, try talking to the Swiss people. They might help you.

Image Sources: weheartit.com, flyergoodness.blogspot.com, swissted.com

October 16 2013

05:26

October 14 2013

17:10

Tips to Avoid Brittle UI Tests

In the last article I talked about a few ideas and patterns, like the Page Object pattern, that help write maintainable UI tests. In this article we are going to discuss a few advanced topics that could help you write more robust tests, and troubleshoot them when they fail:

  • We discuss why adding fixed delays in UI tests is a bad idea and how you can get rid of them.
  • Browser automation frameworks target UI elements using selectors and it’s very critical to use good selectors to avoid brittle tests. So I give you some advice on choosing the right selectors and targeting elements directly when possible.
  • UI tests fail more frequently then other types of tests, so how can we debug a broken UI test and figure out what caused the failure? In this section I show you how you can capture a screenshot and the page’s HTML source when a UI test fails so you can investigate it easier.

I am going to use Selenium for the browser automation topics discussed in this article.

Much like the previous article the concepts and solutions discussed in this article are applicable regardless of the language and UI framework you use. Before going any further please read the previous article as I am going to refer to it and its sample code a few times. Don’t worry; I’ll wait here.


Don’t Add Delays to Your Tests

Adding Thread.Sleep (or generally delays) feels like an inevitable hack when it comes to UI testing. You have a test that fails intermittently and after some investigation you trace that back to occasional delays in the response; For example, you navigate to a page and look or assert for something before the page is fully loaded and your browser automation framework throws an exception indicating the element doesn’t exist. A lot of things could contribute to this delay. For example:

  • The web server, the database and/or the network are overloaded and busy with other requests.
  • The page under test is slow because it loads a lot of data and/or queries a lot of tables.
  • You’re waiting for some event to happen on the page which takes time.

Or a mix of these and other issues.

Let’s say that you have a page that normally takes less than a second to load but the tests hitting it fail every now and then because of occasional lag in response. You have a few options:

  • You don’t add a delay: in this case the tests that hit that page are sometimes going to fail which reduces your trust in the tests.
  • You add a one-second delay to the tests hitting that page: in this case all of those tests are always going to take one second longer, even when the page loads fast, but even then the tests are not guaranteed to pass as the page might sometimes take longer then a second to load.
  • You might decide to add a few-second delay: this makes sure the page is definitely always loaded, but now your UI tests are taking longer and longer.

You see, there is no winning with arbitrary delays: you either get a slow or a brittle test suite. Here I am going to show you how to avoid inserting fixed delays in your tests. We are going to discuss two types of delays which should cover pretty much all cases you have to deal with: adding a global delay and waiting for something to happen.

Adding a Global Delay

If all of your pages take around the same time to load, which is longer than expected, then most tests are going to fail due to untimely response. In cases like this you can use Implicit Waits:

An implicit wait is to tell WebDriver to poll the DOM for a certain amount of time when trying to find an element or elements if they are not immediately available. The default setting is 0. Once set, the implicit wait is set for the life of the WebDriver object instance.

This is how you set an implicit wait:

WebDriver driver = new FirefoxDriver();
driver.Manage().Timeouts().ImplicitlyWait(TimeSpan.FromSeconds(5));

This way you’re telling Selenium to wait up to 5 seconds when it tries to find an element or interact with the page. So now you can write:

driver.Url = "http://somedomain/url_that_delays_loading";
IWebElement myDynamicElement = driver.FindElement(By.Id("someDynamicElement"));

instead of:

driver.Url = "http://somedomain/url_that_delays_loading";
Thread.Sleep(5000);
IWebElement myDynamicElement = driver.FindElement(By.Id("someDynamicElement"));

The benefit of this approach is that FindElement will return as soon as it finds the element and doesn’t wait for the whole 5 seconds when the element is available sooner.

Once implicit wait is set on your WebDriver instance it applies to all actions on the driver; so you can get rid of many Thread.Sleeps in your code.

5 seconds is a wait I made up for this article – you should find the optimal implicit wait for your application and you should make this wait as short as possible. From the API documentations:

Increasing the implicit wait timeout should be used judiciously as it will have an adverse effect on test run time, especially when used with slower location strategies like XPath.

Even if you don’t use XPath, using long implicit waits slows down your tests, particularly when some tests are genuinely failing, because the web driver is going to wait for a long time before it times out and throws an exception.

Waiting for Explicit Events/Changes

Using implicit wait is a great way to get rid of many hardcoded delays in your code; but you are still going to find yourself in a situation where you need to add some fixed delays in your code because you’re waiting for something to happen: a page is slower than all other pages and you have to wait longer, you’re waiting for an AJAX call to finish or for an element to appear on or disappear from the page etc. This is where you need explicit waits.

Explicit Wait

So you have set the implicit wait to 5 seconds and it works for a lot of your tests; but there are still a few pages that sometimes take more than 5 seconds to load and result into failing tests.

As a side note, you should investigate why a page is taking so long first, before trying to fix the broken test by making it wait longer. There might be a performance issue on the page that’s leading to the red test in which case you should fix the page, not the test.

In case of a slow page you can replace fixed delays with Explicit Waits:

An explicit waits is code you define to wait for a certain condition to occur before proceeding further in the code.

You can apply explicit waits using WebDriverWait class. WebDriverWait lives in WebDriver.Support assembly and can be installed using Selenium.Support nuget:

/// <summary>
/// Provides the ability to wait for an arbitrary condition during test execution.
/// </summary>
public class WebDriverWait : DefaultWait<IWebDriver>
{
  /// <summary>
  /// Initializes a new instance of the <see cref="T:OpenQA.Selenium.Support.UI.WebDriverWait"/> class.
  /// </summary>
  /// <param name="driver">The WebDriver instance used to wait.</param><param name="timeout">The timeout value indicating how long to wait for the condition.</param>
  public WebDriverWait(IWebDriver driver, TimeSpan timeout);

  /// <summary>
  /// Initializes a new instance of the <see cref="T:OpenQA.Selenium.Support.UI.WebDriverWait"/> class.
  /// </summary>
  /// <param name="clock">An object implementing the <see cref="T:OpenQA.Selenium.Support.UI.IClock"/> interface used to determine when time has passed.</param><param name="driver">The WebDriver instance used to wait.</param><param name="timeout">The timeout value indicating how long to wait for the condition.</param><param name="sleepInterval">A <see cref="T:System.TimeSpan"/> value indicating how often to check for the condition to be true.</param>
  public WebDriverWait(IClock clock, IWebDriver driver, TimeSpan timeout, TimeSpan sleepInterval);
}

Here is an example of how you can use WebDriverWait in your tests:

driver.Url = "http://somedomain/url_that_takes_a_long_time_to_load";
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
var myDynamicElement = wait.Until(d => d.FindElement(By.Id("someElement")));

We are telling Selenium that we want it to wait for this particular page/element for up to 10 seconds.

You are likely to have a few pages that take longer than your default implicit wait and it’s not a good coding practice to keep repeating this code everywhere. After all Test Code Is Code. You could instead extract this into a method and use it from your tests:

public IWebElement FindElementWithWait(By by, int secondsToWait = 10)
{
    var wait = new WebDriverWait(WebDriver, TimeSpan.FromSeconds(secondsToWait));
    return wait.Until(d => d.FindElement(by));
}

Then you can use this method as:

var slowPage = new SlowPage("http://somedomain/url_that_takes_a_long_time_to_load");
var element = slowPage.FindElementWithWait(By.Id("someElement"));

This is a contrived example to show what the method could potentially look like and how it could be used. Ideally you would move all page interactions to your page objects.

Alternative Explicit Wait Example

Let’s see another example of an explicit wait. Sometimes the page is fully loaded but the element isn’t there yet because it is later loaded as the result of an AJAX request. Maybe it’s not an element you’re waiting for but just want to wait for an AJAX interaction to finish before you can make an assertion, say in the database. Again this is where most developers use Thread.Sleep to make sure that, for example, that AJAX call is done and the record is now in the database before they proceed to the next line of the test. This can be easily rectified using JavaScript execution!

Most browser automation frameworks allow you to run JavaScript on the active session, and Selenium is no exception. In Selenium there is an interface called IJavaScriptExecutor with two methods:

/// <summary>
/// Defines the interface through which the user can execute JavaScript.
/// </summary>
public interface IJavaScriptExecutor
{
    /// <summary>
    /// Executes JavaScript in the context of the currently selected frame or window.
    /// </summary>
    /// <param name="script">The JavaScript code to execute.</param<<param name="args"<The arguments to the script.</param>
    /// <returns>
    /// The value returned by the script.
    /// </returns>
    object ExecuteScript(string script, params object[] args);

    /// <summary>
    /// Executes JavaScript asynchronously in the context of the currently selected frame or window.
    /// </summary>
    /// <param name="script">The JavaScript code to execute.</param<<param name="args"<The arguments to the script.</param>
    /// <returns>
    /// The value returned by the script.
    /// </returns>
    object ExecuteAsyncScript(string script, params object[] args);
}

This interface is implemented by RemoteWebDriver which is the base class for all web driver implementations. So on your web driver instance you can call ExecuteScript to run a JavaScript script. Here is a method you can use to wait for all AJAX calls to finish (assuming you are using jQuery):

// This is assumed to live in a class that has access to the active `WebDriver` instance through `WebDriver` field/property. 
public void WaitForAjax(int secondsToWait = 10)
{
    var wait = new WebDriverWait(WebDriver, TimeSpan.FromSeconds(secondsToWait));
    wait.Until(d => (bool)((IJavaScriptExecutor)d).ExecuteScript("return jQuery.active == 0"));
}

Combine the ExecuteScript with WebDriverWait and you can get rid of Thread.Sleep added for AJAX calls.

jQuery.active returns the number of active AJAX calls initiated by jQuery; so when it is zero there are no AJAX calls in progress. This method obviously only works if all AJAX requests are initiated by jQuery. If you are using other JavaScript libraries for AJAX communications you should consult its API documentations for an equivalent method or keep track of AJAX calls yourself.

ExpectedCondition

With explicit wait you can set a condition and wait until it is met or for the timeout to expire. We saw how we could check for AJAX calls to finish – another example is checking for visibility of an element. Just like the AJAX check, you could write a condition that checks for the visibility of an element; but there is an easier solution for that called ExpectedCondition.

From Selenium documentation:

There are some common conditions that are frequently come across when automating web browsers.

If you are using Java you’re in luck because ExpectedCondition class in Java is quite extensive and has a lot of convenience methods. You can find the documentation here.

.Net developers are not quite as lucky. There is still an ExpectedConditions class in WebDriver.Support assembly (documented here) but it’s very minimal:

public sealed class ExpectedConditions
{
     /// <summary>
     /// An expectation for checking the title of a page.
     /// </summary>
     /// <param name="title">The expected title, which must be an exact match.</param>
     /// <returns>
     /// <see langword="true"/> when the title matches; otherwise, <see langword="false"/>.
     /// </returns>
     public static Func<IWebDriver, bool> TitleIs(string title);

     /// <summary>
     /// An expectation for checking that the title of a page contains a case-sensitive substring.
     /// </summary>
     /// <param name="title">The fragment of title expected.</param>
     /// <returns>
     /// <see langword="true"/> when the title matches; otherwise, <see langword="false"/>.
     /// </returns>
     public static Func<IWebDriver, bool> TitleContains(string title);

     /// <summary>
     /// An expectation for checking that an element is present on the DOM of a
     /// page. This does not necessarily mean that the element is visible.
     /// </summary>
     /// <param name="locator">The locator used to find the element.</param>
     /// <returns>
     /// The <see cref="T:OpenQA.Selenium.IWebElement"/> once it is located.
     /// </returns>
     public static Func<IWebDriver, IWebElement> ElementExists(By locator);

     /// <summary>
     /// An expectation for checking that an element is present on the DOM of a page
     /// and visible. Visibility means that the element is not only displayed but
     /// also has a height and width that is greater than 0.
     /// </summary>
     /// <param name="locator">The locator used to find the element.</param>
     /// <returns>
     /// The <see cref="T:OpenQA.Selenium.IWebElement"/> once it is located and visible.
     /// </returns>
     public static Func<IWebDriver, IWebElement> ElementIsVisible(By locator);
}

You can use this class in combination with WebDriverWait:

var wait = new WebDriverWait(driver, TimeSpan.FromSeconds(3))
var element = wait.Until(ExpectedConditions.ElementExists(By.Id("foo")));

As you can see from the class signature above you can check for the title or parts of it and for existence and visibility of elements using ExpectedCondition. The out of the box support in .Net might be very minimal; but this class is nothing but a wrapper around some simple conditions. You can just as easily implement other common conditions in a class and use it with WebDriverWait from your test scripts.

FluentWait

Another gem only for Java developers is FluentWait. From the documentation page, FluentWait is

An implementation of the Wait interface that may have its timeout and polling interval configured on the fly. Each FluentWait instance defines the maximum amount of time to wait for a condition, as well as the frequency with which to check the condition. Furthermore, the user may configure the wait to ignore specific types of exceptions whilst waiting, such as NoSuchElementExceptions when searching for an element on the page.

In the following example we’re trying to find an element with id foo on the page polling every five seconds for up to 30 seconds:

// Waiting 30 seconds for an element to be present on the page, checking
// for its presence once every five seconds.
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
    .withTimeout(30, SECONDS)
    .pollingEvery(5, SECONDS)
    .ignoring(NoSuchElementException.class);

WebElement foo = wait.until(new Function<WebDriver, WebElement>() {
  public WebElement apply(WebDriver driver) {
    return driver.findElement(By.id("foo"));
  }
});

There are two outstanding things about FluentWait: firstly it allows you to specify the polling interval which could improve your test performance and secondly it allows you to ignore the exceptions you are not interested in.

FluentWait is quite awesome and it would be cool if an equivalent existed in .Net too. That said it’s not that hard to implement it using WebDriverWait.


Choose the Right Selectors

You have your Page Objects in place, have a nice DRY maintainable test code, and are also avoiding fixed delays in your tests; but your tests still fail!

The UI is usually the most frequently changed part of a typical application: sometimes you move elements around on a page to change the design of the page and sometimes page structure changes based on requirements. These changes on the page layout and design could lead to a lot of broken tests if you don’t choose your selectors wisely.

Do not use fuzzy selectors and do not rely on the structure of your page.

Many times I have been asked if it’s ok to add an ID to elements on the page only for testing, and the answer is a resounding yes. To make our code unit testable we make a lot of changes to it like adding interfaces and using Dependency Injection. Test Code Is Code. Do what it takes to support your tests.

Let’s say we have a page with the following list:

<ul id="album-list">
    <li>
        <a href="/Store/Details/6">
            <span>The Best Of Men At Work</span> 
        </a>
    </li>
    <li>
        <a href="/Store/Details/12">
            <span>For Those About To Rock We Salute You</span> 
        </a>
    </li>
    <li>
        <a href="/Store/Details/35">
            <span>Let There Be Rock</span> 
        </a>
    </li>
</ul>

In one of my tests I want to click on the “Let There Be Rock” album. I would be asking for trouble if I used the following selector:

By.XPath("//ul[@ID='album-list']/li[3]/a")

When possible you should add ID to elements and target them directly and without relying on their surrounding elements. So I am going to make a small change to the list:

<ul id="album-list">
    <li>
        <a id="album-6" href="/Store/Details/6">
            <span>The Best Of Men At Work</span> 
        </a>
    </li>
    <li>
        <a id="album-12" href="/Store/Details/12">
            <span>For Those About To Rock We Salute You</span> 
        </a>
    </li>
    <li>
        <a id="album-35" href="/Store/Details/35">
            <span>Let There Be Rock</span> 
        </a>
    </li>
</ul>

I have added id attributes to anchors based on the unique albums’ id so we can target a link directly without having to go through ul and li elements. So now I can replace the brittle selector with By.Id("album-35") which is guaranteed to work as long as that album is on the page, which by the way is a good assertion too. To create that selector I would obviously have to have access to the album id from the test code.

It is not always possible to add unique ids to elements though, like rows in a grid or elements in a list. In cases like this you can use CSS classes and HTML data attributes to attach traceable properties to your elements for easier selection. For example, if you had two lists of albums in your page, one as the result of user search and another one for suggested albums based on user’s previous purchases, you can differentiate them using a CSS class on the ul element, even if that class is not used for styling the list:

<ul class="suggested-albums">
</ul>

If you prefer not to have unused CSS classes you could instead use HTML data attributes and change the lists to:

<ul data-albums="suggested">
</ul>

and:

<ul data-albums="search-result">
</ul>

Debugging UI Tests

One of the main reasons UI tests fail is that an element or text is not found on the page. Sometimes this happens because you land on a wrong page because of navigation errors, or changes to page navigations in your website, or validation errors. Other times it could be because of a missing page or a server error.

Regardless of what causes the error and whether you get this on your CI server log or in your desktop test console, a NoSuchElementException (or the like) is not quite useful for figuring out what went wrong, is it? So when your test fails the only way to troubleshoot the error is to run it again and watch it as it fails. There are a few tricks that could potentially save you from re-running your slow UI tests for troubleshooting. One solution to this is to capture a screenshot whenever a test fails so we can refer back to it later.

There is an interface in Selenium called ITakesScreenshot:

/// <summary>
/// Defines the interface used to take screen shot images of the screen.
/// </summary>
public interface ITakesScreenshot
{
  /// <summary>
  /// Gets a <see cref="T:OpenQA.Selenium.Screenshot"/> object representing the image of the page on the screen.
  /// </summary>
  /// 
  /// <returns>
  /// A <see cref="T:OpenQA.Selenium.Screenshot"/> object containing the image.
  /// </returns>
  Screenshot GetScreenshot();
}

This interface is implemented by web driver classes and can be used like this:

var screenshot = driver.GetScreenshot();
screenshot.SaveAsFile("<destination file's full path>", ImageFormat.Png);

This way when a test fails because you’re on a wrong page you can quickly figure it out by checking the captured screenshot.

Even capturing screenshots is not always enough though. For example, you might see the element you expect on the page but the test still fails saying it doesn’t find it, perhaps due to the wrong selector that leads to unsuccessful element lookup. So instead of (or to complement) the screenshot, you could also capture the page source as html. There is a PageSource property on IWebDriver interface (which is implemented by all web drivers):

/// <summary>
/// Gets the source of the page last loaded by the browser.
/// </summary>
/// <remarks>
/// If the page has been modified after loading (for example, by JavaScript)
/// there is no guarantee that the returned text is that of the modified page.
/// Please consult the documentation of the particular driver being used to
/// determine whether the returned text reflects the current state of the page
/// or the text last sent by the web server. The page source returned is a
/// representation of the underlying DOM: do not expect it to be formatted
/// or escaped in the same way as the response sent from the web server.
/// </remarks>
string PageSource { get; }

Just like we did with ITakesScreenshot you could implement a method that grabs the page source and persists it to a file for later inspection:

File.WriteAllText("<Destination file's full path>", driver.PageSource);

You don’t really want to capture screenshots and page sources of all pages you visit and for the passing tests; otherwise you will have to go through thousands of them when something actually goes wrong. Instead you should only capture them when a test fails or otherwise when you need more information for troubleshooting. To avoid polluting the code with too many try-catch blocks and to avoid code duplications you should put all your element lookups and assertions in one class and wrap them with try-catch and then capture the screenshot and/or page source in the catch block. Here is a bit of code you could use for executing actions against an element:

public void Execute(By by, Action<IWebElement> action)
{
    try
    {
        var element = WebDriver.FindElement(by);
        action(element);
    }
    catch
    {
        var capturer = new Capturer(WebDriver);
        capturer.CaptureScreenshot();
        capturer.CapturePageSource();
        throw;
    }
}

The Capturer class can be implemented as:

public class Capturer
{
    public static string OutputFolder = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "FailedTests");

    private readonly RemoteWebDriver _webDriver;

    public Capturer(RemoteWebDriver webDriver)
    {
        _webDriver = webDriver;
    }

    public void CaptureScreenshot(string fileName = null)
    {
        var camera = (ITakesScreenshot) _webDriver;
        var screenshot = camera.GetScreenshot();

        var screenShotPath = GetOutputFilePath(fileName, "png");
        screenshot.SaveAsFile(screenShotPath, ImageFormat.Png);
    }

    public void CapturePageSource(string fileName = null)
    {
        var filePath = GetOutputFilePath(fileName, "html");
        File.WriteAllText(filePath, _webDriver.PageSource);
    }

    private string GetOutputFilePath(string fileName, string fileExtension)
    {
        if (!Directory.Exists(OutputFolder))
            Directory.CreateDirectory(OutputFolder);

        var windowTitle = _webDriver.Title;
        fileName = fileName ??
                   string.Format("{0}{1}.{2}", windowTitle, DateTime.Now.ToFileTime(), fileExtension).Replace(':', '.');
        var outputPath = Path.Combine(OutputFolder, fileName);
        var pathChars = Path.GetInvalidPathChars();
        var stringBuilder = new StringBuilder(outputPath);

        foreach (var item in pathChars)
            stringBuilder.Replace(item, '.');

        var screenShotPath = stringBuilder.ToString();
        return screenShotPath;
    }
}

This implementation persists the screenshot and HTML source in a folder called FailedTests next to the tests, but you can modify it if you want different behavior.

Although I only showed methods specific to Selenium, similar APIs exist in all automation frameworks I know and can be easily used.


Conclusion

In this article we talked about a few UI testing tips and tricks. We discussed how you can avoid a brittle and slow UI test suite by avoiding fixed delays in your tests. We then discussed how to avoid brittle selectors and tests by choosing selectors wisely and also how to debug your UI tests when they fail.

Most of the code shown in this article can be found in the MvcMusicStore sample repository that we saw in the last article. It’s also worth noting that a lot of code in the MvcMusicStore was borrowed from the Seleno codebase, so if you want to see a lot of cool tricks you might want to check Seleno out. Disclaimer: I am a co-founder of TestStack organization and a contributor on Seleno.

I hope what we’ve discussed in this article helps you in your UI testing endeavors.

October 08 2013

12:26

Embracing Technology for Better Experiences

Advertise here with BSA


In the beginning there was an idea. And the idea was formless and void, and it needed so much to be forged into a real project. And all the strategists, creatives, designers, project managers and techies were moving over the surface of it and spoke already different languages.

The thin line between excitement and disaster

Embracing technology for better experiencesImage by Amir Hadjihabib

You already know the story. It is about a downslope, leading from a brilliant idea to a mediocre final result. It is about misunderstanding and not checking feasibility. It is about not putting all the parts together, and trying to push a round peg into a square hole.

The ideas are much valuable but always need to be confronted with constraints. What does an idea need to be completed? Is it even feasible? In the world of digital projects, various factors need to be considered. One of these, and maybe the most obvious one, is technology.

You need to check if the project is feasible at various stages – not only at the very beginning, but also during production. In fact, each person in a digital project should know and understand a bit of what other people do. Sounds easy, doesn’t it? But reality says that each of the groups tend to pull some of the decisions within project towards them. My UX is more important than your visual design. My visual design is more important than your code. My code is more important than your UX.

Technology is a pivot here. No matter what, it is always a two-faced jack: a rock-solid foundation for the project and an impassable limitation. Trying to leap over this limitation can be fatal for a project. In other words – you can break some UX and visual design rules, but you will not turn a screen display into mirror or increase the throughput of the mobile link the end user has access to. Period.

In the kingdom of the blind the one-eyed are kings

You don’t need to be a one-man army. It is enough to know the basics and “feel” the constraints. Just know the limits and you are the king. A good web designer does know some CSS and understands how the fluid grids work to provide responsiveness for a site. This knowledge lets him to create designs that are more feasible to implement and are still creative. Good UX designer, at the same time, knows the technological constraints enough not to design something that simply won’t work. Front end developers and programmers need to understand how to adjust the technology to meet both requirements of the user experience design and visual design. It gets even more tricky when you need to fit the budget, of course.

This is why you need to adjust. This is why both basic and proper knowledge of the technology is so important. It usually manifests in having a strong team of people who understand technology. You are the trigger, you raise the flag, they do the rest on their dedicated field. Simple.

Anticipating technology

Embracing technology for better experiencesImage by Michael Spitz

Anticipating technology is pretty much knowing the constraints and getting the most from the projects within these. The constraints come from various sources – both user- and server side. You need to anticipate the site performance, considering what kind, from what sources and how much data an interface will need to load, and what server side or javascript operations need to be performed in the background. Based on this feeling, you need to suggest patterns that will work properly in the (statistically) standard environment. Sometimes you just need to think server-wise, at other times you need to leave your desk (well, at least: mentally) and understand that real users do not use rocket-speed, 27” machines and the performance of their machines is significantly lower.

Of course, there are rational limits for adapting to user-side constraints. You won’t make everyone happy, you can only make happy the reasonable, statistical majority. But even then you can use graceful degradation for the rest of them. It is another great technique to provide the optimal level of awesomeness, just by slightly decreasing experiences for older browsers and slower machines.

Making everyone happy is a wrong direction to go. While it is, for sure, tempting, the cost of implementing it versus the real profit, either for users or for business owner of the project, can be unjustifiable. I remember one interesting case with providing users to upload some very specific file format (actually: a bunch of formats) to the server and perform very demanding transformations on the server-side. Providing it would need a significant increase of the project costs, only to satisfy a small number of users (like: 0.2% of them). There is no business justification to this.

Planning technology

Planning technology is going beyond the constraints. Sometimes, the strategic, functional and (what turns to be most important at the end) business requirements of the project need extra power. Without it, you will not be able to reach the expected return on the investment. While you have to adjust to the technology users have in their hands, you can do the best to build high-efficiency solutions on the server side, building thin-client interfaces rather than pushing all the responsibility on the end-user machine.

Using data warehouses is one of such situations. If a project needs to manipulate on high amounts of data, you need to be aware of that at the very stage of UX design. You will not be able to provide efficient patterns for data manipulation and presentation without it. You don’t need to be very specific about it – all you need to do is raising a flag at the very beginning to let everyone know and wait for the proper people to jump in and to the rest. Of course, as it is not your field, sometimes you may be wrong, but this is a matter to be checked by techies.

One of discussions I have once participated in, regarded displaying results of video search from multiple video-hosting services. While some of these displayed the results almost instantly, the other ones API returned results with a considerable delay. As the search engine idea was to display the search results that are most relevant to the search query, and there was a time limitation in receiving the full list of videos from all the sources, it could only be done at the cost of either of these: the results accuracy or delay. This is an example of situation, where UX needs to adapt to technology.

When it comes to planning technology, costs are involved. Sometimes heavy. It is a pity when it turns out in the end that you cannot afford a better technology within the given budget, but it happens sometimes. In these situations you need to go lean, maybe even the MVP way and stay at the level of providing the best you can. But, well, it’s worth trying to convince the boss, that the investment is necessary, anyway

Keeping track on the implementation

Embracing technology for better experiencesImage by Jip

UX design is about designing experiences, not just interactions or wireframes. As such, it does not end with the last view designed, be it wireframe or graphic design. Keeping track on the implementation itself is important as this is the moment the designed interactions actually come to live.

It often happens that something goes wrong at the phase of implementation. The designed patterns are not implemented properly and the final product is far from what you have designed. Assuming that you have done your best anticipating and planning proper technology, this should not take place or at least the impact of it should be minimal (this is where nothing describes the situation better than the ole’ good tree project image – just google it).

Of course, situations take place, that you are not able to predict everything and it is necessary to adjust the UX idea on the fly. This aspect, however, gets minimized when your knowledge of technology is higher.

Sometimes, however, you can, especially when the project crew implements something that does work, but does not provide proper experience for the user. Take responsive images as an example. You can deal with them either in the browser (which, for users on mobile link means way more data to download, resulting in lower page loads and – in the end – lower conversion of the site). But there is also a possibility to provide this responsiveness on server side, preparing scaled versions of the images on the fly and serving these instead of their big brothers.

Getting inspired by technology

Technology, as already mentioned, cannot be only considered as constraint, it is also very inspiring. Even at a very basic level, it can lead to designing better interfaces. This is why a daily dose of Wired, WDL, TechCrunch or The Verge is so important. You learn new things, and even if you do not – you at least get aware of these and this leads to new ideas of using the new technologies and, as a result, designing better experiences.

So read a lot. And ask a lot.

“Why don’t we use that, I have read about it somewhere?”

Surely, why not?

Some quick and practical tips:

  • Keep track on technology – you don’t need to be a tech guru, a basic knowledge is fair enough to track usability problems at the very beginning, find new possibilities and come up with new, better ideas.
  • Try to work with people who have general knowledge about the technological aspects of the project, even if it is not their main field.
  • Do a feasibility check at the stages of ideation, UX design and graphic design.
  • Think budget-wise. Find out which changes can give your project a boost that justifies additional investments.
  • Check if during implementation things go into the right direction. If necessary, adjust your strategy, UX and design to deal with technological constraints that appear during production.
Tags: Tips

October 02 2013

13:00

Icon Talk: Choosing the Perfect Icons for Your Website

This thought might be the prevailing philosophy that hides beneath the shroud of web design: that small details sometimes happen to be the most important ones. That the things we think do not matter in our design are, in fact, necessary for the smooth flow and exchange of information.

Sometimes small things tend to have the biggest importance.

One of these small things that are commonly taken for granted are icons. Icons can be considered as a worldwide-understood element of web design. They are apprehended by most people, making the websites benefit from the addition of such. It is in this universality that icons are considered to be one of the most important design elements that have ever walked (figuratively) on the face of the earth.

iconography-02

By Kev Simpson

Icons are good tools of stamping an impression to an audience. They play a vital role in making the viewers understand what the message or the context of the website or application is.

What’s amazing about icons is that, even in their small space they occupy in the pixels of the screen, their role is immense. A lot of websites have invested a lot of effort, creativity and even money just to produce good icons that would suit the needs of their website. The ones created, in turn, reciprocate this by producing more viewers and easy to understand content. However, due to the variety of available icons, it becomes slippery to a point that designers seem to be confused. Iconography is a rather broad field because it encompasses a lot of concepts in fulfilling a lot of roles. As you all know, icons can be used for a lot of purposes, methods, occasions and motifs. Thus, the need to choose the correct and most appropriate icons is heightened.

iconography-01

By Joshua Sortino

As web designers, this lesson will make us more equipped with the ideas on how to choose the right icons.  Most website failures result in poor iconography. This all branch out and eventually lead to the effect that readers find themselves to be out of place, just seeing the website. And how could we evade that situation? Here are a few tips.

Icons should be appealing and readable

Icons should be visually appealing. They should be beautifully designed; thereby, be remembered by ordinary people. When designing or looking for icons for your website, remember that the people’s memory retains for two things: either they are beautiful enough to be remembered, or horrible enough not to be forgotten. If you prefer the former, then you should always look for beautiful icons.

iconography-06

Photo from Mike Clarke

They should be universal

Choose icons that are easily understood by people. These icons should be famous enough that it would not produce confusion. Because you are dealing with imagery and its interpretations, the image that you should produce should always be universal. You need to make every person, at the very least, know what you are talking about. Make your icons be transcendent!

Example, never use a wrench, or a gear icon if you will not going to refer it as a settings link or menu. Of course, the average people, who are so used to seeing gears or wrenches for settings would think of it as a link or menu to the preferences of your website. They will get lost. Think of it as if you are making road signs. If you were the traffic sign manufacturer or installer and you happen to have made a mistake by switching signs, people might get lost, or worse, their cars might stumble with each other and your face will be all over the news.

iconography-04

By Barry Mccalvey

They should be consistent

Ever experience having a nice conversation with a friend and then suddenly, you say something that is out of context, and your friend will pose a besmirched face, with an eyebrow raised and say, “Huh?”

Well, that will happen if you don’t start adding consistency to your icons. It will result into a breakage in the flow of information, and you won’t want that to happen.

For this, you should remember to use the same color or color scheme. Adding a very consistent color theme will make the identity of your icons stable. People will see your website and remember it. Also, you should remember to use, as much as possible, the same shapes. Shapes are also very good memory tools. Third, is that you should style your icons without borders. Borders, shadows, and gradients affect the technical and aesthetic quality of the icons.

iconography-10

From cssauthor.com

It should complement with the motif

The illustrations have to look legit. They need to be visually compatible with the motif of your website. Before choosing the icons, ask yourself, how would my site look like? Will it be comical, formal, creative, flamboyant or plain? The answer to your question, should match the icons that you will use. Like fonts and colors, icons are thematic. They are occasional and prefer to be represented and used in specific occasions.

721

From designyoutrust.com

They should be functional

Icons should be functional. Period. Their quality should not defeat its true purpose. Sometimes, we tend to extravaganize the design by adding unneeded icons. But you should remember to put what you need. Don’t be greedy. Less is more. Lesser is most. The more that you add, the more it becomes visually heavy. So be wise.

iconography-11

From graphicdesignjunction.com

Conclusion

The thing that you need to know in choosing icons for your web design is that you need to be understood and purposive. You have to be so universal that even a simpleton will understand you. You have to apply the purpose and try to achieve it in your design. A great web designer does not stop just because he is tired of looking for good icons. A great web designer will just stop, when he sees it in the website.

Truly, small things tend to have greater roles and those bits of facts can mean a great deal of inspiration. And I bet the icons agree.

Useful links

Any Tips to Share?

September 28 2013

13:00

How Do You Teach Children Web Design?

For web designers, starting out young is very vital and advantageous. You get to learn without any prior knowledge or biases. We could easily compare teaching web design to a kid to writing on a blank sheet of paper. You can write without being distracted by previous doodles and scribbles. You can easily understand what you are writing because the paper is very clean; it has all the space in the world for your convenience. Hence, like writing in a blank sheet of paper, teaching a kid to design websites could be a very satisfying experience. At one point, for our web designers out there, this is a perfect bonding opportunity with your son, daughter, younger brother or your toddler neighbor. You’ll be able to hit two birds with one stone. You can work while teaching your kid a new cool hobby.

How do you exactly teach children web design?

Don’t forget to share your tips and stories!

teaching-web-design-to-kids-01

Photo by Mary Tsao

The idea of kids designing and coding seems to perplex a lot of people. Some might be puzzled if they can really design and code fabulous websites with all the complicated tools and languages out there. Well, the thing is, this hobby will not go beyond the reach of a toddler’s mind. It will just prepare them for the big thing. It’s like teaching how to ride a bike using support wheels. Nevertheless, this is a good start.

Like any other teaching endeavor, this activity will need necessary preparations. So, here they are:

Condition

The first thing you need to do in teaching your kid how to design webpages is to condition their minds to the work. Expose them to computers, webpages, and the workplace. You need to make them aware where they are and what is supposed to be done whenever they are at that place. Try to show some graphic designs that you created yourself. Let the child ask about anything, no matter how complicated it may seem. Remember, exposure leads to experience and experience leads to excellence. Just let them be there, and observe. Children are naturally curious and soon enough, they’ll find answers. Next thing you’ll know, your child will immerse himself/herself with the work.

teaching-web-design-to-kids-02

Photo by Joel

You could start conditioning their minds by letting them design what they want. Say, they are very interested with robots, then start by creating a robot related mock-up. Tell the child about how every element of the design looks and functions like a part of a robot.

Take them to the workplace. I’m sure when they frequently visit the place, they will soon become curious about what you do. Eventually, you will see them peeking at your monitor and then sitting beside your lap and starting asking questions.

You could also talk to them about web design a lot. Talking breeds admiration and soon breeds inspiration. If they could see that you are having fun with the job, they will give it a try.

Take it Slow

Taking it slow does not only apply in romantic relationships. It also is accepted in teaching kids. As a web design teacher, I am sure you will be pretty much hasty to see your student perform web miracles. But that’s not going to happen. Learning is a process. Start with the basics. Teach them the elements of web design, then the tools, then codes and so on. Just let them digest everything. Remember, you’re talking with a toddler, not a programming god.

teaching-web-design-to-kids-03

Photo by Tiffy

People who have messed with this stage suffered grave setbacks. They rushed into teaching advance stuff to kids and the kids ended up disinterested. Remember that the attention span of a child is very narrow, so might as well sustain it slowly than go fast and crash.

Remember the basics of web design. Wireframing, designing the layout, coding the HTML, CSS, PHP and Java scripts, and then content creation.

For more info, you could visit:

Stoop Down

Let’s admit it, HTML, CSS and other programming languages could be crazy at first glance. In fact, you might be able to see codes as blabbers if you will not look on it. And that’s what you need to consider when teaching a kid to design websites. You need to make things simple for him. Stoop down to his level and make him understand. You need not to sound smart with them, you just need to sound believable. Remember, what kids do not understand, they won’t do.

teaching-web-design-to-kids-04

Photo by Adam Davis

Use simple words. Try to analogize the terms into something that they will find interest in. Example, you may analogize an img src tag to an aim targeted by a bowman. Relate to their likes, interests, movies watched, TV shows and a lot more.  Remember, sounding smart to a kid is still sounding dumb to them. Be at their playful curious and mischievous age.

Equip

It seems implausible that someone will learn web design if he doesn’t have any computer. In fact, that would be comic that  a web designer learn more from books than with sitting in front of the computer for hours.

Like any other hobby, web designing requires tools. Your children will need the same. As starting web designers, you have to equip them with the necessary gadgets or platforms where they can start learning. Buy a computer. Install some basic programming games. Make it fun for so that when the time comes for the kid to roll, the job will be more fun.

teaching-web-design-to-kids-06

Photo by Mark Huber 

Here are some tools and games you could use:

  • Hackasaurus –  (it’s a Firebug tool for kids. This allows them to make changes to their websites instantly. This will help them realistically see the result of the deletion, alteration or addition of a single code)
  • Move the Turtle
  • Hopscotch
  • Scratch
  • Stencyl

Neelie Kroes, Vice President of the European Union and Commissioner for the Digital Agenda visits Kenya

Photo by Neelie Kroes

Here are some tips:

  • Show them the basic elements of a browser and which browsers is recommended.
  • Explain what links, texts, images and other elements are. Be sure to differentiate each to them.
  • Explain what does HTML and CSS do.
  • Orient them with the basic language of the two platforms (HTML and CSS).
  • Orient them with various editors like GIMP, Paint, Photoshop (this is very advanced) and others. Let them start out their thinking caps young!

Conclusion

Web designing is a pretty cool hobby. In fact, it’s a hobby where you could earn some money. Now with you, teaching your kid on how to design websites, you are thereby exposing them to the kind of work they might want to do someday. It gives them the edge above others since he is very familiar with the profession. Thus, you are not only securing a job as a designer, but you also establishing the bond with your child and preparing him for a possible career. And besides, you’ve got nothing to lose with your kids. Everything is a gain.

Don’t forget to share your stories!

September 25 2013

05:17

20 Resources for Beginner Designers & Developers

Advertise here with BSA


Getting started in the world of design can be both thrilling and intimidating. Sometimes, you feel like you just don’t have the tools or skills you need to complete even the most basic projects. At other times, your mind is just buzzing with a multitude of ideas, but you may not have the best way to organize them. Yet, throughout the process of becoming a designer you will grow and expand both as a person, artist and designer.

Design is the method of putting form and content together. Design, just as art, has multiple definitions; there is no single definition. Design can be art. Design can be aesthetics. Design is so simple, that’s why it is so complicated. – Paul Rand

The key to starting out a successful career in design, is creating your own toolkit. This toolkit should be an array of design resources that help you transform a blank canvas into something incredible. Today, we’ve compiled 20 of the best design resources out there for anyone starting out in the world of design. Here you’ll find design tools, as well as useful websites to help you complete design projects, gain inspiration, and become an awesome designer.

1. Lorem Ipsum Generators: For many of your design projects you’re going to want to know how text is going to look. You’ll normally see lorem ipsum text on website designs available for use and purchase so you can see how text would look on the site. Will the color scheme work well? Can you see the text? Is the text big enough? A lorem ipsum generator gives you a large amount of text to incorporate in your designs so you don’t have to come up with it yourself.

Here are some useful and funny lorem ipsum generators you can use for testing out the look and feel of your designs:

Hipster Ipsum

20 Resources for Beginner Designers & Developers

Cupcake Ipsum

20 Resources for Beginner Designers & Developers

One-Click Lorem Ipsum Generator

20 Resources for Beginner Designers & Developers

2. Icon Sets: As a designer, you’re going to need to be both versatile and quick when it comes to designing for clients. Sometimes you might not have the time to craft something entirely yourself, or may find that you’re missing a certain element. Having icon sets can help you create ads, banners, blog headers, campaign images, and web design in a snap. Use the icons to highlight important information, as part of background images, and for CTAs.

You should start out by playing around with icon sets from a single bundle and try coming up with all the ways you can use them. From there, try using icon sets of different styles and figuring out ways of incorporating them into different designs.

Cosmos Set (1471 Icons) by IcoJam

20 Resources for Beginner Designers & Developers

600 Stroke Vector Icons by Zlate

20 Resources for Beginner Designers & Developers

Flatties

20 Resources for Beginner Designers & Developers

The Ultimate Pack

20 Resources for Beginner Designers & Developers

UI Icons

20 Resources for Beginner Designers & Developers

Hand-Drawn Icons

20 Resources for Beginner Designers & Developers

3. Color Scheme and Color Palette Resources: When you’re just starting out with design you’re going to want to understand how colors work together, and which colors are right for certain projects.

Here are some sites to help you better understand how to use color in your designs:

  • COLOURlovers: Browse palettes and create your own, discover new colors, and cool color combinations all in one site.
  • HEX to RBG Converter: Know how to convert your colors for different purposes and color schemas.
  • 0 to 255: This tool lets you select a color, or find a random color and then find variations of that color.
  • Colorrrs: Discover random colors with the click of a button.

20 Resources for Beginner Designers & Developers

Interested in learning more about color? Check out these articles:

Recommended books to help you better understand color and design:

4. Smashing Magazine: If you’re interested in coding, mobile design, web design, and UX/UI Smashing Magazine is a great place for beginners and veteran designers. You’ll find new articles every day related to design and development, along with books, workshops and a job board.

20 Resources for Beginner Designers & Developers

Here, are some articles you may enjoy from Smashing Magazine:

5. Bounce: This tool lets you look at different elements of any webpage and make comments, highlight a specific area, and share with others. It’s a great way to look at what other people are doing on the web and state what you like, what you don’t like, and what you would change. Bounce let’s you better understand other people’s websites so you can make your sites optimized for whatever you need.

20 Resources for Beginner Designers & Developers

6. Useful Design Checklists: It’s hard to put these items into one section, but I think one very important tool for beginning designers is having a checklist. A checklist can help you make sure that you’ve done everything you’ve needed for a project, that your design is user friends, that your design looks good, and more. Here are some of my favorites:

7. Moqups: Need help with wireframing? Moqups is an HTML 5 app that can be used for wireframing, mockups, and laying out user interface elements. Moqups also features collaboration tools that allow others to look at what you’ve created, offer advice and crticism and help your project become even better.

20 Resources for Beginner Designers & Developers

8. Take Courses: If you’re just starting out in the world of design and development, sometimes taking a course can help you fill in any gaps in your knowledge and help get you started to being able to create and design the things you’ve only ever dreamed of.

There are numerous places to take courses, and you can look at your nearest college or university, or you can check out these resources to learn online:

  • CodeAcademy: Learn to code, interactively online.
  • Treehouse: Take courses in web design and development, learn to build websites and smartphone apps, and even start your own freelance business with Treehouse.
  • Teach Yourself Graphic Design: An online self-study course to help you learn the basics of graphic design.
  • HOW Design University: Online courses and workshops for budding designers and freelancers.
  • Udemy Design Courses: Select graphic design courses based on what you want to learn and be able to create.

9. Objects and Illustrations: Every designer, especially those just starting out needs resources to help create designs faster that look incredible. You can incorporate ready-made design resources like arrows, flourishes, banners, and borders to decrease the amount of work you have to do.

Here are some of our favorite resources:

20 Resources for Beginner Designers & Developers225+ Vector Arrows

20 Resources for Beginner Designers & Developers120 Decorative Shapes for PS and AI

20 Resources for Beginner Designers & DevelopersChalkboard Signs & Ribbons

20 Resources for Beginner Designers & DevelopersOrnamental Flourishes

20 Resources for Beginner Designers & Developers44 Decorative Vectors

20 Resources for Beginner Designers & Developers67 Classic Frames

10. Pattern Tap: Ever just want to look at what other people are doing when it comes to different areas of their website. Pattern Tap showcases everything from buttons to UI to headers and footers. It’s a great way to browse what other people are doing around the web to get inspiration for your own designs.

11. Firebug: At some point during your process of growing and developing as a designer you’re going to want to check out what other people are doing when it comes to web design and development. Firebug is a free tool that integrates with Firefox, and lets you inspect and edit the HTML of websites. For example, you may wonder what’s making a website look a certain way. Firebug lets you inspect the code that creates the look and feel of a web page. It’s a handy tool every beginning designer should become familiar with.

20 Resources for Beginner Designers & Developers

12. Superhero.js: Both the creation and maintenance of expansive Javascript code can be difficult. Superhero.js has curated a number of resources to help you get on your way when it comes to Javascript. It’s a great resource for beginners and helpful to get you started.

20 Resources for Beginner Designers & Developers

13. Harvest: It’s extremely important to manage your time, keep track of hours, and be accurate with expense reporting when you’re just starting out. If you start out by using a software or program to monitor the work you’ve done, you’re more likely to stay organized and manage your work for clients well in the future. Harvest helps you manage your projects, track the time spent doing certain parts of your project, and helps you with invoicing clients.

14. Primer: This is a great tool for beginning designers looking to get into development. Primer allows you to copy and paste HTML into a doc, and then click the button and you get a basic CSS sheet based on the styles and classes you used in your HTML. It’s a great way to learn CSS and understand HTML vs CSS.

20 Resources for Beginner Designers & Developers

15. Tools for Responsive Design: You’re going to need to understand and be able to create responsive friendly designs if you’re going to world in the world of the internet. Having tools to help you create responsive design is important. Check out 12 Helpful Tools for Responsive Web Design and Top 10 Responsive Web Design Tools to get your designs responsive-ready.

16. Google Fonts: If you’re looking to use fonts on your website, or just understand how fonts work on the internet, Google Fonts is a great tool to see trending fonts, understand how fonts look on the web check out what text looks like with different typefaces.

17. Background, Texture, and Pattern Sets: When it comes to design you’re going to need a wide variety of backgrounds and textures to incorporate into your designs. It’s good to have hundreds of items that you can use and change for different design projects. You can combine backgrounds and textures to create new looks, and incorporate patterns into different areas of print and web design. Here are some of our favorite sets for your design use:

20 Resources for Beginner Designers & DevelopersTextured Watercolor Backgrounds

20 Resources for Beginner Designers & DevelopersSoft Colored Textures

20 Resources for Beginner Designers & Developers200 Blurred & Noisy Backgrounds

20 Resources for Beginner Designers & DevelopersChalkboard Textures

18. Gridwax: This easy to use bookmarklet allows you to add a grid overlay to your website to help you make sure everything is aligned and looks just how you want it to.

20 Resources for Beginner Designers & Developers

19. Launchlist: It’s important to make sure you have everything finished, complete, and ready to go when you’re about to publish a new design or submit something to a client. Launchlist is a tool that helps people in the area of web design and development to check their work before publishing. When you’re just starting out, it’s important to make sure you have all your bases covered and that you know your designs are complete. This tool will help you make sure you complete your projects with ease, and that you didn’t forget anything.

20 Resources for Beginner Designers & Developers

20. Font Resources for Designers: Every designer, no matter what skill level, should have a number of fonts in their design toolkit. When you’re just starting out, you’ll want to spend a lot of time playing with fonts, seeing fonts look combined together, and what fonts look best for print and web.

You’re going to want your toolkit to contain fonts of different styles including: display fonts, script fonts, serif fonts, san-serif fonts, and unique fonts to play with and get used to using together in your designs.

Here are some fonts to get your toolkit started:

Stay Gold Script & Web Font by Decade Type Foundry

20 Resources for Beginner Designers & Developers

Lunchbox by Kimmy Design

20 Resources for Beginner Designers & Developers

Nueva York by Ed J Brown

20 Resources for Beginner Designers & Developers

Mocha Mattari

20 Resources for Beginner Designers & Developers

Church in the Wildwood

20 Resources for Beginner Designers & Developers

Black Velvet

20 Resources for Beginner Designers & Developers

Dirty Flamingo

20 Resources for Beginner Designers & Developers

Recommended books for learning more about fonts and typography:

Interested in learning more about fonts and design? Check out these articles and resources:

If you’re a beginning designer interested in gaining more advice, check out these useful articles:

Tags: Resources Tips

September 23 2013

06:30

How To Create Flat Style Breadcrumb Links with CSS

With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

CSS breadcrumb links

The breadcrumb links we’ll be creating are styled with chevron shapes to support the idea of drilled down content. Previously a background PNG image would be used to create this chevron shape, but with the help of clever border techniques the same effect can be created purely with CSS.

View the CSS breadcrumb links demo

<div id="crumbs">
	<ul>
		<li><a href="#">Breadcrumb</a></li>
	</ul>
</div>

We’ll begin by quickly fleshing out the breadcrumb navigation links as an unordered list. Each breadcrumb link will appear as an <li> with a nested anchor element.

#crumbs ul li a {
	display: block;
	float: left;
	height: 50px;
	background: #3498db;
	text-align: center;
	padding: 30px 40px 0 40px;
	position: relative;
	margin: 0 10px 0 0; 
	
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}

The initial CSS code styles up each list item anchor as a neat blue rectangle. The text is positioned centrally within the space and equal padding is added to either side. In order to position elements absolutely later, position: relative; is added so those absolutely positioned objects will display relative to this parent element.

#crumbs ul li a:after {
	content: "";  
	border-top: 40px solid red;
	border-bottom: 40px solid red;
	border-left: 40px solid blue;
	position: absolute; right: -40px; top: 0;
}

We’ll now recreate the chevron effect in CSS that would previously only be achievable with a background image. Use the :after selector to create an extra element that can be styled up individually. The triangle shape is generated through the use of various CSS borders, so as you can see in the initial demo a single blue triangle can be created by applying top and bottom borders to intersect the overlap. These are currently coloured red for demonstration, but making these transparent will produce a single blue triangle. This border effect is then moved into place through absolute positioning.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

The border effect with the correct colour values will produce the desired triangle which gives the breadcrumb link the popular chevron shape.

#crumbs ul li a:before {
	content: "";  
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #d4f2ff;
	position: absolute; left: 0; top: 0;
}

Using the same principle another triangle shape can be applied to the left of the breadcrumb link. This time the border colour is set the same as the page background to disguise parts of the blue link background colour.

padding: 30px 40px 0 80px;

This additional triangle before the link affects the appearance of the text, but a simple padding adjustment will quickly rectify its appearance.

<div id="crumbs">
	<ul>
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>
	</ul>
</div>

As more links are added to the HTML the series of breadcrumbs increases, each separated by the cool chevron shape thanks to the CSS border triangle effect and a touch of right margin.

#crumbs ul li:first-child a {
	border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
	display: none; 
}

#crumbs ul li:last-child a {
	padding-right: 80px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
	display: none; 
}

The full breadcrumb navigation list can be further styled by removing the triangle effect on the first and last items with the help of the :first-child and :last-child selectors, then given subtle rounded corners with border-radius.

CSS breadcrumb links

#crumbs ul li a:hover {
	background: #fa5ba5;
}
	#crumbs ul li a:hover:after {
		border-left-color: #fa5ba5;
	}

All that’s left is to apply a hover effect to the links. Don’t forget to change the border-left-color on the hover state of the triangle effect so the whole breadcrumb link changes colour.

View the CSS breadcrumb links demo

September 06 2013

13:00

Teaching Old Dogs New Tricks: Does Age Matter in Learning Web Design?

A lot of people say you can’t teach an old dog new tricks,  that old people have nothing to learn and should suit themselves just watching sunsets and daisies blooming while sitting in an old wooden rocking chair at the porch of the house they bought at the countryside. Most young designers tend to think that older people have no place in web design since the field is technologically inclined in nature thus requiring a more youthful and fresh mind.

I, for one, believe that this notion is not always correct. Older people have their own places in the realm of web design. In fact, they could still learn, given the opportunity, access to information and of course, an unbreakable will. In fact, I strongly feel that they can even attract clients and make this craft their new source of income!

Learning Web Design at Age 30, 40, or 50 – Does it Matter?

old-people-web-designing-02

You see, the good thing about web design is that it chooses no age. Web designing, unlike other fields of employment, does not really constitute a lot of physical stress. It means that web designers need not to be physically strong to design a website. Truth is, you might not even need to move a lot to design the page. (Well, except perhaps, if your back aches at times so you have to stand up). Just an open mind and a creative brain will do.

No matter the age, learning the ropes of web design is still a good option. But how? Now that’s a different thing:

Brainstorming

The first trick to learn about web designing is thinking. Yes, to successfully design web pages, you need to picture it in your mind first. You need to know how it will look like, what colors will you use, what themes are better to go with your design concept, what icons to utilize and many others. Having a forethought on what your website looks like will help you actualize it. Remember that we can only create what we can imagine. So it might be seemingly impossible to design a website accidentally of out of nowhere. The source of all designs is, of course, the mind.

Now, you might be asking yourself, “ I’m 50 years old; how can I possibly think of new designs?! I’m old, my designs would just be retro.”

old-people-web-designing-03

Photo from isadoradesign.com

The answer is pretty simple. Look, observe, learn. Since designing is a facet of art, it is very difficult to teach, like the way technical and scientific fields do. As a student of design, you have to learn the theories and see their actual applications. You need to take out what is important and learn from what is not needed. This skill will surely boost how you work with your designs in the future. From now on, you should start looking at different websites. Browse the Internet correctly. Never fancy yourself in being swarmed by Facebook notifications or Twitter updates all day. Just let them be and think of how you could improve yourself. Visit websites; be inspired.

For further reading on website inspirations, you could look for :

Wireframing

The next thing you should learn is how to put those thoughts into your screen by making a wire-frame or a mock-up. A wireframe is the skeleton of the design. Wireframing enables you to properly place the elements you have thought of. This makes your designing process easier because you already know where to place them. As the design’s skeleton, the wireframe is very much needed for starting designers. There are a lot of wireframing resources on the Internet. You just need to select one and Kazam! You can now start designing.

Image by Michael Lancaster.

Here are a few wireframing links for you:

Designing

After having successfully finished your wireframe, you can now place the elements. In this step, you should remember the design you thought of and try to improve it along the way. You can start placing text boxes, images, texts and other design elements. Most web designers use this step to be able to slice the documents properly. Note that in this step, you should know the basics in color combinations, iconography, logography, typography and other design basics out there. Now this step becomes challenging because you need to use Photoshop, a very complicated software to some.

old-people-web-designing-05

But never fret, you can still learn by reading these:

Coding

Here is another complicated step: you need to transfer the design into code. Writing codes can be crazier than you think. But, provided the proper guidance and remembering the most important and basic codes, it won’t be as hard as it really seems. As a starting web designer, you should first acquaint yourself with HTML and CSS codes since these two are the foundations of a webpage. But as you traverse the world of web design, you will begin to learn other coding languages.

old-people-web-designing-07

Here are a few tutorials:

Releasing your website

So given that you already finished your first ever website, you know that this won’t be the end. Of course, after finishing it, your website should be known by the people. It should be marketed towards every place possible so that future clients might see your work. Now this becomes easy when you have your Facebook or Twitter accounts. Just post and post updates to your website. Tease them. Let them be hooked to your website and until you are successful with that, your website would just be another of those forgotten domains in the world.

old-people-web-designing-08

The Truth

After designing, coding and releasing your very first website, of course you will wait for clients. You might be under the impression that this comes easy, like a walk in the park. But I must warn you that this could be a pain in the arse. Worse comes worst, no one will hire you. You’ll just be frustrated that no one ever noticed your page. All those nights of thinking about design concepts, designing, coding, revamping, thinking again, designing again, coding again and on and on will seemingly be thrown away out of futility. Yeah, that is very frustrating but these are roadblocks you’re supposed to expect.

Some will not hire you because you’re old, and just started designing. That’s true. It happens all the time. Older people are stereotyped as people who have old ideas. People who can’t offer something new, who can’t learn new knowledge. It can happen, yes. But you should remain true to yourself. Never be shy when your clients ask for your age. If they turn you down, start again.

But the thing is, you never stop trying. You revamp and revamp, commit mistakes again and again, be dumped a lot of times and you learn. Never stop learning. Read tutorials, visit websites, observe! Take all the lessons of the past and be mature enough to know which to take and which to forget.

I remember a friend who just started photography. He actually studied Social Sciences. One day, his aunt gave him a DSLR camera. Not knowing what to do with this, and considering he was 34 years old, with two kids, this was not something he should learn. But then, I gave him a photography book for Christmas. He was inspired. He read, read and read, took a thousand photos, even broke one of his lenses. And after a few years, he became a good photographer. Now, he’s one of the best in our town.

The moral of the story is, anyone can learn new tricks if they let themselves learn. In technology, age is just a number. It’s how you think. Young people are open to new knowledge. That’s what makes their ideas fresh. You could do that, even if you’re sixty years old.

The thing I have learned about web design for the past years is, sometimes, you have those roadblocks, where a code seems to be malfunctioning or anything of that sort. Or a design seems to be very unachievable or when time becomes so limited. But if you’ll not look where the error in the code is, or how to work around that design and stretch time, you won’t go anywhere. So better try to fix it.

Conclusion

Web design is a very good field to venture in. Since the Internet is slowly becoming a very potent tool in propagating knowledge, it is very advantageous for a person, notwithstanding their age, color, gender or race, to learn how to build webpages. We all started from the basic. We all made ugly designs. We all committed grave errors. And as I allude from Harry Potter and the Order of the Phoenix: Every great web designer in the world started from what you are now – newbies. If they can do it, why can’t you.

September 02 2013

06:30

August 27 2013

14:25

6 Not-So-Obvious Mistakes Freelance Web Designers Make

Advertise here with BSA


Okay, I’m all coffee-d up so I’m ready to talk about my most favorite thing in the whole wide world – mistakes. Actually, favorite is not the right word…despised sounds more like it.

So, going forward, the specific kind of mistakes I’m on about today are mistakes made by freelance web designers. But there’s no standard basic stuff here, like: not charging enough, missing yet another deadline, not responding to email in time, not doing any marketing, not being present on social media, and so on. We all know what causes those and, to some degree, we know how to fix them as well.

The following mistakes are therefore not that obvious, but they still have a significant impact on your design business. And I’m speaking from experience unfortunately. I used to own a web design business a couple of years ago and I don’t feel very proud admitting that we were guilty of doing a number of the following things.

1. Not being a web hosting affiliate

6 Not-So-Obvious Mistakes Freelance Web Designers Make

Signing up to a web hosting affiliate program is probably the simplest way for any web designer to make additional money, with no additional marketing cost.

The profit potential in this depends on the type of clients you’re working with. The more savvy client will already have their own server infrastructure set up and ready for the site (either as a dedicated machine or even a simple shared hosting), but a lot of first time design clients have nothing to begin with.

By offering them some hosting packages as an affiliate, you’re actually making the whole setup process easier for them without any additional cost (after all, it’s the hosting company that pays your commission).

These days, every major hosting company has an affiliate program, so you don’t have to look far.

2. Not having a bonus offer

A bonus offer is something you are willing to give away for free, just so your client can have a better experience and will be more likely to come back to you in the future.

The idea of a bonus offer is to make it something that’s not that tough for you to make/prepare/set up (doesn’t require much time), yet is still very useful to the client.

For instance, you could try any of these:

  • Setting the site up with some starter content. If your client has an old version of the site then you can take the content from there. If not then they will be keen to send you some new content in DOC or ODT. And let’s face it, if you’re using WordPress then entering this content won’t take you – the professional – more than an hour or so.
  • One year free support. This is just good client service. You should actually always offer free support for a limited time period. Setting the cap at one year seems reasonable.
  • Free backup handling. Your less savvy clients won’t realize the importance of data backup at first so this is something you should explain to them and also handle on your own with no extra charge. The trick is to use the right plugin so you don’t have to do anything manually. For instance, Online Backup for WordPress allows you to schedule backups and have them sent to your client’s (or your) email address.

6 Not-So-Obvious Mistakes Freelance Web Designers Make

Depending on your niche, your resources, or your manpower, you can offer many more bonuses just like the above. The point is to keep it simple, quick, and useful.

3. Making a poor first impression

Here’s an interesting fact from our journalist friends all over the world… It turns out that the headline accounts for over 80% of any given article’s success. In other words, no matter how good the article is, no one will read it unless the headline is good as well.

In freelance web design, I’d say that no matter how good you are at designing stuff, it won’t matter if you fail to make a good first impression.

Three main elements can help you achieve this:

  • Personal charm. Sorry, I can’t help you with this one. Just wanted to include it on the list to make the message complete. I guess it all takes some trial and error before you arrive at your best “client-handling” persona.
  • Billy the Kid -like fast response. If you want a client to be pleased, you’ll have to learn to respond to their communication in time. Don’t go crazy with this though. One work day to half a work day response time is good enough. You don’t have to sit in your inbox round the clock. On the other hand, forcing them to wait more than a day is pushing it.
  • Tools. There are two specific tools I can recommend here: (1) Bidsketch – proposal software. It can help you create great looking proposals, manage them, send them out, monitor how clients view them, and even let clients respond to your proposals inside a nice web-based interface. (2) Teambox – project management software. It will help you keep track of the project while it’s going on, collaborate with your team if you have one, and as a result not miss any important deadline or file attachment that your client has sent you.

6 Not-So-Obvious Mistakes Freelance Web Designers Make

Speaking of deadlines:

4. Not delivering in parts

One of the interesting mistakes I saw among my colleagues early in their careers (and myself unfortunately too) was that they didn’t deliver the product – the web design – in parts. Instead, they would sit in front of a computer for a week or more, complete their work, show it to their client and…just hope for the best.

Not surprisingly, the clients weren’t always impressed, and the project required a lot of going back and forth with various solutions, and quite a bit of frustration.

A way better approach is to create sub-deadlines and deliver different parts of the project regularly. That way, you can act fast if the client doesn’t like something, and even though preparing such partial versions will take some additional time, the final project is still likely to be completed quicker than by treating it as one huge chunk.

5. Not letting others make money

I guess this is all about the right mindset…there are basically two kinds of people (if I had a nickel for every time I heard that, right?): ones focused on scarcity – “there’s not enough resources/work for us all so I have to guard my deals and clients,” and ones focused on abundance – “there’s enough of everything for anyone.”

As it turns out, in freelance web design, and actually any other type of freelancing, the latter mindset is the more beneficial one. I don’t want to turn this into a purely existential talk so let me just tell you the following.

Reaching out to your peers and fellow designers, and sending them work that you don’t have the resources to take care of right now, will always come back to you in one way or the other. In short, being an active member of the community always pays off.

This also goes for other various tools and services available. For instance, if you don’t want to take care of your client’s backups manually, you can send them over to CodeGuard and let those guys make some money. If you don’t want to take care of various SEO optimization tasks, you can send them to Moz.com. And so on and so forth.

6 Not-So-Obvious Mistakes Freelance Web Designers Make

6. Not offering any education

In a nutshell, by education, I mean teaching your clients about the solutions they will be working with on their new site.

For us – professionals – all those online tools and software seem quite easy to work with, but that’s only because we’ve been using them for years now and it’s been a long time since we had our first-time-user experience with them.

For example, WordPress is not actually that simple to grasp for a first time user as we all think it is. This is something I found out not that long ago. I created a website for my mom for her EU-founded project. Nothing fancy, just a standard theme and only the bare minimum of plugins. Now, my mom has some serious tech background, she’s been teaching computer science for years on a High School level so she knows her way around a computer, so to speak. But as it turns out, learning WordPress is not as straightforward as it seems. I can only imagine how difficult it can get for someone who hasn’t had any prior experience with other software.

This all comes down to quite a simple piece of advice actually. Either send your clients over to quality online training on WordPress and other tools they’ll be using, or create the training yourself (preferably in the form of video tutorials).

The benefits of this effort are very simple and very significant at the same time: The more the client knows, the less time you’ll have to spend with them later on handling some common problems and providing support.

Okay, this has turned out to be quite a lengthy post, but I hope you’ll get some handy insights out of it. Have you noticed any of the above mistakes being made in…well, your own web design practice?

August 26 2013

13:00

Font Police: 20 Fonts to Avoid to Maintain Your Readers’ Sanity

Fonts perform a great role in your design, but you should know which fonts to avoid, too. Either in typography or in web page design, the use of proper fonts is a great advantage. Sometimes, designs become disasters just because the font is not used properly or, in some sense, does not fit the occasion.

This calls for the proper selection. For decades, the Internet has constantly provided us with a vast database of fonts, all segregated by variety, style and use. This lets us choose which to use. Because of this wide variety that we have, it is just fitting to say that nobody can have an excuse why they chose the wrong font. It’s also safe to say that with the liberty each designer has, he should pick the right fonts at the right time.

fontpolicek

But some fonts, of course, tend to have become more popular because of their availability. Operating systems like Windows have provided default fonts for the user. It removes the hassle of choosing, downloading and installing them. This convenience has been good because of the easy access of readily available fonts but has become detrimental too because the fonts that were popularly used became cliché. Hence, they are to be avoided.

I tried to make a list of fonts that you should never use again. These were selected because they were too cliché and very hard to put into the design. The essence of this list is not to fully discriminate mainstream and cliché fonts but to properly use them for fitting occasions.

Here are they:

Comic Sans MS

fonts-that-you-should-never-use01

Comic Sans MS is one of the basic Windows fonts installed in your computer as you boot up Windows. Microsoft first introduced this font in 1994. Comic Sans was designed by Vincent Connare as a child-oriented font. Its inspiration was mainly gotten from comic books in Connare’s office (they were Watchmen lettered by Dave Gibbons and The Dark Knight Returns lettered by John Costanza). According to him, he originally designed the font to be used with speech bubbles and not for general use. But since then a lot of people have fallen in love with this font and it became a cliché.

One main reason why you should stop using this font is it is childish. It lacks formality, though it is used for formal events and announcements (doing facepalm  right there).  Unless of course you’re running a website for kids, or designing a first-birthday invitation, you could use these kinds of fonts (I said these kinds because you have other choices than Comic Sans).

Never use it for swimming pool rules signboards, grave epitaphs, commemorative plaques, hospitals, government job applications, heart transplant activities, and books.

Never use this font when you are designing for business sites, or warning signs. It might give people an impression that your client is childish and might not take them seriously. Never write DO NOT ENTER in Comic Sans, else, the reader might see it as “Do not enter says stupid childish whoever”.

Use Comic Sans MS only when your audience are below 6 years old (parent-letters not included), when you’re writing speech bubble contents for comics, and when you’re client is dying and his last will and testament said so.

Visit: Comics Sans Criminal

Subtitute Fonts:

  • Lexia Readable
  • P22 Kaz Pro
  • JM Doodle Medium
  • FF Friday Regular
  • Sharktooth Regular
  • Comic Strip

Papyrus

fonts-that-you-should-never-use03

Remember that term paper about Egypt your teacher told you to write? I bet you used Papyrus back then! And I bet too, that you might as well, if you can, forget that shameful design experience.

Papyrus came out in 1983. Chris Costello successfully managed to design it after six months of manual hand-drawing. According to him, it was designed to imitate the pre-modern writing in papyrus leaves.

Be that as it is nobly designed, this font wasn’t really seen in papyrus rolls alone. You can now see it in captchas, advertisements, signboards, banners, books, and even in most typographic designs! It seemed to have been seen everywhere to the point that you might even vomit if you see it again in your page. This saturation resulted to people hating the font. (For proof, find iheartpapyrus.com.)

Travis Estvold once wrote via blog.echoenduring.com:

“I, myself, hate when people use Papyrus—the font, that is, not the plant or the paper. I’ll be the first to admit it’s a strange thing to detest but whether it’s justified, this loathing is my constant companion. Surely, if someone proclaims the most bothersome part of his day is unearthing new and terrible ways in which locals have used and displayed a particular typeface, he must also be a designer. This is true… I’m not sure when my obsession with the font began, but my poor girlfriend, who has been a party to most of my Papyrus sightings over the past two years, can tell you it’s been building for some time.”

Truly, Papyrus is one of the ‘I-was-used-repeatedly-until-I-became-useless’ type of fonts.

Here’s a list of alternatives to Papyrus.

Curlz MT

fonts-that-you-should-never-use08

Okay, I personally loathe this font. Once a classmate of mine used this font in a letter sent to me and I went nuts. My eyes had a hard time reading and I got dizzy and nauseous! To my anger, I wrote him back. Guess what font I used, WINGDINGS! Imagine the hate in his face.

Curlz was originally designed by Carl Corssgrove and Steve Matteson in 1995. They were added into the default Windows fonts and were also originally created for party invitations. This font copied what happened to the Comic Sans Font, it became to mainstream to a point that people got sick and tired of them.

Aside from that, it lacks formality and authority. You can never use it in coat-and-tie events, warning signs and many more because it will just give your readers an impression of a joke. Curlz also has big issues with legibility. Imagine writing a book with Curlz MT font. People who read your book might sing, ‘You spin my head right round right round’. If you want to make your body readable, do not, not even in your drunk days, use this font in the body.

Now this font, too, has become overused. It’s almost everywhere too! Most people think that just because your website caters to women, you have all the right and privilege in the world to use this font. Actually, the female target market does not oblige you to use Curlz MT. It is very wrong to think that women will fall for cute and curly letters. No, that would never happen. Well you might be able to attract middle-aged ex-cheerleaders who think they are still in middle school. I guess that would make an audience.

Arial

fonts-that-you-should-never-use04

A designer friend of mine once said, if you have Helvetica, use it. Don’t settle for Arial.

According to designworkplan.com, Robin Nicholas and Patricia Saunders originally designed Arial in 1982. It was widely used as the standard typeface for normal computer usage. It became popular after the release of Windows 3.1 where it was installed as free. After that boom, the usage of the Arial font spread like wildfire across the globe.

People may have liked Arial because it is readily available in the operating system. Of course, the mentality is, why buy an expensive font if you could make do with what you have. The result? Arial explosion. Arial on magazines, on street signs, on banners on advertisements and even in TV! Of course this made most designers sick of it. Also, Arial has no proper and true Italics, which made it difficult for body texts to italicize with style.

Good thing, we can have substitutes for Arial nowadays. We can easily swap this ubiquitous font to make your body texts look new.

First is Verdana. Released in 1996, Verdana is one of the more popular substitutes to Arial because aside from its ready availability, Verdana is easier to read. Second is Tahoma. The Tahoma font was released with Win95 as part of the MS Office. It’s also readily available as Verdana is. Third is Trebuchet MS. Trebuchet MS was released with Windows 2000 and looks more like Verdana.

Other substitutes: Calibri, Sego UI and Georgia

Courier New

fonts-that-you-should-never-use copy05

Ever remembered the typewriter? Do you notice the resemblance of the typeface your typewriter produces and the font Courier New? Well, it’s supposed to look like it because it was how Howard “Bud” Kettler thought it to be in 1955. Courier is a slab serif type of font that was originally sold to IBM. It was made to look like a typewriter print because IBM originally made typewriters.

Kettler says that the font was called courier because instead of being a messenger, “a letter can can be the courier, which radiates dignity, prestige, and stability.”

Had it radiated dignity and prestige? I don’t think so. Courier’s stability as a font has been questioned a lot of times. All we know about the courier font is that it is a serif font.  But aside from that, nothing. Courier had been suffixed with ‘New’ but I still see nothing new in it.

Courier are used for certain occasions like film scripts, codes and plain text documents. Web designers avoid courier because its lettering is not properly measured and it suggests a more ancient design. Also, because it was originally designed for typewriters, courier font letters have low-resolution and cannot be placed in the body artistically but it does look good with a green background.

The Courier font is used on movie scripts, novel manuscripts and other forms of literary art. But in web design it has no place, unless you want your website to look like it’s fresh out of the typewriter.

For font alternatives, try Cousine.

Cousine was designed by Steve Matteson as an innovative, refreshing sans serif design that is metrically compatible with Courier New™. Cousine offers improved on-screen readability characteristics and the pan-European WGL character set and solves the needs of developers looking for width-compatible fonts to address document portability across platforms.

Times New Roman

fonts-that-you-should-never-use07

One of the best updates Microsoft Word had in the past years is its use of a new default font. In previous version, I recall that Times New Roman was the default font used. I personally didn’t like Times New Roman because it’s very hard to read and suggests a mood of laziness in it.

What people are saying about  Times New Roman:

“Very corny and boring”

“I just avoid when I can.”

“It’s simply bad, ugly and makes me nervous when I see it.”

“I cannot look at Times New Roman without automatically assuming that it is a placeholder font, waiting to be replaced by something appropriate for the text.“

For a fact, Times New Roman was named after the Times of London, a British newspaper. They needed a new body text font for their paper in 1929. They hired a guy named Stanley Morison of Monotyope, a British company. Morison did the job with Victor Lardent as supervisor and eventually named it Times New Roman.

Then on, the font was used in most body texts and has been popularized as it became Microsoft Office’s default font. This led to its status of being cliché. It became so overly used to a point when people found it disgusting and insulting to use.

Most designers see the Times New Roman font as narrow-spaced because they are originally designed for newspapers and though it is formal in nature, Times New Roman’s bold typeface makes it hard to read and thus loses its formality. Spacing has also been a problem for Times.

If you can avoid it, please do. You can substitute with fonts like Concourse, which is a sans serif font which can be used for more formal situations and legalities. Equity is also a good font as it is a combination of classic and convenient designs. Book Antiqua is also a good candidate and has better spacing flexibility than Times.

Bradel Hand ITC

fonts-that-you-should-never-use02

It might come to his senses that Richard Bradley might soon be sick and tired of seeing his handwriting. I mean, it’s literally everywhere. It might even cause him a very serious headache to even see his penmanship!

Richard Bradley is the designer of the seemingly abused Bradley Hand ITC font. According to Microsoft, this font is an informal script- based font. It is characterized as warm and familiar in nature and has a relaxed rhythm typical to the real handwriting.

Being a readily available font, this font has been used to convey a personal touch in the sans-serif font because fonts like Arial and Helvetica cannot do this. Producing a handwritten-like design will make it look like the designer himself bothered to personally write. That is why it was used in a lot of occasions like posters, school announcements, bulletin boards, cards, invitations and even in story books. But this, sadly, all resulted into chaos as it was turned into a cliché. Aside from this, the Bradley Hand ITC font is ineligible. If you’ll use it for headings and announcements, which should be seen from afar, it will not become visible as it is thin, even if emphasized. Meanwhile, if you’ll use it in the body, your reader will probably go mad because he would not understand the text properly because Bradley Hand’s readability goes lower as it size decreases.

Personally, I wound not suggest any alternative for handwritten fonts because I totally don’t want to use them as they are difficult to place together with other elements in the design. So might as well stick to your Helvetica.

Vivaldi

fonts-that-you-should-never-use05

A guy named Freidrich Peter designed this intricate script typeface. It is very calligraphic and copperplate-ish. Because it is a script font, Vivaldi is commonly used in wedding invitations and other formal events. Vivaldi is pretty formal and good except that it has problems in spacing. Vivaldi characters tend to get crowded because they are not full scripts, meaning their characters are not woven into one stroke only. For a semi-script, it is very much condensed. This results to difficulty in reading. Yes, you may adjust the spacing between letters, but I won’t even think of that in semi-scripts. Expanding the spaces will result to inconsistency in the font design.

One more problem I see with Vivaldi is its caps. When you capitalize a whole word in the Vivaldi font, it would be pretty difficult to read and discern the difference between letters. I tell you. Try it if you don’t believe me.

Kristen ITC

fonts-that-you-should-never-use09

Kristen ITC is one of the cutie-patootie fonts. It was designed by George Ryan for the International Typeface Corporation. It consist of two weights and was inspired by a handwritten menu at a Cambridge restaurant. This font is asymmetric and resembles the handwriting of a toddler. Like Comic Sans, this font is targeted to the child target market and was impliedly drawn to attract little children.

Kristen font users are usually grade schoolers, gradeschool teachers, child psychologists, and other people who work for kids. The font is playful in nature. You can almost see it in your children’s classrooms all saying how life should be good and that they eat a lot of vegetables.

But Kristen should be pretty much avoided. A designer should always think of the issues this font poses. First is that it is has no formality. Using this font in a legal document could make you lose a case. Second thing, is that Kristen’s non-caps are placed in the middle part of the caps. Unlike other fonts that place the non-cap characters as where the cap character baseline are.

Manual spacing could also be a problem as the spacing of the capitals of the font are difficult to measure since the characters are a little bit curved.

Viner Hand

fonts-that-you-should-never-use06

Viner hand is an informal script font developed from the handwriting of John Viner. I’m pretty sure this font sucks because it has been overused, like the others in this list. Commonly, this font has been abused by angsty teenagers and goth wannabes.

Other fonts to avoid using

Mistral

fonts-that-you-should-never-use10

Impact

fonts-that-you-should-never-use11

Symbol

fonts-that-you-should-never-use12

Stencil

fonts-that-you-should-never-use13

Wide Latin

fonts-that-you-should-never-use14

  • Scriptina
  • Bleeding Cowboys
  • Lucida Handwriting
  • Birth of a Hero
  • Wingdings

Conclusion

For a designer, originality is everything. Fresh designs should always be produced by his rather queer mind. He should always be innovative with the design trends that happen around him. He should also be experimental in the trends he use for designing. That is why one must not be satisfied by the fonts present in his computer. He should look and look and look until he finds that font that suits him. Remember, a good designer has no go-to fonts.

August 20 2013

13:00

How to Not Suck at Typography Like a Designer-convert Doctor

We probably would all  be savages if printing was not invented. The invention of the Gutenberg movable type has been a very great leap towards the spreading of information from one person to another and from generation to generation. After this momentous invention, greater finds have flourished and soon became what we know now as the software. Of course, without the invention of the movable type, printing would not be invented and all falls into oblivion, including one of the most reliable inventions man has ever made – the Internet.

Whether we admit it or not, the invention of printing is the unofficial father of all technology. Without it, technology would just be limited to mechanical modernization. Software would have probably not existed and the world would be a much gloomier place. Truly, the gallant invention of the Gutenberg movable type saved humanity from the decadence of ignorance.

OLYMPUS DIGITAL CAMERA

gutenber-type-typography02

Photos from kevinmallard.wordpress.com

This is why web designers value the importance of text. Though the print media is considered to be dying, web designers and developers have not put into obscurity the importance of text in spreading information. No matter how forgotten it may seem, words are still the primary means of spreading information. Words still have the power to influence, inform and entertain, which is why the great geeks of the Internet try to maximize the power of texts. They have been attempting to fuse texts with the growing and younger mediums for it to fully utilize its abilities. Hence, typography.

Photo from typographyfall2010.blogspot.com

Smashing Magazine describes typography as the soul of design. It includes the proper selection, juxtaposition and styling of typefaces to produce better effects so it serves its purpose better. It can breathe life to the barren text.  With the booming of the digital era, typography has evolved all the same. Today, the art of beautifying letters include a wide array of topics and real life applications. Typography artists now focus on the communicative aspect of typography, making it more readable, identifiable, sellable and, of course, entertaining. We see typography almost every day in our lives- in the book you’re reading, in the newspaper your seatmate is browsing, in your daily advertisements, in the Internet, in the signs at the street, everywhere. Truly, the importance of typography has gone wider and wider as it evolves in terms of design schemes.

Photo from arena.liva.com.vn

It may be seemingly easy to study typography. Some may say that , ‘It’s just letters; how could difficult that be?’ but as easy as it seems, typography is an art that is very difficult to master. Most designers have hart times perfecting their skills in typography. Some even spend a great deal of money for it and never get better. Yeah, it goes a little frustrating at times, but studying this art form and mastering it is one great opportunity to earn and be known.

Be that as it may, you can never learn typography if you don’t start learning it. And when is the better time to do it than now!

Photo from zonters.com

In my previous post, I gave an overview of the things one should remember when making typographies. It’s fairly enough for someone who knows what to do to know what not to do. But in this case, because typography is a very complex field, the need to discuss the don’ts are very grave.

So what are the don’ts in typography?

Do not use too many typefaces in one page

I’m sure almost everyone has a hundred+ fonts saved in their hard drives; and I bet half of us want to use them right? But let me cut your enthusiasm with this reminder, use minimal typefaces in a page. Having a lot of worthless, different typefaces in a page will suggest an inconsistency in your design style and could give the readers a hard time reading. Just put it this way, you buy all kinds of food in the supermarket, would you eat the all at once in a single munch?

Photo from johnjacob.ca/type

Links that would help

Do not use serif and sans serif fonts interchangeably

Most people tend to interchangeably use Serif and Sans-Serif Fonts. The truth is, doing this might affect the readability of the page. Sans Serif Fonts are usually used for pages that should be seen from afar. These are very readable even from a great distance. Meanwhile, Serif Fonts are used for private-reading activities. That is why most books use serif fonts.

typography-donts06

typography-donts05

Links that could help:

Do not use all caps all the time

WHAT DO YOU FEEL WHEN YOU READ THIS PARTICULAR SENTENCE?

Didn’t you feel congested and annoyed? Caps are used to emphasize important messages in the body of the text. But to type a 100-word typography in all caps, it’s too much. People might think you’re angry or shouting. Remember, not all messages are important. Know the difference.

Photo from thedeviljumpedonmyhead.com

Do not use Comic Sans, Papyrus or Curls MTz as much as possible

Okay. You’re probably wondering why. Let us think of this as in this situation. You’re listening to a song, the song was very good. The lyrics were awesome and the melody is superb. Because you felt the song was really good, you listened to it all week, non-stop. The next week, you hate the song.

This is what happened to these fonts. They became too mainstream. They were repeatedly used and clichéd to a point where everybody is sick and tired of them. Try something new. There are a lot of fonts out there. You won’t be even able to choose from them all.

Photo from modernsoutherner.com

Do not auto-Kern

Kerning is the measure of the spaces between characters. Kerning adjusts individual letters in a typeface and creates a visual appeal in the text.  Photoshop, a tool we love to use in making typographies, is a great program. It has an auto-kerning function but it’s never as accurate as those squiggly balls in your eye sockets. They are way better because sometimes metrical kerning is faulty and produces a mathematically correct but visually distorted type.

Photo from Adrian Colley

Links that could help

Don’t use texts below 10 for the body

Not everyone can literally read between lines. Keep your texts above 10 for them to be easily read. If you’re having trouble because of the large amount of content to be placed in such small space, contemplate if you reduce the text or apply spacing adjustments. Never reduce the font size to 10 below, except if you want the message to be ignored. You’re not making a typography for ants.

Photo from docstoc.com

Links that could help:

Conclusion

A bad typography is as bad as a stale bread. It’s there but you can’t eat it. It’s there but you can’t digest it. The best thing to remember about doing typographies is that the message is superior to everything. The reader must understand the message before anything else.

August 12 2013

13:00

Basic Principles of Flat Design – And Resources to Get You Started!

In case that you have been stuck in a cave for the past few years, let me tell you this nice news: flat design is the current craze. We should now say goodbye to those intricate designs dominated by brushes, gradients, drop shadows and all those kinds of designs. I repeat, flat is the new trend.

The flat design is an emerging design style that uses flat shapes and icons. It basically revolves around the use of rectangles, circles, triangles and others shapes with the absence of other design elements like shadows, strokes and gradients. It was made popular by Microsoft in their computer systems, especially their new operating system they call Windows 8. Basically, the flat design style is rooted on two principles: simplicity and readability. These two principles guide the designers in formulating stylish web layouts, software designs, posters and many more.

website-sample-flat-02
Photo from Michael Kelsinger

Flat Design’s Simplicity

It is the state of a design that refrains from the use of intricacies. Simple flat designs turn away from the use of drop shadows, strokes and other design elements. The reason behind this is that people now appreciate simple and easy to recognize styles. Also, with the advent of mobile browsing, where the screen space is limited, the use of simple images would maximize the use of the pixels on the screen. The minimalist style is also applied as the designers focus on wide spacing between icons, images and all the other elements of a web page or application. Furthermore, simple and flat images tend to load faster than intricately designed ones because the browser would not load the design elements packed together with the main image.

Meanwhile, the principle of readability comes in together with the minimalist style. With more ‘white-spaces’ (or empty spaces), the text is seen well. Also, the absence of drop shadows, strokes and gradients will ensure the readability of the texts placed within a page.

Facebook is one of the first to adapt the design format. In the past weeks, Facebook has evidently changed their design schemes, allowing users to see simple icons, designs and more eye-friendly visuals. Google has also followed the lead by changing its icons to colorful yet flat images.

facebook-changes-flat

Truly, the flat design trend has slowly but surely invaded our web pages, apps and computers. Soon enough it will totally influence us. And before that happens, let’s familiarize ourselves with the philosophy of the flat Design. We’ll talk about the elements of the design and how are they used to fully utilize the screen space.
There are actually five elements. They are:

  1. Absence of depth
  2. Use of simple elements
  3. Typography
  4. Color
  5. Minimalism

skeumorphic-04

Photo source: The World is Flat

The Death of Depth

Depth is now dead. A new design trend is ruling the block. Unlike the previous design trends where we couldn’t live without drop shadows, strokes, bevels and gradients, the new flat design style focuses more on simple 2D blueprint. This philosophy of the flat design totally contradicts the skeuomorphistic design, where images are made to imitate the shape, color and utilization of a real-word object. Skeuomorphistic-designed websites and apps normally have background images which are realistic in nature. These use textures in the real world.

skeumorphic-design-flat02

A good example of this kind of design is the iOS6 (and previous versions of iOS) design. Each design is supposed to be an imitation of the real object. The use of 3d computer-generated images, the use of gradients, textures, strokes, bevels and embosses are maximized to make the image look like real-world. The newsstand app looks like an actual newsstand made of wood.

skeumorphic-02-comparison-flat

On the contrary, these elements are removed in the flat design. The scheme of the flat layout removes these 3D elements. Drop the depth. Remove all those shadows, gradients and strokes!

Simplicity is Still Beauty

With the removal of depth in the designs, it is but normal for the images, icons and other design elements to become visually simple. Icons are now made to be flat and uses basic geometric shapes like circles, squares and rectangles. This will give a simple and easy to use graphic user interface. The average person will no longer feel the need for a manual because the visuals present themselves as they’re used.

settings-icon-flat-01
Photo from Hrvoje Grubisi

When you see an F icon placed in a blue square, you’ll easily know it’s Facebook. When you see an icon of a gear, it would easily tell you that it’s a settings menu. Flat design works like that. When you see a diskette shape, you’ll automatically know that it’s the save icon. Or when you see a big yellow letter M placed on a red background, the notion will always be McDonald’s. See, the simpler the logo gets, the better the recognition will be. What you see is what you basically get.

facebook-icon-flat
Resources for designing a Timeless Logo:

settings-icon-flat-02
More on Okilla.com

Typography, as I told you before

typograph-sample
Photo by Courtney and Andrew
Typographies have their place in flat designs. It adds style even with the texts and gives you a reader-friendly interface. No more calligraphy. Use crisp and clear font texts with shorter messages and chromatically placed with color and shapes. For more information on this, read our typography tutorial.

Coo-lor Colors

As I mentioned in our typography tutorial, color is important. It can make or break your page. It basically sets the whole feel of your site or page. In the flat design principle, it is advisable to use candy colors which are slightly desaturated because they tend to add aesthetic beauty to your page without making your reader’s eyes bleed because of too much brightness. Candy colors attract the eyes better because they are cute, and can be complemented and contrasted easily with other colors. These colors are normally #e65d5d or #c43434 (for red), #7dc692 or # 508b61 (for green), #dfbc42 (for yellow) and # 3498db for blue. Flatuicolors.com provides a good guide for this.

Just remember that color is everywhere; don’t bore people by choosing the un-cool ones. Gradients are also not cool anymore. Avoid using bright yellow, neon yellow green, neon purple and bright red and bright orange. Don’t make your website visitors glare.

color-palette-for-flat-design

color-palette-for-flat-design-03
Master Your Colors!

Less is more, lesser is most

Minimalism is the art of de-cluttering your page or screen. This principle originated from the magazines of the print media where white spaces are more evident than the text itself. It gives padding or breathing room for your texts and suggests a typographical peace. Leave a lot of empty spaces. Throw away the unneeded elements and impress people. Less is more. Lesser is most.

sample-typography-flat
Relevant: Why Creating Minimalist Design Makes You a Better Designer

The flat design could be simple as it looks, but creativity is still everything. When thinking of possible usage for this layout, remember to refresh your mind. Think of newer, cuter and sleeker designs. This design style will be still in style, but doing a wreck out of it won’t make it any more famous. Be creative. Try to experiment. View inspiration sites. Try your own style, commit mistakes, correct them and be a better artist!
Know that you know how to be flat. Let us all, go flat!

06:30

Getting Started with the Sass Preprocessor

Preprocessors are a popular way of simplifying and writing more manageable CSS, as well as making use of frameworks to write better CSS. Let’s take a look at the basics and learn how to create a fully loaded CSS3 button with gradients, shadows and transitions while making use of the Sass preprocessor and Compass framework to do all the hard work for us.

Wait, Prepro-wha?!

I guess if you’re new to this, the sound of ‘CSS Preprocessor’ is confusing! But rest assured, it’s nothing big to worry about. A CSS Preprocessor takes your CSS written in a specific file, compiles it, and writes out your CSS into a separate file. It helps for writing your CSS in a developer-friendly way, but can also help simplify and manage your CSS better.

CSS3 button made with Sass and Compass

In this tutorial we will be making a very simple button with 3 states, full of awesome CSS3 features like gradients, box shadows and transitions, while relying on the preprocessor to do the hard work for us. There are a few preprocessor languages out there, but I highly recommend using Sass and the popular framework built from it, Compass. Sass can be used to structure our CSS, while we can use Compass to beef up our styles and provide fallbacks.

View the CSS3 Button Demo

What you need and how to get started

The first thing to do is get a program to help compile your code, and while you could install everything by command line, it’s easier to keep control of it using a compiling application. I highly recommend trying out CodeKit for this tutorial, so grab a trial copy and we can get started.

Make a folder for our project, complete with a index.html file ready to put some code in. Next, enter CodeKit, go to the File menu and select ‘New Compass Project’. You will then be presented with a dialog box asking where your project folder is located and where to compile to, and make sure it is set to the following.

Compass Configuration

What we’ve set up is where our Sass files are located, where they compile to, and how Compass will write out the CSS. Here, I’ve set it to the expanded view so I can see how my CSS looks, while setting it to compressed will minify the CSS. It’s up to you how you want to organise your project. Compass will then create the project, as well as the location of our CSS and Sass folders.

Compass Configuration Result

Getting started with the Sass code

In our HTML file, all we need is some very simple code, and a link to our CSS file in the CSS folder of our project.

<!doctype html>
<html>
<head>

<meta charset="utf-8">
<title>Simple CSS3 Button</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div id="container">

	<a class="button">Click Me!</a>

</div>
</body>
</html>

That’s all the HTML we need! Now, onto writing with Sass. Enter your preferred text editor, and make a new file, save it into the sass folder, and name it style.scss. We’re going to be writing everything out in SCSS, which Sass can also process, to keep things simple and SCSS isn’t as strict on the beginners. :-)

At the start of our file, we will write out a basic reset for the HTML, an import for Compass, and write out our colour variables for the button.

@import "compass";

//Simple Reset
body, div, a {
	margin: 0;
	padding: 0;
	border: 0;
}

a {text-decoration: none;}

a:focus {outline: 0;}

//Colour Variables
$button-colour: #2e6bc6;
$button-start: #37a0dc;
$button-stop: #2068a6;
$border: #163861;
$text-shadow: #06304b;

//Hover colours
$button-hover-colour: #2e7dc6;
$button-hover-start: #3f9ff0;
$button-hover-stop: #2874a9;
$focus-shadow: #0b3c5f;

//Main Styles
body {
	font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
	

At the top of the file, we’re calling on Compass to be included into the file so we can make use of some mixins for later. We’ve also written a simple reset, and we’ve made use of one feature already: variables. This allows use to store values we will constantly use in our CSS, including colours, font values, and more! Here, I’m using it to store the colours used on the button to simplify writing them out but also for re-use throughout the stylesheet.

Styling the Button


.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;
}
	

Onto styling that button! We’ll start off by applying the base styles to the a tag with the class of button. Here I’ve set the base styles for the button, and notice how I am making use of the variables from earlier.

Now, onto the fun part! Remember the Compass import placed at the beginning of the Stylesheet? Here we make use of it, as Compass has a mass library of built-in mixins, which include CSS3 prefixes for browsers that still need prefix support.

.button {
	width: 158px; height: 30px;
	margin: 120px auto;
	font-size: 16px; font-weight: bold;
	text-align: center;
	display: block;
	color: #fff;
	padding: 7px 0 0;
	border: 1px solid $border;
	text-shadow: 0 -1px 0 $text-shadow;
	position: relative;

	//Compass Mixins
	@include background(
		$button-colour
		linear-gradient(top, $button-start 20%, $button-stop)
	);
	@include border-radius(3px);
	@include box-shadow(inset 0 1px 0 rgba(#fff, 0.8));
	@include transition(all 0.3s ease);
}
	

After the initial styling, we can include some mixins for the background colours, linear gradients, border radiuses and transitions. The best part is it will compile with only the necessary prefixes, and save us from writing them all! The class so far will compile into the following in the style.css file.

.button {
  width: 158px;
  height: 30px;
  margin: 120px auto;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  display: block;
  color: #fff;
  padding: 7px 0 0;
  border: 1px solid #163861;
  text-shadow: 0 -1px 0 #06304b;
  position: relative;
  background: #2e6bc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: #2e6bc6 -webkit-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -moz-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 -o-linear-gradient(top, #37a0dc 20%, #2068a6);
  background: #2e6bc6 linear-gradient(top, #37a0dc 20%, #2068a6);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
	

Writing Styles with Nested Elements

Another great feature of a Preprocessor like Sass is the ability to nest elements and appending classes with a parent element you’re styling. This is then compiled into the necessary CSS to make it work.

.button {
	...
	
	&:hover {
		@include background(
			$button-hover-colour
			linear-gradient(top, $button-hover-start 20%, $button-hover-stop)
		);
		@include box-shadow(inset 0 1px 1px rgba(#fff, 0.95));
	}
	
	&:active {
		@include background(
			linear-gradient(bottom, $button-start 20%, $button-stop)
		);
		text-shadow: 0 1px 0px $text-shadow;
		@include box-shadow(inset 0 2px 8px $focus-shadow);
	}
}
	

After the main button styles, we can nest the pseudo-class selectors for the element’s :hover and :active states, with the ampersand to tell Sass that it’s a nested class appended to the parent element. In the :hover state, we can add a little bit more emphasis to the gradient and inner shadow using Compass Mixins, while the :active state reverses the gradient and changes the box shadow to give the impression that the button is pushed in.

.button:hover {
  background: #2e7dc6 -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3f9ff0), color-stop(100%, #2874a9));
  background: #2e7dc6 -webkit-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -moz-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 -o-linear-gradient(top, #3f9ff0 20%, #2874a9);
  background: #2e7dc6 linear-gradient(top, #3f9ff0 20%, #2874a9);
  -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95);
}
.button:active {
  background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(20%, #37a0dc), color-stop(100%, #2068a6));
  background: -webkit-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -moz-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: -o-linear-gradient(bottom, #37a0dc 20%, #2068a6);
  background: linear-gradient(bottom, #37a0dc 20%, #2068a6);
  text-shadow: 0 1px 0px #06304b;
  -webkit-box-shadow: inset 0 2px 8px #0b3c5f;
  -moz-box-shadow: inset 0 2px 8px #0b3c5f;
  box-shadow: inset 0 2px 8px #0b3c5f;
}
	

The above is what happens after the :active and :hover states are compiled by Sass; they are written as pseudo-class selectors to the parent element in valid CSS, as well as the desired CSS complete with fallbacks, completing our 3-state button.

CSS3 button made with Sass and Compass

View the final CSS3 Button Demo

The style.scss file and compiled Stylesheet

Full SCSS Stylesheet

This is all that is written in our whole style.scss file, as we have an organised file which is written simply, as well as carrying mixins and variables that do some of the work for us, which then compiles into the final style.css file Stylesheet.

Final CSS Stylesheet

Learning more about Preprocessors

Hopefully this hasn’t been too much of a headache, and has given you the ambition to write more in Sass and Compass, as well as try CSS Preprocessors. There are many great articles by CSS-Tricks, NetTuts, The Sass Way, and many more on the subject to help you on your way to write more efficient, simple and easier CSS.

August 05 2013

06:30

How To Create a Set of Vector Weather Line Icons

Stroked line icons really complement a flat interface style with their minimal and basic appearance. Let’s take a look at building a set of stylised vector icons of our own. We’ll base them on the weather to allow us to create a set of consistently styled icons that would be a perfect match for a weather app. Follow this step by step Illustrator tutorial to see how the most simple of tools can be used to create a set of trendy glyphs.

Creating a cloud icon

Let’s begin with a basic cloud. Open up Adobe Illustrator and draw three circles on the artboard. Overlap each one but pay attention to its outline along the top edge.

Drag a selection around all three objects and use the Align palette to make sure they all sit along the same baseline.

Draw a rectangle to fill in the gaps on the lower edge. Turn on Smart Guides (CMD+U) to help align the rectangle to the circles then hit the Unite option from the Pathfinder tool to merge everything together.

Clear out the fill colour and increase the stroke weight to around 5pt. Turn on the round cap and round corner options to create a smooth outline.

Creating a sun icon

Elsewhere on the artboard draw a circle using the same stroke configuration options, then add a short line above it.

Copy (CMD+C) and Paste in Place (CMD+Shift+V) a duplicate then move it vertically to sit underneath the circle. Copy/Paste the two lines then rotate the duplicate by 90° (hold Shift to constrain the angle).

Paste in two more duplicates and rotate these shapes by 45° to form a set of evenly spaced ray lines. Group all these individual lines together.

Select both the group of lines and the inner circle and align the objects along the horizontal and vertical axis to centre them up.

Combining the icons

One advantage of working with basic style icons is elements can be reused to aid consistency between the icons. A “sunny spells” icon can be created by combining the cloud with the sun. Rotate the sun slightly to balance the gaps between the ray lines.

Use the Scissors tool to clip the path of the sun’s circle, leaving a small gap between each element. Select and delete the unwanted portion.

Ungroup the set of sun ray lines then delete any unwanted copies.

The combination of the two separate icons creates consistency between the icons.

The same principle can be used to create other icons based on existing elements, such as a “heavy cloud” icon.

A moon icon is often used to represent “clear skies” at night. Use duplicates of the sun circle to create a crescent moon shape with the help of the Minus Front Pathfinder option.

Variations of the weather icons using the moon create nighttime alternatives for the cloudy icons. The rounded edges and the even spacing continues the consistent style of the set.

Draw one short and one long line at 45° underneath a copy of a cloud to represent “heavy rain”. Select and drag out a duplicate of these lines while holding the ALT key, then repeated press CMD+D to repeat the transformation.

A “light rain” variation of this icon can be created by deleting some of the rain symbol lines.

Create a small stylised snowflake by crossing two short lines. Duplicate the flake symbols into a 45° pattern, then select and rotate each flake randomly to reduce the uniform appearance.

“Light Snow”, “Thunder Storms” and “Sleet” variations can also be created by altering and combining existing icons.

The final icon pack

Vector weather line icons

The final icon pack contains a set of consistently styled icons to represent various common weather conditions (plus a special one for “British Summer”). Download the source file to get to grips with how they’re put together in Illustrator or to use the icons in your own projects.

Download the vector weather line icon pack

July 23 2013

05:23

Color: Links, Books & Tools to make your life easier

Advertise here with BSA


Color is certainly a very important element of a design, and deciding on the best color palette for a project is something you really need to dedicate time to. From understanding color theory to having a glimpse of color psychology, you need to make sure your choice will not only look good but also have a good balance and deliver the right message. Thinking about, that we have decided to gather some tips, books recommendations, links to interesting readings and also some tools and apps that will make your life easier when it comes to color.

Tools

Flat UI Colors

About: This small web app helps you to copy the colors from Flat UI.

Color: Books, Apps & Tools to make your life easier

Color Palettes – ColourLovers

Old but really good!

Color: Books, Apps & Tools to make your life easier

color.hailpixel.com

Scroll around to get the color you want, click it and they will save it for you.

Color: Books, Apps & Tools to make your life easier

hexu.al

Colorful words to show you colors in action.

Color: Books, Apps & Tools to make your life easier

Sphere: Color Theory Visualizer

Color: Books, Apps & Tools to make your life easier

Color Scheme Designer

Also old but also good.

Color: Books, Apps & Tools to make your life easier

Books

Color Design Workbook: A Real World Guide to Using Color in Graphic Design

About the book: Since color is such a important part of graphic design, designers need the most up to date as well as the most fundamental, information on the subject to have the tools needed to use color effectively. From the meanings behind colors to working with color in presentations, this book provides readers with the vital information needed to apply color creatively and effectively to their design work. Readers also receive guidance on talking with clients about color and selling color ideas. The science behind color theory is also explained in easily understood language, and case studies are included to show the effects some color choices had on both their clients and consumers.

Color: Books, Apps & Tools to make your life easier

Color by Betty Edwards: A Course in Mastering the Art of Mixing Colors

About the book: Using techniques tested and honed in her five-day intensive color workshops, Edwards provides a basic understanding of how to see color, how to use it, and-for those involved in art, painting, or design-how to mix and combine hues. The book includes more than 125 color images and exercises.

Color: Books, Apps & Tools to make your life easier

Color – Messages & Meanings: A PANTONE Color Resource

About the book: There is no one in the business world that doubts the impact of colour. Those involved in marketing, design, advertising, and retail need to be as informed as possible about the usage of colour as a means of instant communication in order to make appropriate colour decisions. This guide explains the emotional response to colour and covers the latest guidelines for effective colour combinations including the integration of colour trends. With up-to-date visuals and printing formulas to eliminate guesswork, this guide empowers and equips its users to make smart informed decisions.

Color: Books, Apps & Tools to make your life easier

Pantone’s Guide to Communicating with Color

About the book: This authoritative guide presents hundreds of color combinations and color principles needed to create effective designs. Every lesson is demonstrated by example, enabling designers of all specialties and levels of experience to make the best color choices for every type of design.

Color: Books, Apps & Tools to make your life easier

Links and More

The Psychology of Color

A very nice color cheat sheet from Carey Jolliffe.

Color: Books, Apps & Tools to make your life easier

The Smashing Book – The Ultimate Guide to Fantastic Color Usage

Color: Books, Apps & Tools to make your life easier

Tags: Tips Tools
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl