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?
Adrian Ababei / Nov 17'2016
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?
Adrian Ababei / Nov 09'2016
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.
Adrian Ababei / Jun 07'2016
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.
Adrian Ababei / May 31'2016
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
Adrian Ababei / May 11'2016
Every expert from every field has his or her own tools of the trade and web development is no different – web development tools are one of the most important factors to every project and these tools could mean the difference between finishing your project on time or passing multiple deadlines. Luckily enough, plenty of top web development tools are available for just about every platform. Here is our list of OS X apps which you should include in your web development tools box:
Browsers for web development
One of the most important tools for web development is a browser – you’ll need to view your website after you created it right? But it’s not so simple – you will need to test your website for many browser versions, including beta and nightly builds. With that taken into consideration, you’ll most likely need Opera Next, Chromium, Chrome Canary, Firefox Aurora, and Firefox Nightly.
Koala
Koala, apart from its cute name, is another nifty web development tool which is used to compile CoffeeScript, Compass, Sass, and LESS into a browser-compliant format. If you’re using any of these techs, Koala is definitely a must.
Anvil for web development
Anvil is an interesting free app which allows web developers to create .dev domains. You’ll see it as a new icon in the OS X menu bar and you can turn it on or off, create domains or add your projects to it. If you’re looking for a tiny web development tool to manage or work on your local websites with, Anvil is perfect.
Keka
When handling multiple files, you need a reliable compression service to help you along. Most web developers may use ortar, rar or zip but Mac has its own built-in feature to extract and manage these formats – this service is rather limited so you’re better off with Keka. Keka is a free open source OS X app for file compression and extraction.
Keka supports zip, rar, ortar, ISO, DMG, Tar, Gzip, 7z and it can extract to PAX, CAB, EXE and RAR formats. Keka allows you to split compressed files into different parts of specified sizes, apply password restrictions or automatically delete source files after extraction or compression.
Web development & Web Sharing
Since Apple removed the Web Sharing option from the OS X system preference, you might want to install the Web Sharing plugin. This little plugin will allow you to host local websites under the local host address. Once you install it you’ll be able to see a new panel in System Preferences – here you’ll be able to switch web sharing off or on.
File compression, One of The Very Top Web Development Tools for Mac OS X
We talked about Keka before but there are two ways you can use it to compress files. You can either download this small web development tool and install the services contextual menu or you can drag and drop your files directly into the Keka app window.
Sequel Pro
MySQL is one of the most popular databases in the world – plenty of websites rely on MySQL for storing and managing databases. If you are using OS X, Sequel Pro is a must-have for web development. It’s a native OS X app built in Cocoa and it also features a nice and friendly GUI. With Sequel Pro you can create, filter databases, import, export, remove, create users and execute MySQL queries.
The iPhone Emulator
All web developers need to take mobile users into account when building their websites, hence the need for a web development tool that can be used to test websites for specific platforms. Devs can use physical tablets or phones or they can go for the easier option – a simulator like iPhone Simulator. All you need to do is just install Xcode from the AppStore and you’re done – you have another web development tool in your little toolbox.
Icons8
If you’re looking to use icons, Icons8 is one of the top web development tools that you can use. Just install Icons8 and you’ll be able to search through its over 2800 collections of icons. Once you find something you like, you’ll be able to copy it to Finder, Xcode or Photoshop.
Github and SourceTree
Even if you’re building a small website or a presentation website, you’ll need a control version system to track your revisions and changes to the project’s code. Github is the most popular service for version control and you can install it on OS X as well. SourceTree is another mentionable service – both of these services are the backbone of any respectable web development agency.
Poedit
Poedit is the best web development tool you can use for translating websites into multiple languages. Not only that but you can translate plugins and Wordpress Themes as well with this little app.
Automator
Automator is a web development tool that’s pre-installed with OS X. This little app allows users to automate tasks such as cropping multiple images at once, creating thumbnail images, changing file extensions and renaming files in batch.
Dash
Dash collects documentation for a lot of the popular programming languages, including LESS, Sass, jQUery, CSS3 and HTML5. Users can search through code snippets, functions, syntax, and other valuable information.
Adrian Ababei / Apr 28'2016
I’m not a fan of color theory. But the theory has always eluded me, and, truthfully, I’ve never found it useful when trying to use color in my projects. Somewhat ironically, I’ve been finding that the better I get at choosing and using color, the better I become in the theory behind it. Of course, that doesn’t really help when you’re just starting out, does it? That’s why, in this article, you won’t see a single color wheel. Instead I’m going to show you a simple color workflow that you can use in your next web project. You will, of course, subconsciously be learning the theory along the way. So, I recommend coming back in a few months time and giving the theory another go.
Choosing A Base Color
We can see something like 10 million colors at any given time, that’s a huge amount of colors. And out of those, we need to choose one — just one color — to be the base of our website, for our brand. Everything will stem from this one color, so it’s kind of important.
How to choose a starting color
Now, picking a color out of the blue (pun intentional) would be quite easy, but we’re not going to do that. For any project in which you’re having contact with clients, you should try to justify as many of your choices as you can. If you don’t, it’ll be a case of your favorite color versus their favorite color. They’re the client. They’re paying you. They will win. Don’t think too much about it. Just make sure you have some kind of reasoning behind your color choice (and every choice, for that matter). It’ll make you look good.
Tips on choosing a starting color
• Use what you have. If the client has a logo with an established color, that will usually be your starting color. • Eliminate your competitors’ colors. If one of your main competitors has a strong brand color, don’t copy it if you can help it. Find your competitors’ colors to eliminate them from your own color schemes. • Think about your target audience. The colors of a website for a pizza shop would sure be very different from the colors for a kids club. Think about who will be using the website and how you want them to feel (excited, serious, taken care of, etc.). • But don’t default to stereotypes. If you’re designing a website for young girls, you don’t have to use pink. Avoid clichés to gain credibility. • Play a word game. If you’re struggling, write down any words that you associate with the client’s business. This list should give you some ideas for colors. If you’re really struggling, hop on any website about color meanings and see which fits best. You should now have a base color in mind for the design. It should be something simple like red, green, blue, yellow or pink. We’ll get to the exact shade next. Let’s say you choose blue.
Choosing A (Nice) Base Color
Instead of messing about with Photoshop’s color-picker to find a nice shade of blue, we’re going to steal like an artist and use other people’s design choices to help us out. First, go to Dribbble.com and Designspiration.com and click on the “Colors” link in both. You can use this as the next step to find the right shade of blue. For a fresh and energetic brand, go for one of the lighter, brighter blues (one of the top five options). For something a bit more corporate and serious, the bottom five should be a better fit. Choose a shade from each website to see actual designs that use that color. You can then use any of CSS-Tricks’ color-picking techniques to grab the exact colors right in the browser. Not only will you see different versions of your base color, but you will easily see colors that match.
Creating A Strong Color Palette
All right, you should now have a HEX value for your color. Now we’re going to make a palette out of that color. And it’s easier than you think. The problem with this kind of color palette is that applying it to a real design isn’t very practical. Most palettes have way more colors than you’d ever need, especially considering that we need to add an average of three neutral colors to every scheme: • white, • dark gray, • light gray (optional). If you tried to add five or six colors to the neutrals, it would be a mess. All you really need are two colors: • a base color, • an accent color (we’ll get to this in a jiffy). If you can create a website using only these five colors, you’ll get a much better result than if you were to go overboard with complementaries, split-complementaries, triads and the rest.
Finding your accent
Your accent color will be used in very small amounts on your website, usually as a call to action. So, it needs to stand out. Your next step is to go to Paletton.com and type your HEX code into the color box. From here, you can find your accent in two ways. First, you could click the “Add Complementary”! That yellow there? That’s your accent. Alternatively, if you don’t like the color it has generated, you can click around the icons at the top to find something more suitable. Personally, I quite like the red that comes up under the triad icon, so I’m going to use that for our scheme. There is, of course, science and stuff behind what Paletton is doing; but, for now, let’s put a pin on it. You’ll learn the theory a bit later, and all will become clear. So, below is our color scheme as it is now. We’ve got a nice base color and a shot of an accent. Let’s add white to the mix, because white is always good. All that’s missing now are some grays.
Adding the gray
For most of my web projects, I find having two shades of gray to be infinitely useful — one dark, one light. You’ll use them a lot. The dark is usually used for text, and the light for when you need subtle differentiation against all that white (usually for backgrounds). You can choose your grays in one of two ways: • You could use Dribbble.com and Designspiration.com again to find a nice gray from your previous results that matches your base color. But usually it’s easier to type blue website in the search bar, which will show more grays in the results. • If you have Photoshop or the like, you could use Erica Schoonmaker’s technique to harmonize your grays with the base color.
Creating harmonious grays
To get our shiny new harmonious grays using Erica’s method, we’ll start by picking two default grays out of a hat. Then, follow these steps: 1. Create two shapes and fill them with #4b4b4b and #f5f5f5. 2. Insert a color fill layer above your two shapes. 3. Change that fill to your base color. 4. Set the blending mode to overlay, and bring the opacity right down to between 5 and 40% (in the example below, it’s set at 40%). 5. Use the color picker and copy your new values. I should point out that this method works exceptionally well when your overlay color is blue. For any other color, you will want to either bring the opacity right down to 5 to 10% or stick with your original grays. Our color scheme is complete.
Applying Your Color Scheme
Now that we’ve got our color scheme, it’s time to apply it. This is a whole other article unto itself. Tip: If you struggle with color, a good trick is to create your website layout in grayscale first. Figure out the hierarchy, and then experiment with the color later. Our accent, red, stands out beautifully against the base color. This is used in very small areas, for buttons and in the icons. The less you use this color, the more it will stand out. The dark gray is used for the text, logo and icon outlines. (Don’t skip putting the colors in your icons. It’s a small detail but makes a big difference.) The white and light gray form the background. The light gray doesn’t have to be here at all, but I find it is another small detail that really makes a website look polished.
Conclusion
As you can see, we really don’t need much more than the palette we’ve created today. But that doesn’t mean you are limited to these colors! As you’re designing, you might decide it’s appropriate to introduce some more colors to your palette. That’s totally fine! As long as you’re attentive, you can use the steps above to find more colors that work with your scheme. The beauty of this is that the more you do it, the better you’ll become at choosing colors. You’ll get to know what works together and what doesn’t. Sometimes, the method above will yield results that are less than desirable, so feel free to tweak things. Play around and have fun learning color theory, without the theory!
Source: https://www.smashingmagazine.com
Adrian Ababei / Apr 07'2016
The World Wide Web Consortium (W3C) is putting cybersecurity on its radar. It has announced that it is launching a new working group designed to standardize Web authentication and provide a more secure and flexible solution to password-based logins.
“Every other week you see news of a password leak or data leak from another major site, and as a user of the Web, every place you go you are asked to log in with a username and password,” said Wendy Seltzer, technology and society domain lead for the W3C. “That is difficult to manage on the user side, and not the best we can do in security.”
The new Web Authentication Working Group will work on creating a Web-wide standard that provides strong authentication without relying on a password. According to the organization, even strong passwords are susceptible to phishing attacks, database breaches and other hack attacks.
“When strong authentication is easy to deploy, we make the Web safer for daily use, personal and commercial,” said Tim Berners-Lee, director of the W3C. “With the scope and frequency of attacks increasing, it is imperative for W3C to develop new standards and best practices for increased security on the Web.” The W3C’s work will be supplemented with the FIDO Alliance’s FIDO 2.0 Web APIs. According to Seltzer, FIDO has already had success developing its own multi-factor authentication, and its APIs will help the working group ensure standards-based strong authentication across all browsers and related infrastructure. “Our mission is to revolutionize authentication on the Web through the development and global adoption of technical specifications that supplants the world’s dependency on passwords with interoperable strong authentication,” said Brett McDowell, executive director of the FIDO Alliance.
“With W3C’s acceptance of the FIDO 2.0 submission, and the chartering of this new Web Authentication Working Group, we are well on our way to accomplishing that mission.” In addition, the working group will complement prior work on the Web Cryptography API and Web application security specifications. “We’ve seen much better authentication methods than passwords, yet too many websites still use password-based logins,” said Seltzer.
“Standard Web APIs will make consistent implementations work across the Web ecosystem. The new approach will replace passwords with more secure ways of logging into websites, such as using a USB key or activating a smartphone. Strong authentication is useful to any Web application that wants to maintain an ongoing relationship with users.” The Web Authentication Working Group’s first meeting will take place on March 4 in San Francisco.
Source: http://sdtimes.com
Adrian Ababei / Mar 09'2016