Design Treats

• I posted to smashingmagazine.com

  50 Free UI and Web Design Wireframing Kits, Resources and Source Files

  http://feedproxy.google.com/~r/SmashingMagazine/~3/6HjYt1PRH5I/

    Planning and communication are two key elements in the development of any successful website or application. And that is exactly what the wireframing process offers: a quick and simple method to plan the layout and a cost-effective, time-saving tool to easily communicate your ideas to others. A wireframe typically has the basic elements of a Web page: header, footer, sidebar, maybe even some generated content, which gives you, your clients and colleagues a simple visually oriented layout that illustrates what the structure of the website will be by the end of the project and that serves as the foundation for any future alterations.This article focuses on actual wireframing tools and standalone applications, as well as resources that you’ll need to build your own wireframe: wireframing kits, browser windows, form elements, grids, Mac OS X elements, mobile elements, which you’ll use in any typical graphics editor such as Photoshop or Illustrator. …Or you could use pen and paper.[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter.]Complete Wireframing ToolkitsQuommunnication Stencil KitA PSD file with common design elements for sketching and wireframing: form elements, RSS feed icons, colors, Advertising units, browser windows and grids.Mac OS X Interface Stencil KitLeopardy interface stencil kit. This one makes extensive use of tables, for maximum flexibility while maintaining pixel precision.Facebook Applications Stencil KitA pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.Flex Stencil KitIncludes all Flex components from Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.Eclipse Stencil KitThis stencil enables you to easily prototype Eclipse (wizard) dialogs with OmniGraffle(TM).Massive Web UI & Button SetThis set contains UI elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the PSD file). Available are control buttons including arrows and basic symbols, info and text boxes, breadcrubs, buttons, and other navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.Yahoo! Design Stencils – Design Pattern LibraryYou would be hard pressed to find a better wireframing resource than this one. The Yahoo! Design Stencil Kit is available for almost every application: OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG) and Adobe Photoshop. This huge library covers the following elements (basically, everything): ad units, calendars, carousels, charts and tables, UI controls, form elements, grids, menus and buttons, mobile (general), mobile (iPhone), navigation and pagination, OS elements, placeholder text, screen resolutions, tabs, windows and containers.Free Sketching & Wireframing KitThe Sketching & Wireframing Kit is a free set of elements for sketching and wireframing. It consists of form elements, icons, indicators, feedback messages, tool tips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG, which can be easily modified. It can also be downloaded in PDF and EPS formats.EightShapes UnifyEightShapes Unify is a collection of templates, libraries and other assets that enable user experience designers to create more consistent and effective deliverables faster. The system uses the Adobe Creative Suite of products; Adobe InDesign is the primary authoring tool.Wireframe SymbolsThis download contains a wireframe symbol library and a full Adobe Illustrator file with all of the elements spread out on a board. To install the library just drag and drop the file named Wireframe Symbols.ai into your Adobe Illustrator “Symbols” directory. Once you open Illustrator, go to your Symbols Palette and load the library.OmniGraffle Wireframe StencilsThis is a set of shapes for making wireframes in OmniGraffle version 5.x (Mac OS X).OmniGraffle UX TemplateThis is an OmniGraffle Pro template for interface design that includes shared layers for basic UX document needs; e.g. title page, wireframes, storyboards.Web Page ElementsUsing the open-source “Bitstream Vera” font set and free icons from FamFamFam, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.Web Browser TemplatesPhotoshop Browser Templates – Web Designer ToolkitThese Photoshop browser templates come in 1024×768 and 800×600 pixel sizes and cover nearly all browsers (Firefox, IE, Safari, Camino, even Netscape). For both sizes, the safe viewing area is clearly marked in a separate layer.Browser Templates for the WebsiteThese Photoshop browser templates for Internet Explorer, Firefox for Mac and Firefox for Windows have been mocked up in the following sizes: 800×600, 1024×768 and 1280×1024 pixels.Photoshop Browser TemplatesThis layered PSD file contains three different browser resolutions; all with easily editable titles, address bars, scroll bars and favicons. Just open the PSD and place the layers on top of the design that you are working on, and voila!Browser Screens and Website ElementsA useful set of vector website assets.Web-Safe Area Templates for PhotoshopAll of the Web-safe area browser PSD templates listed below can be individually downloaded by choosing from the following resolutions: 640×480, 800×600, 1024×768, 1280×960 and 1600×1200 pixels.Windows Vista IE Web-Safe AreaWindows Vista Firefox Web-Safe AreaWindows XP IE Web-Safe AreaMac OS X Safari Web-Safe AreaMac OS X Firefox Web-Safe AreaMac OS X Safari Web-Safe AreaWeb Form ElementsBest Practice UX Forms StencilThis is a comprehensive release of the stencil kit which follows best practices in UX form design. It provides three different ways of laying forms out, each with their own benefits. This version also provides different button layouts, a progress indicator, captcha code input field, labels and more.Photoshop Form Element TemplatesThese Photoshop files include screenshots of all the common form elements as displayed in your selected operating system (Mac Classic, Mac OS X, Win XP and Win Classic). The form elements are separated into individual layers so that you can easily select, adjust or switch them as you please.Browser Form Elements PSDIncluded in this PSD file are form elements for Mac Firefox 3 and another for Vista IE7.Web Form Elements Volume 1Volume 1 contains a selection of Web user interace elements for forms in Photoshop format.Web Form Elements Vol.2This is Volume 2 of the Web Form UI Elements mentioned above and has been designed in a different style.Photoshop Button TemplatesThese Photoshop button templates have been separated into individual layers to be easily selectable. You can choose from the following colors: dark blue, light blue, dark green, light green, yellow, orange, red and purple.Web Browser ElementsYou can select the element you need from whichever operating system and browser you use, and download them individually.Windows Vista IE Form ElementsWindows Vista Firefox Form ElementsWindows XP IE Form ElementsWindows XP Firefox Form ElementsMac OS X Firefox Form ElementsMac OS X Safari Form ElementsGrid Templates960px Photoshop Grid TemplateThis template has a guide for a three-column 20-pixel gutter design, with layers of washed-out colors to visualize both columns for the purpose of the rule of thirds. Additionally, it is broken down into six columns of 20-pixel gutters.960 Grid Template for OmniGraffleIllustrator Template for Blueprint CSS CompsThis Adobe Illustrator document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.Photoshop Template for Blueprint CSS CompsThis Photoshop document features a 24-column grid for CSS frameworks such as Blueprint. It consists of guides that comply with Blueprint’s grid of 24 columns of 30 pixels, 10-pixel-wide gutters and a horizontal width of 950 pixels. Horizontal guides are provided at 18 pixels or a 1.5 em line-height for a 12-pixel base font.Mobile App Development ResourcesiPad GUI PSDThe PSD was constructed using vectors, so it’s fully editable and scalable. You’ll notice there are a few new UI elements as compared to the iPhone interface. The workable screen design is formatted to 768×1024 so anything you design in the Photoshop file can easily be brought over to the SDK.Ultimate iPhone Stencil – GraffletopiaThis Omnigraffe iPhone stencil kit contains backgrounds, title bars, buttons, selectors and all other iPhone UI elements. It can be easily resized horizontally by ungrouping, resizing the middle element and then regrouping the elements back into a single button.iPhone 3G StencilIncludes standard interface components for the iPhone 3G: buttons, fields, map elements, keyboards, icons. All components are on a transparent background and should re-size nicely.iPhone GUI PSD 3.0With Apple’s official release of the new iPhone 3.0 came a number of new GUI elements. Some of the changes and additions have been include in this GUI: map and map elements including curl, copy and paste elements; timeline bar editor; and horizontal iPhone and horizontal panel bars and keyboards.iPhone PSD Vector KitThis iPhone starter kit comes with several button elements as well as six different iPhone interface options.iPhone GUI ElementsFree iPhone elements available as layered Photoshop (PSD) files.iPhone GUI as Rich Symbols for FireworksThis iPhone kit has been designed using Adobe Fireworks. It has several combinations, buttons, backgrounds, etc. It also has some lines of code to transform the simple vector symbols into rich symbols, with some variables.Google Android GUI Application Mockup PSDThis Photoshop file contains all of the basic elements of Android 1.5, Google’s mobile operating system.Palm Pre GUI PSDThis Palm Pre GUI PSD has been built with vectors for easy editing and scaling, and it contains most of the Pre’s GUI elements.RIM Blackberry PSDThis download package contains 135 detailed layers for Blackberry app development.Optional Wireframe ExtrasInteractive Sketch NotationThe general idea behind this notation is the desire to visualize user interface states as well as user actions in a clear and rapid manner.Storyboard Characters (via Google Chrome)Proofreading MarksStandard Web BannersYou can download these standard Web banners or ads individually (468×60 pixels, 768×60, 125×125, etc.). There are also templates for common but non-standard banner sizes (120×30, 230×33, 728×210, etc.).Wireframe Icons, Royalty-Free EPS and PNGThe icon set includes EPS and PNG versions of the original Konigi Wireframe Icon Set and are suitable for use in vector drawing applications such as Adobe Illustrator as well as in Microsoft Visio.WEB UI Treasure ChestThis PSD layered file, most of whose files are fully editable, contains more than 100 elements for website design.Webdesigner kitThis Photoshop download contains registration fields, menus, checkboxes, radio buttons and cursors.Printable Sketching PaperA4 and A3 Sketching Grid PaperThis downloadable and printable 960-pixel-wide grid makes it easy to create a three-column (320 pixel), four-column (240 pixel), five-0column (192 pixel) or six-column (160 pixel) grid on a single sheet of paper. You have two sizes to choose from, A4 and A3.Print and Sketch Wireframe TemplateiPhone Application Sketch TemplateThe grid squares for this sketching paper are equal to 10 pixels. The tick marks indicate the height of the status bar, nav bar, keyboard, tab bar and toolbar. For best results, print on A4 borderless paper.iPhone Wireframe Templates for SketchingTwo layouts are available, both in PDF and Visio (VSD) formats for quick iPhone mockups.iPhone App Wireframe TemplateTwo versions are available, one in landscape and the other in portrait. Each version includes three pages: page 1 has a vertical screen and notes column; page 2 has a horizontal screen and notes column; page 3 has a three-screen layout that is great for drafting designs.Printable Wireframe and NotesThe below 8.5 x 11-inch graph paper is made for visual designers, interaction designers and information architects. You’ll find styles for wireframing user interfaces, storyboarding interaction and plotting values on a 2×2 grid. Plus, you’ll get a basic grid for drafting site maps or anything else that comes up. Choose from the following:Wireframe with NotesThis wireframe grid is divided into 24 columns, with gutters between each column. The grid is especially useful for designers who work within a CSS framework such as Blueprint.Wireframe (Landscape)Wireframe (Portrait)StoryboardThis is a storyboard with four cells. Each cell contains a simple grid.Storyboard with NotesThis is a storyboard with four cells. Each cell contains a simple grid. The area beneath each cell is ruled for notes.Basic PaperThis is a basic grid box. Use it for concept diagrams, site maps, spectrums, tables and whatever else you sketch.Wireframe Magnets (DIY Kit)These DIY magnet template are based on the Konigi wireframe stencils and includes three sheets of elements that would be useful for whiteboard prototyping. Simply download and print the PDFs onto magnet sheets, and cut them out.Form ElementsTabs, Buttons and BarsWindows and DialogsFurther Resources And Some Wireframing Inspirationweb.without.wordsA visual playground where designers take popular sites and reconstruct them in a wireframe.GraffletopiaGraffletopia is a huge resource of free stencils for OmniGraffle (Mac-only, sadly). With OmniGraffle, you can quickly create high-quality wireframes, flowcharts and other diagrams.Mockups To GoMockups To Go is a user-contributed collection of ready-to-use UI components and design patterns that were built using Balsamiq Mockups. You can download all of the components and design patterns to use in your mockups.Wireframes MagazineWireframes Magazine is dedicated to all things wireframing and prototyping. It has a huge library of downloadable templates, samples and UI tools, and even a section for inspiration.I {heart} wireframesI {heart} wireframes is a great source of wireframing inspiration and resources. And yes, we all love wireframes!Further Related Articles35 Excellent Wireframing ResourcesMore than 35 resources for creating better wireframes, including tutorials on different methods and a variety of tools available.Sketchy Wireframes: When you can’t (or shouldn’t) draw a straight lineA nice article about computer-based sketchy wireframes that allow wireframes to look more like quick, hand-drawn sketches while retaining the reusability and polish that we expect from digital artitfacts.16 Design Tools for Prototyping and WireframingAbout the AuthorPaul Andrew is a freelance Web designer. He is chief admin for Speckyboy – Design Magazine, a Web design, Web development and graphic-design resource blog. Follow him on Twitter here: twitter.com/speckyboy.(al)© Paul Andrew for Smashing Magazine, 2010. | Permalink | 69 comments | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: applications, wireframing

  

  • Tags:
  • design
  • workflow
  • applications
  • wireframing

  February 5 2010, 6:04am | Comments »

