Most Overused Web Design Trends to Ditch in 2016

Not sure which web design trends you should send to the scrap-heap this year? We’ve compiled a handy list to help you. Avoid these at all costs…

trends to avoid

In the world of web design, it doesn’t take long for certain trends to get old. One minute, it’s the latest thing, gracing websites across the world. The next… it just looks dated and a little bit tedious. And, as we all know – there’s nothing worse than having a tired-looking design on your latest project.

Not sure which web design trends you should send to the scrap-heap this year? We’ve compiled a handy list to help you. Avoid these at all costs…

1. Don’t fall flat… get Flat 2.0

pagelanes

It’s definitely time to ditch flat design. Heck, even the word sounds uninspiring, doesn’t it? Instead, make the most of skeuomorphism and welcome ‘almost flat’ or Flat 2.0 into your life. It adds energy to your designs, not to mention a certain sense of vintage appeal – which in this day and age, never did any designer any harm. Want to find out more about why standard flat design is so last year? Read this.

2. Hero carousels – or villains in disguise?

spalab

We are very much over carousels. They’re bad for SEO, because the lack of content makes it difficult to pump meta data onto the page. They shove content way down below the fold. They’re bad for performance. In terms of ease of navigation, they stink.

In addition to this, they’re just plain inaccessible at times – which is a sure-fire way to irritate the user. We said the same thing about giant full-page splash screens, thinking the situation couldn’t get any worse – then some bright person decided to animate them. Groan. Let’s leave carousels firmly in 2015, people.

3. Skip sound – embrace the awesomeness of silence?

clickwise

If one thing is guaranteed to make a site visitor scream with frustration, it’s music. It really doesn’t matter if it’s the most awesome song in the world. It’s irrelevant if it was number one in the charts for weeks. When it’s played on loop on a website, it becomes highly annoying, like a wasp at a picnic, buzzing away in the background. We presume that’s not the effect you wanted to create, right?

In addition to driving your audience mad, it’s also a curse for users on networks with a capped data plan – something they won’t thank you for. W3C say that automatic music is bad – which, let’s face it, is all you need to know. Find out more here.

You might be able to get away with the occasional animated or video background – but again, tread carefully and always think about user experience.

4. Long forms for short attention spans. No – just no

Petra Jaumann-Bader

It’s astonishing how many big businesses still make the mistake of including lengthy forms on their site – in a bid to squeeze as much information out of the user as possible. However, this often has the reverse effect, causing people to abandon the forms halfway through.

If you’re using forms, keep them short, sharp and as intelligent as possible. Resist asking for information you don’t really need. Make your form as intuitive as possible – there’s nothing more frustrating for the user than having to fill out the form again because something’s gone wrong. If you’re looking for great form creation tips – check out this site.

5. Kill the pop-up

nicolespose

We don’t really need to slam this one home, do we? Pop-ups began to get annoying several years ago, yet it’s alarming how frequently they still ‘pop up’ in designs. Occasionally, use of pop-ups is unavoidable – for example if you’re promoting a product. However, if you must use them, please offer something good in return for your target audience – or risk their wrath.

The Next Web have some excellent tips on how to do pop-ups the right way. Read it and learn, guys.

6. Avoid background overload

artsngoods

We, designers, sometimes get a little obsessed with making our sites look pretty. However, when you choose style over substance, you risk affecting user experience – and not in a good way. If information on the page is difficult to locate, then your site isn’t doing its job properly, no matter how beautiful it might look.

In addition to irritating users, the lack of information could also do damage in terms of SEO, with limited meta data and an inevitably high bounce rate. Incorporate stunning backgrounds by all means, but remember what the site’s primary function is.

Have fun designing in 2016!

Happy Holidays from The Site Slinger!

The team at The Site Slinger would like to thank you for all your support in 2015! Have a rocking winter holiday and a prosperous New Year!!

Happy-Holidays

Hey guys! The team at The Site Slinger would like to thank you for all your support in 2015! We’ve achieved many goals this year and we plan on making 2016 even more awesome for everyone: our great team, our amazing clients, and our lovely friends!

From the bottom of our hearts, we would like to wish all of you a fantastic 2016, and we certainly hope to continue working together for many more years to come.

As always, if you need swift, professional coding, you can leave it to us. Enjoy your last-minute holiday shopping and precious time spent with your families and friends. We’ll be working through the holiday season. Our office will be closed only for the New Year’s Day celebration on December 31 and January 1, and we’ll be back in full swing on Monday, January 4.

Our Special Gift for You

To add to the excitement of this magical time of year, we’re happy to offer a sweet $75 discount on ALL coding projects. Simply mention the following promo code in your project notes:

TSSNYPARTY

However, you’ll need to hurry! This offer ends on January 3.

Have a rocking winter holiday and a prosperous New Year!!

Sincerely,
The Site Slinger team

Unleash the Power of Email – Team with The Site Slinger

Now, when you place your next PSD to Email order with us, you can get three months of unlimited MailChimp services free, no matter what your current plan is!

Do you need another reason to team up with the best people in the industry? Well, here you go! The Site Slinger is a MailChimp-approved Expert, and we are pleased as punch to announce it! What does this mean for you? Three months of complete email marketing freedom! If you use MailChimp, this is the deal you’ve been looking for. If you’re new to MailChimp, then this is a great time to get started.

mailchimp_experts

With The Site Slinger you get:

  • Email that looks great. We pay attention to the smallest details, down to the very last pixel.
  • Email that works great. No matter the screen size or email client, our templates load quickly and smoothly.
  • Email that sends great. Our markup can be easily integrated with all major email tools like MailChimp, ConstantContact, iContact, or Campaign Monitor.

Just Another Reason to Love The Site Slinger

Now, when you place your next PSD to Email order with us, you can get three months of unlimited MailChimp services free, no matter what your current plan is!

It’s easy as one, two, three:

  • submit your email project here
  • provide MailChimp the proof that you choose to work with experts: we just need your MailChimp username and your paid invoice for our services
  • get a confirmation from MailChimp.

