4.18.2009

14 Essential Web Design/Development Tools

The Must-Have Resources

  1. HTML Ipsum. Serves as an advanced website for latin filler text. Provides entire pages of text, various sized paragraphs, sentences, unordered/ordered lists and even navigation.The Webutante - HTMLipsum - A Graphic Design Web Design & Web Development Resource Blog
  2. Adobe Kuler. A vast collection of color schemes with search and rating capabilities. The Webutante - Adobe Kuler - A Graphic Design Web Design & Web Development Resource Blog
  3. BG Patterns. A comprehensive and handy background creator that allows you to modify sizes, colors, patterns and more.
  4. MultiBox. In my opinion, one of the most functional variations of the lightbox. Can display multiple file types and has great transitions and customizability. Freebie from PhatFusion.
  5. Flash Gallery. Probably the simplest gallery feature I have discovered thus far. Allows you to create a slideshow on your website easy and fast from a specified folder or from Flickr photostream. Best Part? It's Free.
  6. PicMarkr. Free tool that allows you to add custom watermark (image or text) to your online images. The Webutante - Pic Markr Image - A Graphic Design Web Design & Web Development Resource Blog
  7. CSS Curved corners. CSS manipulated to provide bullet proof rounded corners, a great way to speed up loading on a website.
  8. Web Developer Firefox Add-On. The most vast system for web developers I have seen thus far. Allows numerous capabilities, including manipulating CSS and CSS Viewing, disabling specific site features and TONS more. The Webutante - Web Developer Toolbar image - A Graphic Design Web Design & Web Development Resource Blog
  9. WuFoo. Free (for the limited version) Form builder application with numerous options for displays and themes, and even the capability to edit the CSS.
  10. Upload Thingy. A file-upload feature that allows for large files to be uploaded on your website. Reasonable pricing, and fairly easy to do. The Webutante - Upload Thingy Image - A Graphic Design Web Design & Web Development Resource Blog
  11. Cushy CMS. An incredibly useful and surprisingly easy CMS system. One of the few free CMS providers.
  12. Browser Testing - IE Net Renderer. A convenient method for testing websites in the Internet Explorer browser, encompassing IE5.5 all the way through IE8. There is no charge for the service and your screenshot shows up fairly rapidly.The Webutante - IE Net Renderer Image - A Graphic Design Web Design & Web Development Resource Blog
  13. Google Analytics. Provides an incredible amount of tools for evaluating your traffic, common visiters, locations, etc. All aspects of SEO are covered.
  14. W3C Validator. Checks your website for alignment with HTML and/or CSS Standards. While it is not always a necessity to maintain 100% compliance, it tends to be important to know the issues that are causing non-compliance which can sometimes be detrimental.The Webutante - W3C Validator Image - A Graphic Design Web Design & Web Development Resource Blog

For more web tools be sure to check out these previous posts:

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

3.10.2009

The Latest Design/Developer Resource Collection

March's First Collection of Faves

This week's resources are focused primarily on (although not strictly limited to) web developers and web designers. I decided to go this route due to the struggles I have been facing with some of my latest projects. I wanted to emphasize the details entailed in designing and structuring a website because of the struggle I, myself, have had in the past week working on just that - the details. When I say details, I am referring to icons, typography and layout structure...those little irritating features that can either make the website what it is, or if handled incorrectly, take away from what it is supposed to be. If you have any suggestions or anything you would like to add, please feel free to let me know.

ICON RESOURCES

  • iconPot is an awesome icon resource bank featuring a wide range of icons for web development projects. What I like about iconPot is its no limitations policy - all icons listed are free for BOTH commercial and personal projects without the obligation to provide back-links and/or credit to the author.
  • Always offering impressive resources and helpful file collections, Noupe does it again with their recent collection of the 50 Most Beautiful Icon Sets Created in 2008. What I liked most about this collection? The pragmatic utility of each set. There is sure to be something of use to everyone in this compilation.

NAVIGATION & BUTTONS

  • Da Button Factory is a fun website that allows anyone to make shiny, web 2.0 style buttons online with the click of a button.
  • Smashing Magazine is always coming up with new tips and tricks for their tech-obsessed readers, but with their latest collection of Navigation Menus: Trends and Examples they seem to have outdone themselves. This article is both useful and surprisingly inspirational with their Web 2.0 navigation suggestions for a vast range of websites.

