LATEST FROM OUR BLOG

Take your daily dose of (only) relevant news, useful tips and tricks and valuable how to's on using the latest web technologies shaping the digital landscape. We're here to do all the necessary information sifting for you, so you don't have to, to provide you with content that will help you anticipate the emerging trends about to influence the web.

Is Your Website Designed to... Sell? 7 High-Converting Design Principles to Apply- Part 2
We're back, as promised in our previous post, with 7 more design principles that you should “steal” from those e-commerce websites that have already “made it big”.   If the 5 principles that we revealed to you in that post revolved around the visually-appealing aesthetics that any website should “wrap” its conversion goals in, today we'll be tackling the issue of usability.    After you've learned all about delighting your visitors and visually enchanting them, today we'll reveal to you the 7 (surprisingly) subtle changes that you could apply to your website for discreetly guiding your visitors towards the final purchase, for making the whole “path” they'll need to cross from the moment they land on your site to the shopping cart page as easy to follow as possible.   1. Make Your Search Box Visible   Run a test! Go online, pick, let's say, 10 random websites, access them and try to time how many seconds it takes you to spot the search box on their homepages.   Needless to add that the “winner” is the site that “scores” the shortest time needed for you to track down its search box.   It's the same with your e-commerce website. You should, indeed, invest lots of time and creativity in getting it upgraded with striking visual elements to delight and to engage your visitors with and to pay great attention to the whole information structure and to the layout of your website, but mind you don't overlook the search box's major importance!    All your efforts in making your products/services as visually-appealing and desirable as possible might just go down the drain right from the start if you “manage” to frustrate your visitor by wasting his/her valuable time looking for your search box.   In a nutshell: make your search box pop out!   2. Discover Which Colors and Color Contrast Convert For You   Before you rush in to paint all your call to action buttons in red (since it's a general consent that red triggers a sense of urgency and therefore that it converts better) or before you rush in to change it from red (since you've discovered that, well, it did not help you reach that high conversion rate you expected it would) to orange (for you've red about it being the perfect call to action color for “aggressively” urge your users to buy), you should first:   consider which is the emotion/which are the emotions that each colors conveys (maybe if you're selling beauty products you'd better go for cheerful pink rather than “alarming” red, for instance)   run some tests for finding out which is the color that converts better for you and you only (what works for others might not work out for you, too)   depending on the color that you decide to choose for your foreground and, most of all for your call to action button, you should choose a contrasting color for your website's background.   And here we are! To the very color-related “subtlety” that we wanted to point out to you: strive to find not just “your” website's color, the one that converts best for you, but the high-converting CONTRAST for your website, too.   It's the contrasting background that will help you make your call to action buttons pop out, you know. So, think in pairs of colors: purple and yellow, orange and blue and so on...   3. Go For An Attention-Grabbing Call To Action   Put your call to action in a container, make it stand out!   Your call to action button should be grabbing your visitors' attention even quicker than your search box.   If in the case of the latter your role is more that of a guide, one willing to assist the visitors to quickly find the information they're looking for, when it comes to your call to action you should make sure it simply grab their attention the very moment they land on your website.   We've talked about “wooing” your website's users, about delighting and “spoiling” them with striking imagery and quality content, but even so: you should keep in mind that at the any of their “visits” you still want them to buy or to subscribe.    In short: don't rely exclusively on the foreground-background contrast and add do more! Try a contrasting container for your call to action! It's the key element of your website, so you should make use of all the available resources for making it grab the attention!   4. Give White Space Its Due Importance    Here's another design subtlety that you could apply for making your call to action stand out: placing it against white space! Give it a try, test it on your website and see whether it works for you, too, whether a white background makes your conversion button even more visible!    5. Put Together a Visual Hierarchy   Remember that we've already talked, in our web typography-related post, about the hierarchy's high importance in web design?   Well, it's time to lay stress on it once again: visual hierarchy paves the way to an optimized user experience (and therefore to that conversion rate that you've been dreaming of)!   Display all the elements on your website in a powerful visual hierarchy and you'll discreetly and efficiently guide your visitors towards the target (purchase or subscription) that you've set up for him/her.   Turn his/her delve into the multiple layers of content (all the way to the final purchase) on your website as smooth and fluid as possible with the help of an effectively-structured hierarchy!   6. Keep Your Navigation Bar Short and Simple   Now it's time you examined your navigation bar!    How many links/buttons do you have there? Is it on top of your page or somewhere else? Are its labels generic or descriptive?   Once you've moved your magnifying glass across it and (maybe) you've “detected” some aspects that could be improved, here are our navigation bar-related tips for you:   keep it short: go for an ideal no. of 5 items  go either for a standard horizontal one, placed on top of your page or for a vertical one, placed on the left side of your front page: no need to get creative here, for “innovation” in this case is more likely to affect usability go for descriptive rather than generic labels: give your visitors a hint of what you do, who you are and not just standard, impersonal information (“Who Are We”, “What We Do”) put your key items at the beginning and the end of your navigation bar  links, links, links, not buttons: links are far better for SEO reasons, since search engines can detect the written text, they're easier to edit and where do you ad they they load quicker than buttons, too!   7. Guide Them With Directional Cues    We all need a bit of guidance!   Therefore, help your website's visitors quickly spot your lead-generation forms and your call-to-action buttons with directional cues.   Use them for directing their attention to the conversion-generating elements on your website. They help you minimize the risk that your users may get too distracted by/captivated by all the other appealing types of content on your website and that they may outlook (or, even worse: that they may not spot them in due time once they've made up their minds) the “really” important ones (for you): call to action buttons.   And here we are, at the end of our list of conversion-centered design tips and tricks for you. Have you had the chance to test them already (or maybe just some of them? Have they worked for you? Feel free to share any other design subtleties not showing up in our list here and which worked “wonders” for you! ... Read more
Adrian Ababei / Dec 06'2016
Is Your Website Designed to... Sell? 7 High-Converting Design Principles to Apply- Part 1
First of all, we should get one thing very straight: you will never ever meet your conversion goal if you're “just” selling stuff on your website.   “But it's an e-commerce website, it's supposed to sell products/services!”   That's perfectly true, but you need to strive luring, delighting, engaging and “giving” something to your visitors first (pretty much like in real-life, where you greet your guests with yummy snacks or at least just coffee). It might be some visually-arresting photos to please their eyes with and to trigger certain emotions in them or some interactivity features to show them that you care etc.   The actual sell will eventually come, stay reassured, if you master all the preliminary “customer wooing” steps! But it should come last!   In other words, your site's conversion goal should be... “camouflaged” by and beautifully wrapped in the whole aesthetics of your website. It's your website's design that will entice your visitor to prolong his/her visit on your site and it's design, again (certain usability-related design subtleties), that will “light his/her way” to the final purchase.    Let's see now which are these 5 design principles that turn web design into “web design that sells”:   1. Spoil Them With High-Quality Photography   It should be visually-appealing! That's the golden rule of any e-commerce website.   Hiring a good photographer for upgrading your website with sharp, high-quality, beautiful shots of your products might just be the best investment you'll make!    It's no subtle “trick”, if you think about it! Just put yourself in your visitor's shoes: aren't you more inclined to buy products presented to you in some visually-striking photos that scream “you need me in order to be fully happy”, than products featured in low-resolution, blurry images, that tell no story, either? That don't lure you and make you “need” them?   So, what we've learn from this first “lesson”?   That you need to make your products look really, I mean really, hard-to-resist-to and that amazing photography has always been the surest and quickest means to help website developers/owners reach that goal!   2. Balance It With A Great Layout   We could as well call this second design principle: COHESION.   Make sure that the key elements on your website, those that you want to drive the visitors' attention to (i.e your product shots), are nicely complemented and highlighted by your website's layout!    Think “cohesion” when you design (or, even better, hire an experienced web designer, since the “one man show” method is not always the most efficient one) your layout. Put together all the colors, shapes and textures so that the result should harmoniously complete the “story” told on your website and not steal the spotlight away from your products/services or clash with them.    3. Bring Interactivity To Your Website   Face it (and adapt to it) or lose it: there's a new word for “selling” these days! It's called “engagement”!   So, how does your website keep your digital addicted users engaged? They definitely expect to get engaged, you know, to be offered the possibility to write comments, reviews. They like to stand out from the "faceless" mass of generic visitors on your website.   What are you going to do about that?   Well, there are plenty of user engagement tools that you could upgrade your e-commerce website with and we're going to list only 2 of them:   add videos to your website; stunning video elements focusing on your products, that will grab your visitors' attention and will keep them engaged for a minute or two (videos will continue to be, in 2017, too, a major online sales-booster)   implement a separate window where users get to take a really close look at the products they're interested in; it should allow them to move those products, to zoom in and take a close look at them in different angles before they decide to purchase them    In short: get creative and strive to add a few more in-between elements to the conventional “customer-purchase” schema!   4. Give Background Its Due Importance   You need to embrace your the backing image's full potential! It's far more than merely “something” that just fills up just the space behind your products, the main focus on your website.   When used right, when strategically selected, a full-sized backing image can enhance your products even more.    First, consider your type of business (needless to add that it's a different image that you should go for if you're selling financial products on your website and a totally different one if you're selling artsy handmade products).   Next, adapt your banking image to the type of message that you're trying to convey. It should, as already mentioned: enhance your product (make sure to strike a balance between minimalist and visually-appealing).   A major trend these days, when it comes to backing images, is the blurred background. Give it a try! See what's there, online, come up with your own blurred backing image, integrate it in the “story”, test it and see whether it meets your website's goal.   5. Add the Human Factor   Show the clothes that you're selling on a model's body, show the gadget that you're selling as being used by someone, add at least one person to an otherwise "antiseptic" representation of a room decor if you're selling furniture and so on.        You've got the point, haven't you? You should help your visitors relate to the “character/s” in the “story” you're presenting on your website.   You should help them empathize with them, feel as if they're the ones happily using those specific products.   It's always easier to relate to an emotion (the happiness, the relief, the pride, the satisfaction that your product triggers in the person showing up in your photos), than to a product.   Face it, do what it takes to adapt your website's design to this principle or lose it (lose that conversion rate that you've been fantasizing about)!   So there you have them! The first 5 answers to the question that has probably been on your mind for some time now: “what are those high-converting sites doing differently?”   STAY TUNED, for in our next post we'll be sharing with you 7 more design subtleties that top converting e-commerce websites rely on! ... Read more
Adrian Ababei / Dec 05'2016
How Readable Is Your Website Content? 4 Best Practices on Using Typography in Web Design
Since the Web pays tribute to the whole concept of UX these days, since all web developers direct their efforts towards “hooking”, engaging and pleasing (whether that means impressing, informing, shocking or enriching) the User, typography has started to regain its glow!    Even now, in the age of breathtaking imagery and attention-grabbing videos, typography is still king! Add a short, impacting text line (in a strategically chosen typeface) to a striking image or upgrade a stunning, hypnotizing video with a powerful written text and you'll instantly strengthen your message, you'll instantly add a new layer of meaning to it!   On the other hand, “worn out”, conventional typefaces or too embellished typefaces, that won't support the literal message you're trying to convey, bad spacing, lack of contrast or any other unfortunate way of handling web typography can ruin your website (if it's not easy-to-read your visitors will definitely bounce off, whereas if it does not complement and strengthen your message, if it does not help it trigger the type of emotion you're trying to trigger in the user, all your efforts put in web design and programming are at risk).   But What Is Typography After All?   Very basically put: typography is how the text looks.    If we are to elaborate this rudimentary definition a bit: typography is more than just the arrangement of written content (paragraphs, forms, sentences, words); it's also how written text interacts with all the other types of content on your website: videos, images, color. It's about how it manages to “collaborate” with all the other content types for conveying the message/triggering the emotion you want to trigger in your users.    Why Should You Bother So Much About It?   Because it's that “invisible” force that might either strengthen your relationship with your User or “destroy” all your hard work. It depends a lot on how you use it (or how you refuse to use it).   Since 95% of the content on the web is written content and considering the “fierce competition” out there, among websites, you just can't afford ignoring or not paying enough attention to how texts gets displayed on your website.   Learn to use web typography to your advantage: when done right, it's a “force” that helps you create visual interest, better structure your information design, make your written content readable and in a nutshell: influence your users. A too powerful of a “tool” not to strategically use it, don't you think?   Easy-to-read! Persuasive! Does that ring any bell, you UX expert, you?   Tips For Improving Your Website's Typography Now   No need to panic now if, let's say, you're still displaying a way too “dusty” font on your website (such as Arial), or if you've taken a wrong decision and, driven by a wish to innovate, you've gone for a way too embellished typeface, when your text should just convey its literal meaning instead. There's nothing that some good practices in web typography can't fix. Here are our 4 tips for you! 1.  Hierarchies Are Major Readability-Boosters   Don't take our word or granted! Test it and see it for yourself. Do an A/B test:   on the left side: a piece of content with no hierarchy whatsoever, a block of text featuring pretty much the same font size (or with very little variations) for its headlines, title, body etc.   on the right side: a hierarchy-type of content with, let's say, a 15-17 px font size, a visible first headline, followed, closely, by the secondary ones (of about 150% of the body size), making reading much more fluid, featuring white spaces for the eye to rest on etc.   Isn't the whole information far better structured in the second example? 2. Choose the Right Typeface    “And how do I know which one of “THE ONE”? Especially when the Web unfortunately “spoils” us with such an overwhelming “repertoire” of temping typefaces?   Well, to this question we have no unique valid “recipe” for you: see what's out there, on the web, analyze your competition, those websites that try to convey the same type of messages as yours and examine their fonts. Conduct your own “investigation”, see which are the most “effective” typefaces.   In between your own “investigations”, you could as well try out (and see if they work for you, too) these 3 body text typefaces-related tips that we've prepared for you here:   Even color: stay away from body text typefaces that break the rule of “evenness of color”, those that display patches of whiteness and blackness. Body text fonts should be consistent for displaying an easy-to-read text for your users   Sturdy shapes: make sure the typefaces you choose for your body text are easy-to-read at small size, too. So, a good practice is to choose high x-heights typefaces with less frills (lest the glyph shapes should turn into distraction for your users and the way too “subtle” fonts, at small sizes, should get outshone by the environment on the web page)    Active texture: do your best to balance various aspects of the text block and type. Make sure your body text font's active texture (meaning the typeface's contrast with the white space of the page, the one enhancing visibility around the glyphs) is neither too dull or too lively. In other words, it shouldn't distract the reader/user from the text's message itself, nor bore him/her (making it difficult for him/her to actually distinguish the letters' shapes). 3. Adjust Your Line Spacing   In other words: allow your written copy to breath! How? By setting up your vertical spacing and giving your text more room (it will be a lot easier for the User's eye to scan it).    A good practice, in this respect, would be to go for a line-height of 15-19pt if you're going for a 12pt font, for instance. You do the math what line-height you should go for if your font is bigger. 4. Adjust Your Line Width   “How many?” you may ask, “How many words should there be in a text line, within a paragraph?"   It's a common sense approach to go for an average of 45-75 characters if you're handling with a one-column web page and for 40-50 characters if there are multiple columns on your page.      How about you? Which are your own web typography good practices? How do you make use of typography's “arsenal of cool tools”? How do you make it “serve” your website's purpose?  ... Read more
Adrian Ababei / Dec 01'2016
Switch from A Mobile-Friendly to A Mobile-First Strategy!
How do you find the online landscape now, when the air is filled with new possibilities, opportunities, forecasts, and wishes for 2017?   You do find it dominated by the digital environment’s own trends, and technological breakthroughs, right? Moreover, it’s just dictated, as it has always been, by the future-oriented end user, let’s face it.   Since more and more mobile users won’t even get to visit your website on their desktop devices anymore, but exclusively on their mobile devices. And since they will visit it more frequently from their mobile phones you need to cope with this context or else you’ll turn into a “dinosaur” stubbornly attached to his “desktop supreme” belief.   How should you cope with the (not so) latest shifts in the online world? You should go beyond the “mobile-friendly” approach and you should adopt the forward progression, the “mobile-first” plan!   Draft Your Mobile-First Strategy from Day One If you want to boost its effectiveness, you must draft it from the very beginning, from the product’s/services creation phase, so that you can align it with all your further marketing strategies and business maneuvers.   Practically, starting with a mobile-first viewpoint allows you to automatically make all the other business strategies and operations revolve around it.   But First, Let’s Analyze Three Different Approaches to Mobile-Friendliness 1. Responsive Web Design Let’s call this approach (which emerged in 2003) “the pioneer of all mobile-friendly techniques”. It practically revolutionized the way web designers and mobile users started to envision and to navigate through mobile websites and it’s still quite alluring even now, for many developers, due to its obvious advantages:   one URL for a given website across all devices cost-effectiveness (derived, of course, from the above-mentioned advantage) adaptability: web pages/content resize to any given width, enabling web users to quickly switch from the way they used to navigate through websites on their PCs, to the vertical type of navigation (scrolling)   And yet, as any “pioneer” in its field, responsive web design has slowly started to show its weaknesses:   “adapting” content-heavy website for mobile devices with fewer functionalities and far less equipped for supporting all the heavy content lead to a significant increase in loading time it inevitably looks like some sort of “compromise”: developed for the desktop and re-thought so that it should somehow fit the small screen devices’ features   2. Dedicated Mobile Site Then, when web design responsiveness starts to show off its limitations, it was time for the “dedicated mobile sites” to shine!   Basically, they were subdomains of desktop websites. Users got “detected” when they accessed websites from their mobile devices and they got automatically directed to the mobile version of the desktop site, using a different URL.   The big step forward? This was the very first attempt of customizing the experience for the end-user visiting a specific website on his mobile device, instead of just delivering him/her a “compromise”: a shrunk version of the standard desktop site. This approach paved the way for mobile-specific content strategies. And yet, there are certain disadvantages to this mobile-friendly approach, as well:   You have multiple URLs to juggle with (mobile and desktop version) If wrongly configured, it could easily lead to SEO-related trouble   3. Dynamic Serving (Server Side Components+ Responsive Web Design) And here is the most complex (for the team of developers who’ll have to respond so some bigger challenges now), but surely the most efficient (from the user’s experience standpoint) mobile-friendly approach!   What makes it better?   As a web developer, it allows you to display content, using just one URL, based on a user agent. The user reaches a specific website from his mobile device, he gets “detected” by the server-side JavaScript and the HTML, CSS, and JavaScript written and adapted to the mobile is delivered to him. That, instead of the same content being created for the desktop version of the website and then adapted...  somehow, so that it should fit the mobile, too.   Let’s sum up the pros:    one URL a much-improved user experience mobile-targeted content   Now, Let’s Dive Into the Mobile-First “Philosophy” “I think it’s now the joint project of all of us to make mobile the answer to pretty much everything” Eric Schmidt (Google).   Do you need more reasons for making your mobile-first website a top priority than these 2 major ones?   desktop devices’ supremacy has started to fade away (more web users will try to access your website from their mobiles and, moreover, there will be quite a lot of them who will be using only those devices for visiting your site) Google itself is all into the “mobile-friendly” “craze”   To these two main reasons for “saying yes” to a mobile-first approach, add 2 main targets, too:   freeing your future mobile-first website off all the heavy, unnecessary content, just an unwanted “legacy” from its “bigger brother”, the desktop version of the website reducing Its loading time and overall making all the displayed info looking neat irrespective of the technology used on the specific devices that your website’s accessed on.   Graceful Degradation vs Progressive Enhancement As we delve deeper into the mobile-first type of mentality that more and more website developers and website owners adopt these days, we should point out two main viewpoints that subsequently developed.   1. Graceful Degradation It is a concretization of the need for a design to work properly across as many platforms and browsers as possible. With this “goal” in mind, designers strive so that the user enjoys the best experience while visiting a certain website and makes efforts so that this website functions properly, despite the inevitable shortcomings.   Basically, the resulting website would need to scale back and lose some of the content that would slow it down or just didn't adapt to certain viewpoint sizes. It was about “losing the heavy content”: graceful “degradation”.   This viewpoint’s limitation is obvious: the final product often features the look of an afterthought, of an unpolished (one-size-fits-all) product.   2. Progressive Enhancement The whole perspective changes when you adopt this mobile-first viewpoint. You practically start by making your website look amazing and function properly on a low technology mobile device, thus trimming it to its core features, and then you progressively add new, heavier content, new features and turn it into a more robust desktop-ready website. See the difference?   It’s a much more organic way of developing a website: from its nucleus, made of its most vital elements, to a far more complex version of it. No need to rethink it from scratch so that it should work properly on mobile or, even worse, to “make it fit” (and it never does in a “natural” way) for mobile devices. You go your way up!   Also, when it comes to content (you know, “the all mighty king”), to the way that it gets enhanced or constrained by these two types of “methods”, the progressive enhancement “wins again”. It’s obvious why:   the graceful degradation: all the heavy content gets loaded on the largest platform and even though much of that content is removed from the mobile web pages, the already loaded heavy content still slows down the mobile website. the progressive enhancement: the basic elements get loaded first, making navigation much smoother on a mobile device and loading time much lower, and then progressively additional resources get added, when/if needed (to platforms that can support them well).   The Top-Down Method vs The Mobile-First Method We’ve already tackled these two mobile-friendly types of approach, but without actually naming them, so we’ll just sum up the basics:   1. The Top-Down Method: creating a website for large-screened devices, then “decreasing” it for smaller and smaller-screened devices. The main shortcomings are:   overloading mobile devices with way too heavy content, with too much information omitting many of the tempting features and functions specific to mobile phones   2. The Mobile-First Method is all about usability, all about user-friendliness. Start with the highly simplified, core version of your site which should work perfectly on devices equipped with lower-tech and level it up so that it should evolve into a website suitable for the latest high-tech devices. Facing simplicity (you’ll practically have to “work” with only 80% of your desktop’s screen size), maintaining it and turning it into your main goal, enables you to keep focused on the core elements of your website. And on how the end-user can carry out any given action on your site as quickly and intuitively as possible! Going from small to big is always far easier and it seems to be far more efficient, too!   Needless to add that the approach to mobile-first design is a flexible, constantly evolving strategy. It needs constant “trimming”, constant modifications so that it organically adapts to all the technological changes and to the shifts in mobile users’ way of interacting with the digital world, as well! ... Read more
Adrian Ababei / Nov 21'2016
10 UI Design Predictions for 2017 with a Huge Impact on the User Experience
You do agree that a good web designer must always strive to “read the future”, right?   To predict the trends and align his/her efforts with them even before they get to turn themselves into trends. Well, we’re here to lend you a helping hand with that, empowering you with a forecast on what will change, what will become even more prevalent and eventually what will become outdated in UI design in 2017.    So, here’s what professional experts with extensive experience in UI design predict for the year to come:   1. Extreme Minimalism If in 2016 the trend of minimalist, clean, airy design spread like wildflower, wait to see the trend of extreme minimalist design simply explode in the year to come!    Well-experienced designers predict that a magazine-specific layout (which some visualize in black-and-white, while others featuring bold, retro-style colors and arty, pop culture themes) will take over the digital interface.   Big, visually-appealing photos, engaging videos and highly simplified icons will outshine the long copy. Copy which will eventually get refined to short, easy to read and to understand phrases.   Conclusion: the print layout is expected to take over the digital world and the human eye will become, in 2017 more than now, the main “target” for all designed interfaces.   2. Micro-Interactions and Animations By far the most popular and therefore the best representation of a successful micro-interaction is Facebook’s “like” button.   Well, it looks like in 2017 designers will strive to come up with many more interactive forms of visuals, challenging their creativity to add the fun factor to them, too, so that they should: inform and engage and entertain at the same time.    Users feel „important” for a certain feedback is asked from them and they get to visualize what will happen if they click a certain button, if they perform a certain action.   Interaction is key in 2017’s web design and if you add creativity and fun, as well, then you’ve got yourself a magic formula!   3. Illustrations UI design has been about authenticity (“template web design” has been forgotten long, long time ago) this year and it will surely be about authenticity even more in 2017! About authenticity and personality, as well!   Even more than photography, illustrations allow you and your team to get creative and to enjoy unlimited freedom when you’re trying to present your brand’s uniqueness through storytelling.   Go for doodle-like illustrations if you want to portray a fun, playful brand or for line-based illustrations if you want to project a more sophisticated, professional look for your company.   4. Gradients and Vivid Colors Ok, how about flat design and muted colors? Been there, done that, it’s time to move along and to experiment!    What does this mean? It means that if you want to infuse some personality and dynamism into your UI design in 2017, you’d better get bold and go for vibrant color palettes and gradients.   Warning! Make sure that the vivid colors that you’ll opt for compliment and highlight your content. That you don’t sabotage yourself by choosing a color palette that goes against your content!   5. Parallax Since we’ve already forecast the trend of the „new”, modern magazines-specific layout, parallax is the perfect mechanic to pair it with!   The effect where the foreground moves at a faster rate than the background creates the impression of dynamism and of a fluid flowing content that both we and users are addicted to.   If you compliment it with text and imagery and with that non-traditional type of layout we were just referring to, the effect of fluidity is guaranteed!   Still, be cautious! If you’re not prudent, parallax can tire your users’ eyes!   6. Typography Bid farewell to once so cutting-edge, now „dusty” sans-serifs fonts and say „hello!” to the new big, bold, artsy looking fonts!   In 2017 you’ll get to challenge your creativity not just to put together illustrations, eye-catching minimalist layouts and „humanized”, fun-filled micro-interactions. You’ll get to create your own statement „look at me” typefaces, too, thus adding even more personality to your content!   Remember! You can craft uniqueness by simply putting big, beautiful fonts into the center of your stage!   7. Eye-Catching, Full-Screen Video It’s true that it’s no longer a breakthrough trend, but immersive, visually-appealing videos will become even more prevalent in 2017!   Again, as we’ve already mentioned, the human eye gets (vision more than any other human sense) constantly stimulated through dynamic, storytelling videos. They catch attention, they engage and if you pair them with eye-pleasing typography you get: a match made in heaven!   8. Scrolling Down and Long Content And here’s another not-that-new-anymore trend that will continue to grow in the year to come, too: continuous scrolling!   Why is it that this type of viewing has got so popular is pretty obvious: users get to „digest” long content in a fluid, less-disruptive motion.   What’s truly interesting is that it has become more and more popular for larger screened devices, too. That’s right, those old strict demarcation lines between mobile and desktop devices type of design have become more and more blurry.    Expect to see more and more websites featuring this type of mechanic on desktop devices, too.   Big plus! Continuous scrolling down is a so very versatile mechanic, since it works great on landing pages, on news stories, long-form copy and, again, on all devices, too!    9. Breaking the Grid Since we’ve already stressed out that dynamic layout is going to be a big trend in 2017, we couldn’t possibly have left this related forecast out: UI designers will be breaking the rigid grid!   Feel free to experiment, in the name of fluidity and dynamics! Play with focal points, layering, motion and depth, since your UI design’s potential will no longer get limited by a grid.   Be cautious though!  Never ever should you put form ahead of function! Know your limits, when you’re experimenting breaking from the grid’s tradition, lest you should come up with a UI design less intuitive and rather confusing for your user. You definitely don’t want that!   10. Cards-Based Design Told you there’s going to be little (close to none) „borders” left between desktop and mobile devices design. Card-based design is just one eloquent example, a trend that will grow more and more influential in 2017!   Just think about, let’s say, Pinterest! It’s probably one of the best examples of engaging cards-based design. The secret behind its popularity: it enables designers to structure and display large bits of data on a screen at a single click/tap/scroll.    Not only that you get to organize your information so that it should be easy-to-dig-through for your users, but you can customize your cards, too!    How do you prefer them? Do you want them to spin, to flip or to stack maybe?     And now we’ve reached the end of our list of „premonitions” when it comes to 2017’s trends in UI design.   Which one/s of them do you find more „likely to turn into a big hit”, which one/s of them do you consider to be outdated already and what other predictions, that we haven’t added to our list, can you share with us?  ... Read more
Adrian Ababei / Nov 17'2016
How Do You Create a Highly Persuasive Web Design? 4 User Psychology Principles to Apply
  How self-absorbed are you?    You don't need to answer that, for we all know that each web designer secretly shelters its own overdose of pride (towards his own creativity, his thirst for innovation and so on)... Still, if you're determined to make it in this user-centered digital world, you'd better lose some of that "I burst creativity and I “exhale” innovation and the user can't possibly not admire my... works of art!"   User psychology principles, combined with your own creativity, result in... powerful web design that actually influences (and which is much more than aesthetically pleasing). Curious now to discover how your site users' brains actually work?     The Human Brain Craves Order    Chaos on your website might look like some sort of a... statement to you, but beware of the temptation of getting too... innovative. You'll then risk to come up with a web design lacking:   hierarchy consistency familiar web design patterns (e.g hamburger menu, account registration, continuous stroll, FAQ, breadcrumbs etc.)   In a few words, make it easy for your user to surf through your interface with the help of a logical hierarchy.    Also, be sure to remain consistent with the theme and with the design patterns that you've settled for throughout your website.   One more thing: reward your visitor through recognition. Make him feel safe and sort of... proud of himself by placing:   your contact information where he's used to find it, based on his previous experiences the call to action button, as well, where he'd normally find it the logo on top, as he's used to seeing it an so on...     Speaking of the “recognition pattern”, what better examples could you think of other than:   Google, that guides our searches based on our browsing history and past searches  Amazon, that guides us in our future selections based on our previous purchases      Cement this pattern of recognition in your user-friendly interface!      Still, The Human Brain Can “Digest” a Certain Dose of Surprise   … but only if you're really carefully how you dosage it and how you present it to him.   What does this mean? It means that yes, of course that you're allowed to think outside the box, to get innovative, but you get to break the familiar patterns if and only if:   You've already asked yourself why you're breaking up the standard pattern   You're confident that your new one is better (and not just different)   You're sure that it's intuitive enough for your user (that it triggers surprise and not just frustration)   The safest way to... incorporate innovation into your web design is by placing the new pattern where the user doesn't expect it to be and by rewarding him, as well (most important), once he will have discovered it.    You'll thus influence him to embrace the new method of interaction!     The Human Brain Craves... Trustworthiness   User psychology-centered web design revolves around this common principle after all: first you do all the work it takes for winning your customer's trust and only then you can actually expect him to... reward you (by placing an order, by subscribing to your newsletter you name it)   So, is your website trustworthy? You know how to build appealing websites, but do you know how to upgrade them so that they convey trust as well?   Familiar design elements (e.g. menu at the top) Visible page headings and titles Detailed contact information at the bottom of the website Consistency in design (e.g using the colors in your logo throughout the entire website, even if just for links or for small icons) Placing your logo throughout your website (thus reinforcing branding and... building a sense of recall in your user's brain) “Less is more”, when it comes to content and... only easy-to-digest, perfectly structured content is king (“concise” is the golden word in the... user-centered online world)     The Human Brain Reacts to Colors   And there's a whole study pointing out each color's array of specific emotions/reactions (that they trigger in the user's brain).   Here are just some of the main color's characteristics, according to user psychology principles applied to web design:   Red: it conveys a state of emergency (e.g. Chinese restaurants using red to urge their future customers to... satisfy heir hunger) and alert (see it CNN's news alerts or where it's used to point out sales mark downs) Green: you won't find a more... easily to be processed color than green, nor one conveying the same state of optimism. In a few words: when it doubt... go for green! Being easily associated with nature, it's heavily used for beauty products websites. Blue: it makes the best choice when the main emotion you want to convey to your target audience is... trust. Rely on calm, cool shades of blue when you want to build a website on a solid foundation of trustworthiness, when you want to gain loyalty from your users (giants like Facebook and Twitter have and also lots of banks are using it on their websites). So, blue is trust and openness! Purple: go with the “royal” color if it's a message of... high-brow type of brand/services/products that you want to convey to your users. Many beauty and retail websites are “painted in purple” for this color's calming and soothing effect on the users. White: what's more inviting than white? It helps you put together a clean, pure design, one showcasing certain elements of your work and where do you add that there's much fuss about the almighty “white space”. What does it mean? It means that you should design with these necessary white spaces in mind (spaces on the website with no text or imagery), some “breaths of fresh air” for your user's eyes. Black: it's strong and powerful, but on the other hand... emotionless. Used mostly for luxury products retailers, it can help you trigger the right emotions that you want to if... used wisely (balance is key, after all, no matter what colors you choose) Grey: so modern and professional, yet lacking personality, some might say.  Pink: when you say “pink” you automatically say “feminine”, “fun” and “youthful”. So, you pretty much got the picture which should be your target market when you use lively or soft shades of pink!   How Does User Psychology Dictate Layout, Typography and Content?   Layout   We've already strengthened the importance of the “white space” concept, but we're going to... put it into the spotlight once again: use “comfort zones” in your layout (white zones), where your visitor can... rest his/her eyes and his brain if you want to guarantee him a pleasant experience on your website.   Typography   When it comes to fonts (and we do thank CSS3 for giving us access to a brand new world of... friendly fonts), they still divide into 2 major categories, each one of them addressing 2 types of users, 2 types of fields of activity:   Serif fonts: the ones conveying professionalism, traditionalism and importance (used on educational websites, newspaper websites...) San serif fonts: preferred by... modern brands, on the cutting edge side (e.g. Google and Apple) Also, balanced spacing is key (put enough space between your letters/paragraphs so that your text doesn't look too dense and so that it shouldn't convey a certain flightiness, either)   Content   Basically, it all revolves around structuring your content in order to be easy to be digested...     Now how about turning this empowering user psychology knowledge into the driving force behind your own future persuasive web designs? ... Read more
