background preloader

Applying Divine Proportion To Your Web Designs

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. Related:  Design

The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.

11 Fantastic Resource Sites for Web Designers It is quite obvious that at some point of time we require some help and look out for quality information. Thankfully Web World has provided much help as we can now come across a wide variety of information with a few mouse clicks. But when we visit different sites and get the required information, we forget the designers behind those sites who also require the same help to sort their queries or may like to have information pertaining to their field. Therefore, in this article we are going to present a collection of some useful resource sites for our designer friends which they can refer and in fact must refer. Most of us also have our own, lesser known resource sites that we go to. So please, share yours in the comments and help grow the community. Thanks! Mashable It is one site that every designer will get glued to as it offers a plethora of information related to web industry whether it is current news, new technology, social media, analysis, reviews and what not. A List Apart Design Newz

Grid-Based Web Design, Simplified A Craft Of Consequences: Reader, Writer And Emotional Design Before the very first page of a book has been read, you've already analyzed it in countless ways without even noticing. The paper stock, the thickness of the binding, the aroma, the color of the type and even the texture of the cover; the very character of the book is being dissected by the hand and eye at every moment. In this brief second there is a dialogue between the reader and the object. Read more... Designing for the Mind Do you know what makes a design good? Read more... The Process of Creativity The creative attribute has always been a highly debated and researched component of the human psyche. Contrary to previous belief, creativity does not limit itself to the “right-brained” artistic types. Read more... Content Meaning You’ve heard the questions before. Okay, enough with the questions. Read more... Design is About Solving Problems Like many designers, my RSS feed of inspirational websites is full of great work and posts.

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.

Understanding CSS Positioning part 1 | KilianValkhof.com Understanding CSS Positioning part 1 Without a doubt, positioning, or the layout, is the hardest part of CSS. Not only because it ever so often varies between browsers, but also because CSS has a lot of ways to position an element, all with various (dis) advantages. This series of articles will thrive to explain the possibilities you have in positioning. It doesn’t only cover positioning, but also properties that define layout such as display and float, and a preview of the new CSS3 layout modules. This part will introduce the positioning and display property. Display:hehwha? Before we start, it is worth noting that there are basically two types of ways to display an element in CSS: block and inline. Display:block; Block can be, quite literally, seen as a block. Display:inline; Display:inline is somewhat the opposite. That leaves display:none, which is really easy for me to explain: it doesn’t display. There is a multitude of other display: properties such as table and inline-block. Flow

Clean Up Your Mess - A Guide to Visual Design for Everyone Gridding the 960 You might recall a certain dialogue on this site about optimal layout width for 1024px. And perhaps your astuteness leads you to recollect the ensuing dialogue about fluid vs. fixed width. Shift gears for a moment and see if you recall Khoi Vinh’s discourse regarding the use of a background image grid for Subtraction.com (or for TheOnion.com redesign). Background image grid + pixel ruler + column divisions for 960px-width layout, all in one mean little package. …and so on. Not keen about constructing your own grid? In related news, this was one of the items covered in yesterday’s Web Design World workshop, which appears to have gone over well based on audience feedback.

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

The Perfect 2 Column Liquid Layout (left menu): No CSS hacks. SEO friendly. iPhone compatible. Download this layout (20kb zip file). Percentage dimensions of the left menu layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left column: 162 pixels Main page: 550 pixels 1024 x 768 Left column: 210 pixels Main page: 709 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column. No Images No JavaScript Mac

50 List of Free Online Photo Editing Tools Editing an image is very popular these days due to the innovation of graphic software programs that will allow us to create computer arts from scratch. However, we could also enhance, add some cool effects and customize the look of our images easily without having the need of these soft wares through the online photo editors. An online photo editor tool allows us to edit and manipulate a photo in the Web Browser. Here are the 50 List of Photo Editing Tools to Help You Edit Images and Photos Online for free. Scrapblog Scrapblog allows you to combine your photos, videos, audio and text to create stunning multimedia scrapbooks.Visit Site Snipshot Snipshot is formerly called as Pixoh.IVisit Site Pixer Pixer.us could help you perform basic editing and touch ups to your uploaded photos.Visit Site PicMagick PicMagick has several cool features that allows you to make your ordinary photo look wonderful.Visit Site Pikipimp Mypictr Picture2Life MyImager.com FlauntR 72photos DrPic Aviary AlilG.com LunaPic Picnik

960 Grid System

Related: