The 5 Key Design Ingredients

When you are starting out to design a web page it can be tempting to simply slap ideas on paper or the screen and hope they come together into a coherent whole. But there are five key ingredients to all design projects. Once you understand these design ingredients, you will understand how they go together to create a beautiful design that meets your goals for the site. The five key ingredients are color, shape, texture, space, and flow.

Color is the Best Known Design Ingredient

additive color mixing
Additive color mixing.

There are millions of colors. Color is a design ingredient that can seem easy to use, but is really very difficult, because there are so many different ways to use it. Color theory is a way of organizing colors so that they make sense visually and are thus more appealing. The above image is of the RGB (Red-Green-Blue) color model. This is the additive color model that CSS and computer colors are based on. They are colors of light, rather than pigment. When the primary colors are mixed together they create the secondary colors cyan, magenta, and yellow.

Because of the way colors are represented in hexadecimal it is fairly easy to see the additive colors in action.

Hexadecimal colors are written with a pound-sign ( #) followed by three numbers in hexadecimal (base 16).

Red is  #ff0000 The first value ( ff) indicates 100% red light, while the second two values ( 00  and 00) indicate zero green and zero blue light.

Green is  #00ff00 The first value ( 00) indicates zero red light,  the second value ( ff) indicates 100% green light, and the last value ( 00) indicates zero blue light.

Blue is  #0000ff The first two values ( 00  and 00) indicate zero red and zero green light, while the third value ( ff) indicates 100% blue light.

When you combine red and green you get yellow, and in Hex colors that is represented as  #ffff00 Combine red and blue to get magenta, which is represented as  #ff00ff  And combine blue and green to get cyan which is  #00ffff in hexadecimal color codes.

Adobe Color CC
Adobe Color CC generating a palette from an image

There are other ways to represent color in web design. You can see a list of CSS color codes in the References section on this site. But to find out what colors go best with one another, you should use an online color palette maker. I have used tools like Paletton and Color Schemer Online, but I really like the Adobe Color CC because it gives you so many ways to find a color scheme.

You can generate a color scheme from a photo, as pictured left. But you can also use the color wheel and color rules to create analogous, monochromatic, triad, complementary, compound, shades, and even custom color schemes. When I’m working on a color scheme, I might take a photo I like and start with that color scheme and then work with it within the color wheel portion to find exactly the combination of colors I want to use. In fact I rarely use the first set of colors that any palette generator suggests, but Adobe’s tool makes it very easy to modify and find the perfect set.

Shape is the Design Ingredient that Defines the Layout

Everything is made up of shapes. On this page, there are the circles that make up the additive color mixing image above, the rectangles and squares of the images and the blocks of text, even the multi-sided shapes the logo makes. Shapes are a defined two-dimensional area that stands out as a separate entity. The easiest way to see the shapes of your design is to step back and squint your eyes a little. Once the text becomes blurry and hard to read, you can better see the shapes that make up the entire page.

This is why many design prototyping tools use shapes to define the layout rather than blocks of text or images. It’s also easy to use pen and paper to draw quick prototypes with shapes. You can block out your layout with the shapes you want to convey and then the text and image content will fill those shapes to fill your design.

But shapes can more more than your layout. The image of the sun at the top of this page is a stylized image using just shapes and colors to create a picture we recognize as the sun. You should also consider shape when you’re looking at your web typography. Consider the shape of the text when it comes to orphans, such as single words or short lines below a wrapped image. In fact, in writing this post, I considered the possibility of an orphan line when I was placing the images. I didn’t want just a few words to dangle below the pictures, as that would be hard to read and would take away from the rest of the page’s design.

Texture is More Than Just Tactile

Texture is visual as well as tactile
These zebras make excellent texture

Most people think texture can only be something that is felt–the rough feel of sandpaper, the silkiness of satin, the soft fur of a baby kitten. But texture in visual design either gives the sense of something that can be touched, like the rough grain on a board of wood, or it creates visual interest that suggests a roughness. The zebras pictured above make a visual texture with their stripes connecting and co-mingling.

In web design texture adds visual interest to the pages. You can add texture as background images behind text blocks or the entire page. One popular texture technique is to add faint pinstripes to the background. This helps the page feel more dynamic than flat color would.

Space or Form Defines the Dimensions of the Design

The Veil Nebula
The Veil Nebula

Space and form are design ingredients that can be difficult to define on web pages. They convey a sense of two- and three-dimensional space to two-dimensional web pages. These are illusions, but these illusions provide depth to a design and give them more visual interest.

While web pages are two dimensional, there are things you can do with the design of your pages to make them appear to have three dimensions. The simplest thing is to overlap elements. Using background images, with text above, immediately suggests depth. When drawing or painting, artists use shading and highlights to suggest three dimensions. A web designer can do it with CSS adding shadows and glowing highlights on elements. But even simple things like the size of an element on the page can convey a sense of space or form. Smaller items appear to be further away, while larger items appear closer. This is especially true when small items are near the top of the design while larger items fill the bottom portion.

Flow Defines a Sense of Movement in a Design

flow
Water flows downhill

Flow is another design ingredient that can be difficult to see on static web pages. Flow is the sense of motion through a design. It relies on the way people read web pages and how their eyes track the contents. People read web pages in a standard order. If the language they are reading is left to right, like English, they tend to start at the top left corner, track across to the right, then slid diagonally down to about the middle of the screen, and then back right. Right to left language web pages tend to have a similar shape to the eye tracking, just starting at the upper right and tracking left.

A web designer can do things to affect that flow through the page by placing elements that stop the eye and elements that draw the eye on further. Some tricks you can apply to keep people moving through your pages include:

  • Look at your photos–where are the people (or animals) looking? People like to look at what other people are looking at, so make sure people in your photos are looking at the content you want your customers to look at.
  • Arrows may seem obvious, but they are great for increasing the flow of the design. It is possible to use arrows to point people at exactly what you want your audience to look at.
  • Lines block flow. This includes borders around boxes. If you must have borders and lines, and they are an important shape, make sure that they act like arrows and draw the eye to the next part of the design. Follow the line in the direction of your text to see where your audience will end up.

Consider the Design Ingredients Before You Design Your Pages

It’s perfectly acceptable to continue to design your pages however you’re comfortable. But consider the design ingredients you may be using without realizing it. Once you have a sense of the elements of design you can make better choices about what your design needs to be better.

What is your favorite design ingredient?

Hi My name is Jennifer and I am addicted to fonts.

I regularly have to delete fonts from my computer because I have so many that it fills up my hard drive and slows the computer itself. And I know I’m not the only one with this addiction as I have friends and relatives who send me links to cool fonts they’ve found or show me interesting artwork they’ve created using the latest swoosh or dingbat. I’m even in the process of creating my own font from my Dad’s handwriting. I’ve got a basic version of it already created, but there are still some issues.

How are you doing, JennBenn?
Still some issues with the font, but it’s my Dad’s handwriting.

I love fonts. I have created website designs based on a font. I have made books because I found a font so appealing I had to use it in something. Fonts are my design addiction.

But there are so many different aspects of design that can be addicting. I have friends who are addicted to color. I had a friend who had a list of color names that she would add to whenever she learned of another color. She could distinguish colors that I would swear had no difference at all–and she’d be right. I have another friend who is addicted to patterns. She creates patterns all the time and they are very creative. In fact, she’s developed an entire business centered around her patterns.

What design ingredients do you like to use the best? Are there any you hate using?

Which design tool do you find most addicting?

View Results

Loading ... Loading ...

Why Do You Like That Ingredient?

Share your thoughts in the comments below.

Typography Tips for Web Designers

Traditional designers have known for centuries the importance of typography in design. But web designers were stuck using boring default fonts with automated line heights and tracking that often made even the most well-crafted pages look amateurish when compared to print designs.

Initially, web designers had no way to change the fonts–they were controlled by the web browser. Then the  <font>  tag was added, quickly followed by some limited CSS styles like: font-size , font-weight, font-style, and a few others. But finally, it is possible to do true typography with CSS, adjusting leading and tracking, using kerning and font features, plus changing the font families and the look of the fonts. In many ways, typography is finally coming into its own in web design.

The following tips will help you add effective typography to your web designs using modern CSS styles that work right now.

Basic Typography–Change the Font Family

Google Fonts
Google Fonts give you a lot of options

The first thing you should consider when working on your web typography is the font family that you’re using. Most designers know how to use a font stack to tell the browsers the font families to use in priority order. You just list them in your CSS like this:

This method relies on your customers having the fonts you want installed, with fallback options if they don’t have your first choice. But most non-designers don’t have more than the default fonts their computer came with, so they aren’t going to have fonts that cost money like Helvetica Neue, no matter how nice it is. That means that your website is always going to have sub-par typography for the majority of people who view it.

The solution to this is to use embedded web fonts. You can host your own web fonts that you’ve either purchased or gotten from a free site like Font Squirrel. Or you can use online web font repositories like Google Fonts or Adobe Typekit. Online fonts are the easiest way to get custom typography because you generally just need to add one line to your HTML like this:

This is a link to the Google Font Alegreya Sans. Then, to use it on web pages you add it to your style sheets the same way you would any other font:

The advantage of web fonts is that as long as your customers are connected to the Internet, they will get the fonts you intend. But they can increase the download time of your pages, so don’t use more than one or two fonts on a page.

Spacing Typography with Leading, Tracking, and Kerning

Hand Set Leading
Notice the lead between the lines of text – that is Leading.

CSS has had the  line-height  property for years, and this lets you do some simple leading adjustments. The line height designation is slightly different from leading. Leading was the process typesetters used of placing thin lead bars between the lines of type to separate them and change the way the text was read. Lead is generally added either above or below the line of text. The CSS  line-height property, on the other had, splits the value and puts half above the line of text and half below. This can result in designs looking wrong if you are expecting the   line-height  property to be exactly like leading.

Web designers also often make the mistake of assuming that the   line-height  property must have a unit. In other words, they always write line-height: 12px;  with the “px” at the end. But while this is allowed, it makes your designs very inflexible. If a customer views a site and changes the font size in their browser in some way, there is a risk that the line height will not scale properly. It is better to use values that are relative to the font size, either with unit-less values such as   line-height: 2.1;  or percentages like   line-height: 120%; .

But you can also affect the space of the letters on each line with two different CSS styles: letter-spacing  and word-spacing . Like line-height  and leading, these style properties are not an exact analog of the typography tool tracking, but they give you some control over the legibility of lines of text. Unlike  the  line-height  property, these properties should be given specific length values like letter-spacing:1px;  or word-spacing: -0.05em; . These values are added or subtracted from the current space between the letters or words. Be very cautious when using negative values, as these can quickly run the letters and words together in an illegible mass.

Kerning is something that most web designers have forgotten about. Those designers who did care would kern their fonts in image programs and then display the text as a picture. But this is no longer necessary with the CSS font-kerning  style property working in all modern browsers except Internet Explorer and Edge.

Font kerning is the spacing that is set within the typeface itself. It is a way of ensuring that the letters look evenly spaced by adjusting the spacing between certain letters. For example, if you look at the two capital letter forms A and V. When they are placed next to each other–AV–they can appear to be further apart than other letters in the same font family if the font is not well-kerned. However, browsers can turn off kerning in fonts, if the font size is too small. And sometimes you might not want kerning to be applied at all. In this case, you can use the font-kerning property to make your fonts kern exactly as you wish them to. The values are font-kerning: auto;, font-kerning: normal;, and font-kerning: none;. The default is “auto” and this lets the browser decide when kerning should be applied. When you choose “normal” you are turning kerning on in all situations. And “none” turns kerning off.

This is Just the Tip of the Typography Iceberg

Typography
Comparing glyph styles

CSS has got a lot more typography in it than it did ten years ago. So you shouldn’t be limiting your typography to just font families and spacing. You can affect the smoothness of your fonts with the font-smooth  property. You can add OpenType features with the font-feature-settings  property. If you use East Asian languages on your website, you can finally do better text emphasis with the text-emphasis  property. You can also decorate the text with shadows ( text-shadow ) and strokes ( text-stroke ).

Do any of these seem interesting to you? I’d love to know what you want to learn about. Drop me a line or post a note in the comments. What kind of CSS typography do you want to know more about?

Have you taken any design classes?

Sorry this is late today, I had a crisis with a client which upped the adrenaline levels and then the migraine that resulted made it hard to see the screen for a while. 🙂 But everything is good now.

This week I’ve been thinking a lot about learning design. When I first started out as a web developer I didn’t have any formal design knowledge. I hadn’t taken any design classes. I focused primarily on building websites and applications that helped solve a problem. I was much more worried that the things I built worked, than whether they looked pretty. As I worked I realized that sometimes the look of the page or application was affecting whether it worked. For example, sometimes the position of a button would affect whether the customers would see it and click on it. I also noticed that colors impacted the usage of applications. I think I fell completely into the design rabbit hole when I started playing with typography and discovered that even the choice of font and how tight or loose the text was affected site usability. And that whole process I did without taking a single design class.

Imagine my dismay when I walked into a design class and learned that everything I’d painstakingly figured out over years of development work was already well known by designers.

Design Classes are Useful

An apple a day...
Design courses don’t have to be in an actual school setting.

They can teach you things much more quickly than most of us can learn through trial and error. Plus you get the benefit of your instructor’s knowledge and the enthusiasm and assistance of your classmates. It’s easy to think that you don’t need a design class because you already know what you like to look at on web pages. But by learning formal design rules you’ll know when your design is breaking them and why. And you’ll be able to make a case for breaking those rules. But the real reason it’s useful to take a design class is because you’ll probably learn something that will improve your designs today, without any split tests or customer complaints.

Have You Taken any Design Classes?

If you have, did you find them of value? why or why not? If you haven’t, are you considering taking a design class? What kinds of classes appeal most to you? Do you like formal, in-person classes or informal, online courses you do at your own pace?

Have you taken any design classes?

View Results

Loading ... Loading ...

10 Web Design Trends You Should Learn in 2016

It’s amazing to me how far we have come in web design. When I first started, the web was all text, all black and white (or green and black), and links were the most exciting new trend. And that was only in 1995! Now there are so many ways to view web pages, so many things you can do in a web application, so many features you need to think about it can get overwhelming. But these ten web design trends should help you get your sites going in 2016.

1. Responsive Web Design is here to stay.

Sams Teach Yourself Responsive Web Design in 24 Hours
Sams Teach Yourself Responsive Web Design in 24 Hours

These days it’s hard to know what someone is going to be viewing your site on. There are watches with only 272×340 pixels of visible space. And there are 4K UHD monitors with 3840×2160 pixels of visible space. I personally have both a 4K monitor and an Apple Watch that I use every day.

As a web designer, I cannot assume that the devices I use are the ones that my readers use. I also cannot assume that my customers’ devices are not smaller or larger than the ones I design on. So I have to design responsively so that my applications and pages work and look good no matter where they are viewed.

Blatant self-promotion: you can learn RWD from me with my book Sams Teach Yourself Responsive Web Design in 24 Hours.

2. Content should tell a story.

What you put on your web pages is what drives customers to view them, so content will always be critical. But the style of that content is changing.

It used to be enough that a website state just the facts, with pictures and videos to support those facts. But as more and more web pages come out it’s becoming more important to tell a story. You want people engaged in your content. Show that there are people behind the corporate facade.

3. Single-page cards are gaining in popularity.

With the advent of Material Design, more and more websites and web applications are applying the concept of “cards” to their designs. Cards are a way of modularizing the content and design so that the pages can display well on a small screen or a large one.

Most people think of cards in the form of single page blocks on cellphones. But you can create a card based design on a large screen and include many cards on the screen at once.

A good example of this is Pinterest. Pinterest pins are each a little card that includes the picture, a title, and other details about the pin. On a large monitor I might see as many as 20 pins on the screen at once, while on a small screen I just see one or two.

You can also design cards that are intended to be the only thing on the page at any given time. The key to designing cards is to keep them simple, use one nice image, use a simple, clear font, and don’t forget icons.

4. You should learn web typography.

typography - web design trends
Typography is more than just fonts, but web fonts are a great place to start.

If you’re not familiar with typography, then you should first focus on web fonts. Find a nice, readable web font for your pages and stick to that for the entire site. Don’t stick with tired font families like Arial and Times New Roman. There are many options you can find on both Adobe Typekit and Google Fonts. Don’t be afraid of web fonts.

Once you’ve got a good understanding of web fonts and how to use them, you can move on to more advanced typography. Consider the line height and word spacing of your text. Learn how to use fonts as icons and icon fonts. Don’t forget about things like straight quotes versus curly and hyphenation. If you use WordPress there is a nice plugin that can help you improve the typography of your site—WP-Typography.

5. Imagery is changing to more illustration, less photography.

In 2015 we saw a lot of sites move to beautiful background photos that took up the entire screen. But 2016 will see a bit of push back into more illustrations and sketches. Pictures that look like or are drawings will gain traction.

If you aren’t an artist, this might seem daunting. After all, there are lots of free photography sites to choose from (my favorite is Pixabay), but what about illustrations and drawings? The good news is that most sites, including Pixabay, that have photos also have illustrations.

But you’ll have to be pickier in your choices. It’s very easy to fall into a trap of grabbing images that are mostly clip art and cartoony, and that might be worse than just staying with photos. I would recommend that if you don’t do your own drawings, and can’t afford to pay someone to do them for you that you ignore this trend. You will notice that my site continues to use photos.

6. Sketches might be hard to find, but there are lots of hand-drawn icons.

icons will get bigger in 2016
I found these icons on Pixabay.

Icons are a place where you can update your site to use more current trends, and get that hand-drawn or sketched look. Mind you, most of the good sets I’ve found do cost money, but they don’t cost a lot. I found one set that includes a hand drawn font as well as over 800 hand drawn icons for only $29—Hand Drawn Icons.

But beyond images, consider fonts when you’re thinking of icons. There are a lot of icon fonts that you can get for free. The most well known is Font Awesome, but it doesn’t have that hand drawn look. For hand drawn, I found a small set of 36 icons in the Jolly Icons Free Font.

7. Web pages will be more interactive.

Interactivity, especially small cards of interactivity, will be more and more common on web pages in 2016. Contact forms will be self-contained and when customers fill them out, they won’t leave the page, but just that card will change to indicate their interaction.

Interactivity is getting more and more important as the line between mobile and desktop blurs. And as that line blurs the line between what makes a web page an app and what makes an app a web page will blur as well. People expect their mobile devices to help them do things, and that is true of the apps and sites they visit on them too.

8. Videos will gain even more in popularity.

cat on video
Inline videos and background videos are all going to be important web design trends.

If you don’t have videos on your site right now, 2016 might be the year to consider them. I did my first professional video in 2015 (shameless self-promotion #2: HTML and CSS LiveLessons) and I’m working on a second video course right now. I’m hoping to get an RWD video series out in 2016 as well.

I must admit, I am late to the video bandwagon. I’ve struggled with the idea that videos are useful, as most of the time I am faster at reading through something than watching the video. But then I watched some videos on using Git. Git was something I’d heard of but hadn’t used. My brother felt I was making a huge mistake in not knowing Git, but every book and website I’d picked up had left me cold. I finally watched a video series because I had nothing else available. Now I use Git for nearly every project. It’s already saved my work several times. And I would not have gotten interested in it without the video tutorials to show me how.

So I am a convert. I do believe that videos are going to grow in popularity and usefulness and websites should consider them.

9. Don’t forget animation.

CSS animation is a fun way to get some visual effects and movement on your pages, especially if you don’t have the time to create a full video. And CSS animations don’t have to be big and flashy. In fact, tiny animations are going to be more and more popular. This includes simple animated transitions to move elements on and off your page as well as full animated icons and text. And since you can do this with CSS, that makes it even better.

10. Colors are going to get brighter in 2016.

vibrant colors - a web design trend
Vibrant colors is one of the web design trends I am looking forward to.

Monochromatic themes have been popular for a long time, but muted tones and colors are going out in favor of brighter, more vibrant colors. Material design uses a lot of flat colors in a creative way, and 2016 seems to be a year of more interesting colors.

What do you think are the biggest web design trends in 2016?

Do I have it right? Are these web design trends things you’re going to be thinking about this year? Or are you working on something completely different?

Please post your thoughts in the comments below. And if you’ve tried to comment before and gotten the name and address required error message, well, that’s been resolved. Sorry about that!

Friday Favorites: 1/29/2016

Most Interesting Article I Read This Week

Tips for Designers Who Don’t Code by SpeckyBoy.

screen shot - from SpeckyBoy
Not a lecture, just good advice

This is not a lecture article. The advice in this article is really good. For example, everything in your design should start with the content. And this means your mockups, not just the final design. How will your beautiful layout look if the title is more than three words long? What if the ads in the sidebar extend below the length of the main content–will you be okay with a big blank spot in the middle of your design? What if the people choosing the images don’t choose image in the correct aspect ratio–will your landscape-focused design look good with portrait images? or square? What if they attempt to crop the offending image, and it’s even worse than if they’d just left it alone?

Design is great, but when it meets the real world it can be challenging, and if you don’t code it can just be frustrating. But this article might help at least a little.

Quote of the Week

Design is not just what it looks like and feels like. Design is how it works.

— Steve Jobs

This is something to bear in mind whether you code or you don’t code. If your web page or application doesn’t work for the audience it’s targeting then it’s poorly designed, no matter how pretty it might be.

The Price of Web Hosting

I have determined that there are two types of people in this world: the people who care about how much things cost and the people who claim they don’t. Whether we like it or not, price is a factor in how useful a hosting provider is going to be to you and your website. It doesn’t matter if your hosting provider offers every bell and whistle under the sun if your business can’t afford to pay for it. On the other hand, just because a hosting provider is free doesn’t mean that it’s the best choice.

Many people are inclined to go immediately for the free and low-cost web hosting providers simply because they are just that—free. But there are drawbacks to free and low cost hosting providers that might not be apparent immediately.

Who Controls the Ads,  You or Your Hosting Provider?

coffee vintage ad
Coffee mmmmmmmm

Most free web hosting providers put ads on your website that you don’t control. Not only will you not earn money from those ads, those ads might not fit the tone or goals of your site.

I spend a lot of time thinking about what ads I want to host, where to put them, and if I should keep them. Some of my sites deliberately have no advertising at all (or very very little). But if I’m on a free hosting service they might decide to fill up my screen with pop-ups and interstitials and those really annoying double-underlined text ads, and there is nothing I could do about it. In fact, one of the reasons I’m glad I’ve left About.com is because their advertising policy has gotten insane. It’s nearly impossible to find content on their site anymore because there are so many ads.

Free Web Hosting Might Cost You Money

Many free web hosting providers do not allow you to place your own ads on your site. They are typically concerned that your advertisements will compete with their ads, and they want that revenue, since you aren’t paying them.

But if you can’t put ads on your site, then you won’t be getting any money from those ads. This is what my MBA teachers would call “opportunity costs.” I have the opportunity to make some money from my website, but since I’m using a hosting company that disallows ads, that money is lost.

Hosting Providers Can Cap Usage

Most free and cheap web hosting providers have usage caps. They limit the space you have available to your site, the bandwidth that you can use to deliver the site, sometimes even the number of files you can post on your site. The really unscrupulous providers will add on extremely high fees that come into play when your site goes over a cap. You won’t get a warning, just a bill for the services. This can cost you in the opportunity to provide more content to your customers, but also in the very real money that you have to pay the hosting provider when they charge you for going over your cap.

The Price of Web Hosting Isn’t Always What It Seems

money
Money to buy coffee

Many inexpensive web hosting providers will heavily advertise a price that seems really good, but has onerous requirements. For example, you might get a $2 a month price if you sign up for five years of hosting (so you have to pay $120 up front). Then if you cancel before the term is up, some hosting providers simply keep the money while others block website transfers. One web hosting company charged a very low monthly fee, but the fine print on the contract allowed them to set up a recurring charge of much more than that after the first three months. I heard one claim that the only way to cancel was to cancel the credit card.

Paying a small fee might sound like a good idea when you’re first starting out, but if you are forced to stay there, you might end up paying more money just to get out.

Once you have signed up for cheap web hosting, some providers will then hold your website hostage. One well-known web hosting provider makes it very difficult to move a site away from them once you’re there. They lock your domain name for six months of the year and has even been reported to have removed access to the website files if they think you might be considering leaving. Most people don’t realize this can happen because the hostage situation only becomes apparent when you try to leave.  It’s like “Hotel California” web hosting style–You can check out, but you can never leave.

Always Read the Contract

Be sure to do your homework and find a hosting provider that really does provide what they say. Look for loopholes in the contract–are you stuck for 90 days or can you cancel immediately? Do you have to buy something else (like a domain name or web design services) to get the great price? Also remember that web hosting is often something that other service providers will try to tack on as an “extra” service. Some web design firms will redesign your website and move it to their hosting service. This can leave you with a monthly bill on two web hosting providers even though you only need one.

Do you design all your own sites?

This is a tough question for me as I feel like I should design all my sites myself. But when I’m honest I recognize that there are tons of people out there who are much more talented than I am at design. And they put out their designs as WordPress themes and templates that make it easy to pay them some money and use their design. But I have trouble just using someone else’s work, even when I’ve paid for it. So I tend to modify most designs that I get at least a little bit.

The other part of this question is what constitutes “design?” In other words, if I use the a WordPress template, but I change the background color to my own custom one, I change the header image to another custom image (or images), and I add my own iconography and fonts, haven’t I done some design on that theme? For example, Meridian Stories (a site I did not design, but I do work on and I think looks great) uses a theme called Ethic that has been modified with a child theme to reflect specific design decisions of the Meridian site. Is that design? While my site Enjoy SciFi uses the Twenty Eleven theme with just a few modifications (colors and photos). I would never claim that I designed the Twenty Eleven theme, but I did decide on the colors and images to be used to represent that site. Did I design it?

Do You Design Your Sites?

Do you design your own sites?

View Results

Loading ... Loading ...

I don’t believe there is anything wrong with whatever you choose to do. Some of the sites I maintain I designed 100% myself, from the CMS to the CSS and everything between. Others I grabbed a template to be done quickly. I’ve hired designers to do some designs for me as well. And in each case I’ve been happy with the results.

What do you think? Is it important for you to design every aspect of your site? Or do you prefer to work on other things like the content or the programming? Let’s chat in the comments.

5 Things You Need to Design a Website

It’s very easy to design a website these days. I’m really almost jealous of people coming into it now as all the annoying things that I had to learn to work around finally just work now. I can spend time on cool CSS rather than focusing on whether my images will even display in the browser (or display where I want them).

But if you’re just getting started with building web pages, it can still be really overwhelming. There are a few things you need to get started, but don’t worry, it’s not as hard as you might think!

To Design a Website First You Need a Computer

You need a computer
A laptop is nice but not required

This may seem obvious, but it is very difficult to build a web page without a computer. But the computer you use doesn’t have to be fancy. There are people out there who have built entire web empires on public computers (like at your local library). If you have access to a computer that can access the Internet, then you can build a web page.

There aren’t any hardware specifications that you must have. Your computer can be ten years old or the newest thing out there. You can build your own computer or you can create web pages on a tablet or smartphone. You could probably build them on a feature phone, but that would be pretty difficult, so I’d head to the library if that’s all you have.

Once you have the computer or other device you’re going to build your site on, you then need:

You Need a Hosting Provider

Hosting
You don’t need a domain name, but most sites eventually want one

There are so many options available for web hosting these days that you may feel paralyzed in choosing. If this is the first website you’ve ever designed, then I recommend you start with a hosting company that acts as a web page builder as well. Some of the best ones out there right now include:

Weebly

Weebly makes it easy to create a really nice looking website, blog or online store. They have a lot of styles and themes to choose from to create exactly the site you need. Plus they will help you set up a domain if you want one and they have great stats to watch your site grow.

Wix

Wix has a lot of categories and styles to choose from and like Weebly it offers some really nice templates and themes so your site will look professionally designed right out of the box. Wix has a lot more templates than Weebly, but they both offer equally nice looking themes. The biggest drawback to Wix is that it can be difficult to move a site from there once it’s been built on Wix. But if you like what you have, this shouldn’t matter.

Squarespace

Many of the small business owners I know who are considering designing a website are considering Squarespace. They offer lots of themes and styles to get exactly the site you want. Plus they have a lot of responsive website themes, which are lacking on some other builders. They also have great SEO features.

If you are looking for a more advanced hosting system, you won’t go wrong with BlueHost. They offer a lot of programs and systems, but you have to do a bit more work to build your site than on the site builder hosting companies listed above. Personally, I use Linode co-location. I’ve been building and maintaining websites since 1995, and they offer me the services and security that I look for in a web hosting provider.

You Should Have a Text Editor

Typewriter
A typewriter might be a little bit old school.

If you go with a site builder like Weebly, Wix, or Squarespace, you might not even need this, but I like to have copies of my web pages on my local computer. Keep in mind that you don’t need a fancy web editor to build your site in a web builder or in WordPress. A text editor like IA Writer or Notepad++ can give you a place to write and edit your content before you paste it onto the site. And you can use your site builder to add images.

Speaking of images…

Don’t Forget an Image Repository

image editing
All the images on this page were found on Pixabay.

Note, I don’t mean you need an image editor. In fact, most of us, myself included, are probably not graphic designers or professional photographers, and we would do better just sticking with graphics from a reputable source than trying to create and edit our own.

Remember: just because an image is on the web does not mean that you can use it on your web pages!

Instead of risking nastygrams and worse from photographers and graphic artists because you used an image you found in Google images, go to a site like Pixabay and be confident that your images are free for commercial use. I use Pixabay for nearly all the sites I maintain, and they have a huge selection of really nice looking photos and illustrations.

Most Important: You Need Your Creative Imagination

imagination
This is probably the most important part

Once you have the first four things, you’re ready to get your site up and running. Head over to Weebly and pick out your template. Write your first couple of pages in Notepad++ and then post them to your site with images you found at Pixabay. And then keep going.

Designing and building web pages is fun!

Learn Design: 3 Reasons for Non-Designers

Even if you don’t think of yourself as a designer, learning how to design websites can be a valuable part of your web content creation process. And when I say learn design, I don’t mean just learning HTML and CSS. I mean you should learn design techniques and the principles of good design.

It is very common for business owners and developers to think that they don’t have the skills to design their own websites. Business owners might think they don’t have the technical know-how and developers might feel intimidated by the design aspects of the work. But it’s possible to get a handle on web design even if you don’t know the technology or don’t know design, or both!

Knowing Design Helps You Focus Your Content

learn design to focus on content
Your design should focus on your content

One of the key things about good design is that it centers on the message. A well designed book is easy to read. A well designed brochure gets the call to action right out in front of customers. And a well designed website lets the customer see the content first.

Once you know a few design techniques such as line work or flow, you will start to understand how your content can be improved (or ruined) through design. I recommend learning the basics of design even if you’re going to hire a professional web designer to do the work. That way you’ll be able to articulate what you’d like changed more effectively and you’ll understand what the designer means when she tells you the reason behind the font choice or the shading or colors.

Design Knowledge Helps You Refine the Styles You Already Like

learn design to refine your styles
A fractal is constantly being refined

If you know that you like bright colors with lots of vibrant images to go along with them, having some knowledge of the design tenets that support those choices will make your choices that much better. Without knowing design, you might just think “I like reds” and leave it at that. But after studying design, you might discover that red colors have specific meanings to certain cultures or that warm colors (like reds and oranges) convey a sense of warmth to the entire site. And once you understand the meanings behind colors, you might decide to increase that feeling on your site with similar colors or you might try to tone it down with complementary colors in the cooler side of the spectrum.

One design aesthetic that many designers learn is how many, or really how few fonts they should use on a page. A website that has been designed will typically only have one or two different font faces (font families in CSS) on the page. But many web designers start out with dozens of different font faces. As they learn more about effective design, they reduce the fonts until they have a workable amount that enhances rather than detracts from the page content.

You Will Become More Discerning by Learning Design

learn design and abandon broken things
Abandon the old and broken designs

Once you start learning how to do design well, you’ll start noticing all the places where it’s done poorly. You’ll notice signs with too many fonts, ebooks with too much white space, and websites that aren’t balanced. This might seem like a bad thing, but as you’re noticing the flaws in designs you’ll also start to notice the sites that are designed well. You’ll start admiring typography and want to learn how to add more contrast to your pages. Your images will get better as you start to recognize well designed photos alongside the web design.

But because of this improved discernment, your entire website will improve. Spacing issues that might have gone unnoticed will start to bug you. And every time an image is resized incorrectly you’ll cringe. If you’re a developer, you’ll want to learn how to fix those things yourself. And if you’re a site owner, you’ll have your list of improvements for your design team.

Do You Agree? Do You Want to Learn Design?

Do you think it will add value? Why or why not? If you don’t already know design, are you going to go out and try to learn more?