A Crash Course in Typography: Principles for Combining Typefaces - Noupe Design Blog Apr 11 2011 When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. Contrast Contrast is one of the most important concepts to understand when it comes to combining typefaces. But first, what exactly is contrast? Weight The weight of a typeface plays a huge role in its appearance. You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme. Style and Decoration The style of a typeface has a huge impact on how it’s received. Style and decoration can also be used to create contrast within a type family or typeface. Scale and Hierarchy The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces. Classificiation Structure Color and Texture Mood (ik)
960 Grid System Prototyping With The Grid 960 CSS Framework Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results. That sounds nice, but how do we do that? Grid 960 works by using classes through inheritance. 60px140px220px300px380px460px540px620px700px780px860px940px Each width corresponds to a class name formed like this: grid_X where X is a number from the above list. When creating a row in the grid, make sure all the child grid_X numbers add up to the number of columns you're using. Visualizing the design's grid is easy. After checking out the visual, you should understand how to create the mockup's grid. The skeleton is ready. Apply the class to correct grid_12 divs and set the ID. The middle columns don't require any effects. Excellent! Sweet. Astute readers may have realized something. Luckily you can maneuver around equal height columns in the top section. Cool! You should get this.
30 Usability Issues To Be Aware Of - Smashing Magazine Advertisement You don’t have to agree upon everything. As a professional web developer you are the advocate of your visitors’ interests and needs; you have to protect your understanding of good user experience and make sure the visitors will find their way through (possibly) complex site architecture. In this context nothing can support you more than the profound knowledge of fundamental issues related to your work. In this article we present 30 important usability issues, terms, rules and principles which are usually forgotten, ignored or misunderstood. Usability: Rules and Principles 7±2 PrincipleSince human brain has some limits on its capacity for processing information, it deals with complexity dividing information into chunks and units. 2-Second-RuleA loose principle that a user shouldn’t need to wait more than 2 seconds for certain types of system response, such as application-switching and application launch time. Psychology Behind Usability Found out by Bluma W. It's done.
40 Useful Photoshop Web Layout Tutorials Adobe Photoshop is the industry-standard when it comes to creating web page layouts. Photoshop’s versatility, robust set of tools, and excellent workflow management make it the web designer’s preferred application when creating designs for the web. In this collection, you’ll find 40 high-quality tutorials on creating web layouts from scratch using Photoshop. This article contains a copious variety of tutorials to help you learn and master the various techniques involved in creating beautiful web layouts. 1. Create a dark, clean, and usable blog style layout. 2. Learn how to create an elaborate and decorative design with paper textures. 3. In this tutorial, you’ll see how to make a clean/grungy layout. 4. This tutorial goes over how to create a dark-themed, classy web design. 5. Learn how to create a simple and modern web layout using Photoshop. 6. In this tutorial, you’ll read a detailed discussion on creating a grungy web design. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22.
Best of Black and White Graphic Design Layouts Best of Black and White Graphic Design Layouts I don’t think that I have ever had such a hard time researching a topic. Believe it or not, it is very hard to find any half decent black and white designs online. I have listed a couple of dozen black and white designs. Please send in designs that you like as well. del.icio.us | Digg it | Furl | ma.gnolia | Netscape | RawSugar | reddit | Simpy | StumbleUpon | Yahoo MyWeb | 17 Great Resources – Color Inspiration For Web Design | CSSgirl Dev & Design One of my favorite parts when creating a new design is the process of choosing a color scheme. There are times when the colors just fall into place after I have my main color, or when using a photo the colors just flow around it. But sometimes you need a little help. Whether your looking for a color scheme to base your design on or you need a little help picking out complimentary colors the generators, articles, color wheels and more below will assist and inspire your color creativity. Color Generators / Wheels <img src=" alt='colourlovers' />colourlovers is one of my favorite websites to visit. Colors From Photos Articles on Color Theory Color Psychology & Symbolism Articles On Using Color In Design Premade Color Scheme Inspirations Because, sometimes you just need a jumpstart to find your perfect color scheme! HTML Hex Codes Jump to Comments
A Detailed Look at the 960 CSS Framework CSS frameworks are bloated. CSS frameworks are for people who don't know how to code. CSS is too simple to implement a framework. If you've ever read a tutorial on a CSS framework, I can guarantee that many comments mimic the previous statements. Pros Rapidly speeds up development time. Cons It's named "960" for a reason. Usage Let's imagine that we want to work with the "12 column" structure to create the extremely simple layout seen below. Specifying an id here isn't required by any means. Grids Now we want to create a simple header and two column structure. I'm going to choose a header width of "940px" (+ 20px margins = 960), a sidebar width of "220px", and a main content width of "700px". You must assign a class to each div. The only additional styling that I've added is background colors and a minimum width for each div to simulate an actual website full of text. Without worrying about margins, floats, or IE hacks, we're able to create a layout extremely fast. You Also Might Like
10 Usability Nightmares You Should Be Aware Of - Smashing Magazine Advertisement Sometimes you just want to get the information you’re after, save it and move along. And you can’t. Usability nightmares — which are rather the daily routine than an exception — appear every now and again; usually almost every time you type your search keywords in Google. In his article “Why award-winning websites are so awful1” Gerry McGovern points out that “the shiny surface wins awards, real substance wins customers” and that is absolutely true. Nevermind what design you have, and nevermind which functionality you have to offer — if your visitors don’t understand how they can get from point A to point B they won’t use your site. a clear, self-explanatory navigation,precise text-presentation,search functionality andvisible and thought-out site structure. And that means that you simply have to folow the basic rules of usability and common sense. In this article we take a look at some of the usability nightmares you should avoid designing functional and usable web-sites.
Tutorial: Coding a Layout So, you’ve designed your next site but you’re having a little trouble turning your lovely PSD into a coded layout. This tutorial should help you learn how to analyze either a new template, or even your current layout to find the best way to code it. (_Click image for a larger version_) Here is a basic design composition. The first thing I do once I receive a finalized composition is attack it with a pencil. The full PNG of the layout above as well as the font used can be downloaded here (_Note: You can remove the red markings by making the “Code Overlay” layer invisible._) Now that we have a good idea of where we’re going, let’s get started. The first task is to set up your files; luckily, Dreamweaver takes care of that part for me. I’ve decided how I will be applying the drop shadow – a background on the body will be the easiest and won’t require any extra markup. By applying the CSS for the background image as well as the “page” div, we now have the basic structure we’re looking for.
Stunning Collection of Black and White Logo Design Top Home » Gallery • Inspiration • Logo Design » Stunning Collection of Black and White Logo Design A logo is an emblem or the visual representation of the business. Although a logo is a small graphical element but without doubt is of great importance. Simple logo designs are always proved to be the most effective and powerful whether in terms of color selection or concept. Here is an exclusive showcase of over 40 most innovative black and white logos designed by Province Design Studio. Families Negative Reality Mouse Commontune infopunk Quality Touch Painting NY Ruff Ruff Blues Music Eden Horris Ingenioustries Dogcat Lad-yy Chalk The VIP Club Black Dog Sync VERSUS logo Oemplus Shah Coiffeur Vagrant Blackthorn Creative Workshop ThANKS! Lost Puppy Productions Urban Labs Design 1 Alive Youth Group Parikh fabrics Colossus Menitiz Fíbín Rinke Alisas shoes Related Articles Comments Leave a Comment Your email address will not be published. Webdesign Core Copyright © 2014. Theme by MyThemeShop.
70 Typographic, Clean And Minimalist Color Scheme Web Designs Hello there! It’s time for little inspiration and this time I wanted to showcase something different. You may know that very popular designer slogan – “More is Less”, and yes it’s often so true – unexperienced people tend to overcrowd, use too much colors in their designs. You may also notice for such designs it’s more about grid, harmonic distribution through whole page and very silent, elegant accents. 1. One of the best clean, light and elegant websites I came across in this research. 2. 3. 4. 5. Very clean, yet professional web design. 6 .Made By On 7. Hot Meteor specializes in web, print, and branding. 8. Excellent accents leading your eye through whole page in the way author wants it. 10. 11. Visit his homepage – starting from index page you’ll get amazed how effectively Vitor Lourenco uses white space. 12. 13. 14. 15. Beautiful website using just few very subtle, monochrome colors and only pink color in logo is used to highlight most important links. 16. 17. 18. 19. 20. 80/20 Studio