Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 26 2017

09:30

Free Geometric UI Icons With A Fresh And Futuristic Twist (100 Icons, 6 Formats)


   

How about an icon set that gives your UI designs just that finishing touch they need? One that stands out while keeping the design clear and legible? Vincent Le Moign spent two years on designing such a set, and we are very happy to feature part of it as a freebie today.

Free Geometric UI Icons With A Fresh And Futuristic Twist (100 Icons, 6 Formats)

The EGO icon collection shines with its well-balanced, geometric style — perfect to make a bold statement without being obtrusive. To prepare you for nearly everything that an app or web interface could ask for, EGO covers tech- and office-themed icons, just like commerce, transport, nature, and leisure motifs. 100 icons in total that can be resized and customized to your liking (AI, EPS, SVG, Sketch, Iconjar, and PDF versions are available). Black and duo-tone blue versions are already on board when you download the set.

The post Free Geometric UI Icons With A Fresh And Futuristic Twist (100 Icons, 6 Formats) appeared first on Smashing Magazine.

May 25 2017

08:11

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages


   

Websites with long or infinite scrolling are becoming more and more common lately, and it’s no mere trend or coincidence. The technique of long scrolling allows users to traverse chunks of content without any interruption or additional interaction — information simply appear as the user scrolls down the page.

Just Keep Scrolling! How To Design Lengthy, Lengthy Pages

Infinite scrolling is a variety of long scrolling that allows users to scroll through a massive chunk of content with no finish line in sight (it’s the endless scrolling you see on Facebook, Twitter and Tumblr feeds).

The post Just Keep Scrolling! How To Design Lengthy, Lengthy Pages appeared first on Smashing Magazine.

May 24 2017

13:34

Make ‘Em Shine: How To Use Illustrations To Elicit Emotions


   

As designers, we often use imagery that resonates with our audience. Yet, often we also end up with stock photos and generic icons that come across as mere decoration. Or we bypass imagery altogether. But custom images are a powerful design tool. They can tell a story and convey a distinct personality.

The Power Emotional Design: Including Illustrations Into Your Projects

Custom illustrations can be especially impactful. They can make our audience feel personally connected to an app or website, while being an integral part of the design.

The post Make ‘Em Shine: How To Use Illustrations To Elicit Emotions appeared first on Smashing Magazine.

May 23 2017

14:25

Building Killer Robots: Game Behavior In iOS With Fuzzy Logic Rule Systems


   

Imagine that it's a hot day. The sun is out, and the temperature is rising. Perhaps, every now and then, there's a cool breeze. A good song is playing on the radio. At some point, you get up to get a glass of water, but the exact reason why you did that at that particular time isn't easy to explain. It was "too hot" and you were "somewhat thirsty," but also maybe "a little bored." Each of these qualities isn't either/or, but instead fall on a spectrum of values.

Building Killer Robots: Game Behavior In iOS With Fuzzy Logic Rule Systems

In contrast, our software is usually built on Boolean values. We set isHot to true and if isHot && isThirsty && isBored, then we call getWater(). If we use code like this to control our game characters, then they will appear jerky and less natural. In this article, we'll learn how to add intelligent behavior to the non-player characters of a game using an alternative to conventional Boolean logic.

The post Building Killer Robots: Game Behavior In iOS With Fuzzy Logic Rule Systems appeared first on Smashing Magazine.

May 22 2017

11:54

Better Form Design: One Thing Per Page (Case Study)


   

In 2008, I worked on Boots.com. They wanted a single-page checkout with the trendiest of techniques from that era, including accordions, AJAX and client-side validation.

Better Form Design: One Thing Per Page

Each step (delivery address, delivery options and credit-card details) had an accordion panel. Each panel was submitted via AJAX. Upon successful submission, the panel collapsed and the next one opened, with a sliding transition.

The post Better Form Design: One Thing Per Page (Case Study) appeared first on Smashing Magazine.

May 19 2017

10:09

Web Development Reading List #183: Comedy In Design, Security Checklist And The Life As A Nobody


   

When was the last time you took some time to reflect? Constantly surrounded by news and notifications to keep up with and in a rush to get things done more efficiently, it’s important that we take a step back from time to time to reflect our actions and opinions.

Web Development Reading List 183