Now get your newsletters out! Promote products, generate traffic, grow sales, all without spending anything! No MailChimp account? No problem! Just go to MailChimp and set up a new account. After you place your order with us, we’ll send your paid invoice with your MailChimp username to the MailChimp guys, and they will apply the deal to your account. Please note that the offer can be applied once per MailChimp account and it can only be redeemed towards email related orders only.

Successful companies rely on email campaigns because they work. Rely on The Site Slinger as your MailChimp Expert and unleash the power of email marketing for free for three months. It’s time to rock the inboxes!!

The Hottest Web Design Trends For 2015 So Far

Let’s take a look at some of this year’s most crucial web design trends. Each has its pros and cons, so choose from them wisely.

The best design advice one can ever receive is to never follow a trend blindly. First, check if each feature suits your industry and audience. Does it help you get your message across? How can you benefit from it? Here, I’ve collected some of this year’s most crucial web design trends. Each has its pros and cons, so choose from them wisely.

web-design-trends

Mobile-Friendly

Making your site responsive and mobile-optimized became more important than ever, especially after Google rolled out its recent ranking algorithm update. It’s not just about RWD. It’s about rethinking your website’s look and feel. The trend is fast-spreading, but how often do clients order from you using their smartphones? Maybe it’s better to make sure your site looks stunning on larger screens?

Hidden Main Menus

Hidden-Main-Menus

Due to mobile screen limitations many websites hide their main menus on mobile devices when making their websites responsive. You can also see this element on many desktop site versions. Unfortunately, this solution is not quite user-friendly. Some of your audience may have difficulty finding it or understanding the icons. Sometimes, a more old-school way is better.

Scrolling vs. Clicking

scrolling

Scrolling is much more convenient than clicking, especially on mobile devices. That’s why there are more websites with long pages and several screens of content. In some cases the whole website is turned into a single page. Such designs are often quite convenient for users, but they may become a real problem for SEO. Take SEO requirements into account. Maybe adding another page is not so bad?

Ghost Buttons

Ghost_Buttons

Ghost buttons are great. They are not quite call-to-actions, but rather a subtle way to attract users’ attention. To avoid being unnoticed, check the overall page layout from a usability point of view and test the visibility of your buttons.

Large Background Images and Videos

Background-Images

Yes, appealing, large background visuals add a powerful and elegant look to your site, yet not everyone goes for it. Why? First, such elements can be quite heavy and may overload browser cache. Second, in some cases texts and even whole menu items and menus become invisible because of the color scheme of the background image.

Oversized Typography

Oversized_Typography

The bigger, bolder, better type was the trend of 2014 and it has maintained its popularity. It’s an efficient way to grab your visitors’ attention. It’s especially great if combined with large background images and ghost buttons. Just don’t forget about the copy. Your message should be short, catchy, and smart.

Storytelling and Interaction

Storytelling

Speaking of content, sometimes words are not enough. Let your website tell your story. With fancy animations and fun interaction ideas, you will make your clients say, “Wow!” This is not going to be easy though. Be prepared to compromise on things like accessibility, cross-browser compatibility, page loading times etc.

Trends come and go. The best thing to follow is common sense. Be careful and listen to yourself. Keep an eye on your competitors and get inspired with the leading brands, but remember that the main goal for most websites is to serve business needs of their owners (generate leads and sales) and not just bring fun to the visitors or win design awards.

Top 10 Free HTML Templates with PSD Included

When it comes to building a website from scratch, many bloggers prefer ready-made HTML templates. Why? It’s simple, just fill in the blanks with your content, and your site is actually ready to go.

When it comes to building a website from scratch, many bloggers prefer ready-made HTML templates. Why? First, it’s simple. Just fill in the blanks with your content, and your site is actually ready to go. Next, high-quality HTML templates are compatible with all the modern browsers.

free-html-templates

Here, I’ve hand-picked some of the finest site templates you can find. All of them are absolutely free. Most of them are responsive, easy-to-navigate and integrated with social networks. Furthermore, each one includes source PSDs so you can make some design tweaks if you want to. Read on for more details about each template and remember to back up your site before installing the template, after you choose the one you like best. This is only a just-in-case measure.

Free HTML5 One Page Template

1

Demo | Download
The first free HTML5 template on our list is meant to create a professional CV for programmers, designers, and photographers. Designed in the infographic style, the layout contains sections revealing candidate’s skills, experience, portfolio, testimonials, and location in a built-in map. In such a way, you will get an online résumé that speaks to the point and shows your candidature to the best advantage. It’s a single-page template, so all the information is available within one-click reach. You can also complement your CV details with appealing images. To add them, the template uses the following jQuery scripts: Camera Slider, TouchTouch Gallery, and JQuery Isotop.

* * *

Free Responsive Design Agency Template

2

Demo | Download
This HTML template is developed specifically for a design agency, but it can also be easily adapted for any other company. Featuring the latest web design trends, this well-structured theme boasts a large hero area, ghost buttons, refined fonts, social media icons, and built-in map. A parallax effect will help you represent your company in a more dynamic way. In addition to its visual aesthetics, visitors will find it easy to browse through your website thanks to a dropdown menu fixed in the header and a convenient back-to-top button. Moreover, this responsive template will give you an opportunity to target people using mobile devices to browse the web.

* * *

Free Responsive Corporate Template

3

Demo | Download
Here is an ultramodern corporate website template that will help you expand the reach of your business at no cost. Clean and simple in its nature, the theme’s layout is flavored with such visual accents as hero images, large readable titles, ghost buttons, and a slight 3D effect set by a parallax scrolling technique. The theme feels formal and somewhat lively at the same time. Thanks to its fully responsive layout, your site will be accessible to any customer, should it be a user of a smartphone, tablet, or desktop.

* * *

Free HTML5 Template for Dance Studio

4

Demo | Download
This free HTML5 template is a perfect option for various organizations, particularly dance and music recording studios, sport clubs, cultural centers, etc. Its content organization is based on a comprehensive presentation of different kinds of information, e.g. the studio history, staff and classes, to name a few. The content is embellished with effective visual knacks such as streamlined fonts, purple UI elements, and cool images incorporated into the layout with a Camera Slider and TouchTouch Gallery. In general, this uncluttered theme presents a balance of elegance and simplicity.