TYPOGRAPHY

  • The Web Designer Depot examines 5 Simple Ways to Improve Web Typography in a recent article. Featuring very useful suggestions for accomplishing better legibility, this article is straightforward and to the point, and useful to anyone who even occasionally struggles with the art of typography.
  • For a great typeface reference guide, be sure to check out the Periodic Table of Typefaces created by the Behance Network. As a ranking system for the 100 most popular, influential and notorious typefaces today, this periodic table is a great tool to reference when deciding on the proper typeface for use in any design.

"NEATNESS" FEATURES

  • James Padolsey familiarizes his audience with the JQuery Auto-Resize capability that adds a touch of class to just about any form. Try it out for yourself to test out the coolness factor.
  • DesignM.ag never fails to offer useful tutorials and tips, and their latest jQuery feature, Easy Display Switch with CSS and jQuery proves to be another of my DesignM.ag faves. This feature doesn't just add to the 'neatness' factor of a website, but also adds an excellent form of customization that many people will appreciate.

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

3.09.2009

The Designer's Dilemma

Redesigning the Stop Sign

This video is absolutely great for any designer who has ever dealt with a demanding client who thinks they know what they need, but really has no idea. This one will bring the LOL's!

I thought that was a pretty funny. I have a great follow up video coming soon so be sure to check it out!

Labels: , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.21.2009

Latest Design/Development Resources

Top Notch Picks for Quality Production

I have been severely slacking on my posts this week, so in order to make it up to my readers, I opted to scan for some new excellent resources on the web. This time I will be breaking it up into 3 categories: 1.) Web Development; 2.) Design Oriented; 3.) Inspiration/Humor. Enjoy.

Category 1: Web Development.

  1. The curious blog, Noupe, featured an incredibly resourceful article recently entitled 40+ Useful & Handy Web Designer's Web Services & Tools. I found a few things in there I have used recently as well as a couple of items both designers and developers can use (I loved #2, Wordle, and I found #19 really useful for businesses and freelancers).
  2. Compiling browser safe resources can be quite an un-fun task, but, no need to worry, DesignM.ag has done it for you in their latest article 10 Helpful Resources for Cross Browser Testing. The free tools, like IE NetRendering, are my personal faves - I don't really like to pay to please Bill Gates and his Windows Posse ;).
  3. One of my own favorite web logs, Smashing Magazine, has compiled a list of 50 Beautiful And User-Friendly Navigation Menus. Featured are CSS-based design solutions, CSS+JavaScript-based menus and Flash-designs. This is a great compilation resource for anyone who appreciates the importance of website navigation.

Category 2: Design Oriented.

  1. PSD Tuts+ posted a fun resource for Photoshop Users called 50 Insanely Weird but Awesome Photoshop Brushes. Not all of these brushes may be useful for you, but you are sure to find at least several brushes that you have been dying for. My faves are the grunge, smudges, sparkly and lace brushes.
  2. Best Photoshop Tutorials Blog posted a fun article recently compiling the The Coolest Text Effects on the planet. This collection truly does not let down; the 'Fire' effect and 'Funky' effect are both killer looks that are hard to find.
  3. Smashing magazine just can not do wrong. Case in point, their recent post The Ultimate Collection Of Useful Photoshop Actions. While some are a little cliche (the comic book look is slightly overrated), this article is a real treat for people like me who like to conserve time with Photoshop.

Category 3: Humor & Inspiration.

  1. I could not stop laughing when looking at Urlesque's collection of the Top 10 Moments Caught on Google Maps Street View... At least until I saw a kid pointing a gun at an even smaller kid!
  2. Even I have been guilty of posting one of the Top 20 Male Poses of Facebook. 2Birds1Blog did a great job with this piece.
  3. Nearly everyone has written a Passive Aggressive Note at some point in our lives. However when they are posted together on a website online, hilarity ensues.

If you found this information useful, be sure to check out some of my related posts:

Thank me later.

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 1 Comments

2.16.2009

Developing a Development Plan