Reflect if you are working the way you want to work, reflect if you live your life as you want it to be, but also everyday matters. Do you really need that one particular app or service, for example, or could you live without it? Sometimes less is more and efficiency isn’t everything. What counts is how you use your time.

The post Web Development Reading List #183: Comedy In Design, Security Checklist And The Life As A Nobody appeared first on Smashing Magazine.

07:55

json-api-normalizer: An Easy Way To Integrate The JSON API And Redux


   

As a front-end developer, for each and every application I work on, I need to decide how to manage the data. The problem can be broken down into the following three subproblems: Fetch data from the back end, store it somewhere locally in the front-end application, retrieve the data from the local store and format it as required by the particular view or screen.

json-api-normalizer: An Easy Way To Integrate The JSON API And Redux

This article sums up my experience with consuming data from JSON, the JSON API and GraphQL back ends, and it gives practical recommendations on how to manage a front-end application data.

The post json-api-normalizer: An Easy Way To Integrate The JSON API And Redux appeared first on Smashing Magazine.

May 18 2017

08:09

Low-Hanging Fruits For Enhancing Mobile UX


   

Good UX is what separates successful apps from unsuccessful ones. Customers are won and lost every day because of good or bad user experience design. The most important thing to keep in mind when designing a mobile app is to make sure it is both useful and intuitive.

Low-Hanging Fruits For Enhancing Mobile UX

Obviously, if an app is not useful, it will have no practical value for the user, and no one will have any reason to use it. And even if the app is useful but requires a lot of effort, people won’t bother learning how to use it.

The post Low-Hanging Fruits For Enhancing Mobile UX appeared first on Smashing Magazine.

May 17 2017

12:13

“Why We Didn’t Use A Framework” (Case Study)


   

When we set out to build MeetSpace (a video conferencing app for distributed teams), we had a familiar decision to make: What's our tech stack going to be? We gathered our requirements, reviewed our team's skillset and ultimately decided to use vanilla JavaScript and to avoid a front-end framework.

“Why We Didn’t Use A Framework” (A Case Study)

Using this approach, we were able to create an incredibly fast and light web application that is also less work to maintain over time. The average page load on MeetSpace has just 1 uncached request and is 2 KB to download, and the page is ready within 200 milliseconds. Let's take a look at what went into this decision and how we achieved these results.

The post “Why We Didn’t Use A Framework” (Case Study) appeared first on Smashing Magazine.

May 16 2017

13:20

Introducing Mavo: Create Web Apps Entirely By Writing HTML!


   

Have you ever wanted to make a website that non-technical folks can edit right in the browser? Or have you ever wanted to make a website that presents an editable collection of items (e.g. your portfolio)? Or simply upload images to a website you made, right from the browser?

Introducing Mavo: Create Web Apps Entirely By Writing HTML!

Well, what if I told you, that you can do these things (and more!), just with HTML and CSS? No programming code to write, no servers to manage. You can make any element editable and saveable just by adding one HTML attribute to it. In fact, you can store your data locally in the browser, on Github, on Dropbox, or any other service just by changing an HTML attribute.

The post Introducing Mavo: Create Web Apps Entirely By Writing HTML! appeared first on Smashing Magazine.

08:04

Free Virtual Conference To Take Your Agile UX Skills To The Next Level


   

To get better at your craft, there’s nothing more valuable as learning first-hand from the experience of others. What little tricks have helped fellow designers, design leaders, and developers become more efficient? And how do they overcome hurdles in their projects? Conferences are a brilliant opportunity to get up close with the pros and exchange tips and ideas. But they aren’t the only one.

Agile UX Virtual Summit

To spread expert knowledge between people who are hundreds, even thousands of miles apart, our friends at the full-stack UX design platform UXPin brought the first free virtual summit to life a few months ago. Now the second edition is on its way, and we are very happy to help make it happen: the Agile UX Virtual Summit, focusing on all things Agile UX. Because, well, we all know that building a UX team with agile organization can be quite a challenge.

The post Free Virtual Conference To Take Your Agile UX Skills To The Next Level appeared first on Smashing Magazine.

May 15 2017

12:24

Fluid Responsive Typography With CSS Poly Fluid Sizing


   

