bukan sekadar coretan
Tips for Prototyping Successful Web and Mobile Products When designing digital products you want to strive for the most compatible user experience for every visitor. Designing a product is very difficult – whether a website or mobile application. You need to understand current trends in the market. And most importantly you should be confident in…
5 Useful CSS Tricks for Responsive Design Making the design to be responsive is very easy as shown in my Responsive Design in 3 Stepstutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases…
MAKING ROOM TO BREATHE: WRAPPING TEXT AROUND ELEMENTS I constantly look through websites and wonder why designers allow text and images to get a little too close. Why don’t the elements have room to breathe? That’s where text- or word-wrapping comes in. Adding space above, below and to the sides of an object embedded in…
Free Zocial Button Set: Social CSS3 Buttons The idea behind this project was to produce a consistent set of buttons that could be used for the range of social actions frequently taken in Web applications. These actions are often important goals for users, such as connecting third-party accounts or sharing content to third-party platforms, so…
ANNOTATION OVERLAY EFFECT WITH CSS3 A tutorial about how to create an overlay effect to show some more details of an item or image. The effect is CSS-only and uses a combination of the :checked pseudo-class with the sibling combinator.
EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and…
Modal and Modeless Boxes in Web Design Modal boxes are among the most effective “bang for your buck” design elements that a web designer can employ. Today, we’re going to define a modal box is… then we’ll look at the best ways to use them and suggest a handful of our favorite scripts to employ…
Applying Macrotypography For A More Readable Web Page Any application of typography can be divided into two arenas: micro and macro. Understanding the difference between the two is especially useful when crafting a reading experience, because it allows the designer to know when to focus on legibility and when to focus on readability.
EFFECTIVE TYPOGRAPHY-DRIVEN WEB DESIGN The best text-driven design uses a minimal set of effects to create a word image with impact. Take a look at novelty typefaces, set a clean and limited font palette, play with bold or sharp color choices, make the letters big (or small), make type art and use strong words or…
COLLECTIVE #9 Logo Inspiration * Tutorial Craziness * Hip Skeumorphism * Free Social Icons * CSS3 Goodness * Easybook A Pure CSS3 Cycling Slideshow TouchTouch – A Touch Optimized Gallery Plugin No Cookie Law Logo Inspiration from Dribbble CSS3 Structural Pseudo-class Expressions Explained Interactive Menu with CSS3 & jQuery Free Social Icon Pack Skeumorphism and…