    
|
|
|
The following is a guest post by Alexander Futekov. We recently published an article by Joshua Bader in which a 3D inset look was adjusted as the page scrolled to give it a more realistic interaction. This is similar only Alexander is using an extruded look on buttons and employing a totally different technique.
The introduction of CSS3 resulted in the explosion of beautiful and interesting buttons, styled with gradients, shadows, and borders - often to achieve a 3D effect. The problem with such 3D buttons is a static perspective. The 3D is not always very convincing when you can only see its front and perhaps a bit from an edge or two - even when the page moves and the position of the button on the page moves.
Fortunately, we can achieve a realistic perspective effect with the help of 3D transforms to adjust the sides of the buttons. We can do this without modifying existing HTML, by using pseudo elements for the sides. Then bring forward the button itself with translateZ.
Before we start, we must first solve a problem. The perspective origin point is usually set at the vertical and horizontal center of the element. This means that when we set it based on the body we will get something like this:
By setting the height of the body to be 100%, we can fix the perspective origin point to the center of the viewport like this:
html {
height: 100%;
overflow: hidden;
}
body {
height: 100%;
overflow-y: scroll;
}For a simple <button>, here's the CSS:
button {
position: relative;
display: inline-block;
padding: 4px 16px;
border: 0;
background-color: blue;
background-image: radial-gradient(ellipse at top, rgba(255, 255, 255, 0.15) 50%, transparent);
color: #222;
transform-style: preserve-3d;
transform: translateZ(20px);
}
button::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform-origin: 0% 0%;
transform: rotateX(-90deg);
}
button::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform-origin: 0% 0%;
transform: rotateY(90deg);
}But how do we get 4 sides for each button with just 2 pseudo elements? JavaScript! if we want to avoid adding extra wrappers to each button (we do) we need scripting to move the top side down and the left side to the right depending on where the button is relative to the user's viewport. The script for switching the top with the bottom side of the button is pretty straightforward - changing top/bottom or right/lest sides occurs only on load and on resize, and top/bottom only on scroll:
$(window).on("load resize", function() {
topHalf();
leftHalf();
});
$("body").scroll(function() {
topHalf();
});
function topHalf() {
$("button").each(function() {
var self = $(this),
offTop = self.offset().top,
scrTop = $(window).scrollTop(),
halfWindowHeight = ($(window).height())/2;
self.toggleClass("top-half", (offTop - scrTop) < halfWindowHeight);
});
}
function leftHalf() {
$("button").each(function() {
var self = $(this),
offLeft = self.offset().left,
halfWindowWidth = ($(window).width())/2;
self.toggleClass("left-half", offLeft < halfWindowWidth);
});
}Editor's note: This could certainly be refactored a bit to lend structure and gain some efficiency. Feel free to fork the Pen below and have a go!
Some new classes will help position the sides:
button.top-half::before {
top: auto;
bottom: 0;
transform-origin: 100% 100%;
transform: rotateX(90deg);
}
button.left-half::after {
left: auto;
right: 0;
transform-origin: 100% 100%;
transform: rotateY(-90deg);
}Keep in mind that if you use classes to float the buttons (for example .pull-left and .pull-right like in Twitter Bootstrap) you will know where each button is positioned horizontally and thus be able to skip half of the JavaScript code.
Here's a styled demo to play around with. It has an animated push-down effect for the buttons and includes some other 3D elements that don't requre any JavaScript:
Check out this Pen!
A similar technique can also be used to replicate the 3D Inset Parallax Effect in a very rough way. It's a bit more complex, but doesn't require any JavaScript:
Check out this Pen!
Need a new look for your portfolio? Check out the Snap WordPress theme from The Theme Foundry. Sass files and Compass config are included!
3D Button Parallax is a post from CSS-Tricks
]]>|
|
W3C is pleased to invite the Japanese developer community to attend the first ever W3C developer meetup, in Tokyo, Japan, on Saturday 8 June 2013. Chaired by Marie-Claire Forgue (W3C) and Kensaku Komatsu (NTT Communications), the event's agenda consists of a mix of presentations and demonstrations by W3C members and staff, on topics such as HTML5, CSS3, Web Security, Testing, etc. Web designers and application developers are encouraged to gather for an evening of discussions and networking. Participation in the meetup is open to anyone at no cost, but space is limited. Please register before 6 June 2013. W3C warmly thanks both GREE for hosting the event and html5j for additional support.
]]>
Sometimes you need a fully-fledged CMS; something that lets you create any kind of website you want to create, with tons of bells and whistles. But other times you want a simple, elegant blogging platform. One that’s open source. And maybe even fun to use.
Ghost is a new blogging platform from John O’Nolan and team, that’s all of those things, and that’s being funded via Kickstarter. They already have a working prototype, and their Kickstarter campaign is just about wrapping up: they’ve raised over 5 times their goal.
One of the biggest advantages Ghost has over most existing blogging platforms is that it works natively with markdown. If you’re not already using markdown for your writing, you’re seriously missing out (and wasting a lot of time writing markup instead of content). With Ghost, you write markdown in the left-hand panel and you get a live preview of your content on the right-hand panel. It saves you time and gives you an instant look at what you’re writing, without having to switch back and forth to a preview (or constantly save and refresh).
Ghost’s dashboard in general is beautiful and way more efficient than most. It puts all of your important data in one place, including traffic stats, social media, content performance, and news feed. It lets you stay on top of what’s happening with your blog, all in one place, rather than clicking through multiple tabs to find what you need.
Ghost’s design is fully responsive, so you can use it on your smartphone, tablet, laptop, desktop, or virtually any other web-connected device. And it’s not just limited functionality on these other devices; it all works.
If you want to extend Ghost’s functionality, you can write plugins for it. There are no restrictions on what you can do with it, really, since it’s licensed under the MIT license with no restrictions.
Ghost’s Kickstarter campaign was a wild success. Within the first twelve hours, they’d already reached 120% of their goal. And in a week they were 410% funded. That’s pretty amazing, especially for a project that doesn’t have a physical “product”. Within 2-4 weeks of the end of the campaign, VIP level (and higher) backers will start getting access. Access to others will roll out in the weeks after that.
In addition to the version of Ghost you can download and host yourself, there’s also going to be a hosted version of Ghost. They plan to have at least one hosting option that’s under $9 per month, though details aren’t clear yet.
One of the great things about Ghost, though, is the fact that it’s being set up as a non-profit organization. That means they’re not going to be sold to Yahoo! for over a billion dollars. It also means they’re not selling you to advertisers. Instead, they’re creating something for the community, and for their users, without regard to making a profit. They only need to generate enough revenue to keep going, rather than to make shareholders happy.
I’m excited to see Ghost out in the wild. It looks like a well-conceived, well-planned, and well-executed new project, and one that’s sure to be a legitimate competitor in the blog platform market.
Will you try Ghost when it’s available? What other blogging platforms have you tried? Let us know in the comments.
| Professional PowerPoint Presentation Bundle – only $17! |
 |
|
|
 |
I recently travelled 2517 miles to try to solve 50 problems in 50 days using design — a journey that would challenge me to fundamentally rethink my understanding of the user-experience design process.
I set myself a challenge. I wanted to test the limits of design’s ability to solve problems — big and small. To do this, I left the comfort of my computer chair and set out into the unknown. Each day, I had 24 hours to observe a problem, attempt to solve it and then communicate the solution.
On my own shoestring budget, from grimy backstreet hostels to bustling cities, I travelled Europe attempting to solve a different social problem that I observed every day. The project itself was an incredible experience. Some days, my solutions were OK, some days I failed, and some days the solutions were great. The point, however, was not to succeed, but to get up every day and try again — even when I had failed the day before.
The adventure taught me an unbelievable amount about design’s power to solve problems and about my own capacities as a designer. Importantly, it honed my ability to think through and tackle problems rapidly.
In the first of three articles, I’ll share what travelling from the bustling metropolis of London to the cobbled backstreets of Turin taught me about the design process and about the power of empathy to foster innovation.
It was day 19 of my 50-day adventure. I found myself dashing to catch an underground train, running until I arrived at the station to find a sea of people crammed onto the platform. There were problems on the line, and trains were delayed. Surveying the scene, I decided to make this my problem for the day.
I took a step back, analyzed the situation in front of me and got to work. Having started my own design consultancy at 15 years old and now consulting as a user-experience lead, I knew how I would start:
I collected as much useful information as I could about the way people were engaging with the service…
… and came up with nothing.
At best, I had some pretty predictable solutions, chief of which was simply to increase the number of trains — a solution that hardly felt adequate.
Frustrated, I sat down. Then as the next train arrived, opened its doors and let on passengers, I heard a voice bellowing in the distance:
“Move! Come on! Move!”
I looked up to find a hefty underground attendant shouting at commuters. I walked over and asked him what the problem was.
“We can fit more people on the train, but they just won’t get on!”
I thought for a moment.
The next train rolled in.
Passengers started to board.
And I got on.
Getting on the train (Image: Alexander Montuschi)
Immediately, the train pulled away, and I tried to find a place to stand, still surprised that I had decided to board. As I tried to find a spot among the sweaty mass of people, I suddenly understood the real problem.
There was space further down towards the middle of each carriage, enough to fit at least another 10 people. However, people didn’t want to move down the carriages. Instead, they crammed by the doors for fear of not being able to get off at their stop.
Whereas my best design processes had failed, getting on the train revealed the real problem to me as clear as day. I discovered the underlying problem not because I had observed, analyzed or interviewed, but because I had felt it myself.
Trying to solve 50 problems in 50 days enabled me to realize, among other things, that the constraints of our design process can allow us to neglect a vital tenant of creating truly effective solutions: it can allow us to miss real empathy.
Real empathy is not naturally fostered in focus groups. It’s not uncovered in analytics. It doesn’t start with personas or empathy maps.
Real empathy starts with people.
My adventure fundamentally challenged me on how we understand people as part of our design process. The quality of our problem solving is directly linked to our ability to understand the problem. As I tried to tackle a new problem every day, I learned that analysis of people’s behaviours and problems simply wasn’t enough — I had to make them my own.
Sitting with the homeless on day 24 of 50 in Turin, Italy.
From sitting with beggars on the streets of Turin (day 42) to getting lost in the streets of Antwerp (day 23) to having no money or energy in Zurich (day 38), my adventures immersed me in unfamiliar situations and enabled me to learn, analyze and solve more effectively than I ever could in isolation.
Empathic research helps us understand our users’ needs beyond the functional, enabling us to develop more appropriate design outcomes. It is one of a raft of valuable processes and tools, on its own seemingly no more important than any other. However, while good designers understand the tools, great designers understand people.
Empathic research is not new. Yet, it is too often treated merely as a tool to create new products or as the domain of pin-up design agencies that have the budgets and clients to accommodate this type of critical inquiry. This needn’t be, and simply is not, the case. The best-designed solutions, however small, are born from real understanding of the underlying, complex needs.
Observing the behavior of bicycle riders on day 28 of 50 in Amsterdam.
We can’t all travel thousands of miles every time we start a new project, and commercial realities constrain the time and resources of our projects. However, gaining a deeper understanding of people doesn’t require allocating drastically more time for ethnographic research or sacrificing other areas of the process.
Below are some of the methods I started to employ on my adventure, with many more picked up along the way. Use them, build on them, and develop your own. Our aim should be to understand people more deeply and, in doing so, to solve their problems more effectively.
Do everything you can to feel what your audience feels, whether it’s ecstasy, powerlessness or relief. Say you are tasked with creating a journey-planning website. It is too often a temptation to unquestioningly rely on the conventions we’ve accumulated from other designed experiences. Innovation is born out of a natural distrust of convention and a desire to create smarter, more intuitive experiences.
Pick two locations you’ve never been to and try to travel from one to the other without using any technology. You’ll soon have that unnerving feeling of being lost in unfamiliar surroundings. Doing so will surface valuable, first-hand insight into the interventions you’ve relied on when no technology was at hand. How did you find your way? Which landmarks guided you? What processes did you rely on? How can these tools be translated into your service? The empathic research process is grounded in understanding an experience from the user’s perspective. Feeling what your users feel will enable you to understand complex scenarios more intimately and, in doing do, to solve them more effectively.
An impromptu co-creation workshop to solve communication challenges, on day 29 of 50 at my hostel in Amsterdam.
To gain empathic understanding, rather than distanced analysis, go to meet people where they are — in their environments, not in our labs. Focus groups give us some insight into people’s experiences, but they can’t enable true understanding. We’re aware that experiences are felt: they are predominantly emotional not rational. By asking people to communicate their experiences in our settings, we are asking them to rationalise their thoughts and actions. This can never paint an totally accurate picture.
Rather than interviewing users, we should look to meet people. Take creating an e-commerce website for a bathroom retailer. Go down to a showroom and watch how people interact with the products. Meeting people in their environments allows us not only to ask them what they think of the products in front of them, but to physically see how they form their opinions. What stages of decision-making did they go through? Where were they looking? What did they compare the product to in order to reach their decision? These insights will inevitably inform better decisions and foster more intuitive results.
Laptop as a stand for a phone — an unconscious act of design. (Image: Josh Russell)
If empathic research teaches us anything, it’s to be humble and realize that everyone on the planet is a designer — and is usually better at solving problems than we are. We all commit deliberate acts of organization to overcome problems, from the way we arrange our desks to the way we use a window to catch our reflection. Empathic investigation helps us to observe the ways in which people are already overcoming obstacles, and it often uncovers solutions that are more elegant than we’d expect.
Trying to design a daily news-feed mobile app? Walk into any library and spend some time looking at how people physically interact with information. From bending page corners into bookmarks, to underlining in pencil to make scanning faster, to positioning journals side by side for easier cross-referencing, once you start to really look, you’ll gain insights that enable you to combine people’s half-solutions into even more useful experiences.
In-situ prototyping of a tool to help hostel staff communicate with guests, on day 29 of 50.
When we try to consolidate what we’ve learnt into design decisions, we do so in our studios, often on our high quality screens. Try picking up your pen, getting out of the office and finding a location in which someone might typically use the service you’re creating. Now try to design. You’ll soon have to deal with the same distractions, complications and restrictions that some of your users face. How does that affect your design decisions?
There are many more techniques for getting under people’s skin, but these are just a few to start. Ultimately, empathic research is not about asking users what they want, but about understanding their needs for ourselves.
So, what was the result of getting on that underground train, being squashed among busy commuters and feeling people’s anxiety for myself?
Initially, the result was another pretty predictable solution.
Leveraging the closing doors of the underground trains.
I leveraged the closing of the train doors to suggest that people move closer together. This didn’t feel good enough — more like a public-service announcement than an effective solution.
So, I thought harder, drawing on my experiences and instinctive responses, and I ended up asking myself the question, “How can I turn a logistical problem into an enjoyable experience that people actually want to engage with?”
The solution? To introduce “play”. I transformed the floors of the underground carriage into a game of Monopoly. Rather than standing in jail, people are encouraged to move down the carriage, towards Mayfair — an engaging and participatory solution to a complex problem.
Computer Arts Magazine called it, “A playful way to encourage people to move away from Tube train doors. Top hat and flat iron optional.”
Since being published, 50 Problems in 50 Days has received some super press and some unexpected awards. This particular solution was one of the most discussed and has been one of the most widely shared.
Empathetic understanding is a vital tool in fostering innovation. If we can better understand the people we are designing for, the better our decisions, designs and results will be. Travelling 2517 miles taught me that if we wish to innovate, we must go beyond analyzing people’s experiences and try and make them our own.
Understanding people better often requires us to get outside and get our hands dirty but, in doing so, allows us to better analyze and solve. In the words of Diego Rodriguez, partner at IDEO:
“In doing, there is knowing. Doing is the resolution of knowing.”
Thanks for reading. Stay tuned for more problems, solutions and learning from my 2517-mile adventure. In part two, I’ll describe how trying to solve 50 problems in 50 days taught me it’s OK to be an utter fool… and how it’s OK for you to be one, too.
(al)
© Pete Smart for Smashing Magazine, 2013.
]]>
In the U.S., it’s estimated that online sales will reach close to $249 billion by next year[1]. It’s also predict that there will be 175 million people shopping online by 2016[2].
The growth in online sales is staggering, and now accounts for 8% of total retail sales[3].
Without a doubt, selling online is reaching very high and lucrative levels.
Whether you’re the owner of a traditional brick-and-mortar store wanting to expand online or are an entrepreneurial person desiring to cash in on this upward online sales trend, one of the major things you’ll need to consider early on is what platform you’ll want to stage your web store on.
The great news for you is that there are plenty of open source (free) e-commerce software at your disposal — we’ll take a look at the top choices in this article.
I’ll be discussing these popular open source e-commerce solutions:
Let’s begin the discussion with the oldest one out of the bunch.
osCommerce is one of the oldest open source shopping carts available in the market, being around in existence since March 2000. The project originated from Germany.
On the backend, osCommerce uses PHP for server-side programming and MySQL for its relational database management system (RDMS).
This popular open source e-commerce solution is used by close to 13,000 websites. In the course of over 12 years, osCommerce has formed a huge community around it consisting of 270,000+ members, so you’ll be able to lean on thousands of osCommerce experts and web developers specializing in the e-commerce platform if you’re ever in need of support.
osCommerce is known to be a modular system — that is, you can enhance its out-of-the-box features by installing add-ons. There are over 7,000+ add-ons that will allow you to extend the software’s functionality.
Throughout its history, osCommerce has been vulnerable to major security issues. For example, in 2011, 4.5 million osCommerce web pages were infected due to a security hole that permitted the attackers to inject affected sites with malicious code. These security issues are generally patched quickly, though.
For a long time, osCommerce was the best shopping cart available, and you had very little other viable options. But, at the moment, it’s gradually being supplanted by its rivals.
Every time I need to talk about this grand-daddy of open source e-commerce solutions, I cite the words of Andrew Bleakley, a shopping cart developer whose opinion I highly respect:
"Have you seen old screenshots of Internet Explorer 4 — remember when it came out and it was cool but now you look at it and laugh and remember the good old days and Melrose Place and what not. osCommerce is the Internet Explorer 3 of shopping carts. Technically it might still work but it will be the worst online experience of your life. Please think of the children, don’t even visit the site it just encourages them."
As someone who often needs to provide very quick and inexpensive solutions for my clients, osCommerce is not my recommendation if they’re a small business owner who wants something that’s user-friendly and easy to customize.
Zen Cart is very similar to osCommerce. The similarity is not surprising because Zen Cart was originally developed using the osCommerce code base.
Zen Cart provides online retailers with a greater number of customer management and marketing tools such as gift certificates, coupon codes, discount and sale rules, automatic email order confirmation, and much more.
Zen Cart is mainly targeted towards developers and advanced users. Creating and managing websites built with Zen Cart, as well as editing or updating Zen Cart templates, is a complex affair compared to newer online shopping cart software like OpenCart or PrestaShop.
In my opinion, Zen Cart is getting dated.
Since it’s open source software, technically, it’s free. However, using Zen Cart will still require huge resource investments unless you’re already a Zen Cart professional (or have access to one).
If you have a budget to spend on setting up an online store, on hiring a designer to create a catchy theme, and on getting a developer to help you manage the system, then you could go with this option.
Magento is the world’s fastest growing open source e-commerce platform right now. Magento currently serves more than 125,000 merchants worldwide. This open source project started in 2007 and within 4 years was quickly acquired by eBay. Magento, being highly configurable and robustly featured, has attracted a lot of contributors to itself.
Magento can be compared to WordPress in that they both revolutionized and dominated the space they targeted — Magento in e-commerce, WordPress in blogging and content management.
Currently it offers three plans to choose from ranging from $0 to $49,990 per year. We’re talking about the free, open source edition here, which is called the Community Edition.
Its free edition is unsupported — or, to be more precise, the support is community-driven (just like other open source projects), and the technical documentation is very limited.
Here’s what Andrew Bleakley has to say about Magento:
"Magento stormed onto the scene several years ago as a new open source shopping cart. It was highly configurable and full featured and the developer community jumped on board with great enthusiasm. Then normal people tried to use it and the wheels fell off. It was difficult to use, very slow and unresponsive and for free software small businesses seemed to have to spend an awful lot of money keeping there stores maintained properly."
There’s a great number of ready-made templates or themes that store owners may choose from to hasten the process of web store creation. But the templates are going to be difficult to customize extensively if you don’t have web development expertise.
Magento can be the best solution for those who must manage multiple stores from a single admin interface and database, and for large enterprise stores that expect to spend a lot on website maintenance and customization.
With Magento, you’ll be able to control every aspect of your online store. Magento seems to be the best choice for online store growth and scalability. It has already left competitors far behind in terms of features and user-friendliness.
It’s no secret to those that have used Magento that it will need a web developer to set up and develop. That’s why I recommend Magento to professional web developers and web development enthusiasts.
However, if you’re not the most tech savvy or don’t wish to make a huge investment in getting your Magento store set up properly, you might have a hard time with this e-commerce platform.
Only having the most essential e-commerce features, lots of marketing tools for site owners, the capability to run multiple online stores through one installation, a good and active community support, and plenty of technical documentation makes PrestaShop a great choice for online retailers.
Being not so highly targeted towards web developers, PrestaShop has an emphasis on user-friendliness. Though in order to do some advanced customization you might still need to hire a pro.
PrestaShop has been around for more than five years and it currently powers 130,000+ active online shops. This open source e-commerce solution has been downloaded 2.6 million times. PrestaShop, out of the box, provides shoppers with a smooth shopping and checkout process.
To me, PrestaShop is a great choice if you find Magento or osCommerce overwhelming or too complicated.
PrestaShop is a very powerful shopping cart solution aimed towards both developers and end-users. It’s much simpler and more user-friendly compared to your other options.
I believe that in the next few years, PrestaShop will definitely surpass its competitors in popularity. It’s hard to point out any major issues with PrestaShop. It’s ideal for all types of online stores.
Even though OpenCart is the youngest among the e-commerce platforms in this article, it has already proved itself as a top choice. The success of OpenCart is in its simplicity and excellent usability for online merchants as well as their customers.
OpenCart’s target market seems to be the small- and medium-sized online retailers, and the project contributors as well as the community are very responsive to their needs. The project is updated quite often, providing users with new features and fixes. It’s a real gem for online merchants among all the other options.
Some notable features include multi-store capabilities (like Magento and PrestaShop), the ability for online customers to leave product reviews and ratings (like what Amazon.com allows its customers to do), PCI compliance, multiple tax rates, discount coupon system, and printable invoices.
OpenCart is also highly extensible and it has a great number of extensions already — over 8,800+ extensions.
As a person who spends a lot of time supporting and managing OpenCart web stores, I find that OpenCart is much simpler than PrestaShop. OpenCart’s administration panel is intuitive and easy to control. What I like about OpenCart is that you’re not overwhelmed with a lot of functions you probably won’t ever use; it just has a well-thought-out set of extremely useful features.
Being a relatively new shopping cart, you should be aware that OpenCart is still under development.
Though OpenCart is new, it looks to be a very strong e-commerce solution. It’s a good choice for first-time online merchants.
It’s quite clear that Magento is dominating the space right now.
osCommerce and Zen Cart seem to be on their way out — interest in these e-commerce solutions is decreasing. There was a time when osCommerce was extremely popular, but those years are done. Zen Cart didn’t even reach the peak of its glory because of new platforms like Magento.
The entire landscape completely changed with PrestaShop and then OpenCart jumping into the scene.
PrestaShop’s popularity grows steadily and, in the near future, I think it’s going to surpass its rivals.
OpenCart grew the fastest out of all the open source e-commerce software we’ve discussed, I think even faster than Magento. It’s popularity has doubled over the past year. This is indicative of the project’s ability to provide a good e-commerce platform to online entrepreneurs.
Google Trends illustrates the interest towards these open source e-commerce solutions[4] over time.
As shown in the graph above, Magento is the reigning platform. Interest in osCommerce and Zen Cart has greatly declined. PrestaShop and OpenCart — being the newcomers in the scene — are quickly reaching high interest levels.
In this article, we covered the top five most popular open source e-commerce solutions in the hopes of helping you choose the perfect platform for your online store.
E-commerce has emerged in every corner of our lives, providing more freedom and control in comparison to shopping in a physical store.
Tatiana Titkova is a blogger and marketing consultant specializing in user-friendly e-commerce design. She worked in the web development and online marketing industries for seven years before becoming a part of the TemplateMonster team. She enjoys working with clients to deliver effective e-commerce solutions with Magento. Join her on Twitter and Google+.
|
|
On May 6th Adobe announced its latest updates to its creative software. Some of these updates have big implications on how users work with their tools. In this article, I’d like to review what Adobe has changed in Illustrator and specifically how it impacts web designers.
Of course there are a several new features, like AutoCAD libraries, white overprint, fill and stroke proxy swap for text, automatic corner generation, indic support, package files, unembed images, multiple file place, touch type tools, free transform tools, and images in brushes. If you’re an Illustrator junkie, these are all worthwhile features, but what I want to focus on specifically are the core improvements that will help anyone creating artwork for on-screen delivery.
With the emergence of high resolution displays (such as the Macbook Pro with Retina display), Illustrator CS6 and earlier looked blurry. Artwork and icons looked pixelated and text looked anti-aliased. The very nature of Illustrator is provide crisp rich artwork, so this experience was less than desirable. Thankfully Adobe has improved Illustrator CC to take advantage of these high resolution displays. Artwork will look better, text will look crisp, UI elements (icons, cursors, etc) will look smoother. They also made some improvements to the rendering process as well. It now takes advantage of multi-core machines and uses threaded rendering to render artwork. You should see some improvement in tasks like zooming, panning, copy paste, drag and drop, etc.
Guides are widely used when planning and laying out pages. Creating mock-ups in Illustrator using guides allow you to place content in a precise manner. In Illustrator CC, there are four enhancements to guides:
The typical type-ahead search only searches the first word in the font name, which generally does not yield the best results immediately. Also, searching and browsing a large number of fonts can be difficult. A new search function option “Search Entire Font Name” has been added to the control and character panels. Additionally, TypeKit integration for desktop fonts was recently announced at MAX. This means you can easily design mock-ups using the same fonts you intend to use on the web.
Finding a particular color from a range of numerous colors can be time-consuming and frustrating. In Illustrator CC, changes have been made to make the task of searching and finding a color much easier. The Color Picker dialog box (double-click the Fill proxy in the toolbar) now has a search widget in the Color Swatches window. When you click Color Swatches, a search bar appears below the predefined list of colors. Type the name of a color or an RGB value (or CMYK for print). If you type ‘blue’, all the color swatches with the word blue in their name are displayed. Typing R=77 will display all the color swatches that have red color with a value of 77 in the RGB scale. The search widget is enabled by default.
The search option in the Swatches Panel has been enhanced as well. The field does not enforce an auto complete. The characters you type are no longer automatically substituted with the closest color match found. You can type a name of a color, or simply type in the RGB color (or CMYK for print) values to search if such a color combination exists. The Find Field is not enabled by default, and must be enabled for the first time from the panel’s sub-menu.
It’s also worth noting that Kuler has been baked into Illustrator. So if you use this Adobe service to create color themes and groups, you can easily access this content directly inside of Illustrator CC.
Of course, the biggest feature for the web are the improvements made to CSS and SVG workflows. Now if you’re a hardcore Illustrator user, you may have used something in CS5 called the HTML5 pack, which was available from AdobeLabs. For whatever reason it never appeared in CS6 but, many of those features have returned with this CC update. These features are reminiscent of what’s already been made available to Photoshop CS6 through Creative Cloud updates and features found in Fireworks CS6.
The CSS Properties Panel is how you’ll extract the CSS from the Illustrator document, and it provides several ways to do that. The key step in making all this work however is by naming your layers within the layers panel. Certainly Illustrator can generate CSS without the object having a name within the layers panel, but you’re opening yourself up to a disorganized and potentially sloppy way of generating code. This is essentially how Illustrator will name the class rules it creates for you. The CSS that is generated can have browser prefixes for Webkit, Firefox, Opera, and Internet Explorer. It can capture CSS supported appearances like gradients and rounded corners.
You can control how the CSS is generated by accessing the CSS Export Options dialog box. You can access the dialog box clicking the CSS Export Options button, which is the first of four buttons towards the bottom right of the panel. The panel provides several functions for CSS workflows:
Additionally, you can export the CSS code for all the objects within the document by going to the File menu and selecting Export. That will open a dialog box, and from there you can choose CSS from the format menu.
If you have an object, select it, and make sure it’s named properly in the Layers Panel. With it selected you will see the CSS needed to generate the artwork in a browser in the CSS Properties Panel.
In earlier versions of Illustrator, you would have to save a document out as SVG. Here in the CC update you have the ability to copy something within the document, then go to your favorite HTML editor and simply perform a paste; all the SVG code will be placed within the document. It’s a surprisingly nice workflow. If that doesn’t cut it for you, the more traditional method of saving the document as an SVG is still available.
Additionally, Adobe has added support for exporting unused styles. When designing, you’ll often times create multiple graphic styles while creating artwork. You may not use all available styles. When you export artwork in SVG format, unused styles are not exported. Also, in the exported CSS code, graphic styles do not have names associated with them and it may be difficult to identify the right graphic style.
Illustrator CC offers two features have been added to enhance the experience of working with styles in SVG format that address these issues:
This certainly isn’t a tool to code complete web pages. What I see is using Illustrator to create mock-ups, then hand code the structure in HTML and the layout code in CSS. When a drop shadow, gradient, pattern, or even logo is needed, using these new CSS extraction and SVG options will come in very handy and be a big time saver.
If you’re interested in learning more about the new features in Illustrator CC, visit the Illustrator product page.
Are you an Illustrator aficionado? What features of Illustrator CC are you most excited about? Let us know in the comments.
| Professional PowerPoint Presentation Bundle – only $17! |
|