Fluid layouts have been a normal part of front-end development for years. The idea of fluid typography, however, is relatively new and has yet to be fully explored. Up until now, most developers' idea of fluid typography is simply using Viewport units maybe with some minimum and maximum sizes.

Fluid Responsive Typography With CSS Poly Fluid Sizing

In this article, we are going to take it to another level. We are going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass.

The post Fluid Responsive Typography With CSS Poly Fluid Sizing appeared first on Smashing Magazine.

May 12 2017

09:40

Web Development Reading List #182: IPFS Wikipedia, New Webpack CLI, And CSS Grid Breakout


   

When did you take your last vacation? For many of us, it was probably a long time ago. However, since quite a while, I stumble across more and more stories about companies that take unusual steps vacation-wise. Companies giving their employees a day off each week in summer or going on vacation together as a team building event instead of traveling somewhere just to work.

Web Development Reading List 182

But while there’s a new generation building their dream work environments, a lot of people still suffer from very bad working conditions. They work long hours and are discriminated or harassed by colleagues or their managers. And just this week, I heard that many company owners are desperate because “Generation Y” doesn’t want to work long hours anymore.

The post Web Development Reading List #182: IPFS Wikipedia, New Webpack CLI, And CSS Grid Breakout appeared first on Smashing Magazine.

May 11 2017

19:48

How To Create Native Cross-Platform Apps With Fuse


   

Fuse is a toolkit for creating apps that run on both iOS and Android devices. It enables you to create apps using UX Markup, an XML-based language. But unlike the components in React Native and NativeScript, Fuse is not only used to describe the UI and layout; you can also use it to add effects and animation.

How To Create Native Cross-Platform Apps With Fuse

Styles are described by adding attributes such as Color and Margin to the various elements. Business logic is written using JavaScript. Later on, we’ll see how all of these components are combined to build a truly native app.

The post How To Create Native Cross-Platform Apps With Fuse appeared first on Smashing Magazine.

12:13

An Abridged Cartoon Introduction To WebAssembly


   

There's a lot of hype about WebAssembly in JavaScript circles today. People talk about how blazingly fast it is, and how it's going to revolutionize web development. But most conversations don't go into the details of why it's fast. In this article, I want to help you understand what exactly it is about WebAssembly that makes it fast.

An Abridged Cartoon Introduction To WebAssembly

But first, what is it? WebAssembly is a way of taking code written in programming languages other than JavaScript and running that code in the browser.

The post An Abridged Cartoon Introduction To WebAssembly appeared first on Smashing Magazine.

May 10 2017

11:00

Basic Patterns For Mobile Navigation: Pros And Cons


   

Once someone starts using your app, they need to know where to go and how to get there at any point. Good navigation is a vehicle that takes users where they want to go. But establishing good navigation is a challenge on mobile due to the limitations of the small screen and the need to prioritize content over chrome.

Basic Patterns For Mobile Navigation: Pros And Cons

Different navigation patterns have been devised to solve this challenge in different ways, but they all suffer from a variety of usability problems. In this article, we’ll examine five basic navigation patterns for mobile apps and describe the strengths and weaknesses of each of them. If you’d like to add some patterns and spice up your designs, you can download and test Adobe XD for free and get started right away.

The post Basic Patterns For Mobile Navigation: Pros And Cons appeared first on Smashing Magazine.

May 09 2017

12:19

Intrusive Interstitials: Guidelines To Avoiding Google’s Penalty


   

In 2015, Google announced that mobile searches surpassed desktop searches in at least 10 countries. 56% of mobile traffic on major websites comes from mobile. In light of this, Google’s decision to improve the mobile user experience by various means, such as AMP pages and a dedicated mobile index, comes across as a sound business move.

Intrusive Interstitials: Guidelines To Avoiding Google's Penalty

More than half of the 2 trillion searches Google processes each year come from mobile devices. Mobile devices have changed the way we approach search, ushering in new types of habits such as local search, voice search and more. These consumer habits have greatly affected the way search engine providers think about user search intent.

The post Intrusive Interstitials: Guidelines To Avoiding Google’s Penalty appeared first on Smashing Magazine.

08:36

The Best Multipurpose WP Themes to Use in 2017

Advertise here via BSA