* * *

Free Responsive HTML5 Theme for Photo Site

5

Demo | Download
Consider this magnetic HTML5 theme to create a striking photography portfolio. Its design represents the golden mean between reserved and relaxed styles, which makes it a versatile solution for any creative professional. A dark palette, ghost buttons, large background image with a blurred effect add a chic touch to the template. Valid coding of this vibrant theme will ensure faster performance of your site and its easier customization according to your preferences.

* * *

Free HTML5 Theme for Religious Site

6

Demo | Download
If you run a religious website, this is a perfect HTML5 theme for you. Gentle shades of purple and red set a soothing tone in the overall design and add a sense of spirituality to it. Purple also visually separates content blocks, making it easy to perceive different information that is wisely arranged across the template’s layout. Scrolling through it, visitors will learn about the mission of your organization, upcoming events and other details. The theme is very easy to navigate with its thought-out structure, fixed menu bar, and back-to-top buttons.

* * *

Free HTML5 Theme for Marketing Agency

7

Demo | Download
The following HTML theme is designed for companies involved in marketing, finance, insurance, consultancy, or almost anything that crosses your mind. The strong focus on content and orientation towards users are two fundamental principles that the developers of this theme followed when working on its design. Eventually, they came up with a clean, mobile-friendly layout balanced with vibrant graphic elements and supplied with handy features.

* * *

Free HTML5 Theme for Architecture Bureau

8

Demo | Download
If you are eager to refresh an architecture-related website, check out this free HTML5 template. It is clean, minimalistic and has an intuitive navigation. To showcase your projects in close-up, you can take advantage of Carousel & Owl sliders. Due to the responsive nature of the template, its well-defined layout can be scaled to parameters of various devices, from ultra-high resolution displays to smaller smartphone screens.

* * *

Free HTML5 Theme for Entertainment Site

9

Demo | Download
This is a festive, entertainment-related HTML5 template. It has lively visuals and some nice hover effects. It can help you showcase your party planning ideas, recent events, and even testimonials, which will let you seem more persuasive to potential customers. Responsive design of this theme will provide impeccable viewing experience for people visiting your site via mobile devices and desktop computers.

* * *

Free HTML5 Theme for Cleaning Company

10

Demo | Download
This HTML5 template is designed for a maintenance service, e.g. cleaning, laundry, home repairs, etc. This tastefully simple theme is also enhanced with images in a slider at the top and carousel gallery at the bottom. With neat social icons, you can unobtrusively inspire the audience to subscribe to your profiles on Facebook, Twitter and other networks. What’s more, this well-coded theme will enable you to build a future-proof site that will be easy to maintain and fine-tune to your business needs.

* * *

As you can see, all of these free HTML templates are pretty sweet and have some handy features. For more freebies and inspiration, visit the Template Monster. These guys have decent templates powered by various engines (WordPress, Joomla, Drupal, PrestaShop, OpenCart, etc.) and their themes can be a nice fit for a wide range of business niches (art, cars, fashion, education, religion, real estate, technology, etc.). See for yourself!

AUTHOR’S BIO: Nick Campbell, the author of this article, is fond of writing posts on various subjects, particularly web design, e-commerce, social media, marketing, business, and education. He has been involved in the content creation sphere for more than two years. Nick is primarily focused on covering modern trends of a certain industry to help his readers keep abreast of the latest news. If you don’t want to miss any brand new achievements in the mentioned topics, follow Nick Campbell on !

Making Color Contrast Checks a Part of Your Web Workflow

So you have a great looking website and your checklist has you covered. But does your checklist include a color contrast check? Are you wondering what that is?

Let’s first walk through the basics of color contrast and then we’ll move on to some tools and techniques you can use to make color contrast a part of your workflow.

So you have a great looking website and your checklist has you covered. But does your checklist include a color contrast check? Are you wondering what that is?

Color Contrast Checks

No, we are not just talking about great looking colors here. More than 7 to 15 percent of males are color blind. Also, as people keep growing older, they have difficulty reading low contrast text. In addition, many of the websites today are viewed on smaller devices, such as mobile phones, and when out in the sun, color appear different. Small screens also make it difficult to read text that does not stand out from its background color. That constitutes a significant number of people with a need for high contrast text.

That’s the reason why a color contrast check is mandatory if you want your website to be accessible to most people. The color contrast used in your website needs to take into account the needs of people who are on the spectrum for color blindness, those using smaller devices (and different light conditions), and of course, the elderly.

Compliance to WCAG 2.0 (Web Content Accessibility Guidelines) norms ensures the accessibility of a website to color challenged people. If you did not do the color contrast check before designing your website, you might have to discard some of the vibrant colors or shades you have chosen.While it’s not a great position to be in, it’s nothing to panic about either! Checkmycolors.com’s color contrast tool can help you quickly find out which of your colors may not be WCAG 2.0 compliant.

That said, making your website accessible to color blind people does not mean you need to go for a bland and colorless website. Far from it! In fact, paying such close attention to your colors will enable you to develop greater sensitivity to design your website with colors that are even more vibrant ie visually accessible and give your website even greater appeal. Let’s first walk through the basics of color contrast and then we’ll move on to some tools and techniques you can use to make color contrast a part of your workflow.

Understanding the Spectrum of Color Blindness

The term ‘color blindness’ actually refers to a broad spectrum of color vision impairment. Not all afflicted people are blind to the same colors. The common types of color blindness are:

  •  Protanopia: reduced ability to see red colors
  •  Deuteranopia: reduced ability to see green light
  •  Tritanopia: reduced ability to see blue light
  • Achromatopsia: reduced ability to see most colors

Protanopia and deuteranopia are more common while the other two are very rare. That does not mean we cannot use red and green in websites. It just means we need to be sparing in the use of these colors.

WCAG 2.0

