background preloader

Applying Mathematics To Web Design - Smashing Magazine

Advertisement “Mathematics is beautiful.” This may sound absurd to people who wince at numbers and equations. Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. Layouts featured in this post were created specifically for the purpose of this article. Golden Ratio and Golden Rectangle The golden ratio, also known as the divine proportion, is an irrational mathematical constant with a value of approximately 1.618033987. We already published a very detailed article “Applying Divine Proportion To Web Design” that explains how to use the golden ratio in Web design. The construction of a golden rectangle is very easy and straightforward. A method to construct a golden rectangle. As an example, consider the minimalist design below. Large view However, it may be quite difficult to add a new Golden block while keeping the consistency of the design. Large view Possible Applications Download the PSD-layout Fibonacci Design Large view Large view Large view Related:  Design

30+ Handy Blank Templates for Designers Sometimes you have a nice concept for a design in your mind, but you don’t know where to start; or sometimes you are just not aware of the right size for the design to implement. That’s where templates come handy. I have collected some very useful templates with proper guidelines, sizes and resolutions for design projects like business cards, letterheads, vinyl designs, brochures etc. I believe that these will prove to be a great time-saver for many of you guys. Most of these are in PSD or AI format, and are easily editable. Free PSD Twitter Background Template Chad Engle has made this PSD template for twitter backgrounds containing guides that match up with different resolutions. 350 dpi Business Card Template 10-Layer PSD Business Card template with page, bleed and margin marks. Template for Business Card A PSD template for Business Card 85 x 54 mm (A4 Size). Stationery & Business Card Template 8.5” x 14” Brochure Template A mock-up design for a brochure 6000 Free Car Vector Outlines Basic P.

WordPress Hosting | WPWebHost Design and the Divine Proportion – January 6th, 2005 – Many designers, whether traditionally schooled or not, have trouble with composition. I’ve sat with plenty of designers who simply moves things around until they feel ‘right’. Design is, in essence, communication (I know, I know, I rant about this enough, but this isn’t one of them) but the vehicle for communication is the design. The feeling When creating a design, or composing a photograph, we reach a point when we say ‘that’s right’ (or ‘that’ll do’ depending on the deadline and budget). The Divine Proportion Remember back to your art school? The Golden Section, or the Divine Proportion is a visual representation of a number called Phi (pronouned fi). So, what has this got to do with design? Well, in short, a lot. The Phi is evident everywhere in universe - Nature, Space, Physics, Mathematics, Physics, Art and So, here’s the thing. How? Using Phi in your designs It’s all very well talking compositional theory, but putting it into practice is another thing entirely.

40 Absolutely Free Vector Pack Collections Resources February 23, 2010 As designers, we are all familiar with various resources that we use in our usual designs, images and creations. Resources such as brushes and textures are just a few examples of these resources that help improve the quality and artistry of every image. By now, most of you may have numerous downloaded resources available in your computers. Amir Fura Vector Pack Set 1 View Source These Vector brush sets are perfect for simple design accents like band logos or even placement on a website border. Colorful Vector View Source These Colorful vector brushes are great for designing backgrounds and posters. Vector Stock Pack Number One View Source Assorted vector brush sets like this are good if you do a wide variety of designs. View Source Skull vectors are often resized for a variety of reasons. WG Funny Swirls Vol1 View Source These swirls and circles are a popular accent to most vector images. Autumn View Source People Silhouette Vector View Source Pimpin Vector Pack Cityscape

Web Design - Website Designers Applying Divine Proportion To Your Web Designs Advertisement Effective web design doesn’t have to be pretty and colorful — it has to be clear and intuitive; in fact, we have analyzed the principles of effective design in our previous1 posts2. However, how can you achieve a clear and intuitive design solution? Well, there are a number of options — for instance, you can use grids, you can prefer the simplest solutions or you can focus on usability. This article explains what is the Divine proportion and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs. Divine Proportion Since the Renaissance, many artists and architects have proportioned their works to approximate the golden ratio — especially in the form of the golden rectangle, in which the ratio of the longer side to the shorter is the golden ratio. Consider the example above. First, calculate the width of your #content-block. This is the whole idea behind the “Golden” proportion. The Rule of Thirds Summary It's done.

Design Trends (Predictions) in 2010 As we are stepping in a new decade, I can foresee that web design in 2010 is going to be fun and filled with experimental works. With the new CSS3 and HTML5, designers and developers are trying to utilize the new features to create impressive designs. Sketchy and large background styles are fading out. Serif fonts and texturized background will be popular. Thanks to CSS3, we are going to see a lot of rounded corners, RGBA transparency, and drop shadows. With the rise of smart phones, mobile web design is going to pick up this year. Serif Fonts In the last decade, most web sites were designed in either Verdana or Arial (sans-serif fonts), but that is going to change in this new decade. Big Headings Big headings in header (as part of design interface) will gain more popularity in 2010. Custom Font Embedding As Typekit is expanding their font list and more free quality fonts are available (e.g. Texturized Background Minimalist & Grid Minimalist and grid designs are not today's new. Text Shadow

47 Amazing CSS3 Animation Demos Here is a compilation of 47 jaw-dropping CSS3 animation demos. They demonstrate the possibilities of the CSS3 transform and transition property. Some are very useful and can be used as Javascript alternatives. Most of them are simply to look cool. In order to veiw these effects, you need a webkit browser such as Safari and Chrome (sorry to the Internet Explorer users). CSS3 Clock With jQuery Analogue Clock 3D Cube That Rotates Using Arrow Keys Multiple 3D Cubes (Slide In/Out) CSS3 Accordion Auto-Scrolling Parallax Isocube Image Gallery Matrix 7 Javascript-effect Alternatives Using CSS3 Image Hover Effects Turning Coke Can (Control With Scrollbar) 3D Meninas Polaroid Gallery Space Note: this one is graphic intense and takes a while to load, but the result is crazy! Mac Dock Drop-In Modals Sliding Vinyl Zooming Polaroids Animated Rocket Poster Circle Morphing Cubes Falling Leaves Animated Polaroid Gallery Spotlight Cast Shadow Colorful Clock Lightbox Gallery (Draggable) Elastic Thumbnail Menu Coverflow Snowflakes

How To Design Using The Fibonacci Sequence Not too long ago I posted an article that outlined ten laws to design by. I was ecstatic when the post received ample attention and fan fare. I might be a bit jaded, but I have grown very sick of the “fast food” list style design articles that seem to get so much attention these days. While this type of post is entertaining, it will hardly do anything push the design community. These posts tend to promote shallow design practices instead. So I wanted to continue to talk about lesser known design principles. The Fibonacci Sequence is a great design concept to understand and integrate into your work. What Is The Fibonacci Sequence? Simply put the Fibonacci Sequence is a series of numbers with the pattern of each number being the sum of the previous two. The sequence could go on indefinitely. How Does It Apply to Design? The spiral created by the golden ratio By itself it might seem like the Fibonacci sequence has everything to do with mathematics and nothing to do with design. How To Use It