Here we go again: Chinese whispers whistling in the wind about the new iPhone 5 hitting stores some time in September. While the world waits for comfirmation from Apple, some creatives have taken the liberty to think up their own iPhone 5 concepts. Most are moderately realistic, some futuristic, and a handful of these designs are made to push boundaries. At least, wishful thinking still counts for something these days.

Let’s not waste any more time alright? Feast your eyes on these delectable iPhone 5 concepts that can help keep you busy until the real one hits stores. Name your favorite in the Comments section.

Read Also: 30 Stunning Apple Concept Designs

Liquid Metal

A concept developed by NAK Studio, this Liquid iPhone 5 LM features a monstrous 4.5" widescreen, a Quad-core A6 chip, a vritual home button that disappears in landscape mode, and a 10-MP camera. It’s also 1.4 mm thinner than the current iPhone, giving it a sleek, classy look.

Transparent iPhone 5

This is by far one of the most unique and creative concepts out there for the upcoming iPhone 5. Such a design would revolutionize smartphone designs forever. Apart from a see-through retina display, it features a Quad-core A5 chip, the latest iOS, a virtually projected keyboard for better typing, and augmented reality.

Chicken iPhone 5 concept

This concept has a lot of shine to it. This iPhone 5 vision involves an elongated Home button, a slim, rectangular design featuring a 4-inch display. At 7-mm thickness and a 10-megapixel iSight camera at the back, plus a 5MP one at the front, this concept is as optimized as it can get.

White iPhone 5

Time to add a slight curve to the iPhone design. To cater for the ergonomic change, the camera is now placed right in the middle, topside. When viewed from the back of the phone, the design is very similar to Apple’s Magic Mouse.

Square iPhone 5

From the curvy to super boxy, this Square iPhone 5 concept instead features a tiny round touchscreen Home button. The "Home" button is digital and can show you icon apps on it (one icon at a time) which users can slide up to open. It can also be used to show the "Weather" and "Time" in Sleep mode.

Asymmetrical iPhone 5

This design is interesting as it goes from traditional rectangle or curved designs to one with a more unique touch to it. One side of the phone has corners while the other doesn’t. The side "+" and "-" buttons are more embedded into the side design. Asymmetry aside, there isn’t much else to add to the concept, but what a concept this is.

The Verge iPhone 5

This concept was built on rumours that kept pouring in from all side – designed by the folks over at "This is My Next". The sketch suggested a screen of 3.7-inches, which will occupy the entire (or near it) front of the phone, leaving almost no bezel. The Home button doubles as a gesture area and you won’t find any buttons on the side of the phone.

The New iPhone

The "New iPhone" concept is based on the hoards of rumors coming in regarding the iPhone 5 having a ‘confirmed’ 4.0" inch screen. It supports 4G LTE without a SIM card, features two panel speakers, an integrated Home button and it’s large display screen allows for desktop space.

iPhone SJ

One of the most realistic mockup in this whole group, if you see this for the first time you would probably think it is the real deal. The notable differences I can see are a little more round bezel around the corners, new side buttons along with a polycarbonated lightweight body. if you haven’t figured it out, the SJ stands for Steve Jobs, the source of inspiration for this mockup design.

iPhone 5G

The best things I like about this concept are the various colors, as everyone has different favorite colors. The features of this concept include an 8-megapixel camera with HD capture, and (I assume) an Apple A5 dual-core CPU.
This iPhone 5 uses a single part casing that is made out of magnesium, for a very lightweight design.

iPhone Full Screen

This model, made by Alternative Industries (according to design measurements given by the artist) measures a mere 4 mm in thickness and takes the whole idea of a bezel out of the design. The size of the screen is approximately around 4.0 inches by the looks of it. The pleasures of browsing online and watching a movie on this iPhone 5 concept would be an amazing experience.

Size Zero iPhone 5

This concept comes from Italy, courtesy of Antonello Falcone. The idea is based on a bigger display, something around 4.6" inch, built on a curved glass display giving the device a reduced thickness of 8.4 mm. Another major change is the replacement of the physical "Home" button with a softer touch area.

HTC-Like iPhone 5

Will the thought of having a larger display screen push iPhone makers to adopt HTC’s design style for the new iPhone 5? I doubt it. You can tell I’m not a huge fan of this concept but with a larger screen rumored in the mix, this is a viable design to consider.

Future iPhone

This may not be the best render out there, yet it serves as a good concept of the upcoming iPhone 5. A traditional white color would be great, considering the popularity of a white iPhone 4. Speculating, looking at the image, there is a notable larger screen as is predicted for the iPhone 5, however, one thing I notice is that the "On/Off" power switch is shifted to the left-hand side rather at the default right.

Simplistic Silver

The concept has an LED light on the lower right side (next to the "Home" button) to notify you of the smartphone’s functioning mode, orange for no service or connection, green for good battery life, red for low, and flash white for new notifications.

iPhone 5 Concept

The thickness of this iPhone measures around an amazing 6.35mm while the length comes to close to 6 cm. It looks more like a pouch than a phone.

iPhone Spyder

This iPhone concept takes things to a whole new level and incorporates the use of a spider-like stick-on design. This makes it more of a jewellery, a bracelet if you will, rather than a phone. In my opinion, the screen would be flexible and very resilient, probably with a 3-inch diagonal or close to that.

