In the web game Hex Invaders, you’re tasked with fending off an extraterrestrial invasion by shooting the invaders with the matching hexadecimal color code.
It’s a tough — and very addicting — game.
What does #000000 actually mean? How does #FF0000 end up being red, or #008000 dark-green? Hex Invaders will help you make sense of the hexadecimal color notation.
Even if you don’t like video games, Hex Invaders has one of the best and most concise explainers on the hexadecimal color notation I’ve read. The illustrated hex color notation explainer is worth the trip to the Hex Invaders site, even if you don’t end up playing the game.
Note: The Hex Invaders website automatically plays music — and it’s jarring if you don’t expect it — so if you’re wearing headphones or working in an open office space, it’s best to lower your audio’s volume before clicking on the link below:
This excellent tutorial on CSS layouts will teach you how web page layouts work.
One of the things web designers must master is how to lay out web pages. This subject, I’d say, lies somewhere between beginner topics (what the HTML elements are and how to style them with CSS) and more advanced web design subjects (like responsive design, using preprocessors, etc.).
It’s difficult to design a website without knowing how to lay out web pages, and so it’s a fundamental skill would-be web designers must learn.
Learn CSS Layout is a concise tutorial that will walk you through all the things you should know when crafting web page layouts.
The tutorial starts from basic CSS layouts, all the way up to Flexbox (a way of creating adaptive layouts). There are a total of 19 CSS-layout-related subjects covered on this tutorial.
If you’re still on your journey towards learning how to make websites, the Learn CSS Layout tutorial will quickly find itself becoming a valuable resource to you.
Source : designinstruct.com
Simplicity is the ultimate form of sophistication. — Leonardo Da Vinci
Steve Jobs, the late progenitor of Apple Computers, a visionary and a true design aficionado loved simple design. He once told Sir Walter Isacsson, the author of his autobiography, “I love it when you can bring really great design and simple capability to something that doesn’t cost much,”. The guiding tenet of Apple’s design aesthetic was simplicity-“It takes a lot of hard work,” Jobs said, “to make something simple, to truly understand the underlying challenges and come up with elegant solutions.” This philosophy is deeply ingrained in Apple’s DNA, as indicated by the headline of its first marketing brochure in 1977 which read, “Simplicity is the ultimate sophistication.” More often than not, you will probably hear people cite Apple as the leading example of why simple design is good. But, what is so special about simplicity in design?
There is hardly anything as good design or bad design. Something that looks good to you might be not so good for other people. Design is, more than anything, a subjective topic. However, you need to identify good design elements and accept the fact that everyone will have different tastes and thus, a differing opinion.
Why Simple design?
Simple design has certain advantages over the more complicated ones. They are easier to understand, cheaper to make, and easier to fix in case there is a need to. By keeping it short and simple, you ensure that your audience isn’t unnecessarily overwhelmed and distracted from the message that you intend to convey. Sometimes, your designs are just complicated because it’s a product of your understanding and not something which your customers would love. The moment you stop selling through your designs, your audience will stop relating with you.
What’s so special about the design strategy of Google? Why does the Internet giant, one which has the best brains of the planet working for it, has been sticking to the simplest home page that a website can ever have? Because, that’s what explains in whole what Google is all about. The moment you have to explain your design to others, the entire fun of creating that design, no matter how special it might seem to you, is lost. Jobs once said, “The main thing in our design is that we have to make things intuitively obvious,”.
Typography is one of the most integral components of a website and paying a little bit attention to it can drastically improve the overall design and readability of a website. A good typography can make a lot of difference in providing your website visitors an effortless reading experience. A successful web design is always blended with a nice set of typography that looks so nice that it minimizes the load on your eyes and thus ensuring a smooth reading experience.
However, when it comes to planning a typography that serves the needs of mobile users, web designers often face some challenges that they find difficult to cope up with. Implementing a flawless mobile typography, a webmaster needs to have a thorough understanding of all kinds of type elements that together form a design. It’s not only about selecting the suitable fonts and typeface, but also about picking up an ideal display technology, understanding sizes, and playing around with different design methodologies such as color, shape, contrast, position, space etc., to render a delightful user experience.
So, to overcome the challenges tossed by mobile devices, take a look at these essential dos to improve the readability of your website across a range of devices.
1. Understanding the Importance of Space
When designing for mobile, make sure you don’t squeeze characters or words because it would make it extremely difficult for your readers to read it. As we know that mobile screens are small as compared to the desktop, you need to put some extra efforts to make sure that your design looks lively as well as easy to read. To make this happen, it is recommended to increase the size of the margin to prevent the text over floating.
Tightly packed words can kill your audience interest as it’s a sign of bad typography. That is why it is importance to spend some time in assigning some space to your fonts. Mobile users will not feel irritated if they have to scroll sideways to read the content. Therefore, you should feel free to increase the space between words to make your design look clean, simple, and elegant. In addition to these, there should be an ample amount of space assigned to different designing elements. Here attention should be given on getting rid of unwanted elements and utilizing only those that are essential for design.
Modern icons have become a staple for every digital interface. They can help organize content, they’re generally lightweight and even play mp3’s. No wait that’s iPods… well even iPods have a use for icons because they’re a quick visual method to convey information.
The field of web design has been using icons since before I can even remember. These pictorial symbols have developed into their own language through commonly accepted graphics(folders, printers, mice, arrows, etc). In this guide I want to share a few ideas for modern-day icon design on the web. I’ve also included a small collection of freebies and tutorials representing high-quality icon design resources.
The phrase “icon design” encapsulates a broad spectrum of ideas. On one end there are very simple and minimal icons, often known as a flat design style. The other end of the spectrum is complete realism through digital software like Photoshop or Illustrator. Each project has a different graphical need and icon styles typically fall somewhere along this spectrum.
The popular minimalist design style has created a large following of designers around the world. Line icons have become the primary style for iOS 7 and iOS 8 with other smartphone OS’ following suit. There isn’t a right or wrong choice when it comes to icon style – just various options to choose from.
I think the website Flat vs Realism does an excellent job of comparing the two spectrums. Icon design incorporates many principles of art like depth, proportions, lighting, and so forth. As you more towards a more realistic style you’ll need to learn how to create textures and shadows that look real. This requires a lot more work but it’s also highly rewarding.
Here is a listing of the most important points to remember from this infographic…
As pioneered in design trends seen in 2014, image quality will continue exploding in use and popularity in 2015, leading to an even richer visual experience for users. With such an incredible emphasis when it comes to what we see, images will only become larger, clearer, and more emotional as a result. One way that image quality is being played around with is through magical realism, or the ability to combine high quality images with elements that are not normally found in the image. The end result are pictures that surprise, delight, and most importantly, look real. Whether this is an elephant that can fit in the palm of your hands or landscapes never before imagined stretching from behind your home, this magical realism will become increasingly popular into 2015. While photo editing software continues to be used, there will also be a return to hand drawn illustrations. Having emerged strong in 2014, these illustrations continues to find themselves onto websites, blogs, and news websites.