Graphic Design and More

Find and Define Your Web Colors!

Nice system to define colors: color.hailpixel.com

This awesome experiment in responsive typography uses face detection to adjust font size

Responsive design has recently become a buzzword, and for good reason: it captures the idea of displaying your content beautifully on each and every device. Responsive typography has also received attention, and various techniques have emerged to encourage type legibility across devices: like displaying different font weights to compensate for Retina displays.

Now, an experiment by web designer Marko Dugonjić has taken the concept of responsive typography to a new level: using face detection, Dugonjić calculates the proximity a user is from his or her screen, and then adjusts font size accordingly.

As my mug approaches the screen, text gets smaller.

Of course, this isn’t an exact science; there are varying opinions on how large body type should be for proper legibility, and the eyes of the user plays an important role (that’s difficult to calculate).

We’re particularly interested in seeing Dugonjić’s ”on load” setting in action, which calculates the proper type size once (on load) and then sticks to that size indefinitely. Dugonjić also created a “realtime” setting, which adjusts the type dynamically as the user moves away from the screen.

See it for yourself via the link below, and feel free to share how you think this tech should or shouldn’t be used on the Web!

[Via:  Mike Rundle)

Related articles

25 Free Serif Fonts

No More Reading Glasses: Website Custom Adjusts Font Size

New and Innovative Web Design Methods

If you are a designer, I am sure you look forward to the New Year because it brings new trends and changes within the design world. All designers look forward to the rising trends or creating a few themselves. Being a designer it is very important for you to keep yourself up-to-date regarding upcoming trends so that you can prepare yourself for them.

These new and innovative trends keep the designing alive, fun and refreshing. Just imaging, following the same old rules, with no new technology incorporated can not only get boring and dull but your design will look out dated as well.

As far as 2013 is concerned, we are already two months down and there has been a lot of ongoing discussion on the designing trends. I personally feel that we need to change the definition of trends as we all are quoting predictable trends for instance, responsive designing. Of course, it will be a big trend because of the needs and it was a big trend. We should focus on growing trends because these are the trends that need our attention so that we can really get these trends practiced in 2013.

So, without any further delays, let us take a look at a few growing trends of last year and they are will be growing enormously this year as well.

1. White Space will be a hit:

Last year, I have seen a lot of designers practicing ‘less is more’ strategy. There were a lot of designs with a super clean look. From websites to logos to brochures to business cards, every design was neat and clean with minimal designing. I have always said this that using more white/negative space does not make you any less creative. This year, I believe there will be a lot of white space used and that too creatively.

As a designer, you must learn that you do not have to fill every corner of the website in order to prove your creativity. I personally love this trend as websites are not cluttered with design and such design put your eyes to rest. Users’ will be able to understand your website better when they have less distraction on your homepage. Here I would like to mention that you do not have to make an effort to leave white/negative space. Design accordingly and I am sure you will love the design.

 

2. Usage of fresh colors:

I have always noticed that very few people use light and fresh colors in their website. There have been certain colors that have been among favorites since ever and are used like anything. Blue is one of them and along with that, combination of black and white has been among the favorites. I know, designers love dark themed website but they can surely bring in some change by using fresh and light colors.

I think in 2013, pink, salmons are going to be a hit for sure. The reason is that these colors make a good combination with almost any other color and the best think is they are pleasing to eyes. People should experiment and I am sure visitors will fall in love with these colors, if used appropriately.

 

3. Websites going super big:

With all the innovation in technology, designers are no longer designing for monitor screens only. They have to adapt to responsive designing so they can accommodate smartphones, androids and iPhones. So, your website should be easily viewable on small screens as well. Earlier designers were only upsizing a little bit but I guess this year, they have to break the rules and get bigger.

I know this is not going to be an easy task for designers but they should do it in order to bring a change. This brings me back to my first point i.e., usage of white space. The less clutter you will have on your website, the bigger your design can get. Start off with trying huge images and then you can increase the size of text as well.

4. Eye catching images:

Thanks to the advancement in technology, you no longer have to adjust with static images on your website. Also, these moving images do not make the website slow anymore so; I believe usage of moving and catchy images will be a growing trend this year.

