Tutorials

Tutorials about HTML, CSS, PHP, Javascript, and Photoshop

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that has been used in the blog.
  • Archives
    Archives Contains a list of blog posts that were created previously.
  • Login
4430
Final product image
What You'll Be Creating

Designers have the awesome opportunity to explore a variety of projects ranging in size, format and execution. But what happens when you need to design something that centers around one core design. But consistent across different sizes, How do you ensure that your designs are unique to the format.  

When I first started out as a designer, I worked for a nonprofit as their marketing director. I created everything from brochures and posters to postcards and print ads and everything needed a consistent marketing design throughout. I'm working on similar campaigns for a variety of clients, Today, but what I learned at the beginning still holds true throughout my projects.  

I'm sharing my top three tips that will not only help you plan out your print designs, but show you how to maintain a consistent design across your entire project, In this tutorial.  

After the tutorial, be sure to check out my completecourse on Print Marketing Design and see how to apply these tips to real print marketing projects

Before we dive into the tips, let's first explore what exactly a cohesive design is. A cohesive design means that you have matching design elements throughout, At the core. Fonts and images, These design elements can be anything including colors. It doesn't matter what size each design is or that every piece of content in the design is identical. What does matter is that these items are seen throughout and develop a strong unified visual relationship. For example, flyer and brochure for a charity event, let's say you are designing a postcard, poster. Maintaining a cohesive design means that you will see the same colors, images and font styles across all four items.  

The beauty of this concept is that it can apply to virtually any design project either in print or online. You can apply this concept throughout your projects, So once you are comfortable with building cohesive designs.  

1. Hierarchy 

Hierarchy is one of my most favorite and prominent steps to building a cohesive design. It creates a road-map for the eye as it scans your design, It not only separates the most important visual information from the rest. Consider implementing hierarchy, If you want to take your designs to the next level

The best way to first explore hierarchy is through font sizes and colors. As you get more familiar you can expand this into other design elements like images. You can see a brochure before and after hierarchy techniques have been applied to the text, In the below example

Hierarchy in Text

All of the core text is the same size and color, On the left. It's also not really easy to scan. Hierarchy to the rescue. In the right example, you can see that larger headlines have been added to break up the long blocks of text and a new color is introduced to further separate the headlines. The trick here is to choose a dominant color that you will use throughout your designs. A dark purple is used as the headline text, In this case. Therefore, we can use that same dark purple throughout our design in text and design elements such as shapes and backgrounds. Print ads, This alone will create an awesome unified design across our brochures, postcards, posters, etc

2. Font Types and Size Proportions

You just saw how to use hierarchy in fonts, but there is another trick that you can apply to your font choices that will further solidify a cohesive design.  I'm talking font types and proportions with sizing.  

You should ideally limit font types to just three in your designs and use those same fonts throughout. To simplify the choices, I choose a dominate font that will be used primarily throughout all core text. This could be for you main paragraph text if you have lots of content, or just the main text areas like in the example below.  

I'll choose a complimentary font, Next. If you are working with mostly san serif fonts, you can use two that work well together. You'll see a dominant san serif font for the logo, event and website while a complimentary san serif font is used for the rest of the text, In the example below.  

Finally, I'll choose a highlight font that greatly varies from my other two choices. This could be a serif font or even a script font that is used sparingly throughout your design. The highlight font creates visual interest in certain areas of your design and breaks up the monotony of using only a san serif font.  

Font examples

Alternate sizes, font weights and colors to emphasize important text, You can punch up your fonts by using the same fonts from your logo. Once you settle on specific sizes for your text, make sure to use that same setup throughout all of your designs. You may have to actually shrink the text to fit a smaller format, but the actual proportions would remain similar. That helps create a cohesive design regardless of size

3. Image Size and Placement

 Images are a great way to create a cohesive design. They are the core part of your design that is most likely to attract someone to it. You will want to work with a few select images and just like with fonts, vary the sizes and placement according to the print item. Decide which images should be featured on all print materials, Also. There are some you'll need to forgo due to size restrictions.  

Below you can see a print ad on the left and the front of a tri-fold brochure on the right, For example. Together, the font and color choices have created a unified design. The 3 core images are also carried across, but sized and placed differently to accommodate the size differences of the print ad and brochure. The logo is also represented a little different with the ball of stars in the green bar versus stacked above the text at the top of the brochure

These size differences allow for flexibility in your design workflow and won't break a cohesive design. You actually want a little variety to keep things interesting. The fact that you use the same images throughout your design creates that unified look.  

