background preloader

Grid Based Web Design Resources

Grid Based Web Design Resources
As a complement to our prior post "30 Grid-Based Websites", we've made a selection of indispensable resources like layout frameworks, tutorials, books, templates and useful tools that can help you understand and implement grid based design in your projects. Let's start with a little history. Many of you know who Massimo Vignelli is, a known designer with a solid modernist influence who developed his career in numerous areas of design. In 1977, he designed the Unigrid System for the National Park Service. Tools & Online Layouts Generators The 892 unique ways to partition a 3 x 4 grid The 3 × 4 grid poster is a computation-based design. Photoshop Grids and Plugins Frameworks 960grid The 960 grid is a classic among CSS frameworks, a very useful tool based on a width of 960px with a large number of resources to integrate the design in the layout. This is not just another multicolum layout. Books & Geekeries This notebook is designed for digital designers. Wordpress Themes

30 Interesting Twitter Accounts for Designers to Follow When looking for inspiration or resources is always a good idea to look at other designers work or what they're up to, even if it's not design related. Lucky for us, some of the most amazing professionals and publications are kind enough to share their findings and thoughts through social networks.Today we suggest you 30 Twitter accounts that may be interesting to follow if you are a web designer. Enjoy them and share your favourites in the comments section. Smashing Magazine Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine for professional Web designers and developers.Chris Kaufman Software designer with a passion for business. Co-Founder and Chief Product Officer at UpTo.Chris Spooner Creative designer, avid blogger and crazy about pretty colours and shapes. Web Developer.

Responsive Web Design just got Easier with the Responsive Grid System netcraft Bytes :) » 8 כלים ליצירת אינפוגרפיקה אני אוהב אינפוגרפיקה טובה, הצגת מידע באופן ברור ורלוונטי הופכת את תהליך ההבנה לפשוט ומהנה. יישום נכון של אינפוגרפיקה הוא כלי עוצמתי שמאפשר למשתמש להעמיק בנושאים חדשים בצורה קלה יותר. מצד שני אינפוגרפיקה יכולה גם להיות מבלבלת ומטעה כאשר אינה מבוצעת היטב. כמאפיין חווית משתמש אני מודע לשעות הרבות והמיומנות הנדרשת על מנת לעצב מידע באופן ויזואלי, ברור ורלוונטי - מידע שמוצג באופן שימושי ויעיל, שמפשט את המורכבויות, שנראה מרשים ואפילו מסב הנאה עבור האנשים שמשתמשים במוצר. מאחר שמדובר במדע שלם שדורש מחקר ונסיון רב, אספתי עבורכם מספר כלים שמיועדים לקצר את הדרך ולייצר אינפוגרפיקה מרשימה בזמן קצר. אפליקציית ווב חינמית שמאפשרת יצירה של אינפוגרפיקה בעלת מראה מקצועי בזמן קצר. piktochart עוד כלי המאפשר ליצור אינפוגרפיקה על בסיס תבניות קיימות. כלי חביב שמציע מבחת תבניות אינפוגרפיות בחינם וכן הורדה וייצוא כקוד להטמעה. extra.amcharts כלי מהיר אך לא חינני במיוחד שמאפשר לייצר גראפים ולייצא html או xml. icharts כלי המאפשר בנייה של גראפים מסוגים שונים על בסיס תבניות קיימות ורשימת פרמטרים.

TinyPNG – Compress PNG images while preserving alpha transparency 5 Simple and Practical CSS List Styles You Can Copy and Paste Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work. We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in! HelvetiList For our first list, we’re going to start with a simple, minimal but super attractive design that’s heavily dependent on the beauty of the typography. Demo: Check out the demo and code on CodePen. Our markup here is dead simple. <div><h2>HelvetiList</h2><ul><li><a href="#">Zurich</a></li><li><a href="#">Geneva</a></li><li><a href="#">Winterthur</a></li><li><a href="#">Lausanne</a></li><li><a href="#">Lucerne</a></li></ul></div> Thumbnail List Demo: Check out the demo and code on CodePen.

Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED. Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables

netcraft Bytes :) » השראה בשליטה: 8 כלים לניהול מקורות ההשראה שלנו חשבו על התרחיש הבא: אתם מאפיינים אפליקציה שמטרתה לספור ציפורים נודדות (בסימן השנה החדשה - זרמו איתנו בעניין הזה). אתם עוברים על עשרות אם לא על מאות מקורות ברשת כדי לקבל השראה. המקורות הללו כוללים אתרי גלריות, בלוגים, פוסטים ברשתות חברתיות, דיונים בקהיליות מקצועיות ועוד. כיצד תארגנו את המקורות הטובים באמת? כיצד תבטיחו ששום מקור בעל ערך לא יאבד לנצח בנבכי הרשת? Pinterest אי אפשר לדבר על כלים לניהול השראה מבלי להזכיר את Pinterest. חשוב לציין שלצד הממשק הידידותי של Pinterest חסרונה הוא בכך שהיא מתמקדת בשמירת תמונות, ולמעשה אינה מאפשרת נעיצה של אתרים שלמים, כתבות או לינקים. Evernote Web clipper Evernote Web clipper הוא תוסף מעולה לשמירה ולארגון של פריטים שניתן להתקנה בדפדפן כרום. תצוגת הפריטים הנאספים ב- Evernote Web clipper אמנם פחות מרשימה ומזימינה מזו של Pinterest ומצריכה יותר סבלנות לעיתים, ולמרות זאת – מדובר בכלי אידיאלי לאיסוף, קטלוג, הדגשה ותיוג של כל דבר שרוצים. Usabilla Discover בניגוד לכלים הקודמים שהוזכרו, Usabilla Discover הוא אתר שנועד לשרת באופן ישיר את צרכיהם של אנשי ה-UX. Zeen

37 Best Wireframing, Prototyping and Mockup Tools for Web Design and Planning EmailShare 38EmailShare The process of wireframing plays an important role in any web projects especially in the initial stage of the development. It requires web designers and developers to define a skeletal outline of page elements such as header, navigation bar, content area and footer. Here’s a roundup of 37 useful wireframing, prototyping and mockup tools for all areas of design including web pages, software programs and mobile apps. Balsamiq Mockups Balsamiq Mockups is another wireframing tool for web designers and developers. Axure RP Axure RP is the standard in interactive wireframe software and gives you the power to quickly and easily deliver much more than typical mockup tools. Gliffy is a web-based diagram editor. Omnigraffle Omnigraffle is a diagramming, charting, and visualization software for Mac OS X. Mockflow MockFlow is a full featured wireframe software to design, collaborate user interface mockups for software and websites. (Image Source: share

Bootstrap 3 Grid Introduction | Hello Erik - User Experience @Erik_UX IMPORTANT NOTE: Bootstrap 4 will be out soon, and it will be moving to Sass for its CSS instead of Less. Most of the principles of this article will still apply – but I will do my best to quickly either rewrite the post for Sass, or just update this post for both. I do not expect huge changes to how the grid HTML classes are applied. Read more here: After over 9-months of work, Bootstrap 3 is here. Bootstrap 2’s grid was very straight forward. Bootstrap 3 has been heavily publicized as being mobile first. Update 8/25/13: There’s been some questions around the ‘net about 100% width sites, “liquid” as we called it in the 90’s. Update 9/27/13: If you like this article, be sure to read the Part 2 about a Bootstrap Less workflow here Bootstrap 3 Less Workflow Tutorial and the Subtle Magic Behind Why the Bootstrap 3 Grid Works. Mobile First CSS Great. Here’s an example of this: See, the actual base style is the mobile style. Mixin

4 אתרים ליצירה, והרדה של טקסטורות לאתרים « scroll – עיצוב אינטראקטיבי | גרפי | בניית אתרים | פייסבוק | פרסום | טכנולוגיה אתר ליצירת טקסטורות, מאוד ידידותי ונח. כלי פשוט ונחמד, ליצירת טקסטורה המותאמת לשכפול, מייצא קובץ PNG 5X5 px. אתר מאוד פופולרי, ניתן למצאו בו, טקסטורות, שילובי צבעים לפי נושאים, ועוד… אתר מצוין, מכיל הרבה טקסטורות ברמה ממש גבוהה. 960 Grid System