After I started designing sharepoint sites, apart from the predetermined and goverened designs, when I had to come up with a fresh look for a site, I started searching for inspiration and rules for coming up with a good design. Here is some info/guidelines to follow for a design when working or interviewing.
1) 35 Designers X 5 Questions
http://www.smashingmagazine.com/2007/04/20/35-designers-x-5-questions/
http://www.smashingmagazine.com/2008/07/24/a-small-study-of-big-blogs/
1 aspect of design you give the highest priority to.
1 most useful CSS-technique you use very often.
1 font you use in your projects very often.
1 design-related book you highly recommend to read.
1 design magazine you read on a daily/weekly basis (online or offline)
a) Aspects of design are given the highest priority by experienced and competent web-developers include:
· Communication: Understanding the user and centering everything around him/her
· Usability & Functionality: I like to think about how people will navigate the site even before starting any other design elements. By getting the navigation clear in my mind, the design begins to fall into place around it. Everything we design should be easy to use!
· Typography: Designing on a grid. This makes things far more orderly visually, not to mention it allows the code to be more modular.
· Navigation: Readability and clear indication of what is navigation and what is content. Ensure that the site content is organized into logical sections and that the navigation then reflects this
· Details: Attention to Details is important - Little things like spacing and buttons have a huge impact on the overall design. Take the time at the beginning to plan, it will pay off immensely during design/development
· Standards, Accessibility: Accessible and standards-based designs do not automatically mean they will be ugly
· Content: page content will make or break a website
· Approach: design is about the underlying purpose and what you want to communicate. Design as decoration, or design without purpose, often hurts more than it helps. Aesthetically speaking, it’s good to get caught up in the subtle details of design, trying to make sure everything is *just right*. Consciously don’t consider code during the design process. Our designer still does a lot of print work, and what’s great about print is that there are no constraints. Print design has no boundaries with texture, typography or the smallest of details. As long as it fits on the page, it works! So in many ways, we try to bring the layering and the detail of print design to the web. It takes twice as long to code it, but who cares, we are in this for great design
b) Most useful CSS-technique used very often:
http://www.smashingmagazine.com/2007/01/19/53-css-techniques-you-couldnt-live-without/
Global Reset
Browser Bugs Workarounds
CSS Sprites, Sliding Doors techniques
CSS Properties and theories
CSS Based Navigation
Navigation Matrix Reloaded
CSS Tabs
CSS Bar Graphs
Collapsing Tables using DOM and CSS
Adams Radio & Check Box Customization Method
CSS Image Replacement
CSS Shadow
CSS Rounded Corners Roundup
Drop Cap – Capital Letters with CSS
Define Image Opacity with CSS
Block Hover Effect for a List of Links
Pullquotes with CSS (Automatic pullquotes with JavaScript and CSS)
CSS Diagrams
CSS Curves
Footer Stick
CSS Image Map
CSS Image Pop-Up
CSS Image Preloader
CSS Image Replacement for Buttons
Link Thumbnail
CSS Map Pop
PHP-based CSS Style Switcher
CSS Unordered List Calendar
CSS-Based Forms: Techniques
CSS-Based Tables Techniques
Printing Web-Documents and CSS
c) Fonts Used in your projects very often :
consider Web, Display, Print . Use different fonts - depending on the client and the feeling we are trying to get across. Keeping “web friendly fonts” in mind, the most often used font for coded pages is Arial. Generally try to use as few actual image-based fonts as possible. Be conscious that the site may be viewed by small screen devices, by people who have images turned off, by blind users or people with screen magnifiers. Often image-based fonts are a barrier or an irritation to these people. Ideally, opt for content to be able to scale, display well on any device and be flexible enough so that users can override settings.
Arial (sans-serif) or Georgia (serif) in every web-site project; simple fonts like Helvetica, Chalet etc. - and there are so many classic serif fonts that are absolutely gorgeous; Times is a classic but today’s users seem to tire of it because of overuse - so others like Garamond, Caslon, Baskerville, Minion and Palatino. Web: Verdana 11px (150% leading). Display: Maple (Process Type). Print: Mercury Text (H&FJ)
Helvetica, Helvetica Neue
Univers
Lucida Grande, Lucida Bright
FF DIN
Arial, Verdana
Georgia
Myriad Pro
Meta Plus
Gotham
Frutiger
Warnock Pro
Dax Regular
Avenir
Century Gothic
d) Design-related book highly recommend to read?:
Don’t Make Me Think by Steve Krug
CSS Mastery by Andy Budd
The Elements of Typographical Style by Robert Bringhurst
Designing with Web Standards by Paul Boaq
Transcending CSS by James Mathias or Andy Clark
Pro CSS Techniques by Jeff Croft
Build Your Own Website the Right Way Using HTML & CSS by Roger Johansson
How to be a graphic Designer without Losing Your Soul by Rob Goodlatte
Web Standards and Solutions by Dan Cederholm
Bulletproff Web Design by Dan Cederholm
Making and Breaking the Grid by Timothy Samara
Grid Systems by Kimberley Elam
Defensive Design Signals by Kyle Neath
Web Standards Creativity by (among many, many others) Cameron Adams, Mark Boulton, Andy Clarke, Jeff Croft, Dan Rubin etc.
e) Design magazine read on a daily/weekly basis (online or offline):
To catch up with the latest developments in design, development and web-related areas, it’s reasonable to read design/tech-related online-magazines. References can be extremely useful
http://www.smashingmagazine.com/2007/03/19/40-designtech-magazines-to-read/
Digital Web Magazine
http://www.digital-web.com/
A List Apart
Design Observer
Wired It’s certainly got some of the best infographics
Pingmag
Netdiver features every day]
UX Magazine is a great read, and post a lot of fun articles. I also reader a bunch of web standards/web design/usability blogs and scan through them when I can find a spare minute from working
Smashing Magazine
Fontblog.de - a German weblog on typography and other design related stuff.
5.4. Print Magazines
.net magazine
.net magazine
Blueprint Magazine.
Communication Arts
Relevant Magazine. It’s extremely well designed (even the ads!), and it’s inspiring to flip through. If nothing else, it helps spark good design ideas.
Computer Arts and .net magazine monthly
HOW magazine is always an incredible source of design inspiration Seeing printed and promotional pieces really challenges one to think about how to display and organize information on the web.
I like to read things that will broaden my horizons as a designer, not narrow them. A recent magazine I picked up in the UK which had great design, but also great content, was a magazine called Monocle.
2) The Top 10 Design Mistakes:
http://www.netmag.co.uk/zine/home/the-top-10-design-mistakes
3) 8 Tips for working with Web Designers:
http://www.entrepreneur.com/ebusiness/buildingawebsite/article201528.html
4 ) "impact of visual design on website credibility"
http://www.websiteoptimization.com/speed/tweak/blink/
"This research shows that reliable decisions about your site can be made in as little as 1/20th of a second. This emotional judgment can color subsequent judgments made after further reflection. Even though your site may have superior products, services, or usability, an initial negative impression from a poor or slow design can steer customers towards your competition. You only get one chance to create a good first impression, make it count. A clean, professional, and fast-loading site can ensure that your first impression will be a good one."
http://www.consumerwebwatch.org/dynamic/web-credibility-reports-evaluate-abstract.cfm
"This reliance on a site's overall visual appeal to gauge its credibility occurred more often with some categories of sites then others. Consumer credibility-related comments about visual design issues occurred with more frequency with finance (54.6%), search engines (52.6%), travel (50.5%), and e-commerce sites (46.2%), and with less frequency when assessing health (41.8%), news (39.6%), and nonprofit (39.4%) sites. In comparison, the parallel Sliced Bread Design study revealed that health and finance experts were far less concerned about the surface aspects of these industry-specific types of sites and more concerned about the breadth, depth, and quality of a site's information."
5) 40+ Useful & Handy Web Designer’s Web Services & Tools
http://www.noupe.com/tools/40-useful-handy-web-designers-web-services-tools.html
6) What's that, you think? Examples of user interface elements, good for inspiration and knowledge:
http://patterntap.com/
UI-patterns.com
UIpatternfactory.com
Thanks to Chris Avore's blog http://www.erova.com/blog/?p=40
