Contents:
The web itself is fluid and ever-changing. Websites are a bit like children, only they never grow up and leave home. The moment designers stop learning new things about web design is the moment they cease to be relevant. The Internet is all about relevance. There are also new apps, technologies, and tricks that can make your life and work easier.
Remember what I said about being in this for the long haul? This is a part of what I was talking about. Really, you should never jump into any design work first, ever. This means text, photos, contact information, the works. You need it first. Avoid it if you can. I believe that, as much as possible, designers should try to use the real content for the site. They should do this even in their digital wire-frames. The rule to keep in mind is this: The design should be made to fit your content. Once spoken aloud, this seems like a no-brainer. It took me years to figure it out.
Unless the website being built is, specifically, all about images, video, or audio, there will be a lot of text. Indeed, there might be a lot of text even in those cases. Text comments, text descriptions, text reviews, text arguments about the content in question. The Internet is mostly text. It stands to reason, therefore, that typography is the most important aesthetic design discipline to master.
Good-looking text will take you far. Some people have smaller, much smaller, screens. Remember what I wrote above about responsive design? This is where it comes into play. Your website will need to adapt to screens ranging in size from three to forty inches wide.
Others are browsing in different lighting than you, and their screens may be dim. Or, they might just have poor eyesight. This will mean that your design will need contrast, and lots of it. Those awesome, subtle differences in colors and shades will mean nothing to many users. Some people are using touch screens.
These are usually the same people using small screens. As you test your designs with your own mobile devices, you may encounter other usability concerns to be addressed. Then there are the visually impaired. There are people who just use different browsers. People who use text-based browsers.
I could go on, but the point is this: Lastly, remember to design for the sale. Remember, the way you use websites can be different from the way other people do it. What makes sense to you may not make sense to your users. Web designers at every level of skill level forget that from time to time, so be careful. Of course, there are resources that can help you get started, such as What is User Experience Design? This comprehensive article by Smashing Magazine covers the basics of UX design, and includes a massive list of links to other resources. This is also a pretty good time to learn about wireframing.
Wireframing is a process during which you might sketch out some very basic layout ideas on pen and paper first. Later on, you might use a desktop or tablet app to make a more detailed version of your layout. This process is an essential part of deciding, from the beginning, how your website will work. For a fast introduction to basic wireframing concepts, check out Using Wireframes to Streamline Your Development Process. Some would argue that you should learn to code your designs before you bother trying to make them look pretty.
They might be right. For the purposes of this article, however, I wanted to cover theory before practical skills. What looks like a great color scheme to some people can look downright weird to others. It seems very, very subjective. There is a science to making things look good, though.
It can seem like an inexact science, but knowing the basic rules will get you past a lot of problems. Just as in any other creative discipline, knowing the rules is the first step. Then you learn how to break the rules in creative ways, without breaking your website. Remember what I said about learning typography first? The Internet is text. Those words should look amazing. Typography is about more than picking the right font, though.
Typography is about usability. You have to choose the right font sizes, and font types, for example, to make your text readable to the majority of people, on the majority of screens.
You have to set the right sizes for headings and titles to create a visual hierarchy. You have to make your text make sense to the largest number of people possible. This book has everything: You should read the whole book. You can do that online, for free, or order a real-life copy.
Even if you never get around to designing your first website, the advice in this book will improve the look of every document you make. There are a lot of good free ones out there, so look around. Many people, myself included, choose their fonts from Google Web Fonts. Even better, some great designers have gone and compiled lists of font combinations for you to try out:.
For a more advanced typography planning tool, try Typecast. It has a free plan that will suit most beginners and lone designers. Typecast will also give you access to paid fonts not in the Google Fonts library. Another place to look for web fonts: Font Squirrel has a massive library of free fonts for use on websites. Last, but not least, there are a lot of great fonts, free and paid, listed right here at the Webdesigner Depot. We also have a lot of great articles on typography that move beyond the basics.
Look around the site for the fonts some of them are in the Freebies section.
You can find the typography articles here: Color theory has little to do with learning the technical names of colors. Color theory deals with combinations of colors, and the human emotions they can evoke. For a great introduction to color theory, check out this article by Tutsplus: When you finish that article, do check out the two color scheme generators shown at the end. That problem gets worse with screen glare, badly configured screens, and visual impairments. Every website you have ever looked at is made from HTML. Your browser then translates that into what you see on the screen.
CSS tells the browser which font the text is supposed to be, and which colors to use. Learning these languages is simple enough. However, they are also extensive, and can be combined in tons of ways, to make tons of awesome designs. I suggest starting at Code Academy. The explanations are kept simple. You are provided with coding exercises, and live feedback on your work. Once you know the basics, there are a truly staggering number of websites out there where you can learn more.
It is, however, one of the most important technologies associated with web design, and so I mention it here. What can you do with it? Oh, things like fancy slide shows, calling in new content without reloading the page, improving website usability, and lots of other stuff! If you want to learn how to do those things, my recommendation is the same as in the last section: They are just that awesome. Code Academy will also teach you how to use jQuery, if you so choose. It facilitates using JavaScript in web pages by making it easier to select and manipulate the content.
Learn a bit of regular JavaScript. Software can be a touchy subject, with some people swearing by one image editor, and others preaching the good news of their favorite text editor. They can sometimes get pretty intense; but you can safely ignore most of that. This mindset is death to any designer or programmer. Everyone should take time regularly to experiment with new tools, workflows, and processes. If you like them, great! If you feel you need something different, there are lists upon lists of alternatives. Not one of them is quite the same.
They all have their little quirks, and websites can look a bit different in each one. They can also look radically different, depending on how the website was coded. Thankfully, browser capabilities have reached the point where websites are starting to look almost exactly the same in each one. At least website layouts are, in general, no longer a problem.
Is there a site you could recommend for something like that? Pay additional attention to your hosting options. The whole point of templates is choice, so dive in and find one that feels right for what you want to achieve. Customize Your Template As we said in the last step, templates provide a framework. I believe it will match your requests:
Still, the keys to ensuring the quality of your work is to test it in as many environments as possible. We also included screenshots of the pages that you need to go through. While each hosting provider has slightly different control panels, the installation process will be similar. Use this link to get the special deal from Bluehost.
You should start by selecting your plan. If this is your very first one, you should go with the basic one — at least until you explore your options. The one called basic should be able to cover all your needs once you get your website going, and you should consider the prime version once your popularity skyrockets. Your domain name has an important say when it comes to the future success of your website, so you should take your time to come up with something new.
If not, it will provide you with a list of similar names for you to choose from. After you pick out your domain name, BlueHost will take you to the registration page where it will be required from you to fill in your personal info including the billing data. A couple of minutes is all you need. Pay additional attention to your hosting options.
Obviously, the month package has the lowest price, but the other two are great when you want to make a long-term investment. You can feel free to uncheck the rest of the boxes — you can always get them later when you find them necessary. When you enter your new account, you will be given the option to choose a WordPress theme which can make your website look better.
Do this by logging in to your WordPress dashboard. You can accept the offered help or continue alone, the choice is yours. In the upper left corner, you can find the Bluehost button. When you click on it, you will be given many tools that you can use to create your website. As simply as that, your new website will now be live and you can start working on it immediately! The front end is what your visitors will see when they come to your website. Many of the tasks performed on the back-end will be visible on the front end, such as theme customizations, plugin functionality enhancements, and content publication.
Actions can also be performed by you and your visitors directly from the front-end of the website, including commenting and social sharing. To access your WordPress dashboard, you need to type yourwebsite. The Dashboard is the center of website administration.
pleasing, industry appropriate, user-friendly and modern each template selection is. Signing up is simple and there are no strings attached, as you can see below. . They understand their purpose is to make web design easy. . We wouldn't recommend it to people uncomfortable with technology. You fully understand the choice of technology and its long-term implications on your website. You can't build a modern website without these components, and your web developer must be an expert in all three. The remaining technology layers that make up your website are server-side, meaning that they . Free Guide.
It consists of three main parts left-side menu, top toolbar and middle section. The design of your website is essential, and people will form an opinion about your business based on the look and feel of it. Visitors will make an instant decision in 3 seconds or less whether to stay on your site or move on. Depending on the type of the website and the way you choose to build it, you will have some options as far as selecting a design for your site. If you decide to use CMS or web builder, you will be dealing with the pre-made theme and templates. Key things to keep in mind about your website design are the following:.
Content is information that will be presented on your site. Poorly written and badly presented material can frustrate and discourage visitors from staying on your website or coming back. Today, search engines reward by ranking them higher websites that make an effort to create quality content to educate people in their niche. You will have to make sure your content is: It will be important to create evergreen content content that will not be changing much and will appear on the static pages and also important to have fresh content appearing on your website on a regular basis.
Launching your website is an exciting process and people eager to get it live as soon as possible.
With all the excitement, often people ignore the testing step. The testing process can seem overwhelming, and you are not sure where to start. Once your website goes live, you need to have a strategy in place on what to do next and how to maintain your site. Here are some basic things to consider:. Creating a website is not as complicated as it was before.
So, the first thing you should do is to choose a content management system. Although it depends on the site you want, we would strongly suggest self-hosted WordPress. The cost of making a website depends on a lot of different factors. On the other hand, if you want a custom website, you should go much deeper in your pocket.
WordPress is the most popular content management system, and because of that, the internet is swamped with tutorials, articles, videos and different guides that will help you to learn WordPress. Majority of businesses today have gone online. Which means that a lot of domains are unavailable, especially those that end up in. So if you are trying to register a new domain, the chances are it is already taken. So you can focus on building your website, while you can register the domain anytime later. Luckily, Bluehost has made it easy for everyone to make the switch.
After logging in, it takes just one click to secure your site with the SSL:.