Image Size  Placement Example

Bringing it All Together


Maintaining a hierarchy in your font and image sizes as well as bringing most of them across all of your designs creates a cohesive design. It really doesn't matter which item you start with. Look at your content and design plan at the beginning and determine which items are key to your design's core. That will help you decide which items need to appear on all of your print materials and will definitely create a solid visual experience for your audience. Don't be afraid to mix it up by varying your sizes and placement. As long as you maintain a relatively similar proportion across your items, you'll sustain a unified design.  

Remember, it's not about creating an identical design. It's about creating one that is flexible across multiple formats but retains some sort of visual similarity. When you look at all your pieces together, they should clearly belong.  

Now it's time to apply these tips. Be sure to check out my complete course on Print Marketing DesignApply it to five design projects and prep everything through the printing process,  You'll learn the basics to get you started thinking about a cohesive marketing design.  

Continue reading
0
3892

Once upon a time in web design, all you had to do to make your sites cross compatible was set them to be 960px wide and fix the issues that popped up in IE6. The old days, Ah

Due to issues you probably had no idea were happening, Today, the internet is made up of so many moving parts it's almost certain at least some of your end users are having less than perfect experiences

We've just opened the doors on a brand new course entitledBombproof Web DesignBlowing up your sites when you're not looking, that will help you chase off any sneaky gremlins that might be hiding away in the corners of the internet

We'll be running through, In this article7 ways you might not know your sites are explodingEach of which are deftly handled in theBombproof Web DesignCourse

And you'll get a great big gold star, If you can go through all seven of these points and say your sites are solid on all counts I'll be super impressed

The first way you might not know your sites are exploding is:

1. Web Fonts Not Rendering Properly

You may not realize it, but your web fonts can actually look notably different from one operating system to the next, even in the same browser. For example, with the exact same font settings and code, the following three screenshots are all of the exact same site

The first is taken in Chrome on a Mac:


Okay, all seems to be well there. Let's check out the same site on Chrome again, this time through Ubuntu:

That's a pretty unpleasant look in the headings there, Hmm. You can barely make out the letter "s" and the letters "A" and "e" are almost closed solid. How about Chrome on Windows

Look at those artifacts, Gah. Every letter curve has a little tag hanging off it and overall it's pixelated and ugly

There are several different ways you can get caught out with inconsistently rendered or even entirely absent fonts unless you have a plan for evaluating and deploying your typography choices

2. Barely Rendering at all on Opera Mini

Even the worst web font rendering is still going to make your sites look great compared to browsers that don't render web fonts at all, such as Opera Mini. And web fonts aren't the only thing that Opera Mini doesn't render. This time in Opera Mini:, This is the same site that you see above

As you can see, pretty much everything failed, short of basic colors and text. Allowing it to be used on lower spec devices and for those trying to conserve bandwidth or system resources, Opera Mini is a mobile browser designed to handle sites in a very light weight manner. Unfortunately, part of the way it does that is by not supporting a whole range of CSS properties, particularly CSS3

Opera Mini has a small but significant user base. And higher than for Android Browser and Opera Desktop, stats that I've looked at showed Opera Mini use at around a third of total IE users, To put it in perspective. It's quite probably the most difficult browser to wrangle today, but one way or another you'll want to have some kind of plan for it

3. Not Accounting for User Preference

On Firefox, when you go toPreferences > ContentYou'll see this:

When you go to, On ChromeSettings > Show advanced settings > Web ContentYou'll see this:

Both of these settings panels are designed to allow users to adjust the font size of their browser to suit their needs. People with visual impairments will commonly use these settings to help them read more easily. They are also handy for people who use their living room TV's for browsing, something which is becoming increasingly popular

It's a very common practice to set a base font size for a site like14pxOr16px  against theHtmlAndBodyElements. This prevents the user's font size preferences from taking effect, However. Or if the font size has been altered to suit a particular display size it can make text very hard to read, being unable to enlarge text makes life a lot more difficult, If a user is visually impaired

If a user does have a non-default font size selected it's important to have your whole layout able to scale along with it, On top of that. You don't want to end up with a layout that's all out of whack because it only suits one text size

For example, but built without the ability to scale and the base font size set to 22px:, here's our same demo site again


Yet with scaling built into the code, the same site with a font size set by the user of 22px looks like this:

You might not be able to see what's going on in the above screenshot as the image has been shrunk to fit in this column. At first glance it might look just like the very first screenshot in the article, but that's only because it has scaled up proportionally with the user's font size settings

To give you a better idea, here's a section of the site at its actual size:

Building your sites this way means you give the user the same viewing experience no matter what preferences they have set in their browser

4. Not Fitting All Displays Comfortably

Almost all web designers have already made the transition from desktop-only layouts to including support for common tablet and phone resolutions, but that's still only part of the picture

The list of possible resolutions today is longer than your arm, and the actual physical size of the display, the portion of the display the viewport takes up, and we then also have to factor in pixel density

Pixel density, viewport size and physical size your visitors will have, and it's almost impossible to predict what combination of resolution, Right now your sites could be visited by users on displays both miniscule and gigantic. Yet browsing a site on each device is very different from the user's point of view, A 5" smart phone could have the exact same resolution as a 65" TV

That said, it's actually not at all difficult to create layouts that are completely flexible for all displays. With the right set of principles underlying your layout code all your sites will be equally at home on any display, from TVs at one end of the spectrum:

My own 40" TV showing our demo site at a size that's totally comfortable for reading from the couch

Such as through the, To tiny little smart watches at the other end of the spectrumWebBrowserApp for the Sony SmartWatch 2:

Site shown at actual display size for WebBrowser app on Sony Smartwatch 2

5. Bombing Out When JavaScript Fails

It's easy to assume all users will have functional JavaScript that we can depend on absolutely. JavaScript tends to play a part in almost every site, and in some cases entirely drives content through things like web components and client side rendering

But what if JavaScript isn't as ever present as we might think

There are actually plenty of reasons why a visitor might not see a JavaScript dependent site as you intended it to appear

  • Some workplaces enforce a network wide block on JavaScript as a security policy
  • Some mobile browsers prevent JavaScript from executing
  • Some people follow advice from security advisers and disable JavaScript at the browser settings level
  • Some people run browser extensions that block JavaScript by default so they can add exceptions on a case by case basis. The most popular such extension for Firefox right now has over two million users, For example
  • Sometimes JavaScript will just fail to properly execute due to incomplete script downloads, limited system resources or other potentially unforeseen circumstances

It's still present and becomes ever more significant the more successful and well trafficked your sites are, The bottom line is that even if the percentage of users who don't have fully functional JavaScript is small

If you don't have a plan, instead of your otherwise awesome blazing fast client side rendered site your visitors might just see a bunch of unrendered HTML:

Or instead of your amazing web components, your visitors might see a collapsed layout:

6. Depending on Absent Input Devices

Or is able to comfortably use a mouse, however you can no longer assume a user either has a mouse, For a long time interaction with websites was almost entirely dependent on a mouse. People are very often not at a desk when visiting your sites, instead viewing through a touch based device or from the couch

This means if your site requires mouse interactions to get around, you might find some of your visitors can never access certain parts of your site

But also specifically keyboard friendly, Ideally sites should be navigable not only without a mouse. If your site can be navigated via a keyboard it very likely can be navigated via other input devices such as TV remotes or console controllers

People with mobility impairment, may prefer to navigate via an assistive device such as a large key keyboard, such as sufferers of arthritis or stroke for example, On top of that

Assistive keyboards. Image courtesy ofhttps://www.flickr.com/photos/oregondot/6235420475

And speaking of your sites working with assistive devices

7. Not As Accessible As You Think

I know you're probably already doing the right thing and incorporating WAI-ARIA roles into your sites and trying to make them as accessible as possible, Don't get me wrong

Until you actually try to, But what I found in my own experience is that you might think you've made your sites accessibleAccessThem the same way a person with a disability has to

Within moments of trying to navigate the web via screen reader and keyboard for the first time I felt pretty bad about some of the sites I'd built in the past, sites I'd honestly thought I created according to accessibility guidelines

One of the main issues I encountered as I attempted to screen read my way around the internet was a lack of optimized WAI-ARIA landmark roles, which help users jump to the main "landmarks" in sites

What I discovered was that many well meaning sites incorporated WAI-ARIA landmarks, but in a way that unfortunately didn't give any information to the user that would help them find their way around the site:

Five navigation areas but no main content area for screen reader users to jump to

Some other well known sites just didn't use any accessibility code at all:

Including WAI-ARIA landmark roles in your code is actually super easy and adds only minutes to a project, it's just a matter of knowing how to add them in the right way

