Here’s A Cool Guide To Getting Started In Web Design

Hello everybody, here’s an article I cam across recently on web design guide and I thought I’d share it on this platform. Enjoy!

Do you want to learn how to design your very first website? Perhaps you’ve designed a few and now you’d like to turn your skills into a career? This article is here to point you in the right direction.

One article can’t cover everything you need to know of course; the skills, tools, and technologies you’ll need to become a reasonably proficient designer, will take months to learn and years to master. Sorry, no. There really isn’t a faster way. But constant learning and development are one of the most enjoyable aspects of this job.

For the designers among us: have you ever told someone “I design websites”, and experienced that cold dread when they reply with, “Cool! Can you teach me how to do that?” I mean, explaining just how much work design can be is difficult. This is especially true when the person asking knows little about computers to begin with. Many people just assume you click and drag everything onto the screen, a bit like PowerPoint, maybe. I will tell you this for free: PowerPoint’s option for exporting “web pages” has not helped. We’re here to help you right this wrong. Next time someone asks you how to design websites, point them here.

Welcome, Ladies and Gents, to the Webdesigner Depot’s guide to getting started in web design. Grab your mice and hug your keyboards, this is gonna be a long one. Coffee is optional, but highly recommended.

WHO IS THIS FOR?

This article is intended for anyone who wants to start designing websites in their browser. It’s also for people who want to start designing websites, period. This article assumes that the reader has had no formal design education whatsoever, no coding skills, and no experience in the web design industry.

THE “MINIMUM REQUIREMENTS”…ARE LOW. IF YOU KNOW WHAT FOLDERS AND TEXT FILES ARE, YOU CAN START. IT’S THAT SIMPLE

The “minimum requirements” for people who want to design their very first website are low. If you know what folders and text files are, you can start. It’s that simple.

However, while getting started is simple, building a goodwebsite is anything but. There are a lot of skills you’ll have to learn. You’ll have to learn about color theory. You’ll need to know how human beings interact with websites, and why they do it the way they do. You’ll need to learn the basic coding languages, namely HTML and CSS.

Then, you might want to learn some basic programming in JavaScript and figure out how to use it to manipulate parts of your website. Then there’s content management systems, search engine optimization, marketing.

And of course, you’ve got to have some great content for your website in the first place. Why on earth do you want to do this, anyway? I mean, you could just hire a professional. You’ve got to be in this because you love learning. You’ve got to be fascinated by the Internet and all of its potential. You need a lot of free time. You don’t, however, need to be an expert in everything. None of the pros are. Some specialize in one area. Some do a bit of everything.

Welcome to the wonderful world of web design, newbie. Be prepared to screw up a lot, and remember to have fun!

How to use this guide

Read just enough to get started. Make your first, probably crappy, website. Come back and read some more. Improve. Repeat.

No really, you probably don’t want to read it all at once. There are a lot of external resources to read, a lot of concepts to wrap your head around. I didn’t learn this in one go. Most likely, neither will you. That’s okay.

We’re designing in the browser

Maybe you’ve been looking around the Web, and you’ve noticed that a lot of people use image editors to design their websites first. They code the designs after, or have someone else do it. Photoshop is the tool most commonly used, but people also use programs likeSketch, GIMP, Inkscape, and Illustrator.

WEBSITES SHOULD BE DESIGNED IN THE BROWSER…BECAUSE PEOPLE DON’T BROWSE THE WEB IN PHOTOSHOP

Look around the web and you’ll see blog post after forum thread debating the benefits and problems inherent in using one tool or another to design your websites. This is good. I’ve always said that people should use whichever tools work best for them. I do, however, make an exception to that rule. I believe that websites should be designed in the browser — ideally in several browsers — because people don’t browse the web in Photoshop.

Besides that, a browser-based workflow comes with several other benefits:

You see exactly what you’re getting. Even high-fidelity mockups don’t convey the interactive parts, or the animated parts, of a website very well. With browser-based design, you can see exactly how the design works.

This is especially true when it comes to responsive design. (For the uninitiated: responsive design is when you create a website design that changes and adapts to different screen sizes. This means that the same website will look, and perhaps work, a bit differently on phones, tablets, and desktop computers.)

Have you ever tried making at least three high-fidelity mockups of every page layout on your website? It’s not convenient. Far better to do it “all at once”.

Browser-based design can make you a better designer. When you do all of the preliminary design work in, say, Photoshop, it’s easy to let things get out of hand: interfaces can get cluttered, designers go wild with the heavy graphics. Leather textures everywhere! (Happily this trend has declined in recent years.) It doesn’t need to happen that way, but it often does. This gets worse if the person designing the website isn’t the person who will be coding it.

That’s one way that designing in the browser might change your approach to aesthetics and visuals. It also forces you to learn more about HTML. And, you learn a lot more about how the different browsers work. Basically, the more you get your hands dirty with code, the better you’ll understand how websites work. That won’t make you an awesome designer on its own; but it’s a great start.

THE MINDSETS YOU’LL NEED

Before you ever open up a text editor and start typing, you need to understand some basic principles. People who design in an image editor like Photoshop might design a website like this:

1. If they’re smart, they’ll sketch some ideas out on paper first. Then they’ll open up Photoshop. As an amateur, I always started with that second step—don’t make my mistakes.
2. They’ll pour their heart, soul, blood, sweat, and tears into their best ideas. Those ideas will form a complete and beautiful design for the home page (probably). Then, assuming they have a boss or client requesting it, they might quickly put together a few other design/layout options.
3. The client will almost inevitably pick one of the “inferior” concepts for reasons of their own. Even if it’s not “the client’s fault”, it can be very, very hard to go back and change designs that you’ve already fleshed out, or “finished”.

This approach doesn’t do anyone any good. Thus, the first thing you need to know is:

Everything’s iterative

Literally every part of your design should be subject to change. Nothing is sacred. If something’s not working, or doesn’t fit the rest of the design, it should go, or be changed. Even once your website is “done” and launched, you might notice bugs, or you might decide to take it in a new direction. The web itself is fluid and ever-changing. While I don’t truly believe in change for the sake of change, you should be ready to adjust when necessary.

You don’t just build a website and leave it there. Websites are a bit like children, only they never grow up and leave home. You’ve got to keep looking after them, updating them, maintaining them.

Do it right, though, and you’ll get a fantastic return on your investment.

You can never stop learning

The moment designers stop learning new things about web design is the moment they cease to be relevant. The Internet is all about relevance. Seriously, if your website looks too dated, chances are that many visitors won’t stick around to see what you have to say. Perception is everything.

You don’t need to re-design every six months, but you should always be reading more, discovering new design heroes, and talking with other designers. Like any doctor, lawyer, or other professional, you’ll need to keep up with what’s new.

It’s not all shiny new design trends. 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? Yeah. This is a part of what I was talking about.

Content matters above all else

We’ve already established that, when creating a website, you should never jump straight into creating the graphics. Really, you should never jump into any design work first, ever. The first step in designing a website is ensuring that you have the website’s content. This means text, photos, contact information, the works. You need it first. This is non-negotiable.

THE FIRST STEP IN DESIGNING A WEBSITE IS…THE WEBSITE’S CONTENT…YOU NEED IT FIRST. THIS IS NON-NEGOTIABLE

You might have seen people filling up their designs with dummy text called “Lorem ipsum” text. You might also know it as “Latin text” or “Greek text” even though it actually has very little to do with either language. It’s just dummy text, designed to show what a design will look like when filled with content. 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.

This practice provides a much better idea of just how much space you’ll need for your content, and can help to avoid lots of bugs and problems later.

The rule to keep in mind is this: content should not be made to fit your design. 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. No, I’m not alone in that.

Corollary: typography basically is web design

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 mostlytext.

It stands to reason, therefore, that typography is the most important aesthetic design discipline to master. If people can read your content, you’re golden. Don’t get me wrong, all of the design disciplines are important; but start with typography. Good-looking text will take you far.

You browse the Web differently than your users do

You’ll want to remember that people browse the Web with different devices, and in different environments. You’ll need to account for this in different ways.

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. This isn’t easy, but it’s worth it. It’s worth it because if more people can actually use your website, they’re more likely to buy what you’re selling.

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. You’ll need to account for this by making sure that links and buttons are easy to tap on with fingers. 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: your users’ experiences with your website will vary, sometimes greatly. Never forget that.

You’re selling something

Lastly, remember to design for the sale. And yes, you’re selling something. Even if you’re just blogging about your personal experiences, you’re still selling yourself. You’re selling your experiences, presumably on the premise that they are of interest or provide value to your readers. For a blog, that might just mean making sure people can find the posts they’re interested in quickly and easily. For a brochure site, that might mean designing each page to best show off the product’s/service’s awesomeness, while making it easy to actually buy the thing.

Factor this into everything about the site, including the content and the site’s actual layout. People need to see what you’re selling, and be convinced that they want it. Fast. They need to be shown that there’s an easy way to take action based on what you’re selling. If you’re a blogger, that action might be to subscribe to your blog. If you’re selling a product or service, it might be to give you money for said product/service.

THE SKILLS YOU’LL NEED

If you want to do this professionally, you’re going to need a variety of skills. Here, we’re going to focus on the skills required for actually designing and building a website. You’re also going to need business and communication skills, of course. When you’re ready to learn all you can about that, check out the Business category here on WDD.

For now, we start with the first things you need to know.

User Experience Design

User Experience, — or UX — design, in this context, is all about knowing how most people use websites and translating that knowledge into a superior site design. It’s a process, it’s a philosophy, and it’s a lot of work. 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 asWhat 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. Once you’re done with that, make sure to read UI vs UX: what’s the difference?, by Dain Miller. (You’ll sometimes see terms like “UI (user interface) design” and “UX design” used interchangably, and that gives people the wrong impression.)

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. Pen and paper, or a drawing program on a tablet, is ideal for the sort of quick, rough concepts you’ll be working with.

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 outUsing Wireframes to Streamline Your Development Process. For a more extensive introduction, complete with a long list of resources, read A Beginner’s Guide to Wireframing.

Aesthetic Skills

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.

Aesthetics: It’s a tricky thing. What looks like a great color scheme to some people can look downright weird to others. The fonts that feel “just right” to you can look totally wrong to your business partners. 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.

Typography

Remember what I said about learning typography first? I wasn’t kidding. The Internet is text. It is words. 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.

Here to help you do that is Butterick’s Practical Typography. This book has everything: excellent explanations of typographical concepts, the rules of typography, great examples, and one of the most British-sounding titles I’ve ever heard. You should read the whole book. You can do that online, for free, or order a real-life copy. Do it. 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.

If you don’t want to read the whole book, check out the short version. In literally less than ten minutes, you’ll learn the very least of what you need to know.

After you’ve learned the rules of typography, you might want to try picking out some fonts for your project. There are a lot of good free ones out there, so look around. Many people, myself included, choose their fonts from Google Web Fonts. Google fonts allows you to directly “embed” the fonts for use in your website, so that’s convenient. Even better, some great designers have gone and compiled lists of font combinations for you to try out:

If you want to make your own pairs of Google fonts, check out The Web Font Combinator. It’s a tool that allows you to quickly preview font combinations in a sensible way. For a more advanced typography planning tool, try Typecast. It has a free plan that will suit most beginners and lone designers. If you start working with others, and you really need to give them editing access to your font planning, the pricing isn’t bad at all. Typecast will also give you access to paid fonts not in the Google Fonts library.

Another place to look for web fonts: Font Squirrel. Font Squirrel has a massive library of free fonts for use on websites. Unlike Google, embedding them isn’t as convenient. You’ll have to do it yourself. If you want to learn how to do that, here’s a great guide. Before you do that, however, you may want to skip on ahead and learn some basic HTML and CSS first.

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: http://www.webdesignerdepot.com/category/typography/

Color Theory

Color theory has little to do with learning the technical names of colors. So, if your client asks for fuchsia, but really wants hot pink, you’re on your own. (<– Real life experience.)

Color theory deals with combinations of colors, and the human emotions they can evoke. It’s actual science. For a great introduction to color theory, check out this article by Tutsplus:An Introduction to Color Theory for Web Designers. When you finish that article, do check out the two color scheme generators shown at the end.

Remember that color theory also has implications for your website’s usability and user experience. For example, if the color of your text is too close to the color of your background, people won’t be able to read it well. That problem gets worse with screen glare, badly configured screens, and visual impairments.

HTML & CSS

HTML stands for “Hypertext Markup Language”. Every website you have ever looked at is made from HTML. HTML is what tells your web browser whether it’s looking at plain old text, an image, a link, a video, and so on. Your browser then translates that into what you see on the screen.

The language makes a website look pretty is called CSS, and it stands for “Cascading Style Sheets”. CSS tells the browser which font the text is supposed to be, and which colors to use. CSS also defines your website’s layout, how buttons look, how big or small everything is supposed to be… you can even animate stuff with it.

Learning these languages is simple enough. They’re the easiest computer languages you might ever learn. However, they are also extensive, and can be combined in tons of ways, to make tons of awesome designs. It’ll take you a while to learn how to use them properly. I suggest starting at Code Academy. Code Academy is a site where you can learn HTML and CSS, as well as a few programming languages, all for free. 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.

Basic JavaScript (optional)

Javascript, as stated before, is a basic programming language that allows you to manipulate the content of your website in ways that HTML and CSS alone can’t handle. However, you don’t actually need it. It’s also an order of magnitude more complicated than basic HTML/CSS. Oh, it’s incredibly useful, but for your first website, it’s not essential. 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: Code Academy. They are just that awesome.

jQuery

A side note: Code Academy will also teach you how to use jQuery, if you so choose. jQuery is essentially a library of stuff that other people already made with JavaScript. It facilitates using JavaScript in web pages by making it easier to select and manipulate the content.

If you didn’t understand any of that, that’s okay. Start with HTML and CSS. Learn a bit of regular JavaScript. Look at other people’s code… a lot. Between that and the Code Academy course, you’ll start to figure it out.

THE TOOLS YOU’LL NEED

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. Still others will shout, “No! You’re all wrong!” On and on the arguments go. They can sometimes get pretty intense; but you can safely ignore most of that.

EVERYONE SHOULD TAKE TIME REGULARLY TO EXPERIMENT WITH NEW TOOLS, WORKFLOWS, AND PROCESSES

Others don’t get quite so excited over the apps they use. However, they do get comfortable in a particular app, and they don’t like change. This mindset is death to any designer or programmer. Everyone should take time regularly to experiment with new tools, workflows, and processes. You might not have the time to do it constantly, and that’s okay. There’s something to be said for “If it ain’t broke, don’t fix it.” My point is that you should never be afraid to experiment with something new, especially in this industry.

So here’s what I’ll do: I’ll list a few great, free tools. If you like them, great! If you feel you need something different, there are lists upon lists of alternatives.

The full set of modern browsers

Ah, the browser. You might know it as “Chrome”, or “Firefox”, or, God forbid, “That Blue ‘E’ Thingy”. 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. You’ll need to test your website and make sure it looks right in as many of them as possible. 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.

Still, the keys to ensuring the quality of your work is to test it in as many environments as possible. If your desktop/laptop computer runs Windows, then you already have Internet Explorer (the Blue E). You’ll also want Firefox and Google Chrome, at least.

On a Mac, you’ll have Safari, but you’ll have trouble running Internet Explorer. It’s doable, but annoying. If your computer runs a Linux derivative like Ubuntu, you can test Safari 5, and Internet Explorer 8 and below—It must be noted that IE 8 and below are the most painful versions of IE to work with, and are hardly in use anymore. Indeed, Internet Explorer is falling out of favor in general, and fewer people use it every year. What’s more, Microsoft will release a new browser altogether with Windows 10—with Play on Linux.

Mobile browsers

Your mobile browser testing will be limited by the devices you own. That said, the well-known mobile browsers all have fairly similar capabilities.

Word has it that Firefox for the iPhone/iPad is in the works for release this year. You can, however, install Chrome, and Opera Mini right now.

On Android devices, you can install Chrome, Firefox, Opera, and Opera Mini. No Safari love, though that’s no surprise. Apple likes to keep things “in the family”.

You think this a lot of browsers to test? There are tons more! However, their user bases are comparatively small. When testing in browsers, you have to play to the majority; or you’ll drive yourself crazy.

Wire-framing tools

Pen and paper (or a drawing app)

I mentioned before that you’ll want to start your wire-framing on pen and paper, or perhaps in some sort of drawing app. This is important. It’s very rare for anyone’s first ideas to be their best ideas. Using quick, disposable wire-frames to start with allows you to refine your ideas a little bit before committing to anything at all.

Drawing apps

Once you’re ready to start making your real wire-frames, the ones upon which your code will be based, you’ll need a wire-framing app. I’ve chosen Google Draw (that’s what I call the drawing app in Google Drive) because it has everything I need. It comes with all of the basic shapes I could ever want, great sharing features, and live collaboration. That’s right, if I’m working with someone else, we can make changes to the same wire-frame simultaneously.

I’ve done it before. It works. It’s awesome. Oh, and you get about 15 GB of free space to work with. It’s web-based, so it works on any desktop OS. It doesn’t seem to have a tablet version, which disappoints me. Well, you can’t have everything.

For tablets, we have a list of apps that can get the job done here:How to design wireframes on your tablet.

A code editor

A code editor is really just a glorified version of Notepad. I may have just made a few techies sputter and curse, but it’s mostly true. The difference is that these text editors come with lots of extra functions designed to make coding websites and programs easier. Remember what I was saying about people getting obsessed with their software? It gets bad with the text editor crowd.

Remember, if anyone asks you about “Vim” or “Emacs”, back away slowly without breaking eye contact. That’s your only protection.

This is one of those times when you’ll have to experiment and see what you like best. You can literally build websites in Notepad, if you want to. It’d get painful and tedious after a while, but you can.

So which one should you start with? I’m going to say Brackets. It’s still under active development, but it’s stable. It’s free. It works on Windows, Mac, and Linux. It’s designed specifically for people who design and build websites in the browser.

An image editor

You might not be designing websites in Photoshop anymore, but you’ll still need to create and edit individual images. Whether they’re photos, logos, or icons, you’ll need something. Again, use whatever works for you. That could be Photoshop, GIMP, Paint.Net, or one of the Corel apps.

A local server (semi-optional)

Lastly, you might want to install a web server on your personal computer. A web server is usually used to tell the Internet at large, “Check it out! There’s a website here.” Basically, a web server gives everyone permission to look at the specific files that make up your web site.

Unless you have a scary-amazing Internet connection, and an equally scary-fast computer, you won’t be opening up your server to the Internet. Instead, you can install a server to imitate the way things work online.

Learning how to work with a server on your computer can save you a lot of time when you upload your files to an actual hosting server. So yeah, you probably want one, even though it’s not strictly necessary.

For the sake of ease-of-use, I’ll say to start with XAMPP. You can install it on Windows, Mac, or Linux, and you’re good to go.

AN EXAMPLE PROCESS

Let’s say you’ve gained a certain proficiency with all of the skills and tools you need to build your first website. Alternatively, we could say you want to try your skills out for the first time. Whatever the case, it’s time to put everything you’ve learned to use. I’ve put together an example process that you might use while designing and coding your website; but but don’t take it as gospel.

Play with it. Modify it. Personalize it. While there are certain things that simply should be done first, a lot of the details are up to you. Your process affects the outcome, almost more than anything else, including your skills and abilities. Make sure it works for you, and any clients you might be working for.

Get your content together

Get it from your client, or write it yourself. You could hire a copy writer and a photographer, or look for decent stock images. Whatever you have to do, get the text, images, and what-have-you together and organized.

If you’re writing content for yourself, I suggest reading just about everything written over atCopyBlogger. They have years and years worth of advice about how to write good content for the Internet.

Content Architecture

Note: Content Architecture probably isn’t the technical term. It’s one I use for this step, because Information Architecture was already taken.

Once you have your content together, you need to decide how it’s going to be organized. What’s going on the home page? What’s going on the other pages? How will these pages be connected to each other?

This structural organization is paramount, and will dictate many aspects of your site’s design (especially the navigation), how you organize your files, everything.

Here is an example of a mind map that I made for a client some time back, detailing the content architecture and navigation structure for a mid-sized site. This site included basic pages advertising a few services, and a product catalog:

Note: I used Google’s drawing application for this, too.

Wireframing

Now, take everything you learned about wire-framing from the articles linked above, and have at it! Start with disposable wire-frames, and iterate quickly. Give each page of your site no more than, say, half an hour. (Actually, that might be a lot.) Remember, these first wireframes need not be very detailed. Create the basic layout, and nothing more.

