What design styles do you prefer? Do you adhere to classical time-tested scenarios or maybe you start testing the hottest trends as soon as they appear? This entry will interest progressive design nerds at first turn because we are going to showcase some inspiring metro-style website designs at the end of this brief preamble.
First of all, let’s clear up what is covered under the term “metro-style design”. Actually it’s a typography-based design language developed by Microsoft on the principles of Swiss graphic design. Swiss style was created in Switzerland in 1950s. It is denoted by the hallmarks of cleanliness, readability and objectivity. Asymmetric layouts, grids, sans-serif typefaces, flush left, ragged right text and photos instead of illustrations are characteristic for Swiss style standards.
As you might have already noticed, fresh and sleek metro-style is focused on the content, emphasized with prominent typography and less graphics. Flat colored “live tiles” and laterally scrolling canvas can also be faultlessly reckoned among the recognizable metro-style features. Windows Phone, Microsoft’s website, Xbox 360 dashboard and Windows 8 are just few bright examples of the implemented metro-style principles.
By the way, did you know that some brilliant ideas for metro-style design have spawned in Microsoft’s developer minds owing to common language signs, which we come across every day at public transport systems and King County Metro transit system (Seattle area, not far from Microsoft’ headquarters) in particular? By parity of reasoning, awesome typography and large text inevitably catch our eyes, just like the above mentioned signs. In fact, avoiding the excessive graphics, collating regular tasks into groups and letting the content work as main UI were to make user experience simple, intuitive and prompt.
Speaking about metro-style design it’s impossible to miss the animation as according to Microsoft’s suggestions, the website should seem “alive” and respond all user actions.
If you are interested in deeper investigation of Microsoft design language principles, click here to see their compilation. You may also have a look at the recently posted interview with Arturo Toledo, an experience architect and UI designer, who worked for Microsoft in Redmond for 7 years and personally took part in metro-style development.
Now it’s a good time to browse the collection of website designs inspired by metro-style.
* * *
* * *
* * *
You don’t need to be an artist to create great UI – most of the principles of user interface design are the same as the basic design principles taught in any elementary art class. The elementary design principles of composition, color, and so forth apply equally well to a computer screen as they do to a sheet of paper or a canvas.
But other than that there are tons of other things every designer should keep in mind. The importance of User Interface Design is that you want to create a website or app that is easy to navigate, efficient to use, and gives your users a really pleasurable experience. It should also be as free from errors as possible. This is how you can more easily guarantee that they will continue using your products and will recommend it to others as well.
In terms of interface design we decided to ask a man who knows all the angles of this notion and that is Arturo Toledo.
Arturo Toledo is an Architect. He runs a boutique design studio attending clients in the United States, Europe and Asia. His work explores the convergence of human arts and science to give shape to an ever evolving design practice. With a particular commitment towards design education, Arturo is permanently engaged with the international design and development communities and often travels the world to exchange ideas about design with other designers and developers. Prior to his current venture, Arturo worked for Microsoft in Redmond for 7 years driving design evangelism.
***
Lilian: To begin with, tell us about your greatest achievement (regarding anything.)
Arturo: My greatest achievement? Hmm I hope I haven’t seen my greatest achievement in my life yet to be but so far I’d say it was probably making it to an ice hockey league as a right wing. You have to understand I am from Mexico. It’s like when Jamaica debuted in the 1988 Calgary Winter Olympics with a bobsled team! So, yeah, it felt pretty good being on the ice and driving the puck around and scoring a few goals.
Alex: We know that you worked at Microsoft for a while. Tell us please about your job interview there. They say applicants are asked some weird questions, what were they like?
Arturo: Before my interview I reviewed tons of sites that talked about the hiring interview in Microsoft. I read all the crazy questions would get. Why is a manhole round? How are M&Ms made? How many traffic lights exist in the U.S? – I was ready and prepared. Got to Redmond and for 8 hours and 8 interviews I never got such type of questions 
I later realized those more strange questions were asked apparently to engineering candidates while I was applying for evangelism and marketing so I guess they didn’t care much about how M&Ms were made.
Lilian: You’ve been developing interfaces for Windows phones, but what’s your forecast, which mobile platform will finally take over the world: Android, iOS or Windows?
Arturo: Well, iOS already took over. It’s the number one choice for 99% of startups I know or have read about. Android usually comes in second place in terms of the need for a startup to have an app for. Then Windows Phone. How do I see the future? I see Windows Phone (or any future Microsoft mobile platform) reaching a competitive 20% within 5 years. This means that startups and companies will have one out of five users using a Windows Phone. That’s pretty significant. I think this is the right time to jump into Windows Phone as a developer or designer because the enterprise, businesses, agencies and startups will every day, more and more demand more Windows Phone apps, and who’s gonna build them? Lots of creative and business opportunities in this space. All this said, I also think that in 5 years, the concept of a smartphone will have already migrated to the next stage of technological evolution. The attention will shift from “smartphone” – to “the next thing”… what will that be? That’s what we have to keep track off. The smartphone will not be the star of the show in less than 5 years so I hope Microsoft is not playing catch up and instead is inventing the future. I’m sure Apple is.
Lilian: What do you think are some of the main UI differences in designing desktop apps for PC and Mac?
Arturo: I haven’t had the opportunity to design a desktop app for Mac OSX but given OSX has embraced many similar concepts to iOS then I’m thinking the design mindset is similar. It’s about skeuomorphism. Or it has been. As we know, Jonathan Ive from Apple now owns both hardware and software design. Ive is a modernist (Vignelli, Gropius, Meier, Rams) so there is a general expectation that he will sponsor a new era of UI design in Apple. Let’s see what happens. My personal expectation is that Apple is working on enabling iPhones, iPods and iPads to be plugged in to large screens (24”-30”) immediately turning all these devices into “PCs” or “over the desktop computers”. This would be a massive shift in the industry as it would mean the conversation won’t be anymore about phones or tablets or notebooks but about the experience than spans across them. To accomplish this Apple (or Google and Microsoft) will have to have a unified UI layer and application platform across devices so the tiny Instagram in iPhone can leverage the real state of a 27” screen when plugged in. I personally think Apple and Ive might be leveraging this next stage of evolution to propose a new UI metaphor that is modern and not cheesy like today’s leather or wood texture driven UIs.
TemplateMonster in association with MotoCMS has just announced the release of the new templates category for photographers: Photo Gallery 3.0 Templates. What makes this new product really unique is the combination of the cutting edge functionality for image galleries, impressive design approaches along with easy website management powered by MotoCMS HTML.
This breaking new product should definitely make photographers fall in love with it from the very beginning! How can we be so sure? Well, let us just put it this way: if you have enough skills to upload a picture, you will be able to create a stunning professional website for your online photo presence in a matter of hours, within just several mouse clicks. Photo Gallery 3.0 Templates are functional HTML websites with widest capabilities for creating stunning image galleries and easy editing options.
Read on to learn more about the new advanced features of this product and to get a feel for the powerful tools for photo galleries that you’ll access with every single template.
Gallery Opportunities
Since you are a visual artist (most likely), there must be nothing more important to you than a decent visual presentation of your work. The functionality of the new Photo Gallery 3.0 templates is tailored to do just that! It allows you to create a customizable, search engine optimized and mobile-friendly website with the richest choice of visual effects. In addition to the alternate mobile-friendly version embedded into each template, the main version of your website will also work and look good on every device since these websites contain zero Flash. HTML works everywhere – no mirrors, no smoke.
Each gallery website powered by MotoCMS HTML offers plenty of gallery options to be used for your online presence. Let’s talk about them.
Background Slider
If you wish to set a background slider for your website, you can easily do it via your Moto HTML control panel. The slider loads a background image that automatically stretches to fill the entire screen while constraining proportions. It cycles through the chosen images and has a swipe effect.
You can set the following options for your background slideshow: Slideshow Duration, Show Controls, Controls Padding, Pin Object as well as Stretch horizontally or vertically.
In the first ever presentation of Cherry WordPress Themes, and in each subsequent blog post we’ve been talking about the update of the Cherry framework. Finally this moment has come, today we’d like to announce the date of this event – Monday, the 8th of April.
On this day you’ll get a notification in your admin panel that the update is ready to be installed. So don’t miss your chance to get all the latest features of your favorite framework.
List of improvements:
- Localization. Cherry Framework Admin Panel was translated into three languages: Russian, German, and Spanish. The language is determined automatically depending on the language of WordPress engine.
- Generally there are more than 150 bug fixes and updates. Here is the list of major ones:
- fixed bug in Product categories page of custom post types;
- Pin it button in IE8 bug fixed;
- into Cherry Options added Font-style settings to tune typography;
- fixed bug with connecting of more than one google font;
- added Footer Setup Options into Menu Cherry Options;
- fixed bug with displaying shadows on devices with various resolutions;
- fixed bug in Main Menu in Nexus 7;
- added Google+ into social network widget;
- fixed bug where the right sidebar in the blog content overlaps in some resolutions;
- from now on website owners can add Breadcrumbs to any page.
- Updated Bootstrap to version 2.3.0 and some other scripts, i.e.,
- camera 1.3.3 => 1.3.4
- izotope 1.5.19 => 1.5.25
- prettyPhoto 3.1.4 => 3.1.5
- modernizr 2.0.6 => 2.6.2
- superfish 1.4.8 => 1.5.3
- Framework font base was supplemented with following fonts: Courgette, Julius Sans One, Roboto Condensed, Archivo Narrow.
- Some widgets and shortcodes were upgraded:
- added option that allows setting custom class for all shortcodes;
- added options into shortcode Post Cycle;
- fixed minor bugs in shortcodes and widgets;
Android emerges a clear winner in the war of the smartphone app development. According to a recent report by ComScore, Android has emerged as a clear winner with 53% of the market share, with iOS at 36% leaving others far-behind. Another note-worthy survey by ABI Research predicts that, Android will be a winner in 2013 in terms of app downloads. According to the firm’s latest report, 58% of smartphone app downloads this year will be Android, followed by iOS coming in at 33%.
A similar study by ABI cropped up earlier this year which said that, Google’s Android paltform will take a 57% share of the global smartphone market this year with iOS standing at 21%. The figures precisely state that, Android is indeed an innovative market player and is expecting the trend of their success, stays ahead of its counterparts.
What’s In-Store For Android Developers?
Research from ABI further predicts that Android’s gains will motivate more developers to build apps for the welcoming Android platform. This is logically true with Android getting more app downloads this year, it is likely to grab the developer’s attention.
On the other side, Apple’s close-door policy of app development has led to multiple issues for developers. Android by no-means ignores its developer’s concerns and has offered a harmonious environment for smartphone app development.
Android Leads the Competition
A new report by Gartner predicts that, of all smartphones captured 44% of all mobile phone sales in the December 2012 quarter – Android leads with 31% of all mobile phone shipments followed by iOS at 9%.
Moreover, the rate at which Android phone market is expanding is at 88% year over year with iOS at 23%. The primary reason behind Android’s remarkable success is due its lower priced smartphones.
For those of you, who have been in the online world for quite some time, know what Google AdWords means. Considered to be one of the most powerful SEO tools, Google AdWords, is used by millions of business website owners, bloggers and even content creators to get their web pages noticed by search engines.
Google AdWords is the ‘holy grail’ for those who are into what is known as Search Engine Optimization. In February this year, Google came up with an update to Google AdWords which is popularly known as Enhanced Campaigns. This upgrade is all set to transform the way mobile marketing & advertising was done until now. The new upgrade promises to help business owners market their products considering various variables at one single place. Let’s find out more about the Enhanced Campaigns and what it means for the marketers & advertisers out there!
What exactly are Enhanced Campaigns?
We live in an era where our lives are increasingly being dominated by a multitude of devices such as laptops, tablets, and smart phones. Enhanced Campaigns aims to help advertisers & marketers in refining paid-search targeting across different devices. The upgrade will come into full-swing by mid-2013 and will allow marketers to adjust bids of ads depending on geographical location, device type and time of day. Enhanced Campaigns, in a way, is a smarter way to manage ad campaigns and gain better control over these.
Today, millions of people use multiple devices to search, shop and get connected. A recent research has proven that as many as 90% of the multi-device consumers move between various screens to complete a particular task. As more and more devices get rolled out, it definitely opens up a new door of opportunities for marketers but also makes that task seemingly difficult to accomplish.
Consider this example, a restaurant selling burgers wants to showcase different ads to some searching for ‘burger’ at 12 pm on their desktop (may be a link to an online ordering form or menu) and a different ad to someone searching for ‘burger’ at 9 pm using an iPhone who is just some meters away from the restaurant (possibly a click-to-call contact number or restaurant locator). The Enhanced Campaign will allow marketers to manage ad campaigns considering the above mentioned variables at one place. It will also help them display the right ad on right time to the right person!
Сhosing font face is one of the key steps in designing website or any other UI. One of the main disadvantages of typography is a relatively small number of font groups. Unfortunately there are only four of them Serif, Sans Serif, Script and Decorative. But each one of these four groups includes great amount of fonts that it makes pretty hard to pick the most appropriate one.
Eventually, when you picked a font for your design, the result may not seem to be satisfactory. In this case you can make use of various jQuery typography plugins that will certainly give you some super useful features and allow to manipulate web text like never beforeand perform this with a bang. Today’s blog post rounds up 12 of the most unique typography plugins that allow you to fine tune your type as well as create some cool effects. Feel free to use them.
***
TypeButter allows you to set optical kerning for any font on your website. If you’re longing for beautifully laid out text that today’s browsers just don’t provide, this is the plugin for you! Also, don’t forget to check out delicious curved text using jQuery Bacon.
***
jQuery typesetting plugin balances the measures. Depending on the amount of text in columns they will be either contracted or expanded.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" charset="utf-8"> $(window).load(function(){ $().hatchShow(); }); jQuery.fn.hatchShow = function(){ $('.hsjs').css('display','inner-block').css('white-space','pre').each(function(){ var t = $(this); t.wrap("<span class='hatchshow_temp' style='display:block'>"); var pw = t.parent().width(); while( t.width() < pw ){t.css('font-size', (t.fontSize()+1)+"px"), function(){while( t.width() > pw ){t.css('font-size', (t.fontSize()-.1)+"px")}}; }; }).css('visibility','visible'); }; jQuery.fn.fontSize = function(){return parseInt($(this).css('font-size').replace('px',''));}; </span></script> |
Predictive personalization: is it good or bad?
In one of our previous articles we’ve already remembered the movie “Minority report”, even though it was quite another topic, the one dedicated to Creative sandbox and more specifically to augmented reality.
In this movie people in the Subway pass along large wall-sized screens, special system renders each individual giving them something special or exciting.
In 2002, when the film was shot, this type of advertising sounded quite Sy-Fy, the product of a distant future, but today, 11 years later, predictive personalized advertising is absolutely real.
Predictive personalization is defined as the ability to predict customer behavior, needs or wants – and tailor offers and communications very precisely. Social data is one source of providing this predictive analysis, particularly social data that is structured. Predictive personalization is a much more recent means of personalization and can be used well to augment current personalization offerings…
…discover highly relevant content requiring minimal effort to find. Both bet that people still value content and try to serve up good stuff for those moments in which they have nothing else to do. Both attempt to provide a machine-augmented curated media experience.
People use search engines, communicate in social media websites, create custom content…Everyone of us creates a profound trace on the web, and it makes pretty easy to predict our interests or needs.
That’s exactly what Amazon did for the last couple years trying to make use of Big Data. Let’s take Google Now as an example, this service is pretty familiar to owners of Android smartphones. The App analyses your account activity and reports most essential info on the screen, including traffic jams statistics, exciting places nearby, game score of your favorite team, exchange rates, weather in your area, and much more.
Predictive personalization improves the quality of our lives. But, isn’t this fee too high for the loss of our privacy? Though we’ve already lost it when bought a mobile phone.
JWT advertising agency made a survey for Americans and Englishmen. People were asked to comment on their attitude towards the analysis of their personal data, made by major companies, analysis that allows creating personalized marketing offers.
As per a study led by Gartner, it confirms that by 2014 HTML5 will establish itself as a mainstream app developer option. HTML5 will not give up on native apps but rather enhance its capability to develop rather qualitative apps for the future generations. Businesses are gradually moving towards integrated ecosystems by providing even more composite service and software capabilities. Gartner further predicts that, there will be more than 70 billion mobile app downloads from app stores by 2014; and apps will be delivered to employees via private app stores by that year. Thus, app developers are carefully trending HTML5. Let’s take a look at the 7 things you were missing out about HTML5.
- HTML5 has introduced a simple and easy way to tag audio and video files however; it does not show effective results on implementation. Thus, this feature of HTML5 exists only in name with low or no performance
- Users have to divide data as temporary and permanent and thus have to save it in local browsers or other browsers, respectively. Since, HTML5 does not offer browser collaboration developers have to organize data into separate forms
- HTML5 developers have to keep a track of their own coding. This creates a horrific situation for them as they there is a lack of any debugging mechanism. Hence, it is no wrong to say that HTML5 apps based on client needs are not reliable
- HTML5 is not yet a cloud-based service. Thus, users will have to wait till it integrates with cloud and offer enhanced security. As of now, HTML5 users are facing some severe issues with data storage, nevertheless, developers are hopeful of its potential
- HTML5 lacks the ability to move data around or to share its data and to duplicate it. Users can easily view and edit the data on their browsers but they cannot share it across. This in turn hampers performance and provides restricted functionality
- HTML5 is gravely behind in offering data synchronization this leads to difficulties in linking apps running offline. There is also a grave concern of searching for organized data that is saved as per criteria like date wise or day wise
- HTML5 in some cases fails to offer feature-rich personality to its web applications. Browser failure has been one of the common problems with HTML5
Working as a blog writer, my job duties touch upon email marketing. I’m quite interested in this subject, that’s why I decided to ask some of my friends (not related to marketing) how they understand the notion of email marketing. Most of them were pretty sure that it concerns the letters that fill in the spam box daily and nightly…
On one hand they are right because, lots of “companies” that attract users with six figure income (and pay not a single cent) use most advanced email marketing techniques, thus undermining the authority of respectable methods.
On the other hand email marketing and mailing spam are absolutely different notions. Even though in both cases:
- email reaches your inbox;
- both emails may have fatty subjects;
- emails contain information about specific product, either digital or physical.
This is the next episode of the “Optimizing Your Store” series, here are the themes we’ve already covered:
The first and the most important differentiation of email marketing from spam is user’s agreement to receive e-mails. When creating database of emails spammers use any opportunity to get as many addresses as possible. They can buy ready-made databases, steal emails, use grabbers to find them wherever they can be. As for the marketing user gives a permission (to be sent an email) either during registration or when signing up to a website. Without user’s assistance there will be no automatic subscriptions.
The second thing is the quality. Legit email newsletter presumes that user will get some interesting and useful information, while spam email can consist from a single line of text like “Cheap Chinese Junk”. Newsletters are as a rule beautifully arranged, formatted, stuffed with nice pictures, videos and lots of other content.
The third thing is personalization. The line To: will contain only your address but not a heap of other emails. In a legit newsletter you’re either addressed by the name or “Dear Reader”, in spam letter nobody will greet you. Every newsletter gives an opportunity to unsubscribe, because every self respecting company will not impose its services.
Email Marketing Metrics to Keep an Eye On
![Optimizing Your Store: Email Marketing [S02.E05]](http://blog.tmimgcdn.com/wp-content/uploads/2013/03/metrics.jpg?9d7bd4 "metrics")
Featured Templates
Advertisement
Follow TemplateMonster Updates
Rss Feed:Recent Comments
- love them thanks!
- You’re welcome guys, @d36d5004149e3bb9e9159e13df...
- Thanks Alex
- actually it is, name the price, press download and that’s it
- thanks.. for that great stuff