Designing Killer Web UI Layouts with Freebies – Ultimate Guide
The field of web design has taken on a breath of its own in just a few short years. There are more active designers worldwide now than ever before, all collaborating on innovative project ideas. And the concepts behind many of these trends have been developed through professional graphics designers.
It can take months or even years before you fully understand the technicalities of building a user interface. You need to consider sizes and placement of page elements, also readability of text and labels. With a bit of spare time you can dig into a minimalist approach for building websites with less and reducing confusion. And even then, there are dozens of other design techniques to consider as well.
For this guide I’ve paired up some modern user interface design techniques with freebies you can download and play with. It is my hope that this will offer some motivation to those interested in a career in building graphics/web design. Even professional web designers may find a few of these trends helpful for your next project.
Recommended Reading: 30 Dribbble Freebies For Web Designers
Practice with Full Templates
When you have the skills to design your own layout from scratch there is no need to begin with templates. Beginners, on the other hand, may feel more comfortable starting from a full design and working into the finer details.
There are some excellent free downloads of full PSD website templates for portfolios, homepages, blogs, and many other categories. These are the perfect designs to get started with to familiarize yourself with a “general” web layout. Each website will have different needs for page elements and you’ll have to determine which items are important.
Here is a PSD example called "AppCivilization", designed by Martin Fabricius. The layout is featured for a creative studio who designs mobile apps and possibly websites. Towards the bottom you’ll find a small panel of app icons showcased in a portfolio. You’ll also notice the whole design is broken up horizontally into a header, top slideshow, main content, and darkened footer.
Designing Landing Pages
Let’s look at another freebie also designed by Martin. This next example is a landing page which you could use to sell any type of products. Generally these are digital goods which can be downloaded by the user i.e. apps, photos, icons, templates etc.
But the best part of his design is that it’s very flexible for beginners to work around. The header still uses a small top navigation with a big image, but notably the expected user actions are different. He has a big “Buy it!” button which stands out right above the fold. On a product landing page this would draw more attention than a jQuery slideshow.
Another great UI technique is the small iPhone feature display mid-way down the page. Martin includes an iPhone preview shot, App Store button, and a small list of key features. When visitors are looking for product details you can’t make things simpler than via a formatted list.
More templates:
Here are couple of free PSD templates we released in the pass:
- "BiZ" Business Website PSD Templates
- "ThinkJuice" Product Site PSD Template
- Professional Business Site PSD Template
- "Polo360" Portfolio Site PSD Template
You may also be interested in these following:
Main Site Navigation
Menus and buttons are just tools for building much larger page elements. There is no denying that your website’s main navigation holds a very significant purpose. You need it for your site to be easily accessible with possible fallback methods for mobile users.
Below is a cool navigation bar with a stitching texture effect. The highlight style can be featured as a darkened box or as a downward tip pointing into the page content. This style has been prominent over the years and looks great in the right setting.
Another similar freebie is this textured header navigation designed by Edi Gil. I really like how this second navbar includes both a list of links and some additional page buttons. You’ll want to offer secondary links to visitors where they can find your profiles around the Web.
Alternative Menu Styles
Aside from the typical horizontal navigation bar there are other styles of design to consider. Vertical links can be split up into different sub-headings which leaves more room for page content.
Take for example the menu freebie below designed by the website Icojam.
Each heading is built to expand and collapse based on the selected object. Additionally the design allows for a small number counter to sit to the right side of each category. This would best fill out as a blog navigation to count how many posts are filed under each topic.
Navigation tips/Tutorials:
- 50+ Clean CSS Tab-Based Navigation Scripts
- Breadcrumb Navigation Best Practices & Examples
- Building Mobile Navigation with jQuery
- Coding Breadcrumb Navigation In CSS3
- Designing Navigation With LESS CSS
Cleaner Web Forms
The modern age of the Internet is far from a static meeting ground. Users are constantly sharing information and interacting with each other on a daily basis. Most of this text and media sharing is managed through web forms.
We should look at just a couple of examples of how you can design clean-looking form inputs and buttons. The design of your elements can go a long way towards inviting your visitors to actually use them. And this in turn builds your site credibility and garners more pageviews.
Login Fields
There are a few great examples of login form PSDs to check out. This login freebie via WP Scientist has all your standard elements. Two input fields for login/password, a submit button, and check boxes to manage session cookies.
This model of design is perfect if you can implement the effects through jQuery. The top right arrow head makes you think of a popup-style window setup. This is a wonderful technique to save space on your website by keeping the form hidden until a user clicks the registration link.
The form below is free to download thanks to designer Gil Huybrecht. He used a similar pattern with a grainy background and paper texture. What I especially like about Gil’s design is the "oversized" elements. It’s much friendlier landing on a login form which fills the whole page. Users can easily see what they’re typing and there is less clutter.
If you are experienced as a frontend developer using CSS3 then it’s super easy to translate this graphic into code. You can even implement the selected outer glow effect and rounded corners for the button and input fields.
Contacts
Another form you’ll find on practically every website is a contact form. This will normally include fields for the sender’s name, e-mail, and message content.
The freebie below is an awesome example of using custom textures and icons.
The design also uses placeholder text instead of labels. This means that when the form first loads each field is set with a default value (ex: your name). But then as you start typing the placeholder clears and your content is displayed instead. All standards-compliant browsers will support this effect and it can save you some space on the page.
Another wonderful freebie to grab is this tabbed contact form designed by the talented Jonno Riekwel. This design is much simpler and does feature labels above each input. This is a great solution for larger businesses or startups who need to send messages along through different departments in the company.
Contact Forms tutorials:
- Login / Registration Form: Ideas and Beautiful Examples
- Create A Stacked-paper Effect Login Form
- Create An Ajax-Based HTML5/CSS3 Contact Form
Ribbons and Banners
Just 6 or 7 years ago rounded corners were beginning to rise in popular design trends. Now we’ve come even further with drop shadows and corner ribbons.
Some of these elements can be used as design highlights, such as a comments counter or as a publishing date for a blog. The stitched ribbon above is perfect for portfolios or project pages where you want to capture your visitor’s attention. You could also try a similar vertical ribbon where the design drops in from the top.
These tiny page effects do go a long way to enhance your layout. Visitors take notice and will love these aesthetic pleasantries. But consider that small corner ribbons are only part of this design trend.
Additionally full-on banner designs have become insanely popular for building up brand recognition. You can utilize these in your logo, navigation, homepage, or even on featured blog posts. The implications are practically limitless with good design capabilities.
Wrapping the Corner
Another very specific ribbon banner effect is performed by wrapping the design around your page corner. This builds the illusion of your page being 3-D and the ribbon is wrapped around the top portion of your website.
The design below is 100% free for download and can be used for your own project ideas. You can see how this would draw attention from visitors and why this trend has grown into such a frenzy. Be careful not to overuse the banners. In bulk, these can get very annoying much like the older "web 2.0" glossy/mirrored effects.
Designing with Buttons
Aside from hyperlinks you’ll get the most interaction from visitors with buttons. These page items can perform anything with the help of jQuery and Ajax calls except you can also use buttons for linking to static content, such as freebie downloads for example!
The UI kit below, designed by Matt Gentile has a lot more than just buttons. His PSD set is fantastic for beginners looking to pick up gradients and textures for building similar forms. Often times you’ll find much higher-quality buttons in UI kits than with singular PSDs.
How to Create Variations
As you spend time practicing these techniques you’ll want to create many different styles over time. This may result in switching similar buttons between different projects and layouts. A good example is the milky buttons set offered by designer Robert van Klinken.
Each of the original three buttons have a different gradient style, except the hover and active states which look similar. When working in Photoshop you’ll have to match colors between gradients or move the colors onto an effects layer. With this understanding you could even build your own buttons freebie set for download!
Wood+Paper Textures
When you need to spice up your basic layout designs then you’ll have to move towards more crafty methods. Textures are always welcome if you can implement them properly through CSS backgrounds or set-width content. And two of the most popular textures I’ve seen are wood and blank papers.
The notepad idea is really simple but it can work up into a cool branding design either as part of a user interface element or built into the entirety of your layout. But paper doesn’t always look the best on its own, and another texture may help the styles blend in. This is where more detailed textures of wood may come into play.
Images will stand out and look wonderful wrapped in an outer shell. The whole concept of texture is to give your website a specific feeling or emotion. Wood themes can evoke a sense of home and nature. There’s even an awesome wooden web UI kit for download by Jeremiah Wingett. If you’re feeling creative, try putting together some of your own textures and see how they perform in a web-based environment.
28 High Resolution Wood Textures
Conclusion
The best web designers are the ones who practice daily and never let their failures deter from their ultimate goals. You have to be responsive and bounce back quickly from both success and failed attempts. The tips and freebies in this guide should be a good starting point to start learning how to build different page concepts for a web project. And we’d like to read your thoughts about the matter in the post discussion area.
Related posts:
- LESS CSS Tutorial: Designing A Slick Menu Navigation bar
- 60 Most Wanted Design Freebies of The Year 2011
- JPEG Optimization for The Web – Ultimate Guide
- 30 Dribbble Freebies For Web Designers
via hongkiat.com http://www.hongkiat.com/blog/killer-ui-with-freebies/