Once you’re ready, move on to your wire-framing application of choice. Create more detailed versions of the wire-frames for each page, including as much of the actual content as you can. Don’t forget to include individual elements like forms and buttons. Try to define, as much as possible, exactly how the user is expected to interact with each page.

If you have a lot of the same type of page, for example, in a product catalog, just make one of each type. No need to make more work for yourself than you’re already doing.

Creating Style Tiles (or some equivalent)

So you have your website structure, planned. That’s great! If the fonts, color scheme, typographical styles, and other aesthetic stuff hasn’t already been defined by a style guide, now is a good time to pick them.

Style Tiles are a great way to do this. Here’s an explanation of what Style Tiles are, straight from the official website:

Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web.
They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
Style Tiles are similar to the paint chips and fabric swatches an interior designer gets approval on before designing a room.An interior designer doesn’t design three different rooms for a client at the first kick-off meeting, so why do Web designers design three different webpage mockups?

The files you download from this website will be Photoshop files. They’re meant for you to play around with until you find the right combination of fonts, colors, and imagery to use as a guide while you build and style your website.

Coding

Basically, you open up your text editor and your main browser, then you start typing. You keep typing code until a page forms in the browser that is a combination of the structure you planned in your wireframes, and the style you planned in your style tiles. Then you keep typing code until you’re happy with it. It’s all about iteration.

The text editor I linked to above, Brackets, has a great feature for this part. Hit the “Live Preview” button on the right side of the Brackets window, and it will launch a browser window for you. (You need Google Chrome installed for this.) The browser window will update live with any changes you make.

During this part of the process, you’ll find yourself re-sizing the browser a lot, to see what your website looks like at different screen sizes. You’ll make typos, figure things out through trial and error, and spend lots of time going back and looking for those typos I mentioned.

People used to clicking and dragging things onto their canvas may get quite frustrated, at first. Once you have your workflow in place, however, designing in the browser can be a speedy process.

Testing

Once you have all of your basic code in place, it’s time to start testing your website on all those browsers I mentioned earlier. More bug fixes may ensue.

Don’t sweat the really small inconsistencies between browsers, to start with. (If you’re testing in Internet Explorer 8 or below, don’t sweat the big inconsistencies.) Just make sure that people have access to all of the information on your site. The goal is to make sure that people can see what you’re selling, and take some form of action based on what they read and see.

If some browsers show some pixel-for pixel differences, that’s fine. That’s life. The most important thing is to make it work.

Launch

Ready to put your website online? Have a domain name (example: mywebsite.com) and hosting (space on a computer that’s constantly connected to the Internet)? Upload those files, kick back, relax, and…

THINGS TO DO POST-LAUNCH

Fix the things you forgot.

Oh. Right. That thing… you meant to fix that before launch. How did you forget that? I mean, come on!

It happens to everyone. There are almost inevitably post-launch bugs. The bigger your site is, the more likely it is you missed or forgot something. For your convenience, here’s a pretty thorough pre-launch checklist to go through:http://boagworld.com/mobile-web/pre-launch-checklist/

Ask Questions

You don’t know everything you need to. You’ll always run into new problems and challenges, techniques and browser bugs. You’ll spend lots of time asking professionals how to accomplish things, and researching those same things.

I’ve said this many times, but Google is your friend. Also, before you ask a question, see if someone else has already asked it on Stack Overflow, a site where people discuss various computer languages and how to make stuff with them.

Often, you’ll find that discovering the answers you need requires searching for very specific words and phrases relating to the technologies in question. Do your reading first, and get familiar with the lingo. It’ll make getting help a lot faster.

Get feedback

You can’t improve unless you know where you’ve made your biggest mistakes. Time and experience can teach you that, but others can teach you faster.

When you’re just starting out, I’d suggest that you join a community too build a network of fellow designers who can help you out with feedback. One of the most well-known and longest-running communities is the Sitepoint Forum.

Do it all over again

Maybe it’s been a year or so months and your site needs a re-design. Maybe you’re building a new one. Whatever the reason, it’s time to take all the skills you’ve learned, the knowledge and experience you’ve gained, and do it again.

Lest I forget, don’t forget to share with others

Source: The article was posted by   EZEQUIEL BRUNI  @ Web designer depot

Image source: Google