You are currently browsing the tag archive for the ‘web development’ tag.
- CSS Centering 101
- Faux Columns
- A simple introduction to 3 column layouts
- Liquid Bleach
- Fixed or fluid width? Elastic!
- In search of the One True Layout
- Current CSS Layout Techniques
- One clean HTML markup, many layouts…
- Width-based layout
- Variable fixed width layout
- CSS Drop Column Layout
- CSS3 Multi-Column Thriller
- A CSS Framework
- Dynamic Resolution Dependent Layouts
- The Layout Reservoir
- Multi-Unit Any-Order Columns
- On Fixed vs. Liquid Design
- Little Boxes
- Sample CSS Page Layouts
- Advanced CSS Layouts
- Practical CSS Layout Tips
- Layout Gala
- Internet Explorer and the CSS box model
- Gallery of CSS lay-outs
- CSS frames
- CSS Layouts
Favicons are those little icons associated to a site that shows on a browser’s bookmarks, address bar, etc. If you want to give your site some sort of brand recall, having a Favicon associated with it is the way to go.
You’ve probably noticed my Favicon that I made a few days ago. It’s quite easy to do as long as you can edit the code on your pages. Sorry WordPress.com users, you’re stuck with the WordPress logo as your Favicon.
Here’s a short guide on how to have your own Favicon.
Design your icon
First you have to design your own icon using your favorite graphics application. It doesn’t have to be flashy. Actually, the simpler the better and use less, but vivid colors.
The size of a Favicon is 16 x 16 but I suggest designing it on 64 x 64 first. Here’s what I did on Fireworks with a font called Bummer and a transparent background for my rounded square icon. You could use a small scale version of your own logo if you have one.
Resize it down to 16 x 16 to check if it still looks good. When you’re happy with it, bring it back up to 64 x 64 and save it as PNG, BMP or GIF even.
Convert it to an icon file
Got your image? You need to convert it to a .ico file. Head to Bradicon which is one of the many online services that converts images to icons. Just upload your image and download the icon in seconds.
You should see how it will look like on browsers by going to the folder where you saved it. It is important you rename it to favicon.ico.
Upload your icon
So you got your icon file now. Next step would be to upload it somewhere. It could be on your own site, some image hosting service that accepts .ico files like PicPanda, as long as it can be accessed directly by the public. Take note of the location of the file.
Adding the code
It’s quite simple really. On all your pages or if you have access to the code of your template, put this piece of code below the <title> tag along with the other <link rel> tags.
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
For WordPress users, the page to edit is the header.php on your theme’s folder. For Bloggers, just look for the Edit HTML page and place it after the <title> tag.
If the your icon is not located on the root directory of your site, change href accordingly (it could accept http URL’s).
When you’re done, restart your browser before opening your site again. You should see your Favicon by then.
Tue, Apr 13, 2010
15 Best Wireframing Tools for Designers Building a website can be a time-consuming and expensive business. To ensure that you minimize the number of hours spent and the amount of money wasted on each project, it’s absolutely essential that you plan properly, flushing out content and functionality early, reducing rework. Most people simply use a pen and paper to plan the early stages of their website designs, but is this enough? Besides a rough, handwritten sketch, you should be creating wireframes for your own benefit and to aid in preliminary discussions with clients and team members. To create a successful wireframe, you’re going to need to use a good wireframing tool. We explore the 15 best online tools below. Online tools, as opposed to desktop applications, tend to be easier to use, cheaper and better for sharing your designs with colleagues and clients. Each tool in the list below performs several unique functions. Some are better for knocking up a mockup in a matter of minutes; others are better for building fully interactive, clickable, high-fidelity prototypes that look and feel like a proper website. Take some time to try out a few of these tools and find out which one’s right for you.
1. Cacoo (free)
Besides wireframes, you can use Cacoo, the online drawing tool, for creating sitemaps and network charts. It offers all the basic drawing features you’d expect alongside a vast collection of stencils. Cacoo’s major strength in relation to some of the other tools in this list is its ability to let you work on diagrams with other users, wherever they are, simultaneously, communicating with one another using the ‘Chat’ function.
2. Balsamiq Mockups ($79 as a desktop app)
Balsamiq Mockups is one of the most popular wireframing tools out there and it’s easy to see why. With over 75 controls, 150 icons and 50 keyboard shortcuts to choose from, you really can create anything. One of its strongest features is ‘Quick Add’. Kind of like Mac’s Spotlight, users only need to type the first couple of letters of a specific control to select it. Elements added to your designs snap into place making everything look clean and professional.
3. Mockingbird (free)
Safari, Chrome and Firefox users can make the most of Mockingbird’s exceptional prototyping abilities to make really straightforward wireframes without any unnecessary fuss. UI elements can be dragged and dropped into pages, separate pages can be linked together to give you a visual representation of a whole website and you can share your mockups with others simply by sending them a link.
4. HotGloo (from $14 per month)
HotGloo launched the latest version of its impressive online wireframing tool on 14th February 2010. People who have used it in the past should certainly consider giving it another go as much has changed. HotGloo has got to be one of the most attractive wireframing tools, but its performance is striking too. The editor is extremely user-friendly and creating custom elements, collaborating in real time and managing sitemaps is a breeze.
5. MockFlow (free)
MockFlow claims that it’s a faster way of creating wireframes than using a pen and paper. At first I was skeptical of this, but having now given it a go I’d be inclined to agree. One of the best things about MockFlow is that it lets you work on your wireframes online and offline. With no internet connection, using MockFlow desktop, you can work on your projects with all changes stored locally and optionally synced back when connection is regained.
6. Pencil Project (free)
Pencil is a free, cross platform, open source wireframing tool with a strong following. It’s available as a standalone tool or a Firefox add-on. The latest release (1.1) offers various new features including inter-page linking and the ability to export your wireframes to HTML, PNG, Openoffice.org, Word or PDF. Its stencils look superb and it’s really user-friendly.
7. Pidoco (from $9 per month)
Pidoco is a 100% browser-based app requiring no downloads whatsoever. With Pidoco, you can create wireframes that are interactive and clickable with stencils that link to other elements and pages. Different aspects of your design are held in layers, like Photoshop, so common elements can be kept for each page. Getting feedback on your wireframes is easy- simply choose which members of your team you want give access to and they can leave comments.
8. Protoshare (from $29 per month)
Protoshare offers a higher level of functionality to most of the other tools explored here. You can make everything from the most basic wireframes to the most high-tech, interactive prototypes. As the tool is completely web based, team members can login from any computer to view and comment on your work. You can rearrange pages by dragging and dropping them in your sitemap, view prototypes as website diagrams and make sitewide changes in a couple of clicks. You can add styles, images, Flash, forms, RSS feeds and more to make your wireframes look and behave just like the real thing.
9. iPlotz (free basic package)
iPlotz is a cross-platform wireframing tool that’s really easy to get to grips with. Its basic package, which lets you edit one project with a maximum of five pages, is completely free, so there’s no excuse not to give it a go. Drag and drop functionality, the ability to quickly upload your own images onto a page, and the facility to export pages as PNG, JPG or PDF, make iPlotz a pleasure to use. You can even invite other colleagues to view, comment on and edit your designs.
10. Gliffy (free)
Gliffy is a great tool for creating wireframes quickly, but that’s not all it’s good for- you can use it to sketch flow diagrams, floor plans, network diagrams and much more. Such versatility means that its shapes and stencils are more diverse than usual. Embedding your designs into wikis, blogs and hosted apps is simple too.
11. Jumpchart (free basic package)
Jumpchart is a collaborative website planning application tool which revolutionizes the way we plan our sites. Rather than focus on design, like most of the other tools explored here, it focuses on content, allowing you to order all the text, files and images you need for each page in a highly structured way. Jumpchart uses Textile, so there’s no need for any coding know-how.
12. JustProto (free basic package)
JustProto is an excellent web-based tool for building prototypes of web and desktop applications. With JustProto, you can visualize your apps properly by creating interactive simulations before any coding begins. JustProto features a text editor and file manager, and every change you make is previewed instantly.
13. Creately (free basic package)
Creately can be used for working securely and collaboratively on pretty much anything visual, although it specializes in the creation of UI interfaces, flow charts, software and web designs. It features all the usual drag and drop, unlimited undo/redo and curved connections you might expect, but it’s particularly strong when it comes to comments. Click on a comment a colleague has made and you’ll be shown exactly which element of your wireframe they’re referring to.
14. Lovely Charts (free)
Wireframing tools don’t come any cuter than Lovely Charts. It doesn’t have the technical abilities of some of other tools, but it’s free and wireframes made on it look really stylish and original. It’s perfect to use when working with a certain type of client- perhaps one that’s more interested in design over functionality. Easy and sexy (its words, not mine), Lovely Charts makes designing wireframes that little bit more fun.
15. Templatr (free)
A lot of people would not consider Templatr to be a wireframing tool, but it’s actually really handy for creating mockups. Simply choose the layout you want, upload any images and customize it to suit your exact needs. It’s simple, but very effective and free! This is a guest post from Tom Walker who blogs for a supplier of ink next day in the UK. He blogs on the CreativeCloud about media design and advertising.
- Top 10 on-line tools for Web Designers The Design & Marketing team at Creately love using…
- 30 Essential Tools for Web Designers For designers nothing can be more handy than effective…
- 25+ Tools, Cheat Sheets and Inspiration for Designers working with Color Themes When designing a website, a poster, a logo etc.,…
- 10+ Brilliant On-line Tools for Freelancers It’s amazing how many great free tools one can…
- 50+ Online CSS Tools for Web Developers and Designers For web developers and designers CSS is like a…