While talking about contrasts, it’s not just images we need to look at. Color contrast for text plays an important role as well. WCAG 2.0 (guideline 1.4.3) norms dictate the minimum contrast that we need on webpages when displaying textual content. The color contrast between the foreground or textual color and the background color can range from 1 to 21. The minimum requirement is a ratio of 3:1. That leaves us free to unleash our creativity safely with all the other shades and hues.

Level AA and level AAA are used to differentiate the amount of rigor required in the color contrast.

  • Level AA

○     For normal sized text, the minimum color contrast should beat least 4.5:1.

○     For large sized text, the minimum color contrast should beat least 3:1.

  • Level AAA

○      For normal sized text, the minimum color contrast should beat least 7:1.

○      For large sized text, the minimum color contrast should beat least 4.5:1.

Integrating checks into your workflow

Integrating checks into your workflow

Instead of waiting until you finished designing your website, it is a good idea to integrate contrast checks into your workflow, so you do not need to re-do or change your color scheme later. Doing the work up front, during your design process, makes sure you have it handy once you start execution. So how do we go about it?

  1. Map out your desired color scheme. Jot down a quick list of text and background colors you wish to use on your website. Feel free to refer to other websites using accessible color contrasts. When starting to build your color palette from scratch, Color Palette Accessibility Builder and Color Extractor are good tools to use. As the name suggests, the Color Extractor website extracts the colors from a website of your choice to help you build your own palette. Of course, your example website should have colors that are accessibility compliant. A good rule of thumb is to use cool colors for the background and warmer ones for the foreground text.
  2. Check whether chosen colors are accessible. Traditional methods used colored goggles to do a contrast check for color blindness. However, we now have several online simulators that do the job. Checkmycolors.com  can help you check whether your colors and text aer WCAG compatible.Paletton.com, WebAim and color-blindness.com are other online resources to screen out inaccessible colors.  lets you quickly check color contrasts for accessibility. Paciellogroup offers you a free downloadable tool to do the same job.
  3. Create a mockup or use placeholders to build content and use the selected colors to build a sample website for further testing.
  4. Run a grayscale test. It is easier to judge color contrasts in grayscale compared to viewing website in color. After you are done choosing your color palette, converting all your colors to grayscale can be of help to evaluate the color contrasts used in a website. Gray-bit.com is among online resources available for your grayscale check.
  5. Test on color blindness simulators to screen out non accessible colors. Chromatic Vision Simulator and VisionSim are among free mobile apps which help you check your colors for various kinds of color blindness.
  6. Double check your buttons and CTAs. Using colors to indicate the functions of buttons is not enough. In some cases, red and green change to some other colors. You then realize the need to also have contrasting text to explain the button function.
  7. Adjust your colors, hues and fonts to bring them within accessibility values. Tanaguru Contrast-Finder will suggest other colors if the colors you selected do not offer sufficient contrast.

By following these steps you can make color contrast a de-facto part of your web workflow. The wide range of tools and simulators available today ensures that you don’t waste time, and effort, in figuring out the right contrast and colors.

Are you already including color contrast checks in your workflow? How do you go about it? Share with us in the comments on Facebook or Twitter.

Coffee Break: An Interview with Chris Castiglione, Co-Founder of One Month

Chris Castiglione is an engineer, artist, and the co-founder of the Y Combinator-backed One Month, the “For Dummies” of online education. Prior to One Month, he was the first teacher at General Assembly, where he created the #1 best-selling coding class for entrepreneurs, “Programming For Non-Programmers.”

Chris Castiglione is an engineer, artist, and the co-founder of the Y Combinator-backed One Month, the “For Dummies” of online education. Prior to One Month, he was the first teacher at General Assembly, where he created the #1 best-selling coding class for entrepreneurs, “Programming For Non-Programmers.”

Chris Castiglione, Co-Founder of One Month

In 2013, he taught at Columbia University, and he is currently an adjunct professor at The School of Visual Arts in NYC. In the past, Castiglione has advised companies such as American Express, Donor’s Choose, The New York Stock Exchange and General Electric.

Q. Tell us about yourself. How have you come to development, and particularly to being a co-founder of One Month?

I always wanted to be a teacher. I taught guitar lessons for a few years, and then I taught English in Osaka, Japan for a year. It was amazing. When I was in my mid-twenties, I went back to school to get my masters (University of Amsterdam), hoping that when I returned to the States, I could teach at a university like NYU or SVA.

Little did I know, universities usually only accept PhDs to be their teachers. I started down the doctorate route for a few months, but it just didn’t feel right to be in academia for so long.

That’s when I met one of the founders of a place called General Assembly (GA). I told him (Brad) [about] my desire to teach, and early in 2011, I taught the first coding class at GA. At the time, the staff was only 5 people (today it’s close to 400)… but I don’t know if, back then, I could have imagined just how big coding classes would become. Things that seemed simple to me (HTML, Rails, etc) were selling out weekend after weekend.

I went on to create the best selling classes at the time, “Programming for Non-Programmers,” and “Front-end Web Development.” It was around this time that I met Mattan Griffel. He had just launched the best selling class on the Skillshare platform, called “One Month Rails.”

Chris Castiglione & Mattan Griffel

We were both members of the General Assembly co-working space, and every now and then, we’d take lunch together and dream up ideas for the future of education and what it might look like. There were lots of innovative things we wanted to try, and we both felt held back by the powers above.

Long story short, Mattan applied to Y Combinator. He got in as a solo co-founder, and sometime shortly after, he invited me in as his co-founder on the project. That’s how it began.

Q. How did the idea appear, and how have you come to the vision for what One Month is?

The idea appeared out of a natural evolution from the platforms we were creating. We weren’t trying to create a company at first; we just wanted to evolve online education. We wanted to know the metrics for our students’ happiness, and completion rates; we wanted to A/B test content and provide 24-hour live support.

One Month Team

Q. Who can benefit from One Month, and how? What allows One Month to stand out from the crowd?

One Month is for life-learners.

All our classes are broken down into manageable pieces: about 15 minutes a day, for 30 days. Every skill is project-based (ie. you’re making something from Day 1 of each class, so there’s never a ton of theory upfront) and you have unlimited access to our teachers and support throughout your journey. Which means, if you get stuck (we all get stuck sometimes)… you have someone there to get help you.

I don’t imagine One Month will be in elementary schools any times soon. We know our audience- I sometimes think of our classes as some sort of “Rated R” flavor of education. Our class are meant to feel like you’re at the bar sitting with your best friend who is just shooting the shit and helping you build your project. Approachable. We’re approachable.

Q. What do you enjoy about your project the most? Are there any negative moments you face up with, or is this experience 100% positive?

I love coming to work every day! I’m super inspired to be around everyone on our team.

Q. It looks like you change the lives of tens of thousands of students; how do you feel about it?

It’s hard to imagine what “20,000” people looks like. At that point, the number feels more like a statistic.

Luckily, I get to see progress from our individual students. That’s the best part… the testimonials that come in. Hearing that Patrick in SF was able to land a 120k job, or that Sarah in DC saved $20k building a project herself- I only hope we can help inspire more people!

Q. How can one wow you to become a part of One Month as a teacher?

We’re always looking for teachers, but we’re selective, so if you read this, please do
apply
.

I’m looking for someone who has taught before, has a portfolio, a intro from a trusted friend always helps, and someone who passes the beer test (ie. Would I want to spend Friday night drinking a beer with this person?). You don’t need to be a rockstar before applying, but you have to want to become one once you join us:)

Q. Last summer, you had interesting experience when you and your team moved to Berlin to work and live in a house together for 30 days. Has this made you think this is the best way to grow stronger as a team? Do you live and work together with your team now, and how does your work space look like?

Berlin! It was the best.

The trip to Berlin was an experiment for sure. It could have gone horribly, but it didn’t. It was truly magic. Before Berlin, our team was only two people (me and Mattan). That month we grew our team to five, so Mattan and I thought, “What’s the best way to get to know our new teammates this month? Let’s try living together with them.” And what better place than fucking Berlin.

We don’t technically live together now, but One Month HQ is technically a “live/work” space. It’s a very large 2-bedroom in the village, and each of us has decorated the space with our personal toys from home (books, an electric piano, Halloween costumes, paintings). So yeah, it’s not home, but we treat it like a home.

One Month rockstars

Q. What is One Month’s monthly revenue?

I might only say, some months, we’re profitable. Most months, we’re close to profitable. Overall, it’s going well.

Q. How do you keep up with trends and keep your skills up-to-date? What inspires you to succeed in what you do?

How do I keep up with trends? The easiest way has been to surround myself with people that are smarter than I am. I’ve learned a ton over the years this way. I’m pretty sure each of us on the One Month team feels that way. A fun fact is that almost all 9 of us were freelance consultants before joining One Month. Being on the team has helped me grow so much.

What inspired me? It’s hard to answer that without sounding a bit stilted, but the truth is, I’m hungry for learning. I see a world that is much more empathetic and kind than the world we live in now. And empathy (for me) beings with understanding, and education.

To that extent, I’m also personally hungry to learn…I selfishly consume books, people, travel, and ideas. Here at One Month, I have this opportunity to live comfortably in NYC while also connecting people to these amazing books, people, travel and ideas…. and thereby spreading empathy. It’s inspiring for sure.

Q. Do you use your knowledge in practice, then, or is teaching currently the only way for you to share what you’ve learned

The two classes I teach for One Month right now are One Month HTML, and Programming For Non-Programmers. I use those in practice, in that I was a developer for 10+ years. I still do development work on the side, but much less than I used to a few years ago. It’s more about managing our development team these days.

Q. Here is a tricky MV* Frameworks War question:) What is your favourite framework(s) and why? What do you think about the future of this/these framework(s)?

I’m not sure I have an exciting answer here. I tend to like things that are functional. I used to use WordPress as a backend, and more recently, I’ll use Rails. I think the biggest constant in frameworks is Bootstrap. So I’d have to choose that. Clearly, those guys have revolutionized development with what they’ve given the Web.

Q. What are your plans for 2015 in terms of your project and the class you teach? Do you plan to roll out new classes any time soon? 

We’re rolling out a bunch of new classes in 2015. My class, Programming for Non-Programmers, will be released in February 2015, as will Content Marketing (taught by Sarah Peck), One Month Python, and One Month UX. That’s all I can talk about right now, but more exciting twists and turns (even outside of tech) will be out soon enough.

Many thanks to Chris for taking the time away from teaching to answer our questions and run through his pictures to share some of them with our readership. We expect the One Month guys will achieve the goals they have established for 2015 in the near future.

Tips For Enhancing Typography in your Web Projects

Understanding how to select and use appropriate fonts in web design can be a challenge, though. Luckily for you, we’ve compiled a list of tools and techniques to help you identify fonts, select appropriate font combinations, and implement typography elegantly in your responsive web designs.

Typography is a huge part of modern web design. Gone are the days where you were limited to using the handful of typefaces that were installed on almost every user’s system. Nowadays, through the use of web fonts, many hundreds of different fonts can be used safely on the web.

Tips For Enhancing Typography

Understanding how to select and use appropriate fonts in web design can be a challenge, though. Luckily for you, we’ve compiled a list of tools and techniques to help you identify fonts, select appropriate font combinations, and implement typography elegantly in your responsive web designs.

Identifying and selecting typefaces

Deciding on which fonts to actually use in your design can be difficult. Fortunately, there are some great tools out there to help you select fonts and combinations to enhance your design.

WhatFont Chrome Extension

WhatFont is an amazing extension for the Google Chrome browser (if you don’t already use Chrome as one of your primary browser for web design and development, we highly recommend trying it out; it has an abundance of useful extensions). To use the WhatFont extension, you simply install it within Chrome, enable it from the toolbar and then the name of any font you hover over will appear in a little tooltip near the font. If you click on the font, additional info will be revealed, like color, font size etc.

WhatFont provides an easy way to discover font combinations that are being used on beautifully designed sites, which can be a great source of typographical inspiration.

Fontpair.co

If you’re planning on using fonts from the free Google Fonts library, you should take a look at fontpair.co. It suggests a wide array of font combinations using fonts drawn exclusively from Google Fonts. You should be able to find a free combination to suit just about any project here.

