Web Design

Facebook Twitter

Free Sketching & Wireframing Kit. Sketching & Wireframing kit is a free set of elements for sketching and wireframing.

Free Sketching & Wireframing Kit

It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners. The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats. The kit is completely free, which means that you are allowed to use it for personal and commercial projects. You are not allowed redistribute it. Download kit for Adobe Illustrator (663 kb) Download kit in SVG vector format (348 kb) Download kit in PDF format (293 kb) Download kit in EPS format (364 kb) And here is Sketching & Wireframing Kit preview (click to see the image in full size) Enjoy! iPhone Application Sketch Template v1.3.

iPhone Idea Sheet ver.01. Free Wireframing Kits, UI Design Kits, PDFs and Resources. Advertisement To mock-up the user interface of a website, software or any other product, you’ll need some basic UI elements.

Free Wireframing Kits, UI Design Kits, PDFs and Resources

And this is where wireframing kits and UI design kits come in handy. When you want to create a low-fidelity prototype for your projects, you can use these kits to give your idea a certain shape, keeping it abstract and not losing yourself in details. In this post, we’ve prepared an overview of useful web and mobile user interface kits, handy PDFs and resources that you can use in your projects. We’ve carefully selected the most useful kits and resources to get you going in the early stages of a project. Free Mobile GUI PSD Android GUI PSD1 This Android GUI PSD is based on elements of the Android 1.5 GUI and was made to help the open-source community with its Android application mock-ups. RIM Blackberry PSD2 A complete PSD file with layer styles, this has 135 layers of Photoshop goodness. Android Sketch Stencil Version 1.03 A Sketch-style Android OmniGraffle template.

App design versus web design: what designers can teach each other. We often look at application design and website design as two different, if related, fields.

App design versus web design: what designers can teach each other

The lines blur a bit with web apps (which are technically both apps and websites), but we still tend to try to compartmentalize them. Even designers who work on both kinds of designs often view them as separate things. But there are a lot of lessons that app designers and web designers can teach each other. Each type of design has emerged to have its own strengths and weaknesses, often complementary to the strengths and weaknesses of the other field. Below are six lessons that app and web designers can teach each other. 1. App designers know that extra features can quickly become your worst enemy. Ge.tt is a great example of a web app that has avoided feature creep. This kind of narrow focus is important for apps, because they’re often constricted by both space and usability issues. Web designers, on the other hand, often try to cram as many features as they possibly can into a website. 2. 3. 4. 5. Free Printable Sketching, Wireframing and Note-Taking PDF Templates.

Advertisement Sketching and wireframing are a specialized style of drawing, used for fleshing out preliminary complex ideas, group brain-storming, a lo-fi method for evaluating interaction concepts, and as a way of roughly perfecting a design technique.

Free Printable Sketching, Wireframing and Note-Taking PDF Templates

Sketch and wireframe paper is essentially drawing paper that is designed specifically for this purpose. You could use it for web page design, web app design, architectural or structural design, graphic design, movie direction, animation… basically any type of design that needs a physical creative outlet or group collaboration. Not all sketch and wireframe sheets are universal, most are specialized for a particular medium, such as storyboards and specialized grid paper (axonometric perspective templates). Below you will find a concise collection of ready to print sketching, wireframing and note-taking templates. You may be interested in the following related posts: Wireframing and Sketching Paper Wireframe Print and Sketch Template17 Calendars.

Create a stunning menu in CSS3. The advent of CSS3 has introduced a world of possibilities for web designers and developers.

Create a stunning menu in CSS3

With animations, shadows, rounded corners and more, elements can be easily styled, and still weigh less than ever before. The navigation of a website is one of the most fundamental aspects to make or break a user’s experience. Instead of loading your menu down with individual images or sprites, why not do the entire thing in CSS3? No need for jQuery or JavaScript; no need to launch Photoshop. And let’s take it up a notch by including a great icon font to add some character to our menu. So grab your favorite cup of coffee (or if you’re like me, an ice cold Diet Coke), open up your favorite code editor, and let’s make a slick navigation menu using only CSS3. Before we get started Before we dive into the code for our menu, I’d like to go over some of the assets and tools we’ll use in this tutorial, which you can download and use while you follow along.

Alright, got all those? The HTML The CSS What? Make A Rollover Image Effect - Image Changes On Hover. 18Stumble A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites.When you use this effect with an image or Picture you add to your blog the image will change to differant image once you hover your cursor over it.It's also a very easy to use and can have so many uses.

Make A Rollover Image Effect - Image Changes On Hover

Here's a preview of a rollover image, Place your cursor over the image to see it change: The image is also a clickable link so you can use it as a link on your blog. More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos.In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version.

(SOOC means Straight Out Of Camera). Making Rollover Effect Image This is the code we use to make the image. You now need to customize the code by adding the images you want to use and the address you want it to lead to when clicked. 18Blogger. How do I Make An Image Change On MouseOver? How do I make an image change on mouse over?

How do I Make An Image Change On MouseOver?

