Posts Tagged ‘2.Web Design’
Posted on May 11, 2012 - by Khaled
UX is not just Usability + accessibility as some think! It is a level up! It may be considered as a compound of HCI, UCD, Usability, Accessibility, UI, IA, Aesthetics, Graphic Design, Web Design, Page behavior and even copywriting. The starting point for UX understanding (and how I knew about it for the first time) would be the diagram of Jessie James Garrett that I stumble upon in the early 2000. But I think it has evolved from that first concept. In my opinion, UX Design is related to all the aspects of the user experience when interacting with the website, the solution, the software, the service, the product etc… And it is dictated by the sought function, the interactive comportment, the final design wanted, the performance optimization and the targeted audience of the solution / Product / Service / Software. It involves all features and characteristics of usability, accessibility and desirability of a solution from the user’s perspective’ / point of view.
Our philosophy has some guiding concepts and principles that are:
The team working on a project has to be formed of individuals of different profiles and that will intervene in their respective layer of UX work. That means that the team working on one project has to agree and to be aware of the decisions of each team member when it comes to their field of expertise. Each member of the team should be able to let other members visualize his work in real time and keep them posted
The team should be able to create different routes and then be able to quickly decide which one is better suited to the project
The team must focus on solving the right problems and answer the right questions starting from the most central problem towards the less important ones.
Identify hypotheses and assumptions
Implement short processes and cycles: Brainstorm > Create > Check/feedback
Research the best source of information and the most reliable and trustworthy content
Involve users in the process of research and results validations.
When it comes to having a successful UX approach, it is vital to carefully consider the expectations and the assumptions of humans that the solution or product target.
For instance, we have developed and launched many e-commerce sites. In many cases we found that the sites’ owners have the assumption that just by having a shopping cart in their solution, customers will line up and buy their items, solutions, services or products. Most of the time they won’t understand the need to implement a whole strategy of UX and find the expenses unjustified! Some of them leave to some other companies and have a plain E-commerce installation and not long after, they will be disappointed! In fact and after audit, we demonstrate that their current “websites” don’t offer any user experience at all (or very little) and hence nobody buys from them. It’s proven through conversions rates that good UX design will always help users with their decisions to buy! “Call to action” incentives are very important here!
Among the assumptions we make I can cite the most important ones:
– Who’s the User? Who’s the client? (characteristics research)
– What’s the use of the considered service/product/ solution?
– Where, how and when is the considered service/product/ solution used?
– What problems does the considered service/product/ solution solve?
– What features of the product/solutions are the most important? Which ones are the less important?
– Considered all of the above, how should the solution / product look, feel, behave, work? (consider style, design, typography, dimensions, shape, colors, behavior…).
This was a fast explanation and some thoughts about UX and our UX process in my agency. Looking forward to hear from you!
Posted on February 6, 2009 - by Khaled
FireFox is becoming more and more popular. This is due in part to its great extensibility and easy customization. Here are 46 essential FireFox addons that I have and I think that they are really useful to help you with your daily activities related to web design, web development, graphic design, blogging and keeping yourself informed , productive and up to date. Feel free to post your own extensions that you use and love and that I missed in this list.
17 Essential Web Development & Web Design Add-ons:
1. Abduction! Enables you to capture screenshots of an entire web page or just of a part of it and saves it as an image.
2. Fire Vox Think of it as an open source screen reader that is designed especially for Firefox! Now you no longer have any excuse for not testing your site with screen readers! Probably the easiest Screen reader I’ve ever used.
3. Codetch by Zachary Carter is Dreamweaver-like text editor for firefox.
4. ColorZilla Advanced Eyedropper, ColorPicker, Page Zoomer that also enables you to work with palettes.
5. CSSViewer Very handy and light. A simple CSS property viewer.
6. Dust-Me Selectors a cool little extension that finds unused CSS selectors. Released by SitePoint.
7. FireFTP a free, secure, cross-platform FTP client for Mozilla Firefox.
9. FirePHP An extension for the Firebug add-on. It enables you to log to your Firebug Console using a simple PHP method call.
10. FireScope Another extension for Firebug. It enables Firebug with HTML and CSS refrences. This one too was released by SitePoint.com
11. FireShot An excellent and ery complete solution for Web development, maintaing blogs and much more. It creates screenshots of web pages or parts of web pages, it provides a set of editing and
annotation tools for those screenshots (insert text annotations and graphical annotations). The captures can be: uploaded to FREE public screenshot hosting, saved to disk as PNG, GIF, JPEG or BMP, printed or copied to clipboard, e-mailed or sent to configurable external editors.
12. Font Finder Get all CSS styles of selected text in Firefox (or thunderbird).
13. MeasureIt Lets you draw out a ruler to get the pixel width or height of any element on a web page.
14. SEO Toolbar Displays ILQ and other important SEO numbers for a given web site.
15. Stylish Customize the look of the application and of websites you’re visiting with Stylish, a user styles manager. Great for testing.
16. Total Validator Web standards rule! A 5-in-1 validator that Performs multiple validations and takes screen shots in one go.
17. Web Developer Adds a menu and a toolbar with various web developer tools. An excellent replacement of Firebug although I believe you can combine the use of both of them for an optimal result.
8 Essential Bookmarking, Socializing, blogging and Micromessaging Add-ons:
18. Netvibes Adds RSS feeds to your netvibes.com account
19. Delicious Bookmarks Delicious Bookmarks is the official Firefox add-on for Delicious, the world’s leading social bookmarking service. t integrates your bookmarks and tags with Firefox and keeps them in sync for easy, convenient access.
20. Digg Toolbar lets you Digg, submit content, and keep track of Digg even when you’re
not on the Digg site itself. With a notification window built into the
toolbar, you’ll never miss a popular story or when friends Digg,
submit, or comment on stories.
21. Foxmarks Bookmark Synchronizer If you use Firefox on more than one computer, you’ll want Foxmarks.
22. StumbleUpon StumbleUpon discovers web sites based on your interests, learns what you like and brings you more.
23. Shareaholic If you use sites like Facebook, MySpace, Digg, Gmail, Twitter you’ll want Shareaholic.
24. TwitterFox TwitterFox is a Firefox extension that notifies you of your friends’ status on Twitter. You can use it to post Twitter updates and it will convert your URLs to tiny ones.
25. ScribeFire Blog Editor ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. Anfd it helped me a lot while creating this post
5 Essential Organizing and Executive Assistance Addons:
26. WebNotes a nice highlighter and sticky tool that’s still in Beta but works fantastically good! With WebNotes stop copying and pasting… Start making your notes online. For more info read this Interview with Alex King, marketing director at WebNotes.
27. ReminderFox ReminderFox displays and manages lists of date-based reminders and ToDo’s.
28. FEBE Firefox Environment Backup Extension allows you to quickly and easily backup your Firefox extensions. In fact, it goes beyond just backing up
29. Sxipper Forget your passwords! Sxipper accurately fills in forms, manages passwords and your OpenIDs. it really helps keep organized and spend a lot less time filling in forms.
30. Glue I hesitated to put glow in this category or in the preceeding one. I believe it fits perfectly in both. Glue is simply Outstanding! Alex iskold and co did amazing work for this one! I started using glue since it was called BlueOrganizer. connects you with friends around things you visit! Glue works automatically as you browse popular sites about books, music, movies, wines, restaurants, gadgets, stocks, actors, tv shows and other everyday things around the web.
3 Essential Shutterbug Addons:
31. Cooliris An outstanding extension! Cooliris transforms your browser into a visually stunning, lightning fast way to search and enjoy online photos, videos and more.
32. Fast Video Download Download video files from popular sites like YouTube, Dailymotion, Break.com and more.
33. Fotofox Drag, drop and arrange pictures adding photo titles, and create albums by multi-selecting photos, and then upload to one of a selection of online photo services – all of this without interrupting your Internet browsing. A greattime saver IMO.
6 Essential FireFox Functionalities, Appearance and Tabs Addons:
34. FaviconizeTab Let’s you just reduce the size of the tab to restrict it to just displaying the favicon! If you open many tabs like I do this will be really helpful.
35. Morning Coffee A very useful extension that keeps track of daily routine websites and opens them in tabs.
36. Personas for Firefox is a extension that adds lightweight theming to your browser. It’s an experiment in personalizing. If you are a graphic designer then this enables you to style the browser without having to code.
37. Session Manager I love this one! Saving sessions and pages is so easy! and restoring a session of 100+ after a FireFox crash shouldn’t be a problem with Session Manager. Same when you restart your computer or FireFox. It saves and restores the state of all windows – either when you want it or automatically.
38. Tab Mix Plus Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more. I don’t use its session manager as I prefer using “Session Manager” extension -see above-
39. Undo Closed Tabs Button How many times did you accidently closed a tab you still need? Tired of going to History -> Recently Closed Tabs just to undo a closed tab? Then this extension is for you! This extension allows you to undo closed tabs via a toolbar and/or tab bar button or the right-click context menu.
7 Essential Miscellaneous Addons :
40. GooglePreview Inserts preview images (thumbnails) and popularity ranks of web sites into the Google and Yahoo search results pages.
41. FlashGot Download all the links, movies and audio clips of a page at the maximum speed with a single click, using the most popular, lightweight and reliable external download managers.
42. Flagfox Displays a country flag depicting the location of the current website’s server and provides quick access to detailed location and webserver information.
43. FoxyTunes Music and Web/Graphic Design/Development are quite tied together in my opinion. FoxyTunes lets you control almost any media player and find lyrics, covers, videos, bios and much more with a click right from your browser.
44. Better Gmail 2 Based on GreaseMonkey, it adds useful extra features to Gmail, like hierarchical labels, macros, file attachment icons, and more.
45. Gmail Manager Allows you to manage multiple Gmail accounts and receive new mail notifications. Displays your account details including unread messages, saved drafts, spam messages, labels with new mail, space used, and new mail snippets.
46. eBay Sidebar for Firefox Keep an eye on your eBay trading wherever you are on the web when you install the eBay Companion for Firefox. It’s a free tool built with eBay users in mind that will help you get more out of your buying and selling.
Posted on January 16, 2009 - by Khaled
In late 2008 and early 2009 LetterPress effect is becoming increasingly popular and used in many web sites. So here 2 quick examples on how you can create a realistic letterpress effect with Adobe Photoshop (Version 7 or newer). This will take you just a couple of minutes and you can achieve it even if you are a beginner.
Open Photoshop, create a new document (600 x 400 for instance). I started with a white background and typed the word Letterpress (Font: Century Gothic, 60pt, All caps and set the color for instance to: #00bae8).
You will obtain this kind of effect:
As you see we’re almost there! You can customize a bit more with overlaying a gradient overlay or you can rasterize the type layer and work on it with burn/dodge tool. You can check out this tutorial to see how to use Dodge/Burn tools. You should be able to end up with a final aspect that looks like this:
I just applied a gradient overlay effect and some burning at the base of the letters.
Ok, let’s see another variation that might work better if you are after a metallic Letterpress effect. Create a new document, fill in the background with a light grey color (#d0d0d0 for instance). Type in LETTERPRESS (Font: Century Gothic, 60pt, All caps, Set tracking to 50 and set the color for instance to: #919191). Now we’re going to add an inner glow effect this time. Set the Inner glow values as following (color: #000000):
The noise percentage can be tweaked and set to what is best for your purpose!
Now apply an outer glow with these settings:
You should obtain something like this:
All you need now is to play with your background to make it look like brushed metal using noise filters and motion blur along with dodge/burn tools. May be also add a gradient overlay to the text layer and you will have something that looks like this:
If you think I should put more details about the creation of this metallic background or on the last steps of this tutorials let me know!
Posted on January 13, 2009 - by Khaled
Typography is much more than just using a given font with a given size, style or weight! It is an important component of Web Design and a powerful communication tool. Here’s a collection of useful links to some interesting, articles, books, slideshows, resources and portfolios about this amazing domain of Typography.
13 Articles You should read:
Reading these articles will help better choose your fonts, their sizes etc., along with learning some very useful tips and tricks and necessary theoretical knowledge.
– 8 Definitive Web Font Stacks : A nice article written by Michael Tuck and published by SitePoint.
– Better web typography: Published by .net magazine and written by Craig Grannell.
– A Not-So-Sweet Tale of Digital Type: Written by Andrew Twigg and published by AIGA.
– Typography Matters: An old, yet quite educating, article by Erin Kissane published by A List Apart.
– Web Typography Cheat Sheet: A typography cheat sheet published by Modern Life and written by Stuart Brown.
– Web Design is 95% Typography: An oliver Reichenstein published on information architects.
– Better Font Management: Written by Joel Sacks and published by Digital Web.
– The Principles of Beautiful Typography : An awesome article by Jason Beaird published on SitePoint
– Typography and Web Advertising: Making Every Opportunity Count: This one is dealing with the special case of typography for Web advertising. Also published by Digital Web and written by Alexander White.
– The Anatomy of Web Fonts: Andy Hume’s article.
– Top Ten Web Typography Sins
– 16 Best-Loved Font Bits In Web Design
– Create a font Part I and Part II : an outstanding article from I love Typography
6 Slides about typography you must see:
Easy to visualize slideshows (thanks to slideshare) that will let you rapidly learn nice facts about typography.
– Beautiful Web Typography: 7 tips on de-sucking the web by Simon Klein.
– Elegant Web Typography: The typography speech of Jeff Croft from Web Directions South (September 2008) in Sydney.
– Better Typography: Nice slides by famous Mark Boulton.
– Typography: Past & Future I
– Typography: Past & Future II
– Typography: The last Secret Weapon.
5 Books about typography you should read:
Probably the best books arounf about typography in my opinion. Read them and you will learn tons!
– The Elements of Typographic Style
– Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students
– Designing Type
– Type: The Secret History of Letters
– The Complete Manual of Typography
26 Inspiration, resources & Portfolios you should look at and bookmark:
Showcases, Artists portfolios, tutorials, Addons, guides, blogs, inspiration galleries, and outstanding typography sites with a lot of noteworthy typography resources.
– Words Are Pictures
– Alison Carmichael
– The Type Directors Club
– Typographic Posters
– Best typefaces of 2008
– A guide to Web Typography
– I love Typography
– The Font Feed
– Sexy, Bold And Experimental Typography
– Typography In Motion
– On snot and fonts
– Mark EastMan archive
– How to recognize a font? A mini guide to successful Font recognition
– Identify that Font
– Font Finder: A firefox/Thunderbird addon that will help you get styles of selected text.
– Free Fonts
– exljbris Font Foundry
– Font Wrek
– FontStruct : Build, share and download fonts.
– Type Foundry
– NovemberBorn sIFR
– Finally you may want to take a look at some nice videos about Typography posted on Vimeo.
I hope these collection of links will help you better understand and better use fonts for a nicer typography and better web design practices! These links may be useful either you are creating web sites or print work.
If you like the article bookmark it and digg it! Don’t forget to subscribe via RSS or E-mail. Or just follow me on Twitter!
Posted on January 7, 2009 - by Khaled
Nowadays, Podcasting is gaining a ceaseless increasing interest. The word podcasting was created by blending the words “iPod” and “broadcast”. This is due to the fact that the first podcasting scripts were developed for Apple iPod portable media player. However, an iPod is no longer required to listen to podcasts. Most Media Players will do the job! I prefer iTunes though as it allows searching podcasts, subscribing to them (free and paid podcasts do exist) and of course listening to them. iTunes offers really cool features for this.
Podcasts are generally a series of audio or video files which are diffused on the web via syndicated download, through Web feeds. So they are a perfect combination of RSS specification and the MP3 compression algorithm.
Over the few last years I gathered a nice collection of podcasts that I like to watch/listen to. I am going to share with you the top 10 podcasts that I favor when it comes to Web Design and Web Development.
Paul Boag’s Podcast (co-hosted with Marcus Lillington) started since August 2005. It has, as of today, 147 episodes. Episode 148 will be released within a week or so. Paul deals with different subjects related to the web design business. He usually invites some big names to the show. The live streaming recording is a nice bonus too!
A fairly new, yet excellent Podcast, that started last November (2008). The Hosts are Brad Williams, Patrick O’Keefe, Stephan Segraves, and Kevin Yank. The SP Podcast is about The Web industry. This is an outstanding show with different point of views. 5 episodes till now but the 6th is in its way soon!
An excellent Podcast to watch for Photoshoppers! Hosted by the Photoshop guys: Dave Cross, Matt Kloskowski, and Scott Kelby from the National Association of Photoshop Professionals (NAPP). The Photoshop guys share each week some very nice Adobe Photoshop tutorials, along with some very cool tips and tricks that will hugely increase your Photoshop productivity. 167 episodes for now.
This podcast is produced by .net magazine. This podcast deals with different web design aspects and presents several software tutorials and tips (CSS, Graphic design, Flash, Photoshop…). The podcast started back in March 2008 and 28 episodes were released till now.
The Adobe Creative Suite Podcast features tips and tutorials mainly about Photoshop, Indesign and other Adobe CS software. It is hosted by Terry White. This is a 2 years old podcast that started in 2006 and still active till now.
Hosted by famous web designers John Oxton and Jon Hicks. Deals with Web geeky stuff. Started in late 2007. 19 podcast episodes were released.
A bi-weekly radio-style podcast full of news, events and discussions about PHP. It is probably one of the oldest Podcasts on the net as it started since 2003.
A video Podcast with tutorials for graphic designers hosted by Adam Hay.
An audio podcast about web design as a job/career hosted also by Adam Hay. This podcast wasn’t very active lately but the early episodes are great.
10. Rails Podcast
A nice rails podcast.
Now even if some of these are less active these days, listening to older episodes is really a good thing that will help learn tons of things. Most of them are available for subscription via Apple iTunes which the media player I really recommande for podcasts.
Posted on December 18, 2008 - by Khaled
Today is a rainy cold day… The sky is dark and gloomy. As I have a big thin glass window in front of me it seemed to me as if the stormy weather colors were sneaking inside my office, and by the way this is my first winter in this office with this huge window that gave me the impression to be seating on the dark clouds…
This just happened as I was looking for some inspiration to design a new graphic theme for a joomla web site. The general topic of the site is about Nature, wild life and environment… Checking out my Gmail box themed with the “Bus Stop” design that turned into its ‘rainy’ version based on my location gave me a nice idea to design different themes for this web site that will be displayed according to the weather of the visitor’s location… I proposed this to the client via a phone call and he really liked the concept…
Funny enough, when I opened Photoshop to start a design mock up and pick up color palettes; I instinctively started with a rainy theme… It was the easiest palette to create and it probably has the nicest colors… At least that’s what the other Graphic designers of my company thought…
This is the first time I feel such a strong connection between Web Design and the elements surrounding you especially the weather. Of course I, sometimes, seek specific inspiration from different sources according to the theme or the design element I am working on including going out to some specific places or browsing some given web sites or reading/viewing some magazines, books or photo albums but it is usually necessary to take some time and think about ideas and sketch some of them on paper… So the connection is not as obvious as it was today and the creation of the mock up (which turned out to be quite nice and close to a final design) and the choice of the palette were never easier?!! Is it the window? Or is it the fact that I am producing less during the year as I am a bit more focused on tasks like Sales, marketing, Project management and human resources recruitment… I can’t really tell but I believe that today’s rainy weather was really useful to come up with this design and to discover tangibly this existing and interesting relationship between Web design and nature element like the weather… It was like a flawless process this time…
A hot cup of kopi luwak coffee is good idea for now…
Posted on March 24, 2008 - by Khaled
I usually work on both Mac OS and Windows but sometimes when I’m on the move I frequently take my windows laptop with me and if a client hands me a Flash USB key containing an .EPS file saved on a Mac OS and that has a preview embedded in it, I’ll be unable to open/see it right then unless we have a Mac nearby! And this really wastes a lot of time … and time is money. This is due to the fact that EPS saved on a MAC OS contains data format for the preview which is not compatible with Windows…
The EPS format was originally developed by Adobe. It was intended to be used as a vector format, and not raster. It is, again, platform independent and can’t be displayed on a screen if you don’t have “Display PostScript”. EPS can be opened with Vector programs (i.e. Adobe Illustrator, FreeHand, InkScape…) and most of the times it can be also opened with Photoshop but the latter will rasterize your vectors.
On the contrary to the common belief, EPS files are not meant to be rendered by a PostScript printer on paper. They were developed to be encapsulated/embedded in another file. So EPS files aren’t PS files!
So and because of all the waste of time and headaches that I witnessed while dealing with EPS I’m not a big fan of EPS!
I’ve had cases where an embedded EPS file shows up when I open it in the Illustrator but it won’t print and that was due to the fact that the EPS file had a high-resolution TIF embedded in it!
So I just want to ask, if you’re not going to encapsulate the graphic you’re saving as an EPS in another file why not save it as a native AI files? Or a PDF? Or if you don’t need it to be in a vector format why not just save as a PSD?