Monday, May 16, 2011

Points to watch out for TV application design



Internet TV is the craze now and the demand for TV application developer is high, mainly due to the lack of efficient TV app developer. I had been working on a TV project for the past months and had been mentally taking notes of the potential pitfalls in transiting from developing for the web to developing for the tube.

1. A clean minimalistic web design does not work on TV.
The tv have a huge screen space that will become significally awkward with your minimalistic design. Having nice large graphics or videos is a 'easy' method for filling up the awkwardness.



2.Elastic fantastic!
TV application design really focuses a lot on the elasticity of your image, header, sidebar .... etc. Do not assume all TV are widescreen.

3. Plenty of testing... on a REAL TV!
No. A 21inch LCD monitor will not give you as relevant feedback as testing your app on a TV. Other than screen resolution problem, you have to watch out for colors too.

4. Use CSS3 to replace javascript animation as much as possible
Using the hardware-accelerated css3 transition will give you a much better performance on a large screen. From my observation, Firefox (4.0) seems to be the most affected browser when the screen size is enlarged. The browser that performed the best is google chrome. Performance in this case refers to the smoothness of the animation.

Labels:


Click here to continue reading....

Friday, November 5, 2010

Creating the new "Office for Mac 2011" icon


The new “Office for Mac 2011” icons are stunning and sophisticated.Microsoft has engaged the help of company called Frog Design to help them create a new line of icons for their 2011 version of the Office for Mac.With the help of grids and pen tool, it is really not that hard to come up with a similar design. This tutorial will capture the essence of the icons.

PSD Available 
(5% will be donated to charity):
Download entire tutorial
(5% will be donated to charity):

Grids and Circles

Step 1: Create a 100px X 100px circle. I drew the circle with the help of grid-lines. Set vertical grid lines at 150px and 250px and horizontal grid lines at 150px and 250px. Name the layer “Circle”. Give it the layer properties as shown below









Step 2: Set another vertical grid line at 300px and 350px. Duplicate the ‘Circle’ layer and move the circle until it’s center is at the 300px gridline. Do this for the rest of the circles in the illustration below. Use gridline to help u achieve accuracy.


Step 3: Group all the layers together and call it ‘Blueprint’ or whatever name you can concoct.

Pen Tool

Step 4: Use Pen tool and start plotting the points according to illustration below. Name the layer ‘P-bright’.



Creating the rounded corners

Step 5: A very easy technique that i always use to create a rounded corner are as follow:

  • Add anchor point.
  • Use ‘Direct Selection Tool’ to drag the point to create some curvature.
  • Use ‘Convert Point Tool’ on the two handle bar to increase the curvature until it forms a nice rounded corner.
Another example:




Step 6: Apply this technique to all the corners that need rounding except on the exterior side of the “P”. For that side, you will need to delete the existing anchor point there first before applying the above technique to round it.



This is what you will get after rounding the corners. The basic shape of the icon is done. What we will need to do now is to give it some depth.



Giving Depth

Step 7: Duplicate the ‘P-bright’ layer and rename it ‘P-dark’ layer. Make sure it is on top of the ‘P-bright’ layer.


Step 8:Delete the anchor points that are shown below and adjust the handles to get the desired shapes




Step 9:Add another anchor point and delete the other anchor point as shown in the diagram. Adjust the handlebars again to get desired shape



Step 10: Select the anchor points that made up the tail of ‘P’ and shift them to the right.Add another anchor point before deleting the bottom anchor points to get the shape shown in the illustration below





Color

Step 11:Fill up ‘P-bright’ layer and ‘P-dark’ layer with respective colors.


Step 12: Adjust the layer properties of ‘P-bright’ layer.


Step 13:Adjust the layer properties of ‘P-dark’ layer




This is what you will get so far. Pretty sweet eh.


Step 14: Duplicate the ‘P-bright’ layer and rename it ‘P-back’. Move it below ’P-bright’ layer.Fill up the layer with the color stated in the picture.



Step 15:Nudge the ‘P-back’ layer to the left by pressing the left key twice.

Your ‘P’ icon is done!


Now that you have learned the techniques in achieving the look and feel. Try to attempt other letters and post it in the comments!

Labels:


Click here to continue reading....

Monday, November 23, 2009

jQuery: Shuffling Photo Gallery Tutorial

Creating a Shuffling Photo Gallery in jQuery is actually very simple. It's just a matter of calling timers("setIntervals()") and tweaking opacity.

Let's get started.

HTML
<div id="slideshow">
<img src="images/demo.png"/ class="active">
<img src="images/digg.png"/>
<img src="images/reddit.png"/>
<img src="images/twitter.png"/>
</div>
These are the images that you want to be shuffling.

CSS
<style type="text/css">
#slideshow{
text-align:center;
postion:relative;
}

#slideshow img{
position:absolute;
z-index:8;
top:0;
left:50%;
}

#slideshow img.active{
z-index:10;
}

</style>
We are gonna declare "position:absolute" for the images to stack up together.Z-index ensures that the "active" image will be on top of the rest.


Javacript
<script type="text/javascript">

$(document).ready(function(){
$('#slideshow img').animate({opacity:0.0},1);
$('#slideshow img.active').animate({opacity:1.0},1);
});

function slideSwitch(){
var $active = $('#slideshow IMG.active');
var $next = $active.next().length ? $active.next():$('#slideshow IMG:first');
$active.animate({left:'40%'},1000).animate({left:'50%'},1000).animate({opacity:0.0},500);
$next.addClass('active');
$next.animate({opacity:1.0},1000);
$active.removeClass('active');
}

$(function(){
setInterval("slideSwitch()",3000);
});
</script>

First, we hide all images except the active image.
$(document).ready(function(){
$('#slideshow img').animate({opacity:0.0},1);
$('#slideshow img.active').animate({opacity:1.0},1);
});


Next, our timer will call the function slideSwitch() every 3000 millisecond.
$(function(){
setInterval("slideSwitch()",3000);
});


In our slideSwitch function, we hook the active image into variable $active and the next awaiting image into $next.

var $next = $active.next().length ? $active.next():$('#slideshow IMG:first');

I found an excellent explanation from net-Tuts regarding the "?" above:

Think of everything before the question mark as being a question, if the answer to that question is true then execute the code to the left of the colon, but after the question mark. If the answer is false then execute the code after the colon.

The rest are just simple animation to mimic the shuffling action and also to reattach the active class to the images.

Labels: , , ,


Click here to continue reading....

Thursday, November 19, 2009

Jquery: Show and hide a partially-extended list


Demo

"Show and Hide" effects are the most commonly used effects used in the Javascript library. They are easy to learn and implement but yet visually impressive enough to catch some attention.

To show or hide contents completely is easy. But what about showing a partially-extended list?

I found a excellent tutorial from Chris Pollack which details how to do it: Sliding content from a partial height with jQuery.

So what i'm gonna do today is to simplify his code and to explain in details how it work.

Let's create a simple list. Preferably make the list long so that you can see the sliding effect better.

HTML
<div id="slide">
<ul>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
<li><a href="http://mix-mash.blogspot.com">Mix-Mash.blogspot.com</a></li>
</ul>
</div>

This should be what you will get:
Photobucket

CSS
<style type="text/css">
#slide{
overflow:hidden;
width:300px;
margin:0 auto;
text-align:center;
}

#slide ul{
list-style:none;
border:3px #444 solid;
border-bottom:none;
margin:0px;
padding:0px;
}

#slide ul li a {
color:#3274d0;
display:block;
border-bottom:2px #444 solid;
text-decoration:none;
}

#slide ul li a:hover{
color:#fff;
background:#3274d0;
}

.bottom{
width:300px;
margin:0 auto;
border-top:3px #444 solid;
text-align:center;
}

.tabs {
width:100px;
margin:0 auto;
}

.tabs a{
background:#3274d0;
color:#fff;
padding:3px;
text-decoration:none;
border:3px #444 solid;
border-top:none;
display:block;
}
</style>

You will get this:
Photobucket


Honestly 99% of my CSS is just to beautify the list.

The most important line in the style-sheet would be the "overflow" property. "hidden" would allow it the list to be cut to it's required length.

Ok! enough with mundane stuff. Let's get sliding!

Javascript
<script type="text/javascript">

var sliderHeight = "100px";
var cHeight;

$(document).ready(function(){
cHeight = $('#slide').height();
$("#slide").css("height",sliderHeight);
$(".tabs").html('<a href="#">Pull</a>');
$('.tabs a').click(function(){
openSlider()
})
});<!-- end document ready -->

function openSlider(){
$('#slide').animate({height:cHeight+"px"},"slow");
$(".tabs").html('<a href="#">Up we go!</a>');
$('.tabs a').click(function(){
closeSlider()
})
}<!-- end open slider -->

function closeSlider(){
$('#slide').animate({height:sliderHeight},"slow");
$(".tabs").html('<a href="#">Pull!</a>');
$('.tabs a').click(function(){
openSlider();
});
}<!-- end closeSlider -->
</script>

Javascript explained - Variable sliderHeight is to state your list's height when it is partially hidden. cHeight is to record the list's true height.

Basically, JS will record your list height first.
var sliderHeight = "100px";
var cHeight;


Then when "a" inside of class ".tabs" is been clicked, function openSlider() will be called.
$('.tabs a').click(function(){
openSlider()
})


Inside openSlider() function, animation method is used to reveal the true height,cHeight.
$('#slide').animate({height:cHeight+"px"},"slow")

If ".tabs a" is been clicked again, closeSlider() function will be called instead. The list will then slide back to it's hidden height.
$('.tabs a').click(function(){
closeSlider()
})

Labels: , , ,


Click here to continue reading....