1) More CSS3 and HTML5

Now that CSS3 hit mainstream and is supported by major browsers (Firefox, Safari, Chrome, IE9) we will start seeing more and more use of CSS3 and HTML5. For those of you that don’t know CSS3 allows programmers and designers to implement fancy design a lot easier. Things like shadows, gradients, rounded corners and even animations can be simply done with a line of code instead of creating image slices. Both of the above examples are done just using CSS3.

2) Mobile ready web sites / Responsive design

Not really a design trend however certainly over-hyped.  More and more sites are becoming mobile ready since more and more people are getting phones that can access the web. We can all thank iPhone for starting the mobile revolution. I am strong believer though that the phones need to adopt to your current site instead of the designer deciding what content to hide / show based on the mobile device. I always try to view the site in regular mode since i am afraid that the designer turned off some site features in a mobile version.

3) Large photo backgrounds

Use of large images and photos for backgrounds in your websites.  This is now possible to better image delivery and users just having overall faster internet. So everything loads a lot faster. This is certainly becoming a new trend, even we do this at Graphic Fusion a lot  (like our new website).

4) Over exposed photography

Now that everyone uses large scale image backgrounds it’s time to make those backgrounds fancy by overexposing your photography. I think the trend started with Instagram app for iPhone and now everyone has to add some sort of a cool filter to their photo before they publish it. I remember when i used to do it a few years ago before Instagram days and now that it became a trend i can’t do it anymore

5) Clever domain name integration

The web is running out of urls and most names are now taken. The solution? use clever domain names to create a word. Like signoff.me or meetin.gs There is even a tool that does it for you. http://domain.nr it helps you find a creative domain name. This is a great trend that i think will not stop soon until all the clever names will be taken as well.

6) Use of different fonts in typography

All major browsers now finally support @fonts this allows designers to easily integrate unique fonts into their designs. With help of the tools like fontsquirrel.com a tool that helps you upload your own fonts to be converted to a supported web format and now introduction of Google Fonts which allows to really easily browse the catalog of free fonts and include them in your site typography is finally moving into web design. And that’s great! It’s about time web started using some awesome typography.

7) Bigger typography and grid layout

Use of different fonts and typography leads to use of bigger typography and completely focusing on typography elements rather then being picture heavy. This creates really neat layouts and websites that don’t have any pictures at all.

8 ) Use of icons and symbols

It seems to be that there is now a new trend in using fancy icons for lists, and summaries. I think this is desktop / mobile world advancing into the web. This sometimes can be overused and become really annoying to a point that the user doesn’t even pay attention to what the icons look like. Most of these icons look really similar so if you are going to do this consider having unique icons for your project like http://steedicons.com/

9) Single page sites that scroll

Don’t know where this trend came from, but it’s certainly is becoming more and more popular. Basically the entire website is on a single page, when user clicks on a menu item the page will scroll to a specific area. Just check out lizryandesign.com

10) Bigger Integration with social networks

Social networks are integrated more and more into everything we use. I even saw a plumbing truck today with a facebook logo on it (it was just a logo, so i think if i touch it, i will become a fan of his facebook page).  Social integration can be seen from like buttons to comments, to even signing in into a site with your social network credentials (worst idea ever for end user since a lot of his facebook data is then given to a site he is registering). I think it’s overused features and eventually the hype will stop.

11) Info graphics (bonus!)

Info graphics are everywhere these days. Every design company thinks it’s their duty to create a fancy chart that shows some sort information that is a little bit interesting that no body cares about. Yes they look neat and trendy. I always wonder if anyone prints any of these things out or uses them more then once.

What we will do

We will create 3 boxes and they will fade in one after another.

Here are our steps to accomplish this:

1. Create a div in our html that we want to animate
2. Create keyframes in our css file (these basically will define how things change )
3. Create div tag in our css, define our animation (duration, start delay etc) and link it to our keyframes

So let’s get started

Ok let’s make some basic boxes

<body>

<div class="box fade-in one">
       look at me fade in
</div>

<div class="box fade-in two">
       Oh hi! i can fade too!
</div>

<div class="box fade-in three">
       Oh hi! i can fade three!
</div>

</body>

Ok so the above basically makes 3 boxes, we named them box , the fade-in is going to be our animation class and the number after is just there so we can have them load in an order we want.
And now for the magic code.

/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	animation-duration:1s;
}

.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}

.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}

.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}

/*---make a basic box ---*/
.box{
width: 200px;
height: 200px;
position: relative;
margin: 10px;
float: left;
border: 1px solid #333;
background: #999;

}

That’s all the code we will need. Here is how it works. The keyframes (the reason there are 3 of them is to support webkit, firefox and future browsers) basically say the start state of our box and then the end state. Since we want the box to fade we start at opacity 0 and by the time we are done we end at opacity 1. You can also put other parameters in there as well. The fade-in class tells what kind of animation we will perform.  Which is basically go do keyframes called fadeIn use ease-in animation, only do the animation once. Then stay at the last keyframe (-webkit-animation-fill-mode:forwards;) to make sure our boxes don’t disappear and do all this in 1s (-webkit-animation-duration: 1s) .The next 3 classes just give our animations different delays so they start one after another upon page load. And that’s it really.

You can have the duration in different classes as well similar to .one, .two etc.

That’s about it, let me know if you have any questions / problems.

Our Client

Military REACH is dedicated to enhancing the capacity of communities to develop, implement and evaluate educational programs that meet the needs of military families through the quality enhancement of after-school and youth development programs serving children and youth in military families both on and off installation bases.

The Need

We were approached by the University of Arizona to brand a program granted by the United States Department of Defense and the Department of Agriculture.  We needed to create a drupal theme for their website as well as create a solid identity for the program.

The project

The CYFERnet Evaluation Team at the University of Arizona and Virginia Tech created a program for evaluating grants with the support of the United States Dept of Agriculture.  This process included the systematic identification, review, and vetting of approximately 300 evaluation instruments in order to arrive at approved common measures for adoption by CYFAR grantees in seven short-term outcome areas:  Leadership, Nutrition, Parenting, Physical Activity, Science, Technology, and Workforce Preparation.  In addition, scales were identified to assess Core Competencies across all CYFAR programs

The Brand, The Vision

The Alton Lane Experience is like no other fashion website. Ahead of its time, Alton Lane Custom Clothing was founded with the vision and passion of Colin Hunter and his partner Peyton Jenkins. They had a dream some 3 years ago to build a website for high-end, men’s clothing, that enabled the user to create their own custom clothing right there on the website. The result would be a custom item of clothing that no one else in the world would have because it was made entirely from scratch, entirely for that client.

The brand needed to be masculine, luxurious and modern. We were not just building a site, we were building a brand that needed to stand alone in the fashion capital of the nation, New York.

Rate viewer was created by a brilliant broker who turned his research secret into a powerful tool that helps determine whether or not to buy or sell a particular stock.

How it works

It works on a series of mathematical equations based on cumulative data.  The trick was being able to farm the data in relative time to a user’s query to produce next to real time results.  An example would be if you searched for the Ford Motor stock, you would get a recommendation to purchase or sell that stock based on data from Yahoo Stock, Smart Money, USA Today, Morning Star and several others.  Not only does it give you cumulative advice but it lets you know if there is a better stock to look at in a similar industry or if you just want to look at the best stocks period!  We created a tool that saves anyone wanting to dabble in the stock market time and money.

Our Client

National Self Alarm does one thing really well, alarms that you can install yourself into your home or apartment. The concept is simple, They Program it – They Mail It – You Install it.

Our Client

We were approached by Goodwill to completely redesign their Southern Arizona branch.  We needed to consolidated their website and created a cleaner, more user friendly interface as well as implement a content management system for their staff since content updates are a frequent. need.

Creative Health Professionals focuses on naturopathy and homeopathy, which is essentially natural medicine. We were hired to create a complete identity for Creative Health Professionals including logo, business cards, letter head and collateral pieces for their practice.

Branding

The organic nature of this business spawned the idea of their logo sprouting new life in this new business while relaying new, healthy, beginnings to all of their clients.  We used greens and earth tones to represent health naturopathy.

Solution

The Creative Health Pros were offering a myriad of natural health supplements at such a discounted rate it gave our marketing team an idea. Google indexes products by price as well as by key word. The result was instant sales once we implemented their cart to be searchable by Google.

The Problem

The Team at Graphic Fusion in Tucson Arizona got together and created Signoff.me.
We are developers who came across a distinct problem, when people told us they were approving or “signing off” on something, often times they would either change their minds about it later or they weren’t clear what they were saying yes to. This of course wastes people’s time and money and creates this little annoying guy called a “PROBLEM.”