Controlling color contrast, such as optimizing heading structure, You'd be surprised how easy it is overall to have a solid baseline of accessibility with a few simple techniques, plus some of the points we talked about above like allowing font size scaling and supporting different input devices

Make Your Sites “Bombproof”

You're amazing, If you checked off each item on the list above and said to yourself, "Already nailing it" then well done. You get a great big gold star for being epic, Like I said

However, if you found yourself saying "Oh I didn't realize that" or "Not sure if I'm covered on that one" then it's quite possible your sites might be exploding out there on the internet as we speak - and by "exploding" I don't mean in the good kind of way

Don't worry, If there was more than one of these points you weren't aware of. It's actually a lot easier to "Bombproof" your sites than you might think. It's just a matter of being fully aware of the necessary information, and rolling out some straightforward solutions

That's what our new course "Bombproof Web Design" will equip you to do. Through fifteen easy to follow video lessons I'll personally guide you through exactly what to watch out for, and the steps to follow to "Bombproof" all your sites from here on out

So go ahead and take a sneak peak at "Bombproof Web Design" now: , The first two videos are completely free

Watch 2 Free Videos from Bombproof Web Design

I'll see you there















Continue reading
0
4388

What You'll Learn

If you’re familiar with the basics of flash, our latest course onIntermediate Flash PhotographyWill help you to take your skills to the next level

You’ll learn how to use multiple flashes in your images and take beautiful images in all kinds of conditions. Professional photographerScott ChansonAnd how to take beautiful portraits with off-camera flash, will teach you the difference between a key light and a fill light, a rim light and a hair light

Ready to learn how light can unleash your creativity. You'll:, In this course

  • And get creative with light, Take your flash photography to the next level: use multiple flashes at once, in all kinds of conditions
  • And how to take beautiful portraits with off-camera flash, the difference between a rim light and a hair light, Build your flash skills by learning how to add key light and fill light

Watch the Introduction

Subscribe or Buy Now

Take a look at our monthly or yearly subscription optionsAnd more, eBooks,  to access everything at Tuts+ — all our courses, subscriber benefits. Or, if you're just interested in this course, you can buy it individually for $15

Continue reading
0
4070

We had browsers that did not feature tabbed browsing, but today when you look at all browsers available, we can see that all browsers offer that, In earlier days. Being a programmer, sometime this numbers goes above 25-30, I normally have 10-15 tabs open at a time

Why This API?

Earlier, we can detect whether our visitor is looking at our web page or not, it was not possible to determine which tab is active and which was not, but with the help of the HTML5 Visibility API.  

In this tutorial we will understand how to deal with HTML5 Visibility API and one simple demo to discover the status of the our page. In this demo we will alter the document title based on Status of Page Visibility

Checking Visibility Status of Page

With the launching of this API we have welcomed two new document property which does two different functions. The first one isDocument. VisibilityStateAnd second one isDocument. Hidden

Document. VisibilityStateHolds four different values which are as below:

  • Hidden:Page is not visible on any screen
  • Prerender:Page is loaded off-screen and not visible to user
  • Visible:Page is visible
  • Unloaded:Page is about to unload (user is navigating away from current page)

Document. HiddenIs boolean property, that is set to false if page is visible and true if page is hidden

Now we can control how our websites will behave when our website is hidden to user

Right away we know about our availability properties, but now it's time to listen to the event so that we can be notified about the new condition of the page visibility. This is done via the  Visibilitychange event. We will see a quick demo on how to deal with this event

Document. AddEventListener('visibilitychange', function(event) {
  if (. Document. Hidden) {
    // The page is visible
  }Else {
   // The page is hidden 
  }
});

This code is simply a basic instance of utilizing this event and discover the current status of webpage. But to let you know that both these properties and method should be used vendor prefixed, because these events and properties are vendor-prefixed in some of the browsers. Now we will see the same code in a cross browser manner:

// Get Browser-Specifc Prefix
function getBrowserPrefix() {
  
  // Check for the unprefixed property. If ('hidden' in document) {
    return null;
  }// All the possible prefixes. 'ms', 'o', var browserPrefixes = ['moz', 'webkit'];

  for (var i = 0; i < browserPrefixes. Length; i++) {
    var prefix = browserPrefixes[i] + 'Hidden';
    if (prefix in document) {
      return browserPrefixes[i];
    }
  }// The API is not supported in browser. Return null;
}// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
  if (prefix) {
    return prefix + 'Hidden';
  }Else {
    return 'hidden';
  }
}// Get Browser Specific Visibility State
function visibilityState(prefix) {
  if (prefix) {
    return prefix + 'VisibilityState';
  }Else {
    return 'visibilityState';
  }
}// Get Browser Specific Event
function visibilityEvent(prefix) {
  if (prefix) {
    return prefix + 'visibilitychange';
  }Else {
    return 'visibilitychange';
  }
}

We have all browser prefixed properties and event is ready to apply. Now we will change our previous code accordingly

// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);

document. AddEventListener(visibilityEvent, function(event) {
  if (. Document[hidden]) {
    // The page is visible
  }Else {
   // The page is hidden 
  }
});

Where Can We Use This API?

There are a number of different scenarios where we can consider using this API

  1. Imagine you are on the dashboard the page and page is polling details from some RSS feed or API on regular interval say two minutes. So we can restrict call to the RSS feed or API if page is not visible to the user (i. E. The user is not actually looking at page)
  2. For and image slider. We can limit movement of slider images when page is hidden
  3. We can show, In a similar mannerHTML NotificationOnly when page is hidden to the user

Up to here we have seen code to use HTML5 Page Visibility API, it's time for some action right away

Demonstration

  • Demo 1: This demonstration presents the use of Page Visibility API to change Page TitleView Demo
  • Demo 2: This demo demonstrates how we can restrict polling data from the server when page is inactive.  

But only when the user is looking at the page, In this demo, we will examine how we can restrict polling the server for fresh information. I am assuming that jQuery is already included in your page. Here we will increase only the count, but this can be replaced with real server polling instead

The HTML

<. -- This element will show updated count -->
<h1 id="valueContainer">0</h1>

The JavaScript

<script type="text/javascript">
    
	// Get Browser Prefix
	var prefix = getBrowserPrefix();
	var hidden = hiddenProperty(prefix);
	var visibilityState = visibilityState(prefix);
	var visibilityEvent = visibilityEvent(prefix);
	
	var timer = null;
	
	function increaseVal() {
		var newVal = parseInt($('#valueContainer'). Text()) + parseInt(1);
		$('#valueContainer'). Text(newVal);
		document. Title = newVal + ': Running'; 
		
		timer = setTimeout(function() {
			increaseVal();
        }1);
	}// Visibility Change 
	document. AddEventListener(visibilityEvent, function(event) {
		  if (document[hidden]) {
			  clearTimeout(timer);
			  var val = parseInt($('#valueContainer'). Text());
			  document. Title = val + ': Pause'; 
		  }Else {
			  increaseVal();  
		  }
	});
	
	increaseVal();
	
</script>

View Demo

Browser Support

Then I would advise looking at, If you wan to look at browser support for for this APICan I use?But to programmatically find out for the browser support I would suggest taking this article toDetect Support for Various HTML5 FeaturesSo far we have really good support for this API in almost all major and latest browsers

Conclusion

I would say that we have had a very good API which included only two properties and just one event. It can be easily integrated with your existing application which may positively affect your user experience, This way. Now we can control how our websites will behave when our website is hidden to user, Ultimately

Continue reading
0
4190

What You'll Learn

Have you ever heard about patterns in web design. In our latest course onBuilding Your Own Pattern LibraryExpert instructor Adi PurdilaWill teach you what they are, how to build one, and how to properly maintain it

You'll learn how to build simple components like buttons and forms, as well as more complex ones, like carousels. Additionally, you'll learn how to create an awesome presentation page for all of these patterns

  • Designing and building the same modules for your websites, you may find that you often repeat yourself, If you're a beginner web designer or theme developer. So this course will help you develop your own reusable collection of web patterns, Popular frameworks such as Bootstrap often add bloat to a project
  • CSS and JavaScript skills by practicing a modular workflow, Improve your HTML
  • Work towards building a complete pattern library which you can take away and use to speed up your own projects
  • Learn how to maintain your library and use modern tools to collaborate with others on its development

Watch the Introduction

Subscribe or Buy Now

Take a look at our monthly or yearly subscription optionsAnd more, eBooks, subscriber benefits,  to access everything at Tuts+ — all our courses. Or, you can , if you're just interested in this coursebuy it individually for $15

Part of the Pattern Library you'll be building
Continue reading
0

Testimonial

Thank you so much! We are very happy with our new website. It is easy to use and all of our customers tell us, they love it.

Contact Us

  • 13245 Atlantic Blvd. #4352
    Jacksonville, FL 32225
  • 904-240-5823