Article on Abduzeedo

“We’ve been working in project for a Web Hosting client. After doing a few wireframes, we realized that we had to find good references to the pricing page. A good table just pops out in the middle of the layout, and makes it unique.”

Article on Webitect

What is HTML 5?
Essentially, HTML 5 is a new version of HTML / XHTML which specifically focuses on the wants and needs of web app developers. It allows developers to implement a ton of new features in the things they create, for example a lot of new drag and drop functionality, new structuring elements as well as improved support for audio and video.

Why has it been developed?
Up until 2004, the HTML language was developed by the World Wide Web Consortium. A lot of developers were disillusioned with the proposed improvements in the HTML language that the W3C were proposing, many feeling that they were out of touch with the needs of modern day web and app developers. A new group named WHATWG ( Web Hypertext Application Technology Working Group ) has since taken over development of the language and has named it’s specification HTML 5.

Article by Jacqueline Thomas on Web Design Ledger

As you think of how you will incorporate new trends into your designs, focus on the main idea of each trend. Be encouraged to dabble into these trends so that you become part of the movement.

01. Oversized Logos/Headers: make visitors remember you
02. Sketch/Hand-drawn Design: part of corporate design
03. Slab Typefaces: express who you are
04. Typography: more interesting to readers
05. One Page Layouts: more about personal profiles
06. Huge Images: draw visitors into your site

07. Change of Perspective: different perspectives in 2010
08. Interactive/Intuitive Design: more flash, more interactive
09. Modal Boxes: easy to design and use
10. Minimalism: venture into typology

11. Oversized Footer: less important but more personal information

12. Retro: new ways to honor vintage art
13. Intro Boxes: new way to introduce yourself

14. Magazine Layouts: used for infotainment sites

Developing a system for the graphic design process can help the designer achieve the best results. Systematizing any sort of project, whether graphic design, web design, programming or otherwise, gets the work done faster, keeps the project organized and yields better results. Graphic designers have to help viewers get the message and help sell a service or product.

01. Collect the Necessary Information
Do not jump right to the design, make sure you collect enough and necessary information. First you have to get a good idea of the target audience, collect information including age range, geographic location, interests and needs. Before brainstorming the design concept, you should ask yourself if there’s any technical requirement for the project, like color can’t be used or any restricted dimension. It is also important to keep track with the budget and deadlines.

02. Write Out a Proposal, Firm Quote, Contract and Plan
Proposal have to be customized for each client and project, it should include information like target audience and objective, filling in the client’s name won’t work. Personal plan will contain much of the proposal but will be adapted to meet your needs. It would include deadlines for certain milestones that you need to reach in order to meet the deadline in the proposal.

03. Brainstorm, Research and Inspiration
Inspiration is the first step and leads to the brainstorming and research, you can get inspired by reading books, visiting museum or gallery, free-writing, relax and get away from the computer. Brainstorming is the process of taking inspiration and organizing it in a form that can be incorporated in a design.

04. Try Different Things
Try a few different things, using your original goal as your reference point. Don’t just jump in, create something and leave it at that. Not only will you learn something new, you will also have a few other ideas to show the client if they want to see variations.

05. The Revision Phase
Share with the client your initial design or, as many graphic designers like to do, multiple options for designs. Make sure the client feels free to share what they would like changed or to mix and match features from the different options you present. Keep showcases and examples for inspiration on hand for the client.

06. Wrapping Up
In systematizing any process, the tips we’ve shared can help. But you should also identify the tasks that you do regularly and figure out how to make them more efficient.

Read full article on Web Designer Depot

Article on OnextraPixel

Designing wireframes the right way the first time, cost no more than doing it the wrong way. Creating a paper prototype adds no cost, either- simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site’s business objectives.
Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and test a prototype ensures that the redesigned site won’t introduce any new causes for user frustration or further erosion of brand equity.

A wireframe diagram illustrates the layout of a web page, using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements and show their placement on the page. HTML coders use the diagrams to “wire” each page, connecting links, attaching content, and so on. A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea.

Wireframe vs. Visual Design

A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea.