• I posted to designmeltdown.com

  More merry mascots

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/kBMMdjEX92o/

  There are countless mascots in use on the web, I am disapointed in myself for never picking up on this and making my own collection. Oh well. Here is another fine set to show off the style. (As you noticed I am kind of predictable and juvenile in that I was drawn to the ninja ones) http://blog.creativityden.com/awesome-website-mascots/

  

  • Tags:
  • Mascots

  February 5 2010, 6:00am | Comments »

• I posted to designmeltdown.com

  Floral typography

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/sM2k9gZJTPI/

  While not web focused, I can’t help but share sets like this. I love typography, and illustrative type is some of the most amazing stuff. This set of samples is all done in a floral style. http://vandelaydesign.com/blog/design/showcase-of-floral-typography/

  

  • Tags:
  • typography

  February 4 2010, 10:00am | Comments »

• I posted to smashingmagazine.com

  The Art And Science Of The Email Signature

  http://feedproxy.google.com/~r/SmashingMagazine/~3/3v5LqPdTk5g/

    Email signatures are so easy to do well, that it’s really a shame how often they’re done poorly. Many people want their signature to reflect their personality, provide pertinent information and more, but they can easily go overboard. Why are email signatures important? They may be boring and the last item on your list of things to get right, but they affect the tone of every email you write.Email signatures contain alternative contact details, pertinent job titles and company names, which help the recipient get in touch when emails are not responded to. Sometimes, they give the recipient an idea of who wrote the email in case it has been a while since they have been in touch. They are also professional: like a letterhead, they show that you run a business (in some countries, you’re required to do so). Here are some tips on how to create a tasteful signature that works.[Offtopic: By the way, did you know that Smashing Magazine has a mobile version? Try it out if you have an iPhone, Blackberry or another capable device.]Be ConciseFirst and foremost, the sender’s header (the “From” field) should have a name, and you should use a company email address if you can. If someone sees stevies747@hotmail.com, they’ll suspect it’s spam. If the sender’s header reads, “Steve Stevenson – Mister Stevenson Design Company” <steve@misterstevenson.com>, they’ll know it’s a professional email from Steve, their trusted designer.Start by making your website a link. Many email clients convert email addresses and websites into links automatically, but not always. When you’re creating the HTML for an email, make sure the link will appear by adding writing it in HTML. And instead of linking text like “My website,” type out the URL, which will be useful for those who want to copy and paste the address.An email signature shouldn’t double the email’s length, so make it as short as possible (three lines is usually enough). Don’t get into your life story here. The purpose of a signature is to let them see who you are and how to get in touch with you.Make Sure to Include…Your name,Your company and position,How to get in touch with you.No need to include 10 different ways to get in touch with you. As in website design, less is more; and then they’ll know which way you prefer to be contacted. Go to two or three lines, with a maximum of 72 character per line (many email applications have a maximum width of 80 characters, so limit the length to avoid unsightly wrapping). An optional fourth line could be your company address, but use caution if you work from home.-- Steve Stevenson, Web Designer http://www.misterstevenson.com | steve@misterstevenson.comShort and Concise, but Check the RulesIn some European countries, laws dictate what items you must put in your email signature if you are a registered company. For example, UK law requires private and public limited companies to include the following:Company number,Address of registration,VAT number, if there is one.You can be fined for not including this information on all electronic correspondence and on your website and stationary. Many freelancers and small businesses have ignored these rules since their inception, risking a fine. For more information on UK rules, go here. Do some research to find out what rules apply in your country.-- Steve Stevenson, Web Designer http://www.misterstevenson.com | steve@misterstevenson.com 55 Main Street, London, UK, EC2A 1RE Company number: 12345678Don’t Include…Personal Twitter, IM or Skype details;Your home phone number or address (unless you want to be called by international clients early in the early);The URL of your personal website;Random quotes at the bottom;Your entire skill set, CV and lifetime achievements in point form.Random quotes are fun for friends, but you risk offending business associates with whom you don’t have a personal relationship. Unless you want clients contacting you while you’re watching Lost, don’t share your home details far and wide. Also, don’t share your personal contact information with your corporate partners. They certainly won’t be interested in it, and you may not want them to know certain details about you. However, mentioning your corporate Twitter account or alternative means of contact in your signature might be useful, in case your correspondent is not able to get in touch with you by regular email.Steve Stevenson, Web Designer web: http://www.misterstevenson.com blog: blogspot.celebritiesneedhelp.com email: steve@misterstevenson.comhome: 613.555.2654 home (wife): 613.555.3369 work: 613.555.9876 cell: 613.555.123455 Drury Lane Apartment 22 Ottawa, Ontario Canada twitter: @stevie_liverpool_fan skype: stevie_the_man messenger: stevie_mrstevenson I specialize in: Web design Graphic design Logo design Front-end development UI design “Flying may not be all plain sailing, but the fun of it is worth the price.” -Amelia Aerheart Don’t do this.Images And LogosLet’s get this out of the way now: your entire signature shouldn’t be an image. Sure, it will look exactly how you want, but it is completely impractical. Not only does an image increase the email’s file size, but it will likely be blocked before being opened. And how does someone copy information from an image?This signature is too big at 20 KB and impossible to copy.Any images should be used with care and attention. If you do use one, make it small in both dimensions and size, and make it fit in aesthetically with the rest of the signature. 50 x 50 pixels should be plenty big for any logo. If you want to be taken seriously as a business person, do not make it an animated picture, dancing dog or shooting rainbow!Most email clients store images as attachments or block them by default. So, if you present your signature as an image, your correspondents will have a hard time guessing when you’ve sent a genuine attachment.The best way to include an image is to host it on a server somewhere and then use the absolute URL to insert the logo. For example, upload the logo to http://www.example.com/uploads/logo.gif. And then, in your email signature’s HTML, insert the image like so:<img src="http://www.example.com/uploads/logo.gif" width="300" height="250" alt="example's logo" />Don’t Be A Fancy PantsUse vCards With CautionWhile vCards are a great, convenient way to share contact information, in emails they add bytes and appear as attachments. It is often said that you shouldn’t use a vCard for your email signature, because as helpful as it might be the first time you correspond with someone, receiving it every time after that gets annoying. Besides, the average email user won’t know what it is. Look at the example below. Would an average user know what that is?--- Steve Stevenson, Web Designer http://www.misterstevenson.com | steve@misterstevenson.com

  If you do want to provide a vCard, just include a link to a remote copy.What About Confidentiality Clauses?If your emails include confidential information, you may need to include a non-disclosure agreement to prevent information leaks. However, good practice is never to send sensitive information as plain text in emails because the information could be extracted by third parties or forwarded by recipients to other people. Thus, including a non-disclosure agreement doesn’t make much sense if you do not send sensitive information anyway.Keep in mind, too, that the longer a confidentiality clause is, the more unlikely someone will actually read it. Again, check your country’s privacy laws. Some big companies require a disclosure with every email, but if you’re at a small company or are a freelancer and don’t really require it, then don’t put it in. The length of such clauses can be annoying, especially in short emails.--- Warm Regards & Stay Creative!

  Aidan Huang (Editor)

  Onextrapixel Showcasing Web Treats Without Hitch web . http://www.onextrapixel.com

  twi . http://twitter.com/onextrapixel

  This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the sender. This message contains confidential information and is intended only for the individual named. If you are not the named addressee you should not disseminate, distribute or copy this email. Please notify the sender immediately by email if you have received this email by mistake and delete this email from your system. If you are not the intended recipient you are notified that disclosing, copying, distributing or taking any action in reliance on the contents of this information is strictly prohibited.-- This email and any files transmitted with it are confidential. If you have received this email in error please notify the sender and then delete it immediately. Please note that any views or opinions presented in this email are solely those of the author and do not necessarily represent those of Company.

  The recipient should check this email and any attachments for the presence of viruses. Company accepts no liability for any damage caused by any virus transmitted by this email.

  Company may regularly and randomly monitor outgoing and incoming emails (including the content of them) and other telecommunications on its email and telecommunications systems. By replying to this email you give your consent to such monitoring.

  ---

  Save resources: think before you print.Don’t Be Afraid to Show Some PersonalityAlthough your email signature should be concise and memorable, it doesn’t have to be boring. Feel free to make your email signature stand out by polishing it with your creative design ideas or your personal touch. Using a warm greeting, adding a cheeky key as Dan Rubin does or encouraging people to “stalk” you as Paddy Donnelly does, all show personality behind simple text.The key to a simple, memorable and beautiful email signature lies in balancing personal data and your contact details. In fact, some designers have quite original email signatures; most of the time, simple ASCII is enough.-- h: http://danielrubin.org w: http://sidebarcreative.com b: http://superfluousbanter.org

  m: +1 234 567 8901 i: superfluouschat

  k: h = home, w = work, b = blog, m = mobile, i = aim, k = keyPaddy

  --

  The Site: http://iampaddy.com Stalk Me: http://twitter.com/paddydonnelly--

  With optimism, Dmitry Belitsky http://belitsky.info/////////////////////////////////////////////////////////////////// /// Matthias Kretschmann /// krema@xxxxxxxx.xx /// /// freelance designer & /// http://www.kremalicious.com /// /// photographer /// http://www.matthiaskretschmann.com /// /////////////////////////////////////////////////////////////////// /// media studies / communication science & art history /// /// MLU Halle-Wittenberg /// ///////////////////////////////////////////////////////////////////-- With greetings from Freiburg, Germany,

  Vitaly Friedman (editor-in-chief)

  Smashing Magazine http://www.smashingmagazine.com - http://www.twitter.com/smashingmag online magazine for designers and developersHTML?If you can, stay away from HTML formatting. Every Web designer knows the pain of HTML newsletters, and while HTML is supported for email signatures, you’ll likely have problems with images and divider lines in different email clients. Some nice ASCII formatting may work in some cases.-- carole guevin . editor //// design + digital culture magazine //// http://netdiver.net-- Adelle Charles // Designer // fuelyourcreativity.com // RSS Feed // Twitter-- Min, Tran Dinh Chief Creative Designer - Frexy Studio

  Website: http://frexy.com | Blog: http://min.frexy.com | Email: info@frexy.com Cellphone: (84) 012 345 678- -- Rene Schmidt -- Berater für Web-Entwicklung & eCommerce, Linux-Webserver-Systemadministration & Web-Programmierung Vordamm 46, 21640 Horneburg; http://www.reneschmidt.de/ Tel: 0123.456.7.890; Skype: reneATreneschmidt.de Steuernummer 43/141/09180; USt-IdNr 219014862 -----BEGIN PGP SIGNATURE----- Version: GnuPG v1.4.9 (MingW32) Comment: Using GnuPG with Mozilla - http://enigmail.mozdev.org/

  iEYEARECAAYFAktit8sACgkQucSanG9drm2ZYACggIeQST/C226LIsd/czEmrnrR TjUAniVPXI2lkA68fy3n+nUawdAE1nJ/ =+vZR -----END PGP SIGNATURE-------- Geoff Teehan Teehan+Lax Web Platforms | Digital Campaigns | Mobile Applications | Strategic Consulting

  T: 416 123 4567 x 890 | teehanlax.com | twitter.com/@teehanlax---------------------------------------- Dmitry Dragilev

  ZURB | Marketing Lead getstarted@zurb.com

  http://www.zurb.com

  Follow our blog at: http://www.zurb.com/blog

  Follow us on Twitter: @zurb http://twitter.com/zurb

  Check out Notable - Easiest way for teams to provide feedback on websites. http://www.notableapp.com ------------------------------------------______________________________________________

  Website: http://www.webdesignerdepot.com Twitter: http://www.twitter.com/DesignerDepotRegards,

  Matt Ward Echo Enduring Media

  Web - http://www.echoenduring.com Blog - http://blog.echoenduring.com Twitter - @echoenduring - Follow me!-- Dan Rubin Sidebar Creative { Director of Training & User Experience }

  mobile: +1 234 567 8901 http://sidebarcreative.com-- David Leggett Tutorial9 Founder 555.012.34567 @theleggett Tutorial9.netGareth Hardy Graphic Designer | Down With Design

  http://www.downwithdesign.com gareth@downwithdesign.com +44 (0) 0123 456 789Grant Friedman http://www.colorburned.com

  Follow me on Twitter! http://twitter.com/colorburned ----------------------------------------Many thanks, Yaili.

  yaili.com | webdesignernotebook.com | londonchronicles.com +44 (0) 1234 567890 skype: inayailiThanks! Jonathan Cutrell, Editor FuelYourInterface.com | @FuelInterface | @jCutrell-- All the best,

  Rob Bowen Copywriter | Designer | Creative Consultant

  Co-Founder/Editor @ Arbenting & Dead Wings Designs

  http://arbent.net/blog http://deadwingsdesigns.comArseny

  --

  Please consider the environment before printing this email.

  Arseny Vesnin http://designcollector.net Calendar: http://2010.designcollector.net Profile: http://designhub.ru Twitter: http://twitter.com/designcollector Flickr: http://www.flickr.com/groups/designcollector-6 Vimeo: http://vimeo.com/channels/designcollector Facebook: http://www.facebook.com/designcollectorWarm regards,

  Dipti Kankaliya { dipti.kankaliya@studiomarch.com }

  Studio March Private Limited 12 Moledina Road Camp Pune 1 India Phone: +91-20-26334002 { http://www.studiomarch.com }

  MarchCast – The Studio March blog

  { http://www.studiomarch.com/mc }

  This is an official email from Studio March Private Limited and is protected by a disclaimer. If you are not the intended recipient of this email, please

  visit: http://www.studiomarch.com/legal/email.Of course, if you’re really keen to use HTML, keep it simple:Make sure it still looks good in plain text.Use black and standard-sized fonts, and stay away from big, tiny and rainbow-colored fonts.Don’t use CSS. Inline HTML formatting is universally accepted.Use common Web fonts.Including a logo? Make sure the signature looks nice even when the logo doesn’t load or is blocked.Check how it looks when forwarded. Do all the lines wrap correctly?You may want to load your company image as your gravatar from Gravatar.com as Joost de Valk does.Feel free to experiemnt with your e-mail signature: Jan Diblík uses a signature with dynamicaly changed promo image.–Steve Stevenson, Web Designer http://www.misterstevenson.com | steve@misterstevenson.com           Separate Signature From ContentYour signature should clearly be a separate entity. Wikipedia explains the correct way to separate the signature:“The formatting of the sig block is prescribed somewhat more firmly: it should be displayed as plain text in a fixed-width font (no HTML, images, or other rich text), and must be delimited from the body of the message by a single line consisting of exactly two hyphens, followed by a space, followed by the end of line (i.e., “– \n”). This … allows software to automatically mark or remove the sig block as the receiver desires.”There are other less standard ways to separate your signature. While not automatic formatting, a line of —–, ======, or _______ or even just a few spaces will visually separate your signature from your email.--

  Dan Oliver (editor)

  .net magazine (www.netmag.co.uk)

  Twitter: danoliver Email: dan.oliver@futurenet.com

  Phone: 01234 56789

  Address for deliveries: .net, Units 1 & 2 Cottrell Court, Monmouth Place, Bath, BA1 2NP

  ---

  Elliot Jay Stocks Elliot Jay Stocks Design Ltd. Registered in England & Wales #1234567

  http://elliotjaystocks.com

  • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • -###

  Cheers, -Dan Vennlig hilsen Lars Bæk Byråleder & Tekstforfatter ................................................... JØSS! Storgata 15, 2408 Elverum Mob (+47) 01 23 45 67 xxxx@joss.as | http://www.joss.as---------------------------------------------- Information Architects Inc. Tokyo Zurich

  Oliver Reichenstein, Founder

  http://informationarchitects.jp http://webtrendmap.com http://twitter.com/iA ----------------------------------------------Wrestling With Your Email ClientOffering general advice on signatures is easy, sure. But anyone who has tried to implement automatic signatures in Outlook, Gmail or Yahoo knows it’s not always that simple. Here are some resources to help you get yours right every time.Outlook Changing Outlook’s signature is a real pain, but here’s a guide that teaches you a few things. If you use Outlook 2003, here’s another tutorial on custom signatures.Gmail Want just one basic signature? Here’s how to change the text. You’d think Google would allow you multiple signatures, links and a bit of formatting. If you’re looking for something a little more designed or wish to choose between multiple signatures, here are five ways to do it in Firefox.Hotmail Tips on custom images and more for Hotmail (Oh my!) can be found here. If you use Windows Live, here is a tutorial on adding images and HTML. The detail is helpful, even if the images are awful.Yahoo After a bit of research, I found that Yahoo used to support HTML signatures, but no longer. Here’s how to change your signature using rich text.Apple Mail Here is a pretty decent tutorial, with some inline HTML for formatting. It then explains how to implement it in the application. You even get some hints on how it will look on the iPhone.Palm Pre Learn how to customize your message on your Palm Pre here.iPhone Customize your “Sent from my iPhone” message here.BlackBerry Some information on how to change your message on BlackBerry smartphones here.ResourcesThe 4 Personalities of Poor Email Signatures20 Tips for Creating an Effective Email SignatureAbout the Signature Block on WikipediaEmail Signature EtiquetteRelated PostsYou may be interested in the following related posts:How To Create A Great Web Design CV and Résumé?Business Card Design: Better Than A Plain Ol’ Business CardInvoice Like A Pro: Examples and Best Practices(al)© Kat Neville for Smashing Magazine, 2010. | Permalink | Be the first to comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine Post tags: email, signatures

  

  • Tags:
  • design
  • email
  • signatures

  February 4 2010, 6:33am | Comments »

• I posted to designmeltdown.com

  Shiny business cards

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/bst71S0SRTo/

  I must have some sort of business card fetish because I am really glad to be able to link to articles like this. I actually have a card collection of every business card I have ever had. When I get a new job I am more excited about adding to it then anything! How ironic is that. This cool set of cards all make use of spot varnishes. http://bestdesignoptions.com/?p=10020

  

  • Tags:
  • Business Cards

  February 4 2010, 6:00am | Comments »

• I posted to designmeltdown.com

  Atypical navigation

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/v3iSXM3XIg0/

  Now here is a topic that always brings out the conflict in us. Atypical navigation is a hot button, and for good reason. This is a style that must be approach with caution. http://blog.creativityden.com/web-designs-with-exceptional-navigation/

  

  • Tags:
  • Atypical navigation

  February 3 2010, 4:00pm | Comments »

• I posted to designmeltdown.com

  Yet even more footers

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/4KwUO1qCW1U/

  Perhaps not the most exciting topic to review, but footers are a critical element of a layout. Here are 50 more samples to dig into. http://www.themeflash.com/50-excellent-footer-design-inspiration/

  

  • Tags:
  • Footers

  February 3 2010, 12:48pm | Comments »

• I posted to designmeltdown.com

  Sketch artist wanted

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/cXixLoFSxKQ/

  The sketchy style is another staple of web design. The reason is obvious, there are lots of artist who can easily draw loads of assets. At times the topic just matches this style perfectly! http://richworks.in/2010/02/25-beautiful-examples-of-hand-drawn-elements-in-web-design/

  

  • Tags:
  • Sketchy

  February 3 2010, 12:47pm | Comments »

• I posted to designmeltdown.com

  Old paper based designs

  http://feedproxy.google.com/~r/designmeltdown/uecD/~3/_ij5HPWr-2o/

  I have always enjoyed the usage of old paper textures in web design, and it seems to be a fairly popular approach. I belive designers often gravitate to it as it allows them to mix in hands on mediums they are very comfortable with. Many of the examples in this case leverage the collage style as well so I have included this link out in that category as well. http://www.webbyfreebies.com/graphics/paper-textures-in-modern-web-design-examples-and-resources/

  

  • Tags:
  • Collage
  • Old paper

  February 3 2010, 10:55am | Comments »

‹ 1... 4 5 6 7 8 9 10 11 12 13 ...47 ›

Popular Tags

• inspiration
• design
• downloads
• Freebies
• Graphics
• free
• Developers Toolbox
• How-To
• Design Showcase
• wordpress
• photography
• icons
• coding
• CSS
• photoshop
• Events
• wallpapers
• showcases
• Tutorials
• workflow
• tools
• useful
• smashing
• typography
• techniques
• best of
• usability
• Fonts
• Best of the Month
• e-commerce
• CMS
• trends
• retro
• javascript
• portfolios
• templates
• Forms
• movies
• php
• vector
• applications
• navigation
• brushes
• illustrator
• vectors
• Business Cards
• ui
• hacks
• creative
• themes

Search