iPhone 5 Alleged

This design is similar to the current iPhone and has a much more similarity to the current iPod Touch. The representation here, however, does show a 4-inch screen that preserves Apple’s current screen ratio. The design is thicker at the top and slightly reduced at the bottom. We’ll see if this is close to the real very soon.

Summary

By the time this post is published, I am sure loads of other concepts will surface across the Internet. So, if you know of any concept that has caught your eye more than others, post a link below in the comments and let us know too.

Related posts:

1. iPhone 4 Accessories: 30+ Unique Cases and Sleeves
2. 40 Creative iPhone Wallpapers To Make Your Apps Look Good
3. iPhone Photography: Beautiful Photos Taken With iPhone 4
4. iPhone 4 Tips: 10 Things New Users Should Know

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.

Original Source – Download

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.

Original Source – Download

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:

• Business website templates
• "Coming soon" page tutorials + templates

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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.

Original Source – Download

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!

Original Source – 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.

Original Source – Download

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:

1. LESS CSS Tutorial: Designing A Slick Menu Navigation bar
2. 60 Most Wanted Design Freebies of The Year 2011
3. JPEG Optimization for The Web – Ultimate Guide
4. 30 Dribbble Freebies For Web Designers

Printing is usually the last step towards a documentation exercise. However, often times you may not have quick access to a printer, or you may have multiple devices with only one connected to the printer, and you may need to ‘hijack’ the plugged-in device just to get your stuff printed. When did printing become such a hassle?

Wouldn’t it be easier if you can connect all your devices — including your tablets and phones — to one particular printer and print straight from any one of the devices, from any where, as long as you’re connected to the Internet?

This can actually now be done with the help of Google Cloud Print (GCP), a cloud service by Google which connects your printer with multiple devices via cloud connect, so you can print from any of your devices. With GCP, you do not have to worry about installing a printer’s driver in your computer, which is a hassle by itself when it is not supported by particular operating systems or versions.

How Google Cloud Print works

GCP works as a platform to submit and manage print jobs via Internet cloud, and printing jobs can be sent from multiple platforms, be it from a native computer, mobile app or web app. When a printing job is sent, GCP is responsible for sending these instructions to the designated printer, selected by the user.

Using GCP over a secure HTTPS web connection keeps your contents safe, and makes it very convenient to send printing jobs from a variety of devices, not just a computer. On the plus side, you get to share printer usage with your friends and colleagues too. In an office setting, the management can invest on one better printer rather than several average-quality ones.

Using Google Cloud Print

To start using GCP, you need to connect your Google account to the service. You first need to have Google Chrome installed in your computer, be it a Mac or PC (Windows XP users need to have Microsoft XML paper specification pack installed together).

1. Launch Google Chrome

When you have Google Chrome installed and launched, click on the wrench icon on the top right corner of the browser, next to the address bar and look up for sub menu ‘Options’ (or ‘Preferences…’ if you are on Mac).

2. Under the hood

At the Options/Preferences window, go to ‘Under the Hood’ on the left menu.

3. Sign in to Google Cloud Print

Under the Hood, scroll down to the bottom of the page and click on ‘Sign in to Google Cloud Print’.

Proceed to manage your printers.

4. Connect to Printer

If you are using a standard printer, consider your job done. GCP recognizes almost any type of printer so when you click on ‘Manage your printers’, you will see your printer already listed and ready for use.

But if you own a Cloud-Ready printer, you need to first register them from the product website before you can use the GCP service. Click on the ‘Add a Cloud-Ready Printer’ menu on the left.

You will be redirected to a page with instructions to add these printers, together with the links to the registration page. Simply follow the instruction, and enter the email address registered with the product.

5. Share your printer

One of the great features provided by GCP is the ability to share the use of your printer with others. To start sharing printer usage or to authorize other users to use the printer, highlight any printer from your list and click on the green ‘Share’ button.

A small window will pop-up. Simply type in the email of the person you want to authorize the usage of your printer for, and click ‘Share’.

You will be able to see the name of the person in the list. Note that you can remove authorized persons at anytime.

6. Start Printing!

Your printer is now connected to the GCP and you can start printing from anywhere as long as you are connected to your Google Account on Google Chrome. Be it your own printer or your friends’, printing is simple as long as the printer is already listed in your GCP account.

To start printing from your Chrome, Ctrl+P the command or select ‘Print’ from the wrench menu. A new Window or ‘Tab’ will appear with printing details and a preview. Click on the ‘Print’ button and the printing job is sent to be executed.

Conclusion

Google Cloud Print has made printing easier, and more easily accessible. Printing requests can now be sent from many associated Google Apps, not limited to Google Chrome only. You can also give printing instructions from many available apps e.g.

• Cloud Printer on Mac,
• PrintCentral Pro on iOS devices,
• Mobile Google App from mobile platforms, and
• many more apps for Android such as PrinterShare and Easy Print.

Related posts:

1. Getting started with Amazon Cloud Drive
2. How to Get The Most Out of Google Drive
3. Cloud Hosting: How Does it Really Work?
4. Google Handwrite: Scribble Your Searches on Touch Devices