9 Application Tools To Create Wireframes Digitally
01. Balsamiq
02. iPlotz
03. Pencil Project
04. templatr
05. Flair Builder
06. GUI Design Studio
07. Proto Share
08. Serena
09. DUB

Building up a website is always fun, during the process of creating wireframe, user experience testing, interface & interactive design, then HTML markup, CSS styling and adding behavior with JavaScript. No matter the structure of the site is small like a wedding site or huge like Amazon.ca, testing the website in different browser is one of the most important procedure you have to beware of, just because it is the final stage before you deliver the product to your client.

Below is the online applications for browser test
Adobe recently came out with a new service called BrowserLab which lets you view a snap shot of a website via URL in different browsers. It’s fast, free and gives you a couple different viewing options to compare different browser versions.

Browsershots.org is the same idea has Adobe BrowserLab but with several differences. You can test way more browsers on more platforms with more options like screensize, color depth, javascript, flash, etc. The downside is that the service is a little slower and isn’t nearly as nice of a UI.

Cascading Style Sheets(CSS) is one of the building blocks of modern web design. With time, the quality of CSS tutorials out there on the web has increased considerably.

Here’s the lists of examples with tutorials:
01. Slide show – cross browser
02. Lightbox without JavaScript
03. Animated rollover menu
04. Tree like navigation menu
05. Gradient text effect
06. Menu list
07. Footer stay at bottom
08. Pullquotes
09. Stacked bar graphs
10. Hover effect for list of links
11. Multi-column lists
12. Date display technique with sprites
13. Date badges & comments
14. Image viewer
15. Image preloader

Article on Smashing Magazine

“As web design and design in general have evolved, rules have been established to ensure consistent and usable designs. Some of these rules were created simply because website creators abused certain principles without regard for their users. But these rules are not enforced by anyone and should be broken when necessary, especially when breaking them would lead to a stunning design.”
=============================================================
01. Do Not Display the Horizontal Scroll Bar
02. Use a Minimal Number of Font Faces
03. Do Not Use Too Many Colors
04. Make Your Site’s Goal Obvious
05. Navigation Should Be Easy To Figure Out
06. Use Different Colors for the Text and Background
07. Don’t Put Animation in the Way of Your Content
08. Stick to Web-Safe Fonts
09. Don’t Have a Splash/Landing Page
10. Don’t use Tables
=============================================================
Read full article

Article by Jeffery Way on Net Tuts+

HTML (Hypertext Mark-up Language) describe the structure of text-based information in a document by denoting certain text as links, headings, paragraphs, lists, etc. and to supplement that text with interactive forms, embedded images, and other objects. HTML is written in the form of “tags” that are surrounded by angle brackets.

=============================================================
01. Always Close Your Tags
02. Declare the Correct DocType
03. Never Use Inline Styles
04. Place all External CSS Files Within the Head Tag
05. Consider Placing Javascript Files at the Bottom
06. Never Use Inline Javascript
07. Validate Continuously
08. Download Firebug
09. Use Firebug
10. Keep Your Tag Names Lowercase
11. Use H1 – H6 Tags
12. Save the H1 for the Article Title of a Blog
13. Download ySlow – an extension for Firebug
14. Wrap Navigation with an Unordered List
15. Learn How to Target IE
16. Choose a Great Code Editor
17. Once the Website is Complete…Compress
18. Cut…Cut…Cut
19. All Images Require “Alt” Attributes
20. Stay up Late
21. View Source
22. Style all Elements
23. Use Twitter
24. Learn Photoshop
25. Learn Each HTML Tag
26. Participate in the Community
27. Use a CSS Reset
28. Line up your elements
29. Slice your Mockup
30. Don’t Use a Framework…Yet
=============================================================
Read full article

Article by Collis on psd.tutsplus.com

“Web design can be deceptively difficult, as it involves achieving a design that is both usable and pleasing, delivers information and builds brand, is technically sound and visually coherent.”
=============================================================
01. Precedence
02. Spacing
03. Navigation
04. Design to Build
05. Typography
06. Usability
07. Alignment
08. Clarity
09. Consistency
=============================================================

Read full article