Frameless Sketchy Wireframes Introduction When it comes to user interface documentation, wireframes have long been the tool of choice. However, using traditional diagramming tools like Visio, OmniGraffle, and InDesign, most wireframes today look the same as their ancestors did from a decade ago – assembled with rigid, computer-drawn boxes, lines and text. While these artifacts have served us well, they can also be slow to produce, burdened with unnecessary detail and give a false impression of “completion.” To compensate for the drawbacks of traditional wireframes, many practitioners put aside the computer in favor of simple pencil sketches or whiteboard drawings. This speeds up the ideation process, but doesn’t always produce presentable or maintainable documentation. There is a growing popularity toward something in the middle: Computer-based sketchy wireframes. The same wireframe in sketchy and traditional representation. The Traditional Wireframe Problem Sketching to the rescue? Why not sketch… Conclusion
75 Excellent Free Fonts Design In this article tripwire magazine presents an overview of more than 75 excellent free fonts you should consider using for your designs. Not all free Fonts are worth using but the Fonts listed in this article have all been picked out because they are better than the rest. Advertisement Introduction The importance of typography in design can’t be underestimated. Ultimate Font Download – 10,000 Fonts Save time and download 10,000 quality fonts with one click. The Ultimate Font Download is licensed for commercial use and contains thousands of exclusive fonts licensed directly from font designers. The Fonts Make sure you maintain records of where fonts were acquired and keep the original archive file with the legal terms to prove permission of use. Lacuna To download the font enter the Flash page, click on “Glashaus Fonts” in the navigation menu at the top, in the opened page click on [MAC] or [PC] in the left menu to download the font. Union Echolot PetitLatin Advent Pro Medium Condensed Telegrafico
Perfect Full Page Background Image Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo But careful, reader Pierre Orsander said they tried this and had some problems with links on the page going dead. Enjoy
news | web.without.words I'm continually amazed and humbled at the amount of attention this little project (that I started some 3 years ago) still gets. Especially in light of my extreme, nearly fanatical, lack of updating the site with new sites/wireframes. This is not a conscious decision, but rather one of economy and necessity. On that note, I have a few sites in my pocket that I'd like to give the "www" treatment and will do my best to work updating and adding to this site to my weekly schedule. So there has been a flurry of activity on web.without.words over the last several days; which helped spurred me to finally make the updates I've wanted to make for month and months and months. Thank you again for you patience, thank you for visiting, and if you're ever in need of a designer/developer for a future project — keep Wiseacre in mind. I want to thank Paul Andrew and the fine folks at Smashing Magazine for listing web.without.words with such other wonderful resources for wireframing and UI interfacing.
Skeleton: Beautiful Boilerplate for Responsive, Mobile-Friendly Development 45 Beautiful Free Fonts Design Six RevisionsMenu Main Categories CSSHTMLJavaScript Web DesignWordPressWeb Development Design InspirationUX DesignUI Design FreebiesTutorialsTools Links AboutContactAdvertise RSSTwitterFacebook 45 Beautiful Free Fonts for Modern Design Trends By Jacob Gube Advertisement The proper selection of typography in a design can set the appropriate theme and mood that the designer is going for. In this collection, you’ll find 45 first-class, downloadable fonts for your use. Clean, Modern, Web 2.0 Eurofurence Cicle Share Reznor Broken Alte Haas Grotesk Abrosia Babel Sans AUdimat Folks TT Bedizen tondo Grunge Birth of a Hero Everyday Ghost Times New Yorker Grymmoire District Ginga Sidewalk Trashco Dirty and Classic Laundromat 1967 84 Rock Vintage / Retro Americana Dreams Vintage 02.10 fenotype Automania Chick Deftone Stylus Groove Machine Registry Mexcellent Swingtime MF Hand Drawn / Painted Joe Hand 2 advent Sunday Morning Garage Sale Rough Draft Burst My Bubble Loved by the King Angelina Sebastián Font Karabine Loveable Scruff AE Scrawl Edo Note Really?
iPhone, iPad and iPod Touch wallpapers for the rest of us. PreviousNext Tip: Use your arrow keys to navigate. Episode 15 - CSS3 Borders and HTML5 Sections Thanks to those who make Doctype possible! CSS3 Borders Borders work best when they're used to reveal the visual structure of a web page. When you make good use of borders, you end up with a crisp, well defined layout. Just use them sparingly, so you don't end up with the whole "box-within-a-box-within-box" look. Now, let's take a look at some of the new additions to borders in CSS3. Border Radius In Mozilla, we use -moz-border-radius and in webkit we use -webkit-border-radius. You can also set curves on individual corners. In mozilla, use -moz-border-radius-topleft and -moz-border-radius-bottomright. Border Image In Mozilla, use -moz-border-image and in webkit use -webkit-border-image. Lastly, you can stretch the width and height of the image across the whole element by typing stretch stretch, or, you can repeat the pattern by typing round round. Box Shadow In mozilla, we use -moz-box-shadow and in webkit we use webkit-box-shadow. Resources Doctype Section/Article/Aside More Info