This is a popular one. If you don't already know, this allows you to have an image on a web page, and when you place your mouse over that image, it changes to another one. This is a great way to make your site interactive. How to do it To add this to your web page, you first have to add the following code right after your <HEAD> tag, before your <title> tag. Understanding the code: On img0, image1.gif is the image that is shown all the time. Image2.gif is the image that appears when you place your mouse over the image. This goes for the rest of the mouseovers, for img1, image3.gif is the image that is always showing, and image4.gif is the image that appears on mouse over. and so on with the rest of the mouseovers.

Next, after you filled in all of your own images, replace width,height with the actual width and height of your images. Finally, place the following code where you would like the mouse over image to appear. Example. CSS3 Gradient Generator. Prevent Menu "Stepdown" If you are familiar with the concepts of "floats", you know that if you float a page element to the left, that the next page element will move up next to that element on the right, if possible. But have you ever seen your floated elements "stepdown"? This is a fairly common problem you can run into when creating a horizontal menu. Like most menus, you create an unordered list: <ul id="menu"><li><a href="#">My</a></li><li><a href="#">Little</a></li><li><a href="#">Menu</a></li></ul> You want the menu items to be large clickable blocks, so you write CSS like this: Those blocks are floated the left, so they should all line up in a row, right?

Here is the remedy: Setting those list elements as inline will take away those breaks and make sure your menu stays nice, happy, and straight! Share On. Stair step menu, slide show issues in ie7. I am running into some issues with IE7 that I can't seem to fix on my own.

stair step menu, slide show issues in ie7

I am running a custom zen theme. 1) On the main page the rotating banner (done with views slideshow) is covered by some of the other page elements. 2) On all pages the primary menu is "stair stepped" Also on the main page the four images at the bottom are supposed to be on one line, but I can fix that one, just want to see if it is resolved with some of the other issues. Again, the above problems are only apparent in IE7. You can see the dev site at. CheatSheet. Gmap Uploader. A Responsive Design Approach for Navigation, Part 1. Posted by Maggie on 02/27/2012 Topics: progressive enhancement responsive design As we create responsive websites, we must consider a number of factors to make sure both the design and code are as bullet-proof as possible: the design must scale across a wide range of screen sizes from mobile to tablet to desktop; and the code must start with a mobile-first approach, work well for screen readers or with JavaScript disabled, and be robust enough to adapt to differences in text size and rendering across devices or user settings.

A Responsive Design Approach for Navigation, Part 1

Adapting site navigation to be understandable, usable and attractive across a wide range of devices is particularly challenging. Truly responsive navigation Using progressive enhancement, CSS media queries, and a little JavaScript, we built a navigation list that adjusts to fit the size of the screen and adapts to differences in text sizing. We're in the process of rethinking our site design, so we used our own navigation list as a test case. Markup Much better. A Simple, Responsive, Mobile First Navigation. We're going to build a simple, responsive web site navigation.

A Simple, Responsive, Mobile First Navigation

Our solution will help us place emphasis on the content of our page, arguably the top priority when designing for mobile. There'll be no JavaScript involved, and we'll tackle it from a Mobile First approach. Mobile Navigation If you've read Luke Wroblewski's Mobile First you'll be familiar with his statement that: As a general rule, content takes precedence over navigation on mobile. What he means by this is that mobile users are often looking for immediate answers; they want the content they went searching for, not more navigation options. Many sites, even responsive ones, stick to the convention that navigation belongs at the top of any given page. Take this example from London & Partners: A perfectly decent responsive design, but at standard mobile viewport dimensions (320px x 480px) all you really see is a navigation menu.

So What are the Solutions? Big screen, little screen. Pure CSS Solution Step 1: Markup Step 3: CSS Reset. dConstruct 2012. dConstruct 2012 · Home. iPhone 4 GUI PSD (Retina Display) The PSD is a well organized, labeled and layered PSD full of editable shape layers. Most people find it useful for mocking up apps.

Others use it to concept ideas or create custom interface elements that work harmoniously with those native to iOS. Whatever your use, we hope you enjoy it. Before you get started, you’ll want to become acquainted with some of the support documentation that Apple has put together over at developer.apple.com (login required). PDFs like the iOS HIG, UI Transition Guide and UI Catalog will help you become familiar with how and when to use these elements. Color Trends + Palettes. 50 Excellent Designer Portfolio Sites. Get the FlatPix UI Kit for only $7 - Learn More or Buy Now Designers and developers are growing in numbers and plenty of these folks have outstanding portfolios. The common advantage of the Internet is that anybody from anywhere in the world can check out your projects during any time of the day!

If you wish to land more freelance work then I would recommend taking a peek at your current portfolio to see if anything could be updated. And to help with building ideas for your own website, I have collected 200 various portfolios of graphics designers, developers, writers, and other digital creatives. This is a massive showcase gallery full of design inspiration for unique portfolio layouts. Mathew Helme Aaron C-T Becky Murphy Nidhi Chanani Vitor Kirk Wallace Mary Fran Wiley Lilondra Ospina Iris Eda Atalay Graham Erwin Alecks Faure Sean O’Grady Thomas Burns Kevin Kim Diogo Bessa Dominik Rymsza Mark Hendriks Mark Peck Francisco Inchauste Pablo Vivanco Rhubin Khalid Judson Collier Derry Birkett Lucas Perdidao.