Moving images will obviously add a fascinating touch to your website. Now, it depends on the designers to use the perfect images so that they look good on the website. I was sick of seeing websites with either still images or scrolling images. Now, it’s time to bring something interesting and exciting in the designing world by using moving images and I am sure most of the visitors will love it. It’s a great way to attract attention of the visitors and make them stay for a longer period on your website

5. Forget typical photography:

It’s time to overlook, forget and ignore stock photography since people are no longer interested in it. People no longer want to live in a fake and glamorous world. Give them something real and something they can relate to. Try using real images, adding real stories so that people can see themselves in it. Glamour shots will never help you in developing a real relationship with your visitor.

Although, designers cannot control what sort of images will be used but still they can play an important role in promoting real imagery – images that are more relatable.

Conclusion:

The trends in web designing change like the trends in clothing so; you never know when things change and how they change. All you should do is follow the latest trends and set some new ones. Do not forget; enjoy designing because if you don’t enjoy it, you will never be able to bring out the best creativity in you. Follow trends but you should never be afraid to experiment. You never know, the next big and best thing can be your idea.

[Via SmashingHub by Humaira Khan]

18 Free Automotive Website Templates

The Automotive industry is one of the biggest and most flourishing industries in the world. The number of motor vehicles such as cars is increasing day by day and so is the number of automotive companies. Automotive companies are related to all aspects of motor vehicles. Thus the competition in this industry is extremely fierce with new companies coming up every day. In today’s world of internet and technology, having an online presence is a must for all those companies who wish to succeed, grow and flourish – thus having a good website to flaunt your services and products to your potential customers is a must.

Car-related websites such as that of car manufacturing companies, spare parts, and car maintenance can play a great role in getting more customers. These websites are image dependent and are supposed to have lots of images, animations, audio and video. These should have an appealing visual appearance, thus image galleries, flash and other attractive features are a must. A nicely created website would present the information related to your product and services easily and quickly, and would increase the chances of getting new customers.

Creating a website from scratch or getting it made from someone else is a tough task on the whole as it requires money, time, other resources and the job is overall quite irksome. This is where Free Web Templates can come to help. Free automotive website templates are a great way to create a website easily and quickly, and in a stress free way. To today I have a list of 18 Free Automotive Web Templates. Check them out and pick the ones you like the best.

Vintage Car Website

Demo | Download

Car Dealership

Demo | Download

Car Template

Demo | Download

Cruiser Bikes Template

Demo | Download

Stylish Retro Template

Demo | Download

Limo Service Website Template

Demo | Download

Cars Showroom

Demo | Download

Auto Repairshop

Demo | Download

Car Club 2

Demo | Download

Free Car Repair Theme

Demo | Download

Free Car Repair Template

Demo | Download

Wild Moterbike Website

Demo | Download

Car Dealers 2

Demo | Download

Cars Template

Demo | Download

Cars

Demo | Download

Tucana – Cars Dealer Template

Demo | Download

Radial – Premium Automotive & Tech HTML Template

Demo | Download

Made – Responsive Review/Magazine Site Template

Demo | Download

 

Mother Effing Animated GIF Generator

Simple and fast: Animated GIF Generator

15 Funny Examples Of Creative 404 Pages

A 404 error page is a standard message displayed when a web server cannot find the page that the user is requesting, in some instances companies choose to take the extra time to customize their 404 error page to be a little more informative, unique or dam right hilarious! Today I wanted to show you some of my favorite funny 404 pages that I think are pretty funny and also act as a great way to reflect a companies personality.

Of course, when designing your 404 page there is not always a need to create a funny viral 404 error message – you can help the user find what they are in search for by displaying recent articles, search boxes or by simply re-directing the user back to the homepage. Take a look at the showcased funny 404′s and drop me a comment if you have one for the list.

I Hate My Roommate

Wana Fork

Say What, Before Hello.

SayWhat is a revolutionary new app that lets 
you introduce the subject of your call, set the mood and check the availability of the 
person you’re calling before or while placing
 the call.

And is it is FREE!

 

Much like an email subject line, SayWhat lets you establish the agenda of your call in a fun simple way, before or while you’re placing the call, by sending expressive, amusing , animated emoticons and short messages to your contact.

The phone call has finally stepped into the 21st Century and joined other fun innovations that make our lives just a little bit easier, more convenient and a lot more fun!

On this moment only for Android, new platforms are coming up!

 

Simple Icons for free

100 PNG icons in eleven sizes, from 16px to 4096px

Download them at SimpleIcons

Isaac Newton vs. Rube Goldberg - Blows Your Mind!

The Rube Goldberg machine has been replicated time and time again, but this latest iteration -- dubbed Isaac Newton vs. Rube Goldberg -- takes the classic contraption to new extremes.

Toronto-based commercial cinematography company 2D House added a twist to the concept, challenging the machine to work against gravity.

The chain reaction begins when a ball rolls across a table and hits a lever, switching on a fan. The camera pans from left to right, following the movement of gadgets along the table's surface in typical Rube Goldberg fashion.

But what makes this particular design extraordinary is the change in perspective around the video's 00:30 mark. The camera flips, making the viewer question which way is up. Using magnets, 2D House was able to mask the fact that the machine is actually working against gravity.

Prepare to have your mind blown.

 

Balancing Text for better readability

Posted  by Randy Edmunds in Adobe Web Platform Team Blog

Browsers render text without any ability to automatically balance text across lines. For example, when you have text spanning several lines, browsers render it something like this:

1. Add 1 word at a time to the current line until no more words fit.
2. Break text at that point and add the next word to a new line.
3. Repeat until all text has been rendered.

This is designed to efficiently render text using the least number of lines, and it works great for left-aligned text. For example:

When text is aligned centrally, the same line breaking algorithm is used and each resulting line is centered. This can easily have results which are visually undesirable such as:

It is more visually pleasing to see multi-line text that is centered to be rendered in a balanced manner like this:

This becomes even more of a common problem in responsive design solutions, where the text adjusts to match the width of the viewport. Text that look balanced on on one viewport stops looking good in an another. For example, you may find text rendering like this on smaller screens:

A more balanced rendering of the above text would look more like this:

Current Solutions

Common solutions to this problem are to alter the presentation of the content, or the content itself, to change how it renders. Some ways to do this:

• manually insert breaks in the text
• re-word or abbreviate text to change its length
• alter font-size so text renders longer or shorter

Why Current Solutions Don’t Work Well

These solutions work with printed text. Adobe InDesign has a feature called Balance Ragged Lines that makes this easy for printed text. But these solutions don’t work very well on the web because:

• width of viewport can change, which can affect container width
• size of font can change
• font used by the browser can change
• content may be edited
• content may be dynamically loaded (e.g. from a database)

A lot of designers typically attempt to solve this problem by fixing the width occupied by the multiple lines of text. Daniel Mall suggested one such way by using line-breaks manually and setting and unsetting them based on media-queries like so:

  <p>The quick brown fox <br>jumped over the crazy dogs</p>  @media screen and (min-width: 480px) {
    p br { display: none; }
  }

Thierry Koblenz discusses this topic more in wbr-versus-br. As you can see, this technique requires extra work for the designer and only works for certain layout break points.

A Proposal for Automatic Text Balancing on the Web

I propose we use a text rendering algorithm that would be applied by browser when asked by the designer to do so to automatically balance text across multiple lines, like so:

h1 {
  text-wrap: balance;
}

This would make all h1 elements whenever they span more than 1 line to be automatically rendered such that they have balanced text. As you notice, I only propose an additional value to the existing text-wrap property of CSS.

A detailed explanation one possible algorithm is available in the proposal. Also provided is a demo page with a JavaScript implementation of this proposal.

Next Steps

I would love to have a solution for balanced text be part of the open web tools for designers. We, at Adobe, are planning to propose it to the CSS WG and see if it can be adopted within the Text module for CSS. If you would love to see this in a browser near you, please chime in on the mailing list!

Meanwhile, I have created a jQuery plugin that would allow you to use this on text on the web as a polyfill right now! All you need to do is to call balanceText() on elements you want to apply it on. Please submit pull requests if you find something that can be enhanced and please do let us know any comments you have!

This entry was posted in Web Platform Features.

Related articles

Balancing Text for better readability

Writability: Write in Your Browser