Multipurpose WordPress themes are typically quite versatile and flexible. Using them you can create any type of website, ranging from corporate and e-commerce sites to blogs and agency portfolios. Specialty themes also have their place. Sometimes they are a better choice for creating a specific website type or filling a specific need. You’ll find excellent examples of both types here.

Be Theme

1

Be Theme , the biggest WordPress theme ever, is packed with too many powerful and useful features to mention here. The short list includes a superb collection of 250+ stunning, custo mizable pre-built websites to act as excellent starting points for your design projects. Pick one, install it with one click, and let Be’s Muffin Builder and Options panel take it from there.  

Did you know it’s possible to build a ready-to-go website in 4 minutes! Click here to find out how working with Be Theme can make that happen.  

If you want to start a page from scratch, the Layout Configurator will get you started. Be is not only big in terms of its 250+ pre-websites, and its core features (40), but also in terms of the virtually unlimited variety of design options it provides. This premium WordPress theme is easy to learn, and easy to use; but should you have a question, or need a little assistance, Be’s world-class support team is there to help.

Pro

2

Pro is the most advanced website creator for WordPress. If you’re a pro, Pro is for you. If you’re not a pro, but aspire to be one, Pro is also for you. Pro can be described as powerful, modular, scalable, fast, optimized, extensible; or all the above.

Features include a trio of powerful, interconnected builders (Header, Content, & Footer). You can build simple to exceedingly complex header styles with ease.

You can rely on Pro’s drag and drop interface, optimized workflow, and other powerful content-building features to help you realize your website layout potential. As far as the often-  neglected footer is concerned, this amazing multipurpose theme makes it oh so easy to create a footer that is a thing of beauty.

Pro is easy to use, but fasten your seatbelt. It’s a game changer!

The Core

3

The Core is big. It’s 20+ themes in 1, and growing. This multipurpose WordPress theme is packed with cool features, including the Advanced Visual Builder, plenty of shortcodes, multiple slider, header, and footer options, and 700+ fonts. And, that’s just for starters.

Its 20+ hand-built website demos addressing a variety of business and industry niches. Demo content is easy to auto-install, and when you purchase The Core, new demos will be yours to use, as they appear.

The Core is responsive, retina ready, and WooCommerce ready as well. There are plenty of animations you can use to add zing to your sites; you’ll find many uses for the custom Google Maps feature; and, there’s even a module for saving your work in the event of a system crash.

The Core is well documented, and the support is superb. Take it for a free test drive in the Test Lab! 

Houzez

4

The Houzez WordPress theme’s strong suit lies in the real estate niche. It has all the functions and features a land developer, realtor, or real estate agency could want or need in a website.

Many of these features are not to be found in most WordPress themes; even those that claim to have “everything”. Houzez is fully responsive, and features an advanced search system and unlimited page templates.

Kalium

5

If you’ve been looking for a creative multipurpose theme that can showcase your work in the way you’ve always wanted, you’ll find the answer in Kalium.

This well-organized theme features stacks of layout designs and sub-options, including 30+ portfolio item types and 15+ header styles. Visual Composer is your page builder, and with 100+ shortcodes to work with you can build anything; and do so without coding.

Uncode

6

Uncode is ultra-professional, smooth and sleek. Its delightful collection of homepage layouts (concepts) are neatly placed in 5 categories: Classic, Creative, Shop, Blog, and Portfolio. In addition, there are 30+ special design features and 22 special pages to help you build your site.

With the aid of Uncode’s enhanced Visual Composer, and their unique Hierarchical Options System, you can design whatever is on your mind; and do so with pixel-perfect precision.

Kallyas

7

Kallyas is a top-selling Themeforest WordPress theme that’s an absolute joy to work with. Built around a Bootstrap 3 frontend framework, Kallyas is fast.

You’ll love its visual page builder, and the 150+ design elements that accompany it. There’s a host of layout options, and you can either import a demo, or start a page from scratch. Kallyas is responsive, and SEO ready.

TicketLab  

8

TicketLab helps you build a complete customer support system! No other WordPress theme provides this capability.

Built around a knowledge-based solution and a ticketing system, TicketLab enables you to streamline your customer support workflow by integrating it with Trello and GitHub.

TicketLab is multilingual, and Zendesk compatible. It has a forum feature, and helps you manage your knowledge base and tickets from your own website.

TheGem

9