Beautiful Web Type

This site is more of a showcase of what can be done with some of the fonts available for free on Google Fonts. It really does provide some beautiful examples of web typography and suggests some great font combinations. It’s sure to get you inspired.

Where to get your fonts and how to use them

There are a few options when it comes to sourcing the fonts for your website. We’ll cover two free options here, but there are many more – both paid and free – sources available.

Google Fonts

By far the easiest and most convenient way to use web fonts in your design is to use Google Fonts.

To use fonts from the Google Font library, you simply need to go and select the font or fonts you’d like to use, add them to your collection, insert the generated code into the <head> section of your site’s code, and start referencing the font as you normally would in your CSS.

For example, once you have added the following code to your <head> section:

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

you could make all h1 tags use Open Sans (and fall back to the system default sans-serif font) simply by adding the following regular CSS rule:

h1 {

font-family: 'Open Sans', sans-serif;

}

 

Font Squirrel and other self-hosted solutions

You may want to use a font that is not available on Google Fonts. In these cases, websites such as Font Squirrel may be useful. Using web fonts from these sites is also very simple; it just requires a few more steps than Google Fonts.

Firstly, unlike Google Fonts, you will need to upload the font files to your own server. You may also need to write your own CSS @font-face rules to load those font files and make them usable (this is not necessary with Font Squirrel).