The Essential Steps for Designers & Developers to evaluate projects

Often the most difficult aspects that businesses offering development and design services tend to face involves the planning stages. Because I, myself, have noticed the all too often occurrence of problems as a result of poor planning, I thought it was important to outline and discuss important planning steps for design & development projects in today's post.

  1. Step 1: Client Questionnaire. The client questionnaire is a multi-page document with in-depth questions covering all sides of the development process. This document will determine the rough scope of work and relevant information to that as well as the website budget and timeline. Aesthetics, purposes, goals, points of contact, and add-ons need to be encompassed in the client questionnaire. For assistance creating a client questionnaire, see Big Slick Design's article 46 Questions for a web design project. Also be sure to use your own personal experiences when developing a questionnaire. For example: I have encountered many people who simply did not feel capable of creating their own website or brochure content. Because of this, I included a question in my client questionnaire about whether they would be capable of creating their own content. I also gave them brief information about the fees associated with content assistance below the question so they could make an informed decision. Click on the image below to view The Design Group's client questionnaire for web development clients. The Design Group's Client Questionnaire for Web Development Projects
  2. Step 2: Brainstorming. Following the receipt of the completed client questionnaire, the onset of the brainstorming stage begins. This step involves individual brainstorming sessions. One of the most efficient ways to go about this step is to make copies of the completed client questionnaire for each person to separately read over and take notes on any questions, concerns or ideas that arise while doing so. This course of action prevents groupthink which can be detrimental to the development process.
  3. Step 3: Group Discussion. After each individual team member has gone over the questionnaire thoroughly, a group discussion should ensue. This allows for all concerns to get out in the open and tentative planning stages begin to form. No one's ideas or concerns are to be ignored or brushed off, and no one should be left out of the conversation. It is important that any foreseen issues are reconciled at this stage and all potential problems are troubleshooted. This prevents potential issues from squeezing through the cracks and prepares the team for the requirements meeting.
  4. Step 4: Requirements Meeting. The requirements meeting is a meeting where the team sits down with the client and discusses a plan of action. Each side clarifies any ongoing concerns and the design/development team begins to get more of a first-hand feel for what the client is looking for. While some discussion during the requirements meeting will come from the answers found in the client questionnaire, some discussion should be unique to develop project clarity and a common ground for the project scope.
  5. Step 5: Statement of Work (SOW). Before any actual design or development work begins, a bulletproof contract outlining the basic information about the project ought to be created. This contract should be signed by the client and kept in your files for legal purposes. The Statement of Work ought to cover the project scope, special features, basic design elements (colors, etc.), browser testing or printing specifications, schedule, hours and fees. The Statement of Work also serves as the foundational element of the Project Outline.
  6. Step 6: Sitemap. This step can be skipped in design projects that do not require any website development work. The Sitemap is simply a diagram of all website pages and a guideline for site navigation. Sitemaps can be color coded and quite detailed (which often brings the need for a key), or they can be simple representations sketched out on paper. I find that to help everyone on the development team throughout the project, a detailed sitemap is the way to go. You may review the sample sitemap below (which happens to be a sitemap I used for a client) for basic guidelines and ideas. The Design Group's sample sitemap
  7. Step 7: Design Wireframe. The project wireframe will outline the design of the project and is important for conceptual purposes in regards to both the design/development team as well as the client.The Design Group's Sample Wireframe The wireframe supplements the sitemap to create an informative bundle that allows the team and the client to visualize the website on the whole. It also brings to light those potential issues that have somehow squeezed by in the last six planning steps. This wireframe will additionally be serving as the premise for the mock-up design.
  8. Step 8: Project Outline. The project outline is based on the foundation set by the Statement of Work, but emphasizes more of the aesthetics and specific functionality of the project. It can be divided into sections, some of which ought to be included: project goals, timeline, colors, typefaces, logos, features, pages, user testing, and programming. This not only specs out this distinct areas of the project, but it also builds your SOW into a detailed project plan for the design/development team to reference.
  9. Step 9: Team Approval. Perhaps one of the most important steps in the process, the Team Approval Phase involves members of the team evaluating the sitemap, wireframe and project outline for its accuracy and documenting any issues that remain items of concern. It may seem repetitive to do this at this point, but this allows for everyone to approve all aspects of the project one final time, and identify any growing concerns before they get out of hand. This stage also presents the team with a more vivid picture of where the project is heading.
  10. Step 10: Mock-Up Design. The final preparatory stage in the design/development process involves the translation of the wireframe into a clean and accurate mock-up design. This stage is the culmination of the planning process and should accurately depict the design and functionality proposed in the last nine steps.

