Back in the day, there was a gold-standard website layout that everyone strived to create, but that was notoriously difficult to get right…

I recently discovered an elegant solution to this problem using CSS Grid. In this post, we'll learn how it works!

There are lots of other things we can target beside viewport width. That might be screen resolution, device orientation, operating system preference, or even more among a whole bevy of things we can query and use to style content.

1. Unclear Value Statement

• Is there a compelling, visible headline that expresses the end benefits clearly and succinctly?
• Is there a subheadline explaining your offering in more detail?
• Are there supporting graphics that pull the eye toward your headline and subheadline?

2. Poor Signposting

Your landing page isn’t just there to be pretty. It’s meant to convince people to take action. If you don’t make it easy to find your call to action, most viewers won’t look for it.

4. Only One Landing Page

A company with three profiles and four content sets would need 12 landing pages. And yes, it’s worth that kind of effort.

5. Insufficient Visuals

“A picture is worth 1,000 words” is ancient wisdom, but it’s far from true in the internet world – it’s actually worth more.

7. No Trust Elements

Offering some type of authentic customer referral or testimonial is important.

In this article, I will explain how we can use CSS flexbox to successfully build a website header, and show you some of the important tips and tricks.

Application to create shades and colorschemes from a single color

new.css

A classless CSS framework to write modern websites using only HTML. It weighs 4.8kb.

All it does is set some sensible defaults and styles your HTML to look reasonable. It's perfect for:

• A dead-simple blog
• Collecting your most used links
• Making a simple "about me" site
• Rendering markdown-generated HTML

I like to use checkboxes as buttons. And here’s how.

A checkbox is a binary state. It is checked or not. So instead of reading out the state in an event handler, I tend to read the checked property.

After reading your article, I am more convinced than ever to stick with jQuery.

Gidole

DIN – the font we all love, the font that looks great at every size. Gidole is extremely close to DIN, but designers with a keen eye will spot very few minor differences. Overall, if you’re looking to use DIN, try Gidole out before going live.

Overpass

Overpass was created by Delvefonts and sponsored by Redhat, it was designed to be an alternative to the popular fonts Interstate and Highway Gothic. Did we mention it also has a monospace version?

Public Sans

Public Sans is a project of the United States Government, it’s used widely on their own department websites and is part of their design system. The font is based on the popular open-source font Libre Franklin.

Object Sans

Object Sans (formally known as Objectivity) is a beautiful geometric font family that can be used in place of quite a few premium fonts out there. The font brings together the top qualities of both Swiss neo-grotesks and geometric fonts. The font works beautifully as large headings but can be used for body content as well.

Jost

When you want a change from the typical Futura, then Jost is a great option with its variable weighting as well as multilingual support.

Designing our own icon set is an idea that’s been going through our minds for a while, so we’ve finally taken the leap and decided to come up with our own open-source, extendable icon set. We introduce you to Mono Icons! 🙌

1. Use personal pronouns
2. Start with a verb
3. Prevent concerns
4. Use natural language
5. Default to active voice
6. Show useful error messages
7. Write iteratively

General visual consistency

How to make our design look sleek and consistent? Start with preparing this:

1. Choose colors you want to use
2. Choose a font(s) you want to use
3. Decide on how deep/blurred you want your shadows to be.
4. If you are using icons, decide whether you want to use solid or outlines. Try not to mix them.
   By now, you created your little design-system. How cool! 😎
   Now you should stick to it.

If you want your shadows to look even more fanciful, make the shadow have the same color as the element that casts it, then lower the opacity. Ideally, the background would have a similar tone, too.

Making gradients look more smooth and delicate

Choose the right color for the font, so it matches the background.

The first pass will almost always suck.

In Creativity, Inc.: Overcoming the Unseen Forces That Stand in the Way of True Inspiration, Ed Catmull equates new ideas to newborns. They need care and nurturing — space to breathe. Think of your initial ideas (read: designs) as a garden in the early stages. It will need constant watering and tending until the plants are strong enough to survive on their own and bear fruit. A garden doesn’t look like much in the early stages. But it has tremendous potential with the right care.

Artists work with an idea. They nurture it. This does not require ingenuity or creative genius. Forget about all of that. It doesn’t necessarily require a lot of experience either. It simply requires hard work to push through iteration after iteration. You are essentially watering the plants (the idea) and nurturing them.

“Quality is a probabilistic function of quantity.”

A genius is a genius, Simonton maintains, because he can put together such a staggering number of insights, ideas, theories, random observations, and unexpected connections that he almost inevitably ends up with something great.

Your job is not to come up with the best idea.

Your job, then, is to take the best part of others' ideas and shape them into the best idea. I always have ideas and want to be the first to get them out in the open where they can be evaluated (and hopefully adored). This is my ego at play — talking to me, telling me to show everyone just how clever I am. I’ve had to learn to keep my mouth shut and temper my ego. My job isn’t to come up with the best idea. It’s to listen and watch.

Go beyond your industry.

Creatively find the time to be creative.

Your ability to sell is often far more important than your design skills.

A peek into the brain of Scott Jenson, Google’s UX strategist.

1. Sweat the small stuff.
2. Build ugly prototypes, fast.
   He calls it Assertive Instinct — the state where you are so hyped about your idea you can’t even imagine a world where it could be wrong or insufficient or simply incompatible with what people actually need.
3. Look for ideas in weird places.
4. Don’t criticize. If you do, ask one thing, politely.

Dynamic centered layout

We all know margin: 0 auto to center a layout. Ideal for article pages, right? But what if you want elements like images to exceed the maximum width of the article?

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.

https://heydesigner.com/a11y-css-reset/

There are a lot of different typefaces and a single rule doesn’t apply to all of them. Experiment with letter-spacing and do what seems right to you. There are some simple guidelines that will lead you in the right direction, especially when working with body text:

Letter-Spacing Headlines
If you are using well designed fonts, you can be sure that they are calibrated well, and you won’t need to make any major adjustments to them. However, the problem with headlines is that at larger scales the space between letters looks unbalanced. It can be fixed by increasing or decreasing the letter-spacing value.

There are no strict rules for letter-spacing — there are a lot of typefaces and all of them require an individual approach — but if you look at how big companies like Google and Apple treat their typefaces, you can find a lot of valuable information there.

box-shadow: 0px 8px 24px rgb( 0, 0, 0, .15 );

x: 0px
y: 8px
Blur: 24px
Alpha: 15%
Color: #000000