For most of the fonts on Font Squirrel, you can generate a web font kit (some have licenses that don’t allow this). This takes care of most of the technical issues for you. To generate the web font kit, when you are on the individual font page (eg. http://www.fontsquirrel.com/fonts/open-sans) just click on the ‘webfont kit’ tab, select your options (the defaults are usually fine), and then click the ‘Download @font-face kit’ button.

This will generate a .zip file that contains everything you need to get your font working. Just upload the .eot, .svg, .ttf, .woff and .css files to a folder, preferably a folder under your existing CSS folder on your server.

Next, you need to add a reference in your existing web page to the .css file generated by Font Squirrel. To do so, add the following into the <head> section of your page, making sure to add the correct path to the Font Squirrel CSS file:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" charset="utf-8" />

The .css file generated by Font Squirrel should be in the same folder as the font files you uploaded to your server earlier. If they are in different files, you will need to correct the paths in the Font Squirrel stylesheet.css file.

Now that the files are uploaded and the CSS file is being referenced correctly, you can begin using the fonts in your designs just by referencing the font as you usually do in CSS. If you don’t know how to reference a font in your CSS code, you can find out by checking the Font Squirrel stylesheet.css file associated with that font.

Creating Your Own CSS @font-face Rules To Use Web Fonts

If you get a web font from a source that doesn’t generate the required CSS rules, you’ll need to create them yourself.

Basically, you just have to define the name of the font-family, then reference the font-files you’re going to use to render the font in different browsers. The example below shows the CSS @font-face rules needed to implement a font called Open Sans; it assumes the font-files are uploaded to the same folder as the CSS file.

@font-face {

font-family: 'OpenSans';

src: url('opensans.eot'); /* IE9 Compat Modes */

src: url('opensans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('opensans.woff2') format('woff2'), /* Super Modern Browsers */

url('opensans.woff') format('woff'), /* Pretty Modern Browsers */

url('opensans.ttf')  format('truetype'), /* Safari, Android, iOS */

url('opensans.svg#svgFontName') format('svg'); /* Legacy iOS */

}

To use this font in your design, you would use a CSS rule, such as:

h1 {

font-family: 'OpenSans', Fallback, sans-serif;

}

 

Note that we are using the font-family name as defined in the @font-face rules; unlike regular system fonts, it must be enclosed within quotation marks.

These rules ensure the web font will be compatible with as broad range of browsers as possible.

Improve performance with Web Font Loader

On overstressed networks or over particularly slow internet connections, the performance of web fonts can become an issue. The content being rendered in web fonts may take longer than is ideal to become visible to users. This is commonly known as the ‘Flash of Unstyled Text’ (FOUT) issue. Although this issue rarely becomes a major problem, it can potentially pose significant usability challenges.

If you run into this problem when using web fonts on your websites, you may want to take a look at the Web Font Loader script. This script allows web fonts to be rendered in regular system fonts until the relevant files are loaded in the user’s browser. This can result in an improvement in perceived performance and a far better user experience.

Options for Responsive Text

Because the web is increasingly accessed on a mix of devices, such as desktop PCs, phones and tablets, it’s important your typography is flexible and adaptable enough to work and look great on a wide range of screen sizes. The most common way to do this is using regular CSS media queries and setting font sizing and spacing for each relevant screen size. This article is a great primer on CSS media queries.

FontFlex is a jQuery plugin, which offers an alternative approach. It results in much more dynamic and flexible scaling of text.

To use it, you simply reference the script after you’ve reference jQuery in your page’s code:

<script src="jQuery.min.js"></script>

<script src="jQuery.fontFlex.js"></script>

You should also declare general font-size and line-height rules in your CSS to ensure text scales properly:

body {

font-size:1em;

line-height:140%;

}

Then, to apply the effect, simply add the following self-invoking function, either in a separate JS file or within <script> tags on your page:

$(function()

{

$('body').fontFlex(14, 20, 70);

});

The parameters in order are: minimum font-size in pixels; maximum font-size; and mid-range buffer (best set between 60 and 70). Check out a live demo of some beautifully dynamic scalable text here .

This plugin works flawlessly in Google Chrome, Apple Safari Desktop and Mobile, Microsoft IE 9, 10, 11 and Mozilla Firefox.

Go forth and create beautiful web typography

So there you have it! This guide should give you all you need to start selecting great font combinations, implementing web fonts in your responsive layouts and optimizing web font performance.

Remember, the goal of web design is to facilitate and enhance communication, and great typography is central to achieving that goal.

January Think Piece: Web Design And Development News

In this issue, you will learn more about UX principles, font pairing, new releases of Firefox and Bootstrap, Project Spartan (rebranded IE for Win 10), and you will discover a new collection of design resources as well. We’ve also included several articles for inspiration and entertainment.

Welcome to our January Think Piece. Each month, we’re going to publish some of our favorite articles and resources we’ve discovered. In this issue, you will learn more about UX principles, font pairing, new releases of Firefox and Bootstrap, Project Spartan (rebranded IE for Win 10), and you will discover a new collection of design resources as well. We’ve also included several articles for inspiration and entertainment. Hope you’ll enjoy the reading!

Web design and development news

Education

Understanding Web UI Elements & Principles

The design of any commercial website is about conversions, sales and leads. That’s why every good designer should know at least some UX basics. The more principles you know and apply to your designs, the more benefit you’ll bring to your customers and the more new orders you get.

This article talks about some of the most important principles of web UI design. The main idea is that the interface is not just a set of beautiful buttons and elements, but the funnel to guide a user towards some certain and fixed goal to complete (usually sale or lead generation). When drawing some innovative interface, please note that most users are quite close-minded and tradition-bound, and they might not accept some radical innovation, even if it promises them more convenience in the future. Your designs should pass the so-called MAYA-principle test (Most Advanced Yet Acceptable). All practical hints in this article have interesting and funny examples.

6 Tips for Perfect Google Font Pairing

There are no strict rules for fonts pairing; however, there are some basic principles for doing it properly. This article outlines several generic recommendations on how to pair fonts. The first rule is that no font can rescue bad content. Second, keep typography simple so it doesn’t become overwhelming. Third, use contrast fonts, but use them right. Don’t forget about readability; ensure the text remains easily readable. Do not limit yourself with several fonts you are used to working with – use online resources for new fonts, new pairing samples and inspiration. Be creative and do not be afraid of experimenting with new pairings.

Prepare for 2015 with 1000s of New Artistic Resources

This fresh collection of design resources will help you prepare and complete new challenges in 2015. Design effects, custom scene creation packs, Photoshop kits with styles, brushes and textures – these resources will help you create new, beautiful design effects and save you time. This collection has received several enthusiastic comments and you will definitely love it, too.

Image source - Designcuts.com

Photo from Designcuts.com

Inspiration for Text Input Effects

Opportunities for form input customization are undeservedly overlooked in most cases. The majority of input forms are, by default, just dull. Mary Lou shares some experimental styles and effects for text inputs in her post. Almost all of the effects use CSS transitions, pseudo-elements and CSS properties that will work on modern browsers only. The post itself was written more for inspiration rather than for practical use, but it is still worth reading.

Inspiration & Entertainment

How To Transform Your Problem-Solving And Creativity

Creativity is one of the most important things for any designer, but what, actually, is it? Is it some kind of God-given talent, or just a skill that can be trained and improved? Creativity is all about fresh ideas, and ideas are usually generated by thinking. So, theoretically, there is a direct relationship between mental capabilities, the level of creativity, and every person with a strong logic and strong ability for thinking, right? Well, the reality shows that is not always the case. Check out this article with an overview of five books that will stimulate and improve your thinking abilities, creativity and problem-solving skills simultaneously. They will teach you new methods and ways of thinking to remove any barriers and preconceptions of your mind, and free and improve your creativity.

8 Places to Prowl for Creative Inspiration

Every designer knows that inspiration is not something that can be bought or summoned to appear exactly when you need it. That means you need to look for it, and this article will help you in your search for places that waken your creativity. It introduces eight sources for inspiration available in any country, region and environment. The first place is nature, which, for example, inspired Nike to create a modular design of shoes (similar to the structure of microscopic water creatures). Music also works pretty well for inspiration. In some cases, you can use words for inspiration and try a so-called title-first approach (like Sting, who sometimes invents a title for his future song first, and then starts composing the music itself). All sources of inspiration in the article have very interesting, and sometimes funny, practical examples of famous people. We highly recommend you read this article in its entirety.

A Browser-Based Illusion Made all in CSS

As it turned out, CSS is applicable not only for ordinary styling; you can also do some magic with it. James Louis Walker introduces illusions with impressive animated effects. The illusions themselves were inspired by videos with optical illusions made by Brusspup on Youtube. But the feature of James’ illusions is that they are all completely done in CSS. The post gives you some hints on how this illusion was created, so if you want, you can do your own and send them to us for publishing on our blog and in our social groups to get some promotion in our community.

30+ Examples of Login Form Designs

Login and registration forms are very important elements of any design. They have to be easy to notice and easy to use. But when they are creative and beautiful at the same time, it’s a triumph for each designer. Here you can find examples of creative and efficient (and sometimes quite funny) forms. We hope this collection will inspire you and contribute to your own projects.

For Developers

This is Spartan! Project Spartan is Microsoft’s new web browser for Windows 10

It seems Microsoft will give up Internet Explorer in Windows 10 and introduce a new default browser called Project Spartan. According to Christina Warren and Mashable.com, it’s more like an attempt to rebrand IE rather than an intention to develop completely new and different browser. It’s quite logical step, because more and more developers pay little to no attention to IE compatibility at all. They mostly focus on Chrome and Firefox now. The new browser will be based on a new rendering engine with a cleaner user experience and a more streamlined appearance. More information on this topic can be found here.

Firefox Version 35 Has Been Released

Mozilla has also released a new version (version 35) of its Firefox browser recently. In addition to lots of bug fixes, this release contains several features that will make the life of developers easier. For example, they enabled CSS source maps by default. This feature was initially added into Version 29, but now it is enabled by default. Check Mozilla’s developer network for a full list of all the bug fixes, improvements and changes.

Bootstrap 3.3.2 released on January 19

According to the Official Bootstrap Blog, this release contains more than 300 commitments from 19 contributors. It doesn’t contain any significant new features, but it does include lots of bug fixes, accessibility improvements and documentation updates. As always, the post contains a link to a music video. This time, it’s Ace of Base – “The Sign”. Enjoy it!

That’s all for now. Subscribe to our blog updates and we’ll keep you in the loop.

Web Design Awards Worth Participating in 2015

Are you ready to let the world know about you as a web designer? If your answer is yes, then this post is for you. We’ve compiled a list of awards you might want to participate in this year.

Are you ready to let the world know about you as a web designer? If your answer is yes, then this post is for you. We’ve compiled a list of Web Design Awards you might want to participate in this year. Some of those awards are free and some require registration fee. Some of them are conducted just once in a year; other nominations are done monthly, weekly and even daily. Choose the ones you like the most and may the force be with you. Good luck!

Web Design Awards

1.      European Design Award

Submission Deadline: February 21

Submission Fee: starting from EUR 40 (for students) and EUR 140 per single standard submission.

The European Design Award is the most reputable design award in Europe. It has 35 separate design nominations and you can take part in all of them simultaneously. The only limitation is its cost – you pay EUR 140 per submission. For multiple submissions, you get volume discounts. Each nomination has three levels of distinction: Gold, Silver and Bronze. Gold winners receive a trophy during the official Award Ceremony. All winners additionally get some recognition and promotion, as they will be published in the ED-Awards catalogue and on the website itself.

2.      D&AD Award

Submission Deadline: February 18 (may be extended until February 25)

Submission Fee: starting from GBP 105.

The non-profit British Design & Art Direction organizes this prestigious international award each year. If you are between 18 and 23, you can participate in their New Blood Award section. Otherwise, you have to register for the Professional Awards section. There are many nominations available with different categories. All winners get a Yellow, White or Black Pencil as recognition of their achievements. New Blood Award winners can use their Pencil Marks in their portfolios, CVs etc. The winners’ works will be showcased at the D&AD Awards Night, as well as their international exhibitions and events. This Award is a great opportunity to get some buzz around your name in a designer community. However, it’s not the cheapest one.

3.      Awwards Design Award

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: EUR 40 for a one-time single website entry, EUR 120 for an entry followed with a featured profile in the Awwards directory.

According to the site, they get more than two mil unique visitors per month. So if your website is featured as “Site of the Day” you will theoretically get visible for at least 100K visitors. All winners will be published in an annual book “The 365 Best Websites Around the World”. Depending upon the category, you have an opportunity to get official Awwwards certificates for the following nominations: Site of the Day, Site of the Month, Site of the Year and Honorable Mention. Judging criteria include 40% design, 30% UX, 20% creativity and 10% content. Once per year, Awwards.com holds a conference, as well as price-giving. So in addition to online exposure, you have a great opportunity to get featured at that event.

4.     CSS Design Award

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: USD 30 per submission.

CSS Design Awards is a global platform showcasing the best web designers and their works. They say they are one of the top two most visited online web awards in the world (according to Alexa) and the most followed awards group on Facebook. The winners for Site of the Day get site badges and certificates. The winners of Website of the Year and Designer of the Year additionally get a handcrafted trophy finished in brushed chrome and gold. Judging criteria include the design itself, creativity, functionality, usability and code.

5.      CSS Winner Award

Submission Deadline: no deadlines, sites can be submitted all the year round

Submission Fee: free of charge.

CSS Winner is an international platform awarding best designs on a daily, monthly and yearly basis. The main evaluation criteria are the design, user experience, creativity and content. All winners get exposure on the website and through social media network and obtain a CSS Winner certificate. The main jury consists of nine designers from all over the world, and 80% of the total ranking for each website takes the opinion of those designers. The community can also participate and vote – their opinion is taken into consideration as 20% of the total ranking.

6.      Favourite Website Awards (FWA)

Submission Deadline: no deadlines, sites can be submitted all year round

Submission Fee: free of charge.

FWA is a UK-based design award portal for designers from all over the world. They were the first online award program that received over 200,000,000 website visitors. FWA accepts websites, online games and online movies/animation for nominations. The main criteria are creativity, originality, design, and content. A remarkable feature of this portal is their collaboration with Google’s Creative Sandbox. The winners of the Site of the Day nomination are reviewed with Google, and if Google finds the website suitable for their program, this particular website is featured on Google’s Creative Sandbox.

7.      Promotion & Marketing Design Awards

Submission Deadline: Early-bird entry March 20, regular submission deadline – April 17

Submission Fee: starting from USD 40 for early-bird student submission, up to USD 85 for regular single entry.

This award is held by the HOW brand, which initially started as a print magazine in 1985. With time, they grew into a bigger hub for designers providing design competitions, online design courses, job portal and more. The award itself contains several categories and supports single entries and campaigns. They provide discounted prices for students and are quite flexible with submission fees. The winners get a free trip to the 2016 HOW DESIGN LIVE event and will be published in HOW’s FALL 2015 issue.

8.      CSS Awards

Submission Deadline: new submissions accepted at any time

Submission Fee: USD 9.99 per submission, or alternatively, it’s free in exchange for a Like or Follow on Facebook and Twitter.

This website accepts website designs from all over the world. They have quite a tricky system for submissions – you can submit your website for a small fee of USD 9.99 or alternatively you can like them on Facebook or Follow in Twitter and then send a message with your website URL + Agency / Freelance URL. This is partially the reason why they have around 43K followers on Twitter and around 7K Likes on Facebook. But at the same time, they have 1,192 followers on Pinterest and 2,127 pins, so they’re still worth your attention.

This website also has an additional website exclusively for submissions of one/single page websites. All terms and conditions are the same.

9.      Webbyawards.com

Submission Deadline: January 30

Submission Fee: USD 345.

The Webby Awards is one of the most prestigious international awards, presented by the International Academy of Digital Arts and Sciences (IADAS). They have several categories, and each category has two honors – The Webby Award and The Webby People’s Voice Award . The winners for the Webby Awards are determined by the International Academy of Digital Arts and Sciences. The winners of the Webby People’s Voice are selected by the online community. For the previous year they received 12,000 entries from over 60 countries. This year, the submission deadline was December 19, but they extended it until January 30. Even if you won’t manage to participate this year, you have some time to thoroughly prepare for the challenge for the next year.

There are lots of other awards and contests worth mentioning here, but we’ve limited the list to an uneven amount intentionally. Hopefully, you’ll propose to us the tenth award you like best. So what award would you like to be mentioned here? Share your thought with us on Facebook and Twitter.