Archive

Archive for December, 2016

Don’t design this at home…3 UI disasters to avoid

December 23rd, 2016 No comments

I coined a term today: Loathsome Design.

It means something along the lines of “design decisions that make me want to die.” In other words, it’s the opposite of the recently popular “designing for delight” concept.

Loathsome design captures the essence of frustration. Often, this comes about as a result of neglect—in an attempt to achieve one thing, something else must be left by the wayside.

Why should you care about loathsome design practices?

Because they are the type of decisions that can drive users from your sphere of influence, and into that of your competitors.

1) Hidden Settings

I opened my Spotify app today with the intent of showing an undecided co worker its “extreme quality” streaming options, so that he could make an informed decision on which music platform would serve him best—Google Play Music, Spotify, or Tidal.

Before Spotify redesigned their Android app to mimic the design language of their iOS app (and in effect, iOS itself), the settings icon was located in the hamburger menu. It was straightforward, and intuitive.

Now that the hamburger menu is toast, the four menu options have been moved to a permanent spot at the bottom of the screen.

So where’s the settings button?

That’s the question I found myself asking.

Turns out, Spotify’s designers have tucked the settings away in the top right corner of the “Your Library” tab; an extremely unintuitive placement, if you ask me.

And did you notice where the “My Profile” button went? Yeah, me neither. That little icon in the top left corner of the “Your Library” tab (the one that barely passes for a stick figure) is what you’re looking for.

The new design may become upsetting to users, because it forces them to fiddle with the menu in order to find the settings, or their profile.

For some, this may be a prime example of the drawbacks of the Apple-style bottom menu; for others, this is just a case of loathsome design.

2) Disruptive Launch

One particularly loathsome design choice, is the disruptive launch. Uber and Wikipedia are both extremely guilty of this, except Wikipedia only does this during their fundraising season, while Uber does this year round.

A disruptive launch is one where the user is required to complete a task prior to using the app. In most cases, this is a one-time thing required of users on first launch—aka, the user must sign up before they can use the service. It makes sense, and it’s not that much of a hassle.

Uber takes this one step further by forcing users to rate their previous driver before they can order a ride. Regardless of whether you’re in a hurry, or if you don’t want to rate a driver, you cannot order a ride without rating the previous one.

This is not only an inconvenience, but it actively changes the way that users interact with the app. By mercilessly prompting users to rate a driver at every launch, they are essentially conditioning users to mindlessly click a rating as quickly as they can (see: classical conditioning).

What probably looked like a good idea on the Uber design team’s whiteboard is actually a horrible tactic that has made me, and likely other users, apathetic toward the rating system.

Users are effectively encouraged not to think before rating, because doing so will delay their gratification. Every driver gets a five star rating (or wherever a user’s thumb comfortably falls on the rating scale), regardless of the experience.

Wikipedia is guilty of this as well, if to a lesser extent. During fundraiser season, visitors to Wikipedia are prompted to donate to the online encyclopedia—something I am not innately opposed to.

It’s the way that the site prompts users to donate that makes it loathsome.

The donation prompt takes over the full height of the screen, and gives no indication the user need only scroll down to view their intended page.

Over time, of course, most users will learn that if they do not wish to donate, they need only scroll down, but for first-time users it is likely to be a catastrophic annoyance.

3) Cumbersome Interactions

Occasionally, all it takes for a design choice to become loathsome is for it to require cumbersome interactions. A prime example of this is the way in which Apple and some third party versions of Android have designed their alarm clock apps.

It’s not the apps as a whole that are causing me to feel encumbered, but rather the way in which the designers require users to input the time at which an alarm will sound.

This is the face of pure evil. Who decided that scrolling to a specific time, in increments of one, was a good idea?

Not only does it take longer to scroll than it would to input a time in one of a handful of other common ways, but it also cannot be done in one movement. On ZTE’s Android skin, in order to get from “01” minutes to “59” minutes, users have to swipe several times.

On iOS, one swipe will send the numbers spinning with momentum. Of course it’s cool and realistic, but it is hardly more efficient or usable. This seems to be a current trend with Apple.

A dramatically more efficient and usable method for inputting alarm values is presented in stock Android.

Google’s designers have figured out a layout that allows users to input alarm values in just two taps. This means that when sleepy users are trying to set an alarm, they won’t be forced to pay extra attention to the input method, and can instead focus on getting to sleep.

Don’t Make Your Users Loathe Your Design

There aren’t that many things that will make users loathe your app. Typically, the number one offense is simply inconveniencing users.

Hiding critical functions, disrupting the launch of an app, and designing overly complex interactions will inconvenience your users, and depending on how much it bothers them, they may come to loathe your app.

Avoiding the pitfalls of loathsome design isn’t hard.

You just have to start (and finish) every feature with one simple question: am I making this as convenient and intuitive as it could be?

If the answer to any of these questions is no, then there is still work to be done.

120+ High-Res Apparel Mockups – only $15!

Source

Categories: Designing, Others Tags:

Winter Photo Pack: 105 Completely Free-to-Use Photos for the Cold Season

December 23rd, 2016 No comments

It’s always the same with photos. We need them all the time. Of course, with the beginning of each season, the demand for respectively fitting images rises. The Winter Photo Pack, which I just discovered, brings you 105 completely free-to-use images in high quality.

Fancy Crave: Two Free High Resolution Photos a Day

The Winter Photo Pack is being provided by the photographer Igor Ovsyannykov, who’s been running the photo service Fancy Cave since the beginning of last year. Day by day, he’s consistently expanding its supply by two high-resolution photos. All of his images are distributed under the Creative Commons Zero (CC0), which is pretty much the same thing as the public domain, and means that you are allowed to use all images for private, commercial, and even client projects without any attribution being required.

When it came to the composition of the photos in the Winter Photo Pack, Igor attempted to capture the variety of winter. He doesn’t just throw a bunch of snow photos at you but makes sure to provide a balanced mix of diverse subjects like landscapes, animals, people, as well as close-ups, and long-distance shots. According to him, the photos were taken at places all over the world.

Winter Wonderland Photo Pack: An Excerpt From the Portfolio

The total package of 105 photos weighs 421 MB, and is available for download as a Zip archive. The portal Gumroad, which is usually used for transactions, takes care of the process. For the Winter Photo Pack, all you need to do is enter a 0 in the input field “name a fair price,” and click on “I want this.” The next step is entering your email address. Right afterward, you can download the pack. In this case, a disposable email address would do the job as well.

The Winter Photo Pack is free, free to use, and of high quality and resolution. I don’t see why you shouldn’t load it into your toolbox.

Categories: Others Tags:

Web Development Reading List #164: Enjoy The End Of 2016, It Wasn’t The Worst

December 23rd, 2016 No comments

Welcome to the last reading list of the year. I’m happy to still have you as a reader and very grateful to all the people who value and support my work. I hope you’ll be on vacation for the upcoming days or can relax a bit from your daily work. Remind to take care of yourself, and see you next year!

New year’s resolutions — you know it, they’re hard to reach. Find out why it’s easier to use recurring systems instead of setting goals. As James Clear explains, “It all comes down to the difference between goals and systems.”

The post Web Development Reading List #164: Enjoy The End Of 2016, It Wasn’t The Worst appeared first on Smashing Magazine.

Categories: Others Tags:

Exporting Images in Multiple Resolutions Simultaneously

December 23rd, 2016 No comments

No surprise to any of y’all: screens come in a whole lot of different sizes and pixel densities these days. The technology behind dealing with that is catching up. For example, responsive images. So, we need software to help us generate those many versions of images we need.

Thankfully, all the most popular design software is starting to accommodate that need. Adobe Photoshop, Adobe Illustrator, Sketch, and Affinity Design all have pretty solid workflows for doing just that. I cover all those in this post over on the Media Temple blog.

Direct Link to ArticlePermalink


Exporting Images in Multiple Resolutions Simultaneously is a post from CSS-Tricks

Categories: Designing, Others Tags:

Zooming

December 22nd, 2016 No comments

Check out this nice image-zooming library by Desmond Ding. It’s fairly little, has no dependencies, and has all the modern stuff to make it easy to integrate into modern sites (you know, available on npm, and modulized). I tossed a demo up on CodePen for playing convenience:

See the Pen Zooming by Chris Coyier (@chriscoyier) on CodePen.

When I said “fairly little” there, the minified version is still 7K. Check out Dave Rupert’s take where it’s all done with some transitions and viewport units. That’s just a few bytes of code!

See the Pen Experiment: Using Picture Element and VW+VH units as a Lightbox by Dave Rupert (@davatron5000) on CodePen.

Ahhhhh the power of changing classes.


Zooming is a post from CSS-Tricks

Categories: Designing, Others Tags:

How to Add a 180 Degrees Effect to your Adobe Muse Website

December 22nd, 2016 No comments
Muse For You - How to Add a 180 Degrees Effect - Adobe Muse CC

Add a 180 Degrees Effect to your Adobe Muse Website. No Coding Skills Required.

Adobe Muse CC Logo

I’ve always loved those great flip effects where one image shows on one side and then flips to reveal another image on the other side. We see this a lot on sports channels where team logos suddenly change with a 180 degree flip. I love how seamless it is, and it is a great way to showcase information in a more exciting way. I wanted to give Adobe Muse users access to the same effect on their website, and that is why I decided to create the 180° Text Reveal Hover Box Widget. With this widget you can easily add an image and reveal text when the user hovers over the image. The image rotates 180 degrees to reveal the text.

Muse For You - How to Add a 180 Degrees Effect - Adobe Muse CC

The steps are as follows:

1. Install the 180° Text Reveal Hover Box Widget. The widget will install into the Adobe Muse library panel.

2. Drag and drop the widget from the library panel onto your Adobe Muse website. If you do not see the library panel go to Window > Library.

3. Add an image. If you would like the image to be a certain dimension crop the image to that dimension and then place in the widget. For instance, if you wanted the image to be a perfect square then you could crop the image to be of equal width and height before adding to the widget. You can also set a max-width and a minimum width for the widget.

Visit the following website to crop images: http://birme.net/

If you would like to have the hover box link to an internal link, external link, or anchor point make sure the “Enable Link” option is selected. You can then style the link button in the “Link Button” section of the widget.

4. Set the effect speed in the “Effect” section of the widget.

5. Set the text background color in the “Effect” section of the widget.

6. Add and style the text in the “Text” section of the widget.

7. Add and style the link button in the “Link Button” section of the widget.

8. Done!

You now have a 180° text reveal hover box on your Adobe Muse website.

Muse For You - How to Add a 180 Degrees Effect - Adobe Muse CC

For more video tutorials and widgets for Adobe Muse visit http://museforyoushop.com.

Happy Musing :).

Read More at How to Add a 180 Degrees Effect to your Adobe Muse Website

Categories: Designing, Others Tags:

Cars with Broken Windshield Wipers

December 22nd, 2016 No comments

I was stopped at an intersection the other day. It was raining. The road on the other side sloped upwards, so I could see the stopped cars on the other side of the road kind of stadium-seating style. I could see all their windshield wipers going all at the same time, all out-of-sync with each other. Plus a few of them had seemingly kinda broken ones that flapped at awkward times and angles.

What does that have to do with web design and development? Nothing really, other than that I took the scene as inspiration to create something, and it ended up being an interesting hodgepodge of “tricks”.

See the Pen Cars with Weird Windshield Wipers by Chris Coyier (@chriscoyier) on CodePen.

It’s SVG

When you need a little shape like a car, nothing beats The Noun Project.

I actually used the little Mac app they have and dragged the car I liked onto Adobe Illustrator. Then drew two little lines on the windshield for the wipers. Literal, straight, s.

Repeating the SVG

I planned on showing a whole grid of cars. I could have just popped the SVG into the HTML 20 times. But that isn’t very efficient in that it lacks control. I figured programmatically looping was the way to go. Pug (the HTML preprocessor) offers simple loops, so I went for that. At first, I did:

- svg = '<svg viewBox="0 0 59 45.9" class="car"> ... </svg>'

while cars < 20
  - cars++
  != svg

Figuring I could target “rows” of cars by using :nth-child selectors. For example, if I wanted to select just the 10th-15th cars, I could do like .car:nth-child(n+11):nth-child(-n+15). In the end, it was easier to target a whole “row” of cars grouped together, so they could scale all together. So:

- cols = 0
- rows = 0
- svg = '<svg viewBox="0 0 59 45.9" class="car"> ... </svg>'

while rows < 4
  - rows++
  div.car-row
    - cols = 0
    while cols < 5
      - cols++
        != svg

Sizing

Each car has a particular aspect ratio. Notice the viewBox of the SVG. I figured it would be best to size them according to that aspect ratio. I set the aspect ratio in pixels, as variables, then I could use a multiplier to scale them. For example, here I’m doubling their “size”:

:root {
  --carWidth: 59px;
  --carHeight: 46px;
}
.car {
  width: calc(var(--carWidth) * 2);
  height: calc(var(--carHeight) * 2);
}

Before I decided to break up the “rows” of cars with divs, I was able to force the floated cars into rows by limiting the width of the body with a multiple of the width of a car.

Animating the Wipers

The animation of the wiper is clearly a rotation transform. Normally I’d worry about that in SVG, as transforms on SVG elements are notoriously inconsistent across browsers. That’s why I reached for GSAP, which normalizes that.

My first thought was to set up a timeline. Timelines in GSAP have a yoyo parameter that make good sense for the back-and-forth style motion of a windshield wiper. We’ll use rotation, anchored at the bottom right, where the wipers pivot.

var wipers = document.querySelectorAll(".wiper");

var tl = new TimelineMax({
  repeat: -1,
  yoyo: true
});
tl.to(wipers, 0.6, {
  rotation: 90, 
  transformOrigin: "bottom right",
  ease: Expo.easeOut,
});

Randomizing

A helper function to spit out pseudo random numbers:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

Now we can add randomization like delays and how far the rotation actually goes:

var tl = new TimelineMax({
  repeat: -1,
  yoyo: true,
  delay: getRandomInt(1, 4)
});
tl.to(wipers, 0.6, {
  rotation: function() {
    return getRandomInt(80, 140);
  }, 
  transformOrigin: "bottom right",
  ease: Expo.easeOut,
});

This works pretty well, it’s just that each wiper then has a set timeline that it follows, it doesn’t randomize each iteration. We can get a little closer by looping over each wiper and applying a unique timeline to each:

wipers.forEach(function(el, i) {
  
  var tl = new TimelineMax({
    repeat: -1,
    yoyo: true,
    delay: getRandomInt(1, 4)
  });
  tl.to(el, 0.6, {
    rotation: function() {
      return getRandomInt(80, 140);
    }, 
    transformOrigin: "bottom right",
    ease: Expo.easeOut,
  });
  
});

Callback randomization

To make each iteration randomly rotate, I think it might be easier to not actually use a timeline, but just call a single animation method over and over as a callback. That way each time we call it, it can be randomized. So rather than TimelineMax(), we’ll use TweenLite and abstract it into our own function.

function doWiperAnimation(el) {
  TweenLite.to(el, 0.5, {
    delay: getRandomInt(0.1, 0.3),
    rotation: function() {
      return getRandomInt(0, 140);
    }, 
    transformOrigin: "bottom right",
    ease: Power0.easeNone,
    onComplete: function() {
      doWiperAnimation(el);
    }
  });
}

Note how the onComplete callback calls itself. Animation loop! We just need to kick it off once:

wipers.forEach(function(el, i) {
  doWiperAnimation(el);
});

There are no limits to how weird you wanna get with what you randomize. Here’s how you might even randomize which easing you pick:

var easings = [
  "SlowMo.ease.config(0.7, 0.7, false)",
  "Power0.easeNone",
  "Power2.easeOut"
];

...

ease: easings[Math.floor(Math.random()*easings.length)]

Cars with Broken Windshield Wipers is a post from CSS-Tricks

Categories: Designing, Others Tags:

The big interview: Jon von Tzetchner talks Vivaldi

December 22nd, 2016 No comments

Vivaldi is a browser that’s an alternative to better-known browsers like Chrome, Firefox and Safari. Launched only earlier this year, it has a long way to go before it claims a fair share of the browser market, but that’s not stopping Vivaldi founder Jon von Tzetchner from telling people what’s so exciting and unique about his new project. I recently had the chance to speak to him about everything Vivaldi.

In an in-depth interview, we talk about everything from why Vivaldi is good for web designers to how many users it has and if the Internet of Things is something the company will focus on, going forward.

WebdesignerDepot: Our readers are web designers who are interested in the best or an alternative browser to help with their work and projects. How can Vivaldi benefit web designers?

Jon von Tzetchner: The special thing about Vivaldi is that we designed the browser in the browser, so the user interface of the browser is actually web-based. For all practical purposes, we’re using the same tools as any web designer is using to make webpages. The difference is that we’re making a user interface instead, so we’re using technologies like React, HTML, CSS, and the like; I mean, that’s what we’re using to build the browser. We’re also working on the C++ side of the equation, so we can do things on either side to get the best possible results, but most of the work on our side actually is being done on the HTML side.

The special thing about Vivaldi is that we designed the browser in the browser, so the user interface of the browser is actually web-based

WDD: I’d like to ask you about support for emerging technologies like CSS Grids, for instance. Does Vivaldi currently support that? If not, any plans to?

JvT: I think you just asked a question that I don’t feel comfortable with answering (laughs)—and that’s embarrassing. In general, code-wise, we’re built on Chromium. You’re asking about a standard that Chrome already supports, and we do as well. That’s the standard answer to that. Whether we’re using it in the browser in our own designs, I’m not sure about that at this time.

WDD: A CNET article from earlier this year quotes you as saying Vivaldi has almost a million users per month. Has that number grown? How many use Vivaldi as we close out 2016?

JvT: What I was saying and what I’ve been saying is that we’re well on the way toward a million. People write that in different ways, so that’s the current situation. We’re well on our way toward the first million, but we’re not totally there yet. We’ve had about 5 million downloads so far and an active user base well on its way—between 700,000 and a million is where we are.

WDD: In terms of Vivaldi expansion, what are your projections for the number of users hitting the 5-million mark, which you said was about the number need for profitability? How’s that coming along?

JvT: It’s going well. We need between 3 and 5 million users to break even, and I think that’s a reasonable goal for us to reach in the not-too-distant future. It’s going to take a little bit of time, but that’s the way it works when you’re growing the browser kind of through word of mouth. As an example of that that I’ve mentioned to people: With Opera, my last browser company, it took us 15 years to get our million users, and then 18 months later, we had double that. So it’s kind of exponential growth, but we’re still early days. It’s been 6 months or thereabouts since we launched 1.0, and we continue to come up with new versions, and I think 3 to 5 million is a realistic, relatively short term target, and then we take it from there.

WDD: I’d like to talk about the uptake of Vivaldi. Are these Vivaldi users leaving other browsers permanently and moving full-time to Vivaldi?

JvT: Clearly, anyone that’s coming to Vivaldi has been using other browsers before. We don’t have any statistics that tell us what other browsers are using and things like that. We don’t really have much information, but we know that everyone that comes to Vivaldi has been using other browsers before, and then they make the decision to make the switch. We see the enthusiasm that we see on our website and our communities, and they seem to be extremely happy about the direction we’re going. That’s a very positive thing, but we don’t really have the numbers to say to what extent they’re using other browsers besides Vivaldi, but the impression is that there’s a gradual improvement in the number of people that are using it significantly.

WDD: What are the demographics like of those who are shifting to Vivaldi full-time…? Are there more people perhaps in a certain age group or part of the world who are moving to Vivaldi more than others?

We have a very high Linux usage. I think you’ll find among our users that there’s 10 times more Linux users than what you’ll find on average

JvT: We don’t track anything, and that’s one of the things that we are very…kind of…the only thing—we do know where people are in the world. The number one country for us is Japan, and number two is the U.S., and after that there is Russia and Germany. What you’re already seeing is that it’s already quite distributed, so we can’t really say that there’s one country taking it. It’s distributed, and we’re getting people all across the world. There’s one thing that we’ve seen that’s a bit different, probably: We have a very high Linux usage. I think you’ll find among our users that there’s 10 times more Linux users than what you’ll find on average. Which kind of makes sense: Linux users are more likely to download new software…given that they’ve already taken the steps to move over to a new operating system.

WDD: The latest update of Vivaldi actually lets users control the lights in their home, thanks to integration with Philips Hue color lights. This is a move toward the Internet of Things. Is this a path that Vivaldi will continue to explore and make progress toward?

JvT: Definitely. In some ways, the way this started, we described it in a blog entry—how Henrik kind of had this idea of going…bought himself this Hue, and that’s how it started. The idea of going in the direction of the Internet of Things is clearly interesting to us. I think there’s a lot of potential in the Internet of Things; I think it’s being held back in many ways by proprietary solutions. Personally, I would like to see that we go for open solutions where you find APIs, so that developers can build systems that make use of all the different units out there in a standardized manner. I think that’s something we should expect to see happening, and I think that will open up the floodgates of innovation. For us, obviously, we want to be part of that. We are geeks. We love playing with new technology, and, clearly, the Internet of Things is one of those technologies that 1) is very early days in many ways compared to what you can expect to happen, and 2) it’s just very interesting technology.

WDD: Do you have any ideas of maybe moving to integration with vehicles or other parts of the home, besides just lighting?

JvT: We start in one corner. I think the primary purpose in the short term is to be running toward home items. I think that’s natural.

WDD: As we’re ending the year, we want to get your thoughts on what Vivaldi wants to do in 2017. For example, do you have any plans for 2017, a vision for where you want to take the browser next year?

JvT: I mean, we want to continue to evolve the browser and stretch the limit of what you can expect from the browser. We’re playing around with that a little bit, and there are a lot of details, right?

You see that in some of the latest builds that we’ve been sending out. We have a build where we look outside of the machine—kind of. We change the color of your lights in your home based on your browsing, so this is thinking kind of outside the box. At the same time, we’re also paying attention to details.

In a late build now, there’s a lot of people that like the fact that we’re now showing how many “unreads” you have on sites. So, if you have Facebook up on a tab, we’ll have a clear indicator that indicates how many unread notes you have there, and you can do that even if it’s pages. And that’s the kind of detail that a lot of people get excited about, so we’ll continue in that direction—just focusing on what people want.

Then we have some of the bigger things, which are things like email, which we promised. We’re working on a mobile browser…sync, but what exactly we’ll come up with during the year…it’s really hard to say because, the way we work, we just do things.

WDD: So it seems to me that you listen to your community of users quite a bit, and I guess that informs the process of what new features you want to add into Vivaldi. Is there anything that your user community at this moment is asking for the most…some kind of a theme or pattern that they have always talked about and that they would want to see, perhaps, in Vivaldi in the future?

JvT: Very high on the list for our users have been things like email and sync, so that’s getting the sync functionality in, so that it’s very clearly there. We get a lot of requests from the users, and think most of the requests we get from the users are evolution, and then we try to think out of the box every now and then.

WDD: I’d like to switch gears a little bit to features. What would you say is Vivaldi’s biggest selling point? If there’s one feature that makes Vivaldi better than other browsers, what would that be?

JvT: Well, I think the biggest selling point is that it’s personal. I mean, all the other browsers they just say, “Okay. Here’s a browser—use it.” There’s not much more to it! We adapt to you as a user, and that’s unique. There’s a lot of details to that. There’s a lot of functions to that and saying that one is more important than another—in some ways, you could say that it’s our tab handling, it’s our callers, it’s our zoom handling, keyboard shortcuts. I mean there’s a lot of different things.

The core to all of this—how we’re different—is we see every user as being different, and we see their requirements, and their requirements differ. It’s our job to adapt to your requirements, so whatever your requirements are. Some people—latest one—signal a starting point, like with the speed dials. Others, they have a lot of tabs, and the tab handling becomes extremely important, so there’s really an individual answer to that question.

We’re not a single-feature browser. Our approach is singular. It’s really about every single user and acknowledging that we’re all different. We all have different requirements, and they’re all equally valuable.

That was something that we really didn’t want to be: a single-feature browser. We’re not a single-feature browser. Our approach is singular. It’s really about every single user and acknowledging that we’re all different. We all have different requirements, and they’re all equally valuable.

WDD: Vivaldi’s big draw for our web-design community is that it’s very friendly for designers and developers, but is it geared specifically to that community, or would you say that even just ordinary users could get a lot out of Vivaldi as well?

JvT: I frankly believe—I mean—in many ways, Vivaldi is the best for everyone. The kind of people that find Vivaldi is the people that are spending more time online. That’s definitely the development community. They like the fact that they can play around and change settings and things like that, but that’s also the group of people that tells others what to do. It’s the influencers, and we’re seeing that.

You install it first on your computer, and the next thing that happens is that you install it on your parents’ computer and your brother’s and sister’s and friends’ and all those that are asking for your advice because you’re the person in the know. It’s just like all of us: We have friends that have certain—maybe we have a friend that’s a car mechanic. We go to him, that person, whenever we have a question around cars, but similarly with technology, we’ll ask the people that are in the know and that spend time, and that’s the kind of users we are attracting, and then they go and tell their friends.

WDD: It seems that there’s a big word-of-mouth component to Vivaldi in the sense of trying to get more people to hear about it, to get it advertised. To that extent, I just want to ask if you think there’s one big thing—like one big piece of media coverage maybe or one big announcement—you think that Vivaldi needs in order to kind of put it on the map more, so that it goes beyond the designer or the developer community?

JvT: We’ve been gradually getting a bigger and bigger reach, but obviously the more media coverage, in some ways, the more often it is. The way this works: We get to a certain group of people, and once you have one guy in the group, and that influences the others. Once you have two or three, the group may all turn and start using us because it’s kind of more and more people are seeing what other people are seeing. Obviously, the bigger stakes, the better it is for us, but we see this as a process that we gradually reach out to people.

I think we already have quite a lot of very high-profile articles. If you look both in the tech community…also some of the larger magazines have covered us. I mean, Guardian in the UK, Boston Globe here…and others, so we’re seeing more and more magazines that think it’s a worthwhile story to cover, but obviously it’s only one article, and we over time need more articles to reach. It’s a process, and it’s a process we saw at Opera as well where we would have growth every year and gradually that got us to the number—we said 350 million (reference to Opera users).

WDD: I want to say thank you for your time, Jon!

JvT: Thank you. I will keep you posted.

LAST DAY: 150+ Christmas and New Years Vector Designs – only $15!

Source

Categories: Designing, Others Tags:

Conversational Design Essentials: Tips For Building A Chatbot

December 22nd, 2016 No comments

Human interactions are incredibly fascinating if you take a close look at them — the social awkwardness, the communication styles, the way knowledge is transferred, the way stories are told and trust is built. But what happens when a machine evokes the same response?

Conversational interfaces have become the new hotness in UX design. Google is about to release a new virtual assistant chatbot; Facebook has already launched the updated Messenger platform with chatbots; and Microsoft went as far as to claim that the operating system of the future isn’t Windows, but “conversation as a platform.”

The post Conversational Design Essentials: Tips For Building A Chatbot appeared first on Smashing Magazine.

Categories: Others Tags:

ionMag, a Free Premium Theme for WordPress

December 22nd, 2016 No comments

Oftentimes free WordPress themes are able to keep up with their competition from the premium department, but just as often, they can’t. The free theme ionMag can take on any other theme.

ionMag is Not Modest, but it Delivers

When I first stumbled across ionMag, I was skeptical. After all, I’ve been moving through the WordPress universe for over a decade. In this time, I’ve heard way too many superlatives. So when someone claims to have created “the most amazing” thing ever, I automatically shift down to gears and coast slowly. However, I have to admit that this reflex, which is correct most of the time, was unjustified in the case of the free magazine theme ionMag. I probably wouldn’t use the term “most amazing,” but ionMag definitely is one of the best magazine themes I’ve seen so far, in both the free and the premium section.

ionMag is a theme from the Romanian theme provider tagDiv. You may already know tagDiv as the developers of the well-known themes Newspaper and Newsmag, which have a total of 40,000+ buyers. With ionMag they deliver a freebie that is of very high quality and has no strings attached.

ionMag is based on tagDiv’s “wp_booster” framework and comes with a page builder that is designed as a frontend tool. This tool is conceived as a plugin and has to be installed after the installation of the about 10 MB large theme package. With the frontend page builder, visually adjusting the entire layout using a graphical interface is possible without any issues. Code knowledge is not required to do so.

This, admittedly swift presentation gives you an insight on this:

ionMag Installed: More of an Application Than a Theme

ionMag is not just installed as a theme. It comes with its own main navigation entry, to display the wide performance range appropriately. Within the own sub-menu structure, ionMag takes care of plugins that are suitable or required for the theme, shows the status of your WordPress installation, and grants access to different support offers, although all of them are currently placed under “Coming Soon.”

ionMag Comes With its Own Main Menu Entry. (Screenshot: Noupe Magazine)

Via “Install Demos,” you have the option to install a fully functional demo with content. This makes it a lot easier to learn how to handle the eerily huge theme using real content, without having to fear to blow up your page. A rollback to the original content is possible at any time.

Theme Panel, the Heart of ionMag

The most interesting, and most important element in the ionMag menu, however, is the theme panel.

Use the Theme Panel to Turn ionMag Into Your Personal Theme. (Screenshot: Noupe Magazine)

You can already tell by viewing the screenshot. The theme panel gives you full power over even the smallest detail of the theme. Aside from the usual customization options for header, footer, background, and colors, which you’ll find in pretty much every halfway decent theme, ionMag includes several options for web font integration, as well as the management of custom post types, and taxonomies.

The menu item “Custom Code” allows you to integrate custom CSS, JavaScript, and HTML, with CSS being possible even for each of the different breakpoints separately. This way, the creation of a child theme becomes unnecessary, as your customizations will survive updates. WordPress only provides this feature for new themes since the very new version 4.7.

ionMag already comes with 18 different languages by default. However, you can also translate it directly within the theme panel, using the form, or adjust the existing translation to your needs.

ionMag is fully responsive. However, it is not fluid but uses three breakpoints. Regarding its purpose as a magazine theme, this seems like a successful tradeoff to me.

Conclusion: Get ionMag!

The very detailed ionMag documentation deserves a special mention, as it basically doesn’t leave ay questions unanswered. It does require you to know English, as it is not available in other translations.

Due to the truly wide array of configuration options, ionMag is not the type of theme that you install, and activate on the go. You should definitely consider a good amount of induction time, which will certainly be necessary. Nonetheless, the reward will be a flexibility that you probably have not seen on the market of free themes yet.

ionMag is available for free use under the GPL V3. If you want to participate in the development, that’s possible. The development is coordinated via Github. The framework that ionMag is based on is also available under the GPL V3 on Github. If you’re running a magazine-like blog, and if you’ve been thinking about a relaunch for a while now, you should definitely check out ionMag. I’m sure you’ll be surprised when you see the amount of options in comparison to other free themes. The live demo can be found here.

Categories: Others Tags: