Showing posts with label UI design. Show all posts

Everything You Need To Create Windows 8 Metro UI-Styled Websites

Windows 8 has arrived and the familiar look of Windows OS has completely changed with the tile-based Metro UI.

This is a big move by Microsoft as this new UI will be used in all their platforms including desktop, tablet, mobile and their website as well.
Personally, I liked the Metro UI as it fits into many aspects of the modern web design like simplicity, grid-based interfaces (good for responsive layouts) and it is consistent in every part (there is really a style guide behind it).
Metro UI Websites
Although tile-based UIs is nothing new, Metro UI will definitely inspire many designers and we’ll see websites similar to it.
If you like the Metro UI and planning to create your next website with inspirations from it, here are all the resource to create Windows 8 Metro UI-like layouts:

Frameworks & Templates


Metro UI CSS

Metro UI CSS
Metro UI CSS is a pretty complete framework for building Metro-like websites.
It is created with LESS and has a grid system, styles for typography, tables, forms, buttons, and images
There are also built-in JavaScript components for the popular tiles, menu, sidebar, accordion, progress bars, notices and more.

BootMetro

BootMetro
BootMetro is like a theme for Twitter Bootstrap that brings every feature of Bootstrap but with a Metro design.
It is actually some more as there are custom styles for the tiles, application bar and some other components.

metro-bootstrap

metro-bootstrap
Similar to BootMetro above, metro-bootstrap is again a theme for Twitter Bootstrap.
It has all the beauties of Bootstrap and also includes the LESS styles as well.

Metro UI Template

Metro UI Template
This is a website framework and template to create sites using the Windows 8Metro UI style.

It features very smooth transitions and many tiles (RSS, Twitter, weather, etc.) are included.
The template is mobile-friendly and has a jQuery UI theme as well.

Droptiles – Metro-Style Web Dashboard

Droptiles
An open source Windows 8 Start-like Web 2.0 Dashboard (like iGoogle).
It displays info in tiles where each tile is a mini app itself fetching data from external sources.
The project is built with ASP.NET but can be ported to any other language with ease.

PHP Image Gallery In Metro UI

PHP Image Gallery Metro UI
A PHP image gallery script that can auto-generate thumbnails and can display images in a Lightbox.
it is fully HTML5 and CSS3 compliant.

Motown

A library to build Metro-style apps with Visual Studio using as little code as possible.
It doesn’t rely on any JavaScript frameworks.

jQuery Plugins For Metro UI-Styled Websites


jq-metro

jq-metro: Metro UI jQuery Plugin
jq-metro jQuery plugin comes with several control for creating Metro-like interfaces.
Currently, panorama, pivot, progress bar, list picker, toggle switch, buttons and textbox are available.

Metro JS

MetroJS
This jQuery Metro UI plugin is capable of creating the tiles, application bar and has theming support.
The tiles and application bar are highly customizable in means of functionality and design.

jQuery Metro UI Plugin

jQuery Metro UI Plugin
The plugin enables us to create the tiled-views with ease and this is its only focus.

jQuery Mobile Metro Theme

jQuery Mobile Metro Theme
A free jQuery mobile Metro UI theme that is customized for the Cordova-built apps.
It uses various plugins for handling the app bar, progress bar, toggle button and date-picker.

Metro UI Theme Builder For jQuery UI

jQUIT Builder
A ThemeRoller-like theme builder for jQuery UI that focuses on creating Metro UI looking outputs.

TileJS (non-jQuery)

TileJS
A standalone JavaScript code for creating the tiles and accomplishing the tilting effect onClick (with CSS3).

Free Metro UI Icons


Modern UI Icons

Modern UI Icons
A set of pixel-perfect and hand-crafted icons in the Metro UI style.
They come in .design, 48*48px PNG (for App Bar) and as XAML files.

Metro UI Dock Icon Set

Metro UI Dock Icon Set
A free set of 670+ Windows 8 dock icons and it grows regulary.
It is available in 512*512px .PNG, 256*256px .ICO and as .SVG (converted by another designer).

Metro Icons

Metro Icons
The icons are inspired from the Windows Phone 7 and still a good fit for Metro UI apps.

Download pack consists of 130 .PNG icons.

The new Divi 2.5 – An Awesome Performer That Is Now Even Better

