“Speed, Consistency, Harmony, Creativity & Certainty with The Golden Grid” plus 2 more - Speckyboy Design Magazine Feed

Speed, Consistency, Harmony, Creativity & Certainty with The Golden Grid
Utilizing jQuery UI Animations for Neat Page Effects
Five Alternative Careers for Designers

Speed, Consistency, Harmony, Creativity & Certainty with The Golden Grid

Posted: 06 Jun 2012 05:25 AM PDT

As most will know, grid-based systems can improve your website’s aesthetic, and Italian designer Carlo Poso has taken that sense of aesthetic even further by creating a grid system inspired by the golden ratio.

Image Source

Carlo’s creation, “the Golden Grid” is based on the 960 Grid System, which is well-known as a standard for grid systems with its natural usability; but its origins predate the internet. The grid system’s homage to Pythagoras and Euclid brings a strange classical sense to the sleekness of current web design trends.

Poso even cites the new Twitter homepage as an example of the spiral of the golden ratio. He is clearly design-driven, and breaks down the advantages of his system into speed, consistency, harmony, creativity, and certainty. His Golden Grid has been designed with the intention of making web template layouts more nimble, so as not to hinder creativity. The ‘net’-like structure preserves harmony and balance on the page and is an interesting way of providing new and innovative solutions.

The Golden Grid works particularly well when used together with some frameworks based on the baseline grid, such as the one by Teehan+Lax.

At the grid system’s site, users can download the Photoshop, Fireworks, OmniGraffle, Illustrator, InDesign, Pixelmator templates, and Flash files in a convenient archived file. The site (thegoldengrid.com) also hosts tutorials for setting up the Golden Grid.

Utilizing jQuery UI Animations for Neat Page Effects

Posted: 06 Jun 2012 12:33 AM PDT

If you’re familiar developing in JavaScript then you must know about jQuery. It’s an extremely powerful library allowing you to write much simpler code and express the same end result. This trend has split off into a few sister projects, one of which being the jQuery UI Library.

This script allows developers to quickly animate with precision using custom functions. You can also include themable page widgets such as tabs and image uploaders. For this article I want to look into some of the custom animation effects you can utilize. These provide sweet eye candy for your page layout and fit into any design.

Getting Started

The jQuery UI Library offers a whole lot of predefined widgets and user interactions(draggable, sortable, etc.). But when discussing just animations there is a huge list of effects to choose from. And many of these custom effects can be used with standard jQuery functions.

To get started we need a plain HTML document and the inclusion of both the jQuery and jQuery UI scripts. All user interface animations and widgets require the original jQuery code to function properly. Below is my example you can use for any basic jQuery UI template:

<!doctype html>  <html lang="en">  <head>  <meta charset="utf-8">  <title>jQuery UI Testing</title>  <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>  <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>  </head>

The simplest setup for calling jQuery animations is through the Effect method. You can pass in any series of effects along with a callback to reposition, remove, hide, or just animate any objects on the page. This one method can give you immense control over the website’s dynamic content.

Animating the Basics

To use a small example I’ve created a div with the ID "box" and an anchor link with the ID “button”. We can animate a few different effects on this box just to see how it would affect any typical page element.

<body>  <div id="box">  	<h2>Some text here</h2>  </div>    <a href="#" id="button">Do Some Effects!</a>  </body>

I’m going to open a new script tag right before the closing body tag, and in here we can write some new jQuery code. This basic demonstration should be easy enough to customize and come back to as a reference guide.

I’ll start by writing a simple function doEffect() which can be called from any point. You can trigger this after a link click, like we will do here, or after the user opens a menu or hovers over a block. The trigger commands are practically limitless!

$(function() {  	function doEffect() {  	  // pre-determined values for myEffect:  	  // blind, bounce, clip, drop, explode, fade, fold, highlight, puff, pulsate, scale, shake, size, slide, transfer  	  var myEffect = "fold";  	  var options = {};    	  if (myEffect == "scale") { options = { percent: 0 }; }  	  if (myEffect == "transfer") { options = { to: "#button", className: "ui-effects-transfer" }; }  	  if (myEffect == "size") { options = { to: { width: 200, height: 60 } }; }    	  $("#box").effect(myEffect, options, 450, callbackMethod );  	};

The variable named myEffect can be changed to any of the values I’ve commented above. These are preset by jQuery UI and allow you much greater control. Some of the effects require default settings inside an option{} variable – this is why I’ve used 3 logic statements right before the effect() method.

Using Purposeful Effects

Remember that JavaScript is still not something fully supported in all mobile browsers and tablets. It can provide entertaining effects for all standards-compliant web browsers. But make sure you aren’t going overboard with too many animations.

Now let’s finish up the small example from above by looking at the trigger code. This is possibly the most important piece you need to consider for building page effects. When will your effect be displayed? What does your visitor need to do, and how do you make the animation feel natural?

	function callbackMethod() {  		setTimeout(function() {  			$( "#box" ).removeAttr( "style" ).hide().fadeIn();  		}, 500 );  	}    	$( "#button" ).click(function() {  		doEffect();  		return false;  	});  });

My function callbackMethod() is used in this example to re-display the box after animating. The effect method will toggle an element visible or invisible, or setup a different class. You don’t need to have this callback method for your code – in fact you could leave it totally empty!

For the last bit we are calling an event handler whenever the user clicks our button link. This runs the doEffect() function and we can experience our animation unfold! Trying to think of good examples for this functionality can be tough. Dropdown navigation links, e-mail signup forms, or maybe even animating a hidden toolbar at the top/bottom of your page.

Animations and Easing

The standard jQuery API has a method called animate(). This can be used to reposition elements on the page by changing their stylesheet values. Examples may include changing the left/right position values, increasing the width/height of an element, etc.

This animate function comes with a very basic set of values for transition effects, also known as easing. When you include the jQuery UI library there are dozens of new options to choose from. There are way too many for me to list out here. But check the jQuery UI easing demo which includes a full compilation.

I personally don’t like the jQuery demo all that much. It can be confusing to look at, and even harder to determine the correct syntax. Ralph Whitbeck has put together an amazing easing effects demo page which behaves exactly as you’d expect. Each effect is displayed with full source code and a “Run” button where you can re-run the easing demo over and over.

Note these effects are more useful when you know that you’re using the jQuery animate method. When you have a purpose to be animating some element on the page it feels creative to play around with an easing value. The customization is indeed small, but even the little effects build up to produce one outstanding user interface.

Conclusion

Hopefully this introduction to jQuery UI animations can leave you thirsting for more knowledge. Similar to jQuery itself, the user interface library has dozens of features you need to play around with. You can understand so much by dabbling in a few tutorials and building practice interfaces for the thrill of learning. If you have similar ideas or questions on jQuery UI animations feel free to share with us in the post discussion area below.

You might also like…

40 Recently Released jQuery Plugins →
25 jQuery Plugins to help with Responsive Layouts →
20 jQuery Image and Multimedia Gallery Plugins →
50 jQuery Plugins for Form Functionality, Validation, Security and Customisation →
15 CSS3 Navigation and Menu Tutorials and Techniques →
20 CSS3 Tutorials and Techniques for Creating Buttons →
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials →
22 CSS Button Styling Tutorials and Techniques →
50 Fundamental jQuery Controls, Components and Plugins →

Five Alternative Careers for Designers

Posted: 05 Jun 2012 08:34 AM PDT

Design might be the love of your life and the thing you are really talented at but very often most of us come to a point where no matter how much we love what we do, we need to take a break from it.

Every now and then we need to diversify or simply change our routine. If you want to branch into other careers because you are fed up with being only a designer, or to improve your career prospects, here are 5 of the many alternative careers to consider.

All these careers are Web-related and presumably it will be easier for you to make the switch but of course, if you are totally fed up with HTML, CSS, .PNG, and the like, you can make a U-turn and go into a totally unrelated area. Here the choice is basically endless and it all depends on the skills and talents you have.

1. Web Developer

Probably the most obvious alternative for a Web designer is a Web developer. Of course, the two are very different and if you hate code, Web development is hardly your best bet.

Image Source: Code on Blackboard via Shutterstock

Web development is very close to Web design and I do believe any designer must have some coding skills, or at least have some basic familiarity with Web technologies (PHP, Ajax, etc.) outside pure design because this knowledge makes you a better designer. In fact, I know many people who are half designers, half programmers and this is a really winning combination.

Still, there is a difference between being familiar with Web programming and becoming a full-time Web developer. If you aren’t comfortable with coding, then becoming a Web developer will be a torture for you (and for the rest of the team, if they have to put up with your poor code), so you’d better pick something else from the list.

2. Web Master

Another very closely related career is to become a Web master. I don’t claim my definition of Web master is the most precise one but basically when you are a Web master, you need to know design, have some coding skills, be familiar with databases and operating systems, and have some knowledge of hardware, so that you can manage a site.

Image Source: Computer Servers via Shutterstock

Additionally, sales and marketing skills are also welcome because most likely you will have to deal with the promotion of the site as well. If you can write, this is also a huge plus because you will be able to write Web content as well. In fact, a Web master is just a bit of everything Web related plus some business skills. It’s a perfect match for somebody who doesn’t want to stick to one Web area only.

3. Marketer

If you feel that programming isn’t for you and even becoming a Web master is too technical, you can consider less technical careers, such as (Internet) marketing. There are many marketers who have almost no design, coding, or any technical skills and more or less some of them are doing well, so being a former designer/techie isn’t an absolute must for an Internet marketer.

Image Source: Colorful MARKETING Text via Shutterstock

Of course, your design/technical background will always help you as a marketer, so the fact that you come from a Web-related area is an advantage. In fact, I think that a good Internet marketer must have at least some knowledge about Web technologies to do his or her job in the best possible way.

Many people who switch to marketing from a technical profession find it a much easier area but this is only at first sight. Still, when you know the technical aspects of the Web, after you learn the marketing fundamentals, it is easier to be a marketer than if you start this from scratch.

4. Sales Person

For many (technical) people there isn’t much of a difference between sales and marketing but this certainly isn’t so. You do need to have marketing skills in order to be a good sales person but you also need many other skills – above all the ability to work with people. In marketing you also have to deal with people but there are some positions (i.e. the more analytical ones) where this isn’t a huge part of your job, while in sales you are dealing with humans almost all the time.

Many good marketers aren’t good at sales, so the fact that you have a talent for marketing isn’t a guarantee you will become a good sales person. However, similarly to marketing, the fact that you know the technical aspects of what you sell is an advantage and for you the change in careers might not be an abrupt one. The best sales persons in software/hardware/computers in general I can think of are former techies turned sales, not people who just got a business degree and went to sell computers because this is hot.

5. Writer

Believe me, there are tons of Web content and other stuff to be written and if you can write, writing can be a very lucrative career. If you have come to design from literature or arts, it might be easier for you to write as opposed to when you come from maths/sciences but this isn’t fixed in stone – there are many people who are good both at maths/science and literature/arts.

Image Source: Magazine Page via Shutterstock

If you decide to become a writer, most likely you will start with something around design and Web technologies in general because presumably this is what you know well. Later you can branch into Web copy and more business-oriented topics because generally these pay better, though in my opinion they are also more boring.

Conclusion

These five careers I am suggesting definitely don’t end the list of potential careers for designers. You could also consider becoming a usability expert, a support rep (another career that is an intersection of technical skills and ability to work with people), or a manager, to name a few. You could also consider developing the skills needed for these alternative careers but don’t give up design completely.

These suggestions for alternative careers will be especially useful to newbies – i.e. everybody who is relatively new to design and doesn’t feel like committing to it at 100 percent and to veterans, who feel that even though they are great at design, it is time to move on. On the other hand, if you feel design is the thing you are born for, this is great – there is no need to think for alternatives.

The point is to try this and that till you find the best place for you. I can think of many unhappy designers and developers who are stuck into positions they hate simply because they don’t have the drive to experiment, so don’t make the same mistake!

Design fricks news

Mittwoch, 6. Juni 2012