Labels: , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

2.07.2009

New Design & Development Resources

This Week's Top Picks

Listed below are some of the best design & Development Resources I have Discovered this Week. Check them out, and be sure to leave a comment or Contact Me if you have found any awesome resources this week that you would like to share.

  1. For all you Mac junkies out there (like me), Noupe recently posted an article called Readers Pick: 30+ Incredibly Useful Mac Apps for Web Design. With a wide variety of applications for the Mac interface, there is something for everyone in this collection even if you are not a developer or designer.
  2. The web design blogRedswish created a list of 10 SEO elements all websites should have. From the basics to the more advanced, this article will help you ensure you are covering the SEO basics with each website you develop.
  3. Vandelay Design recently posted an incredibly useful article featuring 77 Resources to simplify your life as a Web Designer. This article covers a wide-range of issues, from colors to favicons, most of which are pretty useful for web developers.
  4. You've got to love CSS Trick's awesome tutorial about Setting Font Size Based on Word Count. It may not be a feature you want to use for every website, but it is a great tool to use in some instances, and it is a pretty cool typography effect.
  5. Sebastian de With hearts making icons and interfaces. So his latest project, the Icon Designer definitely is fitting for Sebastian. His beautiful and clean website design is only amplified by the tools it provides to developers and designers all over.
  6. Smashing Magazine makes this weeks cut for design resources with their resource-filled article 100 Beautiful Free Textures. Nearly everyone needs random textures from time to time, and this inventory will come in handy for those people time and time again.
  7. Along the same lines as the previous resource, Dzine Blog shares another group of useful resources, this time in the form of Photoshop files, in their article 30+ Free Quality PSD Files to Download. Featuring tech resources, design templates and more, this article is equipped with an awesome selection of Photoshop files that many people (such as myself) have found themselves in need of in the past.

I hope you find these websites and articles both beneficial and useful. If you feel like I am leaving any out feel free to share with a comment. Be sure to check back again soon for more for resources!

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments

1.24.2009

Development/Design Resources

My Latest Faves

Lately, in an effort to develop my blog audience by offering helpful tips and information, I have spent quite a bit of my free time scanning the internet. In doing so I have compiled several valuable websites that offer useful resources for individuals in the tech industry. These are some of the latest to be added to my collection of bookmarks.

  1. As a repository of Sifr fonts, sIFR Vault offers quite a selection of sIFR fonts and font inspiration. The 'Resources' page will also familiarize you with sIFR if you have not yet had experience using it.
  2. With information on the latest calendars/date picker features, resources for the cleanest sliders, and the most beautiful web UI galleries, Italian blog woork has helpful resources that every web developer could appreciate.
  3. Designer Folio (a helpful website all around) recently posted an excellent Free Flash Gallery with cool effects and great versatility features web developers will love to toy with.
  4. For those people who desire to be known as one of the CSS Elite, web developer Adam Oliver compiled a few Useful CSS Tips that are sure to come in handy.
  5. From SEO, to PHP, Devlisting links to an expansive collection of web resources for web developers to utilize. While some are better than others, the large variety makes the website useful for a broad spectrum of beginners and professionals.
  6. Delicious is a great tool to discover the latest hot topics spanning the entire web. It also serves as a handy organizational tool for bookmarks.
  7. Finally, for website form advocates, Feckless Mind shares Purified Form Mark-Up for anyone to use on the web.

I will try to post a few more of these beneficial websites and articles each week, so be sure to check back again soon for updates.

UPDATE: I discovered this late, but just could not leave it out: 30 Useful Open Source Apps for Web Designers

Labels: , , , ,


> > Click here to read the rest of this post
Bookmark and Share
posted by thewebutante at 0 Comments