image001
The massive revamping that accompanied the release of Divi 2.4 set the stage for Elegant Theme’s newest version of this premium WordPress theme. Version 2.5 is yet another step forward in the authors’ quest to create a Divi plugin and put in place a Divi framework, and it is a giant step forward.
Several huge time-saving features have been included in Divi 2.5. Whereas Version 2.4 enabled you to create a website in a fraction of the time that it often would take in the past, Divi 2.5 will increase your productivity even more.
Divi 2.5’s Productivity Enhancing Features
When you first discover how the handful of new features that have been incorporated in Divi 2.5 increases your productivity by leaps and bounds, you may well wonder why someone didn’t think of them earlier. You may also wonder how you were ever able to get along without them. The answer is simple. Premium themes do not achieve perfection overnight. They evolve. User feedback often plays a role, as do sudden insights and instances of pure inspiration on the part of the authors.
Several features you somehow managed to do without you will now find in Divi 2.5. You will find their time-saving and productivity enhancing capabilities truly remarkable.

Right Click and Hotkey Options

image003
Divi’s straightforward modular approach to site building could nevertheless become a bit cumbersome at times. The new right click/hotkey interface makes managing the process much easier. The modular design approach is not changed, but this new feature enables you to access Divi Builder’s existing and newly integrated settings much more rapidly, and with much greater ease.
It won’t take you long to discover how the ability to Copy, Save, Undo, and perform several other actions with a single click will be a real time saver.
The Ultimate Time-Saving Tool – Divi Live Preview
image005
Count the hours where you would edit – save — review, edit – save — review, over and over again. Those were not hours wasted in the sense that you were performing work that had to be done, but they were hours wasted in terms of performing repetitive tasks that were, in hindsight, totally unnecessary. The Live Preview feature is a huge time saver, in that it eliminates the need for these repetitive and unnecessary page-building steps.
When you have completed a task, you can either save your work in the Library, or you can save and edit it if you wish to preview it first. This feature gives you much better control of your work while avoiding becoming caught up in the earlier time consuming process. Your productivity will improve even more as Live Preview is used in conjunction with Version 2.5’s new History, Undo, and Copy/Paste features.
Divi Undo/Redo/History – a Powerful New Tool
image007

Instead of realizing you made a mistake and wishing you hadn’t, this powerful new features allow you to go back in time to the point where the mistake was made, and Undo it; or Redo it if appropriate. The History function keeps a record of your page-building activities. With that record in hand, you can go back to whatever point you wish to in order to review an action and change it if needed. You can eliminate a potential bug before it becomes a cause for embarrassment, or you can make something good even better. This feature is yet another time saver, and in certain situations it could prove to be a huge one.
Gain Greater Control with the Divi Role Editor
image009
Even your best and most trustworthy clients are sometimes capable of making a mess of your website design if they are given the ability to do so. This is of course one of the hazards of sharing control. A client may need to have control over certain aspects of a website — changing products, content, etc., but there are certain design features that you would not want your client to change. The Role Editor is one of several UX improvements designed to help small design agencies and freelancers maintain better control over their work.
The Divi 2.5 Role Editor enables you to specify which website elements your client can edit and which your client cannot. You will be able to maintain full control over specific website features by locking them in. You can also set and assign editor, author, contributor, and administrator roles to avoid problems and/or misunderstandings down the road.
The number of Divi 2.5’s new features may seem relatively small, but their productivity enhancing and time-saving potential is awesome. The previous version did much to set the stage for this new version, which is yet another step towards the soon to be realized objectives of creating a Divi plugin and establishing a Divi baseline. In the meantime, Divi users can enjoy the benefits this latest version brings to the table, Give Divi 2.5 a closer look. You will like what you see.

Must Have Tools and Services For Designers

 While there is no shortage of themes, page and app builders, or design aid services and resources, you still have to do some searching to make certain you choices are quality choices. This short list of high quality items covers most of the bases, and you can select one or more of these products or services with confidence. You naturally want to get your money’s worth, and that will definitely be the case here, plus one or two freebies have been included to sweeten the pot. If you see an item of interest, click on the hyperlink that takes you to a website for additional details.
WordPress Themes
1
With its incredible new page builder as its central feature, the release of X Theme’s Version 4 has created more than just a stir. Cornerstone, the new and innovative page builder, created a virtual storm of rave reviews. Its intuitive, app-like interface, in combination with Themeco’s diverse selection of design elements, makes page building almost ridiculously fast and easy. X’s other features may have temporarily been taken out of the limelight, but it must be remembered that they are the reason this theme is ThemeForest’s fastest selling theme of all time, and will likely remain so. Your purchase of this theme gives you access to the many plugins created for WordPress by Themeco, plus you will have access to a dynamic community site, to information-rich forums, and to a user support team that is second to none in the industry.
2
Enfold is an exceptionally easy to use WordPress theme. It is in fact its usability that has made this theme Themeforest’s best-rated top seller. Import a demo with a click, and you are ready to start building, or you can import several demos, and use design elements from each. Once you start building your very first website, you will understand why the editor is considered to be the easiest to work with of all of the WordPress themes. A multiplicity of features is a good thing to have, but they must be easy to put to use, and it is Enfold’s focus on decisions rather than features that makes it the powerful and delightful WordPress theme it is.
3
The first thing you may be tempted to do when visiting Be Theme’s website, is to browse through its 100+ pre-made layouts. In fact, they are so prominently displayed, you can hardly avoid doing so. These layouts include virtually any category you will be likely to design a website around. They represent design concepts, and they are definitely idea generators. They are also completely editable. These layouts will get your project off to a fast start, and Be’s 40+ other features will enable you to maintain your momentum. If you need it, you can expect more than a little help from the world-class support team, which is at the ready 24/7, and is a team that is well known for its rapid responses. Be is intuitive and lightning fast to work with, and by far one of the best choices you can make.
Website Builders and Platforms
4
XPRS is more than a little different. If you are a whiz with Lego, you will feel you are in familiar territory when you first start using this website builder. XPRS’ building block system, which is embedded in its CMS, is called Polydoms. The building blocks differ from Lego blocks however, since they can be edited and modified. This website builder is also somewhat of a different breed in that you will not require the use of plugins to get your work done. It is free for students, artists, and non-profit organizations to use. Professional users pay yearly fee of $250, and receive unlimited licenses in return, allowing them to manage hundreds, if not thousands of clients’ sites. XPRS is incredibly easy to use and a real timesaver. Check it out.
5
Webydo is a full-service SaaS platform led by its growing community of more than 175,000 designers and web agencies. This cloud-based, responsive web platform allows designers create, manage and publish their clients’ websites, code-free. With one-click hosting and client billing as standard features, Webydo eases the designer-client interaction brining a new level of professionalism to the website creation process. Webydo also enables you to manage multiple clients’ sites through its customizable dashboard. Excelling in design craftsmanship demands using the right tools: Developers have WordPress. Amateurs have Wix, Weebly and Squarespace.

WordPress Page Builders
6
To say that Themeco’s recent launching of their Cornerstone page builder created some excitement would be an understatement. This innovative tool became an instant hit in the web design community, and its users are still raving about it. Many drag and drop page builders are easy to use, but few do most of the editing and previewing on the front end. Cornerstone features side-by-side, interactive displays of the edit and preview processes, making it possible for you to see the edits as they happen, and in a clutter-free environment. This page builder is definitely worth looking into.
7
Themify Flow is another WordPress page builder that features front end editing. You can see the status of your work as you are building a page, obviating the necessity of having to check back later to see what you did. The number of templates you can design has no limit, the styling of individual design elements is quick and trouble-free, and you have total control over your layouts from start to finish. These characteristics makes Themify Flow difficult to ignore as a page builder of choice. One more thing: Since it is open source, you can use it for free!
Project Management and Collaboration Tools

8
If your project management tools have not been giving you the performance you need, Nutcache is the ideal solution you’ve been looking for. The same is true if you are looking for a better way to manage and improve your team collaboration efforts. This tool is a definite program management asset for tracking time, expenses, and project status, and for organizing and storing comments, documents, and project notes in its collaborative boards for eventual sharing. You will always be kept aware of your project’s status and your team will always be kept in the loop.
9
Some project planners and task manager tools only succeed in creating more work and more stress; objectives they were designed to minimize. Azendoo offers a more relaxing way to approach your work, yet keeping everything under control. With this task manager and project planner working for you, you can finally relax without fearing that everything will suddenly go out of control. Part of the secret to this application’s success is that it was intended for use as a collaborative teamwork tool. It offers an ideal solution to any issues you may be facing in attempting to keep your projects on track.

Converting Designs to Code
10
When your design is complete, and you are ready to let the developers take over, look to PSDGator to take your PSD files and convert them into W3C valid HTML/CSS, or HTML5/CSS3 if you prefer. One of the excellent features this service offers is to review your design and specification to see it if there are any outstanding issues to resolve before they commence with the coding. If you have existing sites that require recoding to become responsive, PSDGator will to that for you as well.
11
HTML 5 slicing is their team’s specialty, and Direct Basing’s clientele consists of freelancers to Fortune 500 companies, and everyone in between. Whether your design has been captured in PSD files, Adobe Indesign or Illustrator files, they will make it web browser-ready. Fast loading time is always a top slicing priority, whether your need is for web pages, newsletters, emails, or web shops.
12
40 Dollar Markup converts Photoshop designs to W3C valid HTML/CSS. They also recode legacy PC websites to bring the code up to standard, and they convert desktop designs to responsive designs. This service does not use automated software. Everything is hand coded, and once the code has been delivered to you, 40 Dollar Markup will be there should you be in need of further support.
Hosting Services
13
If using a large, well-established hosting service will make you feel more comfortable, Glowhost will be an ideal solution. They have a reputation for providing the fastest and most accurate hosting services in the world, and their servers are located in 16 locations around the planet. Specialties include managed dedicated, managed cloud, and complex service cluster hosting services. Glowhost is definitely worthy of your consideration.

14
Whatever level of hosting support you require, Site 5 has a plan for you. Any plan you choose offers unlimited bandwidth and disk space, a disaster recovery backup service, free migrations, and 24/7 phone support. That’s a good deal for a low price. You also have the option to choose the hosting location, a choice which can influence how fast your website will load. Contact Site 5 by email or live chat if you would like to know more.
Stock Photo Agencies
15
With its library of 26 million images, Bigstock is aptly named. The number may seem overwhelming at first, but you will find it easy to quickly drill down to a few quality examples of what you are looking for, whether it is a photo, a vector, or an illustration. Take advantage of the 7-day free trial offer and pick up to 35 free selections to get started. After that, you can make your purchases by subscription or by prepaying for credits.
16
Stockfresh also has a library that features millions of items, and they claim to have the best prices on the market for high-quality photos, illustrations, and vectors. As an added feature, the Stockfresh website is responsive, so you can browse their offerings, and make your selections, while you are out and about. Both prepaid and subscription plans are available.
Web Apps
17
If you do some or all of your marketing via email, the Sendloop web app might be just the right tool for you. It has everything you need to conduct you email marketing campaigns, including an excellent selection of mobile device-ready email templates, an online image editor, and a drag and drop email page builder. This high-quality specialty item is definitely worth a look.
18
Typeform did to forms what Tesla has done with cars: completely redesigned online forms from the ground up. Typeform creates a beautiful and conversational form experience for your audience. You can embed images and video seamlessly into your forms to further clarify your questions. Build quizzes, take online payments, and even tell stories. The free version has crazy options.
UI Kits
19
When you need to design an Android mobile app in a hurry, and one that will feature a stunning array of material displays, the Vonn UI Kit can save your day. This drag and drop kit includes a selection of 100 classy templates placed in 9 convenient categories, so you can always find the template you need in order to get started in no time at all. Download the files on Photoshop and you are ready to go!
20
The Ink iOS Mobile UI Kit is the right solution for you if speed and ease of use are among your top priorities. You can quickly create apps and/or prototypes using any of the 120+ Photoshop and Sketch screens included in this kit. They have been placed in 7 convenient categories to help you quickly zero in on exactly what it is you need. This mobile UI kit will make a nice addition to your toolkit.
Icons and Fonts
21
The name says it all. The way icons are displayed on mobile devices can make the difference between your design’s success or failure. The Icons Responsive library features more than 1000 scalable and responsive icons. They come in 4 sizes, and they are presented in outline, flat-filled, and round container styles. The icons are also in a vector format for editing purposes.
22
TrueSketch fonts are completely handcrafted, practical to use, and fun to work with. Handcrafted fonts can be used for many things, but they can at times play a major role in helping to establish a brand. The package includes both standard fonts and italics, and a nice selection of stylistic alternatives. Desktop, web font, eBook, App, and Server licenses are offered.
Final remarks
Everything you see here is top quality, whether it is a product, a service, or a resource; so you need not be concerned about making a bad choice. If you have seen something of interest, visit the website and explore what the product or service provided has to offer. You might even want to do some comparison shopping.
We are always interested in whether you found something of interest or not. If you know of a product or service you feel should be included in our listings, let us know. Leave your ideas or comments below, and make it a point to visit us again.

Best Premium Iconsets for UI Design


Both mobile and web interfaces can be enhanced through proper icon use. There are many varieties and styles of icons, so it’s important to figure out when and why you’d need them. But the absolute best resources come in the form of premium iconsets with hundreds of different choices.
Take a peek at the following selection and see if any icons could be of use in future project work.

Smashicons

smashicons icons design

Pixel Love

ios8 icons pixellove kit

Glyphish

glyphish icons iconset premium

Retina Icons

retina icons iconset premium

Streamline Icons

ios icons ios8 retina

Symbolicons

symbol icons vector iconset

Iconmart

iconmart icons premium set

Flat Icons

flat icons iconset premium

PictoFoundry Elite

picto elite pro iconset

Othericons


other icons iconset vectors