Adrian Ababei / Nov 09'2016
New Technologies That Speed up Your Website
The internet is constantly changing and speed is quickly becoming the major metric of progress and a key indicator for website developers. Here are a few new features which can help you speed up your website and reap the rewards of faster internet. HTTP/2 HTTP/2 was first published in May 2015 and has been supported since the second half of 2015 – HTTP/2 is a new and improved version of the WWW protocol. HTTP/2’s main improvement is the ability to cover multiple requests with a single connection – this improved ability, called multiplexing has the capacity to revolutionize the world of web designers forever. Current techniques used such as Data URIs and sprites won’t be used anymore. HTTP/1 used to be efficient when loading one large image but when it was necessary to load several smaller images the situation changed drastically – it simply wasn’t able to cover multiple concomitant requests. The new version improves this situation and HTTP/2 can handle multiple simultaneous requests with ease. HTTP/2 compresses headers before requested data is sent, which ultimately simplifies the transport by a great deal. This newer version is also non-textual and binary, unlike the previous version – this improves performance by a whopping 50%! The difficult thing about upgrading to HTTP/2 is not the HTTP itself but the fact that browsers only support it over SSL. So if you want to implement HTTP/2, the first thing you should do is get a SLL certificate. Once you have the SSL certificate, you can implement HTTP/2 on your own if you have administrator rights for your server. Otherwise, it depends on your server hosting or web hosting company. The SSL Certificate SSL certificates encrypt the connection between a client and a server. Getting your own SSL certificate is not as hard as you think – you can actually get one for free with Let’s Encrypt. Let’s Encrypt is a relatively new authority when it comes to SSL certificates – their ultimate goal is to eliminate all manual processes required to obtain a certificate. With Let’s Encrypt the whole process is automated and finished in just a couple of minutes. You can also get a certificate through your server hosting company or web hosting provider. Brotli Brotli was recently introduced by Google – this new compression algorithm will reduce the size of transported data, effectively increasing the speed of your website. Compared to other compression solutions, Brotli offers a 20 to 25% better compression ratio. As such, webmasters can save up to 40% on HTML files traffic and around 25% on JavaScript and CSS related traffic. Unfortunately, Brotli is only supported by Firefox and Chrome at the moment but other major browsers will follow soon. Major servers such as Node.js, Apache and Nginx all require a packet installation – there’s no server offering Brotli by default at the moment. Content Delivery Network A Content Delivery Network or CDN for short is a set of servers located in different parts all around the world. These servers all contain a replica of your website and all its assets – software, videos, images, etc. When someone accesses your website, the data is loaded from a server that’s closer to the visitor, thus increasing your website’s loading speed. Another advantage to CDN systems is the improved reliability of your website – the content is spread around many other servers which means that your hosting server doesn’t have to bear such a large load of traffic. Usually, websites that use a CDN system will load 50% faster compared to regular websites which use only one hosting server. ... Read more
Adrian Ababei / Jun 07'2016
Remedial Design Tips for Web Development
If you are a developer or a web development agency and you’ve just built a web development prototype, you might often find yourself in a bit of a pickle – your users might find it ugly or your web development demo might look very bad. Here are a few "golden" design tips for web development, guidelines on how to make your web development demos look as good as they deserve.   Keep your cool, By Far One of The Most Valuable Design Tips for Web Development One way of putting it is like this: “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”. Jared Spool’s quote is spot on for all design work but it’s especially true when it comes to web development and demos. If you are building a web development demo users shouldn’t really pay attention to the design aspects of it, but its functionality and purpose. If you’re trying to make your demo more stylistic, you’re actually moving away from your ultimate goal – keep it simple and focus on its functionality. If it doesn’t look as good as you’d want it to be, try removing some web development design elements such as effects, borders or shadows.   Try to avoid complex color palettes Poor color choices can make or break a design – your color picks should be made during the UI design process, even if it can be tempting to make bold color choices early in the project. When making the UI wireframe, you’ll begin using monochrome rudimentary lines and shapes. Once you finished that part, you can start adding more details until you reach the color aspects of your project. Here are a few tips when picking your colors: It’s a good idea to keep your demos monochrome with plenty of greys until you’re ready to color it up properly. Another tip is to avoid fully saturated colors, especially when your demo will be viewed on an illuminated screen as this can lead to discomfort for your users. In the same time, you should avoid black and white due to the same reasons as previously stated – sticking to shades of color will make your users less tired and improve UX. Add color to your monochrome design but do it just one at a time – each color can be a distraction to your users. Pro tip: you can use a range of saturations of just one color – this will offer plenty of variety and you basically can’t go wrong.   Simple typography works best If you’re building a web development prototype or a demo there’s no need to for fancy fonts but here are a few pointers on typography: If you don’t know what to pick, sans-serif works best in all situations. Serif fonts usually have details where strokes terminate. These fonts can help you bring a little bit of personality to your design and at the same time make your text easier to read. While serif fonts have some advantages, they’re not usually used for UI design since at smaller sizes they display varied stroke weights. Other fonts you should take a look at are humanist droid sans, used by Google in their Android interface, noto, and roboto. If you’re an Apple fan you can go for San Francisco or Neue Helvetica. Firefox OS uses Fira Sans. All these are sans-serif fonts which you can use for your project. Sometimes characters can be difficult to distinguish – combinations such as 9g, 6b, 2Z, 5S, I11 or 8B can be very confusing for users, depending on the font chosen. It’s best to first test them out in order to see readability and if that’s fine keep using it, if not, do some changes.   White space works wonders Functional space or white space helps web development designers in many different ways – this space reduces your visitor eye strain, can help draw attention to particular areas of your page and creates a general sense of balance. Cramped UI will make users tired and uncomfortable but keep in mind that “less is more” works perfectly at this stage. More breathing space will offer your users a breather as well – boosting line heights, margins and plenty of padding works great. And this is one of those priceless design tips for web development to put on top of your "must-do" list.Spread everything out on your design and it will look much better. Spacing needs to be consistent throughout your design – consistency is the key to harmony and rhythm.   Improve your web development workflow Foundation and Bootstrap can be a great help to developers even though they receive criticism for making websites look too generic – these tools are perfect for prototypes. Foundation and Bootstrap actually make the right choices on your behalf, leaving you with ample time to focus on other aspects of your project. Spare yourself the extra work and just grab templates from Foundation or Bootstrap which you can customize to fit your style. Most of these templates are very comprehensive, so you’ll definitely have all the pieces you need to get going.   Conclusions By following these design tips for web development you’ll smooth any problems you may encounter when building a prototype or demo. ... Read more
Adrian Ababei / May 31'2016
Bootstrap 4 news
Bootstrap is a giant framework with almost everything you could need for building a site or web app interface. Bootstrap is changing, version four is in alpha release. Naturally, we’re just as curious to know what’s different, so I dived into the documentation to find out. Keep in mind, though, that this is an alpha release. It cannot be considered feature-complete. It could radically change. From Less to Sass This is obviously the biggest and most important change. Heck, you’ve probably already heard of it. People have gone so far as to procliam the “death of Less” due to this switchover. Well, I don’t know if anything’s gone and died because the Bootstrap team decided to do things differently. It is, however, a monumental undertaking, and it will drastically change how people use and customize the framework. Sass is just generally more developer-friendly, with wider support, a bigger community, and yes, more features. It can do some things that, right now, Less just can’t. I say this with sadness. I’ve never made any secret of my love for Less; but it seems that the community at large has spoken, and declared that Sass is just, well, better. New features   Figures   Figures are for showcasing single media objects (usually images), with an optional caption. Support for Bootstrap’s various helper classes is factored in, so you can align and style the image (and its caption) however you like. Images placed in a figure element, given the right classes, become responsive automatically. Flexbox Now, due to lack of support, Flexbox has not replaced the regular grid system. However, it is available to anyone who wants it. Change a variable, recompile the Sass, and boom! You now have a new, modern layout system. Cards Okay, we’ve been seeing the proliferation of card-based design for some time now. Bootstrap now has a specific component for them, with myriad layout options. You can group them up, keep them separate, add headers, footers, buttons, images, and overlay text on those images. Wells, thumbnails, and panels all get replaced by the new card component, so in that way, Bootstrap is a bit more streamlined. Reboot: new customization variables Bootstrap has historically been a bit of a pain to customize, aesthetically speaking: There were a lot of styles to over-write, and individual variables to customize if you wanted to make your Bootstrap-based site look like anything other than a Bootstrap-based site. Heck, remember all of those customization apps made just for changing Boostrap’s look? Well the developers have heard your prayers and Github issues. Change all of the transition animations at once, disable rounded corners, change all the colors, or anything else you like with one big bunch of Sass variables. It’s all there in the Reboot module, and it’s about time. We can expect some more original-looking designs now, with any luck. Rem and em units That’s right, we’re moving away from pixels, to these relational units of measurement. This ties into the whole customization thing, too. Want a tighter design with thinner margins? Change the main text size, maybe a couple of variables, and boom. Everything looks “thinner”. Stuff that’s basically the same As you might expect, everything got re-written and upgraded (because of the Sass move). But still, the basic usage for most of these components will be the same. Do double-check the documentation, though. Certain things will have changed. Take the grid, for example: they added an “extra-large” tier to the grid system, presumably for those ridiculously huge retina screens that we’re seeing these days. · Alerts · Breadcrumb · Button dropdown · Button group · Buttons · Card · Carousel · Code · Collapse · Dropdowns · Forms · Images · Input group · Jumbotron · Label · List group · Modal · Navbar · Navs · Pagination · Popovers · Progress · Reboot · Scrollspy · Tables · The Grid · Tooltips · Typography Other updates   No more IE8 support   It’s about time. There’s not a whole lot more to say about that. Not much will change for most of us. Anybody who really, really needs to support legacy browsers will have to use an older version of Bootstrap. All JavaScript plugins have been re-written The proliferation of ES6 means that a lot of people are re-writing their JavaScript. This means performance improvements for all, the exodus of older browsers, and programmers having fun with new toys. It’s a win-win. Overall impressions Where Foundation is going “smaller” and more streamlined with specialized frameworks, Bootstrap seems to want it all. They have done a lot of work to improve performance, and streamline what they could, but Bootstrap still aims to do just about everything you can think of. Mind you, anyone can configure their version of the framework however they like by dropping unnecessary modules, or adding new ones. It’s not a big deal. Still, there’s definitely a one-size-fits-all mindset in play. And that can be a good thing. There are large, wide-scope projects out there that need the room to expand. In any case, Bootstrap will continue to satisfy its users’ needs. It’s going to be mostly the same, but better. Source: http://www.developerdrive.com ... Read more
Adrian Ababei / May 11'2016