TheGem is a wonderful creative toolkit for crafting powerful websites in a matter of minutes. It has 50+ ready-to-go creative homepage concepts for any business niche! This multipage- and one page-ready gem includes Visual Composer as page builder and brings with it a host of creative page templates, unique design concepts, widgets, shortcodes, and design options. There are plenty of portfolio and blog layouts too.

You can freely combine elements, and no coding is required.

ionMag

10

ionMag is a spectacular theme designed to help you build engaging blogs, news, and magazine websites. It is more than a tool, as it comes with a collection of features you didn’t even know you are searching for. ionMag is powered by a frontend page builder, TD Composer, specially developed for the task.

The features also include an innovative Theme Panel which places all your editing options where you need them, and 5 fully functional, customizable pre-built designs. Even more, ionMag is AdSense ready to help you monetize your website with ease.

TheFox

11

Like its namesake, TheFox is one of the cleverest, smartest multipurpose WordPress themes on the market. The reason? It’s been designed down to the minutest of details.

TheFox has the essential features you need and expect, including more than 30 demos, a wide selection of detailed design elements, Visual Composer, and premium plugins.

Check out a demo to get an idea of what TheFox can do for you.

Brando – A multi-purpose one page WordPress theme

12

Brando is a cutting edge, feature-rich, fully responsive, multipurpose one page WordPress theme.  Visual Composer is your page builder, and you’ll have lots of shortcodes and settings to work with. Whether you want a beautiful, fast-loading, one page website optimized for search engine performance, a creative personal website, an eye-catching portfolio, or a blog – Brando is for you. Brando is a product of Evanto Elite’s 5-star rated author ThemeZaa.

H-Code – A premium quality multi-purpose WordPress them

13

H-Code is a versatile, fully-responsive, multipurpose WordPress theme that’s suitable for building creative one page or multi-page websites of any kind. What sets it apart from other multipurpose themes and template, is the close attention to detail that characterizes every home page and demo. The resources are there to create superb multipage websites with beautiful and attractive designs for corporate, portfolio, eCommerce and blog.  

XStore – Responsive WooCommerce Theme

14

When you’re planning an e-commerce website, it only makes sense to take advantage of a WP theme that specializes in the subject. The XStore team has gone to great lengths to address and provide solutions to many of the problems online store designers face. XStore is an aesthetically-minimal theme that makes it easy to produce SEO optimized websites. Features include 50+ good to go shops, Visual Composer, and $250 worth of plugins.

Conclusion

With so many options, you may feel somewhat overwhelmed. Think about what you need, visit some of the theme websites, see what they have to offer and how closely they match with what you’re looking for.

Sponsors

Professional Web Icons for Your Websites and Applications

May 08 2017

12:48

From Idea To Development: How To Write Mobile Application Requirements That Work


   

Why write requirements? Well, let's imagine you want to produce a mobile app, but you don’t have the programming skills. So, you find a developer who can build the app for you, and you describe the idea to him. Surprisingly, when he showcases the app for the first time, you see that it is not exactly what you want. Why? Because you didn’t provide enough detail when describing the idea.

From Idea To Development: How To Write Mobile Application Requirements That Work

To prevent this from happening, you need to formalize the idea, shape it into something less vague. The best way to do that is to write a requirements document and share it with the developer. A requirements document describes how you see the result of the development process, thus making sure that you and the developer are on the same page.

The post From Idea To Development: How To Write Mobile Application Requirements That Work appeared first on Smashing Magazine.

May 05 2017

10:13

Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities


   

In a world between building accessible interfaces, optimizing the experiences for users, and big businesses profiting from this, we need to find a way to use our knowledge meaningfully. When we read that even the engineers who built it don’t know how their autonomous car algorithm works or that the biggest library of books that mankind ever saw is in the hand of one single company and not accessible to anyone, we might lose our faith in what we do as developers.

Web Development Reading List 181

But then, on the other hand, we stumble across stories about accessible smart cities or about companies that embrace full honesty in their culture. There are amazing examples of how we can pursue meaningful work and build a better future. Let’s not let negative news get us down, but let’s embrace them as a reason to change for the better instead.

The post Web Development Reading List #181: Mass Deployments, Prepack, And Accessible Smart Cities appeared first on Smashing Magazine.

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl