40+ Web Design and Development Resources for Beginners


ipsum imageBrian Casel is a web designer and owner of ThemeJam WordPress Themes and CasJam Media. You can follow Brian on his blog at BrianCasel.com or on Twitter @CasJam.

It’s no secret that web design is a fast-growing industry. Virtually every type of business is in need of a quality website. There are opportunities at the large agency level down to freelancers developing small-business websites from home.

So how do you break into this exciting field? With little or no experience creating websites, getting yourself up to speed can be a daunting task. There are so many different avenues of design and development to explore. Which way should you go first? Which skill sets suit you the best?

We aim to give you an overview of a few things things that are essential to a well-rounded knowledge of web design. These are starting-points, if you will. Below each item, we’ve listed additional resources for you to continue on in your learning process.

Before we get into it, heed one important lesson: You can’t become a professional web designer overnight. It takes years to reach an expert level in any aspect of the field. But everybody starts somewhere, and there’s no better time than the present begin your web design education.


HTML & CSS


These are the building blocks of every web page you see. Yes, HTML and CSS are two different things, but they are completely dependent on each other. You can’t learn CSS without understanding HTML. You can’t build an HTML website without using CSS. Let me explain:

HTML is short for “HyperText Markup Language.” It makes up the building blocks of a web page. The language is composed of “tags,” which define various elements on the page. For example, a paragraph of text is wrapped in a paragraph tag, like so:



<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu mollis mauris.</p>


CSS is short for “Cascading Style Sheets.” CSS is used to add style and formatting to your page elements. If HTML is the framework of your house (the foundation, the beams, the bricks), then CSS is the presentation (the paint, the furniture, the decor). The concept of writing CSS is to add definition to an HTML tag, like so:



p {
color: #0000ff;
font-size: 12px;
margin-bottom: 18px;
}


The above CSS code defines all paragraphs to be blue text color (represented by the color code, #0000ff), have a font size of 12 pixels, and have a margin below each paragraph of 18 pixels.

Additional resources:

  • W3Schools – An excellent reference and learning resource for HTML and CSS.
  • W3C Validator – A tool for checking your HTML and CSS to ensure it complies with professional standards for programming — otherwise known as “valid code.”
  • A List Apart – A fantastic website about all things web design, with a focus on web standards.
  • Net Tuts – An excellent resource for web development tutorials.
  • Designing With Web Standards – One of the must-read books on web design, written by “The Godfather” of web standards, Jeffrey Zeldman.
  • CSS Zen Garden – Both fun and amazing at the same time. See what types of design possibilities are possible just using CSS.

Photoshop and Fireworks


adobe image

Whether you’re a designer, a coder, or both, you will undoubtedly be working heavily with one of these graphics programs. Adobe Photoshop (Adobe Photoshop) has been the long-time champion of web design, photo editing, and print design.

Adobe Fireworks (Adobe Fireworks) is a popular alternative to Photoshop. Fireworks is intended to be used specifically for web design, while Photoshop is more of a jack of all trades.

Whether you’re going to be designing websites from scratch, or you’re tasked with programming a website designed by someone else, you need to know your way around these programs. You’ll need to understand the concepts of layers, selections, and saving images for the web.

Additional resources:


Design for the Web


grid image

For many folks, the first thing that comes to mind when you think about web design is programming. But what about design? Effective design for the web is arguably the most important aspect of this craft, yet it’s often overlooked by beginners.

Even if your focus is to become a programmer, it’s still important to have a basic background in design principles as this will help you to relate and collaborate with designers more effectively. Here are a few topics that are well worth your time to read up on:

Grid Design – The process of aligning page elements to an evenly spaced (invisible) grid, which makes for an aesthetically pleasing design.

Web Typography – The art of arranging type, fonts, line spacing, and anything else that relates to the presentation of type content. On the web, there are many factors which affect this, such as varying screen resolutions and designer font serving technologies.

Usability – This is the process of designing a user experience that promotes interaction and eases the user through the site navigation and action flows. This is also related to information architecture (IA), and user experience design (UX). Here are some related resources:

Design Inspiration – Every designer needs inspiration. There are tons of sites dedicated to listing outstanding web designs for you to browse through and formulate new and interesting ideas. Here are a few of our favorites:


A Content Management System


wordpress image

Once you have a solid understanding of the basic principals of web design, you will eventually work on projects that require a “Content Management System” (CMS). These systems provide the ability to manage website content using a friendly interface, rather than editing code. It’s great for setting up websites for clients who want to run it themselves.

There many types of content management systems to choose from. Some are best used for blog or portfolio-type websites, while others are geared to provide E-Commerce functionality. Some are free to use, others are commercial products, while others have both free and paid options. Many CMS systems are self-hosted solutions, meaning you install the software on your own server. Others are hosted solutions, meaning you pay to store and manage your content on their server.

It’s best to focus on just a few in the beginning, and explore more options as you become more experienced. Here are a few we recommend looking into:

WordPress (WordPress) – It has traditionally been known as a blogging platform, but has evolved significantly into a more robust CMS. Check out these WordPress resources on Mashable (Mashable):

Drupal (Drupal) – A very popular alternative to WordPress. Great for a site that requires many custom content types.

ExpressionEngine – Another popular CMS. Unlike WordPress and Drupal, ExpressionEngine is not an open-source project (you have to pay to use it).

Magento (Magento) – This is an E-Commerce system, meaning it provides the ability to manage products, have a checkout process, and other common features you’d find on a shopping website.

Shopify – Another popular E-Commerce system. This one is a hosted solution, which means you pay to store all your products and website files on Shopify’s servers.

This list is just the tip of the iceberg. There are many systems out there worth considering. I recommend finding one that has as strong community around it to turn to for support, plugins, and other extensions.


A Final Word of Advice


palettes image

Network and never stop learning. Follow anyone involved in web design on Twitter (Twitter). Subscribe to as many relevant RSS feeds of web design blogs. Try and learn a new thing every day. Over time, all the pieces will start coming together and before you know it, you’ll be on your way!

I will leave you with a list of tools I’ve found to be extremely useful in my day-to-day work as a web design professional. I highly recommend you check these out:

FireBug – A must-have FireFox (Firefox) extension, which allows you to inspect the HTML and CSS of any web page. You can tweak code on the fly and instantly pinpoint areas in your code which need editing. Great for troubleshooting display issues.

FileZilla (FileZilla) – A free FTP client for Mac and PC.

Panic Coda - This is my code editor of choice. It’s only for Mac. I highly recommend it.

Colour Lovers – A site for browsing and choosing color schemes.

MeasureIt – Another FireFox extension. This one helps you measure pixels on any web page. Very useful when perfecting your page layout dimensions.

Google Analytics (Google Analytics) – This is the go-to tool for tracking your website traffic.

Lipsum – This site generates “Lorem Ipsum” text, or placeholder text for mocking up websites before actual copy is swapped in.

Comp Fight – A Flickr (Flickr) photo search tool. Great for quickly finding images to use in your web design mockups.

VMWare Fusion – A mac application which allows you to run an installation of Windows (Windows) on your Mac. This is helpful when testing websites across all browsers (something you should always do!).

Source:

http://mashable.com/2010/07/23/web-design-resources-beginners/

Enhanced by Zemanta
About these ads

Etiquetado:, , , , , , , , ,

Un pensamiento en “40+ Web Design and Development Resources for Beginners

  1. La pagina de tu Blog se ha actualizado…

    [..]Articulo Indexado Correctamente en la Blogosfera de Sysmaya[..]…

Los comentarios están cerrados.

Zona de Promesas

Tecnología - Internet - Redes Sociales - Entrepreneurship - Música - Economía - Innovación

Fortune Tech: Technology blogs, news and analysis from Fortune Magazine

Fortune's tech team offers analysis and perspective on the world's most important developments.

Top Master | Blog

LOS PROGRAMAS DE MBA Y POSTGRADO MAS INFLUYENTES DE TODO EL MUNDO

La realidad alterna

Diario de sueños, cuentos, poesías y una novela en proceso

TechCrunch

Startup and Technology News

Unencumbered by Facts

Taking unsubstantiation to new levels

Carlos Cordero

Blog de tecnología

PsicoEmocions Blog

Un Pont entre la Psique i les Emocions

TEA PTLS NACHO

AUTISMO.TEA..PTLS

Comunicación & Marketing

De Lilian Lanzieri

Xtratexia

Dirección estratégica para la vida

Notes From The Internet

by Silvia Altamirano

StellarHIRE Partners

Founding Partner, StellarHire Partners - Executive Search Consultants. Recent engagements include Eloqua, SFDC, Tibco and Veeam.

ivanbrunpr's Blog

4 out of 5 dentists recommend this WordPress.com site

Matt on Not-WordPress

Stuff and things.

BLOGTEC

Noticias de Tecnologia.

Talento en Expansión

Tendencias y Mejores Prácticas en la Gestión de Personas de la Empresa 2.0

Two Leaves Tea SPAIN

Great Organic Tea! ✫✫✫✫✫ Te Organico en Piramides

Escuela de Dinero

El mejor Sitio en Español sobre lo básico para entender el Dinero y sus matemáticas relacionadas.

My Blog Daniel Palop

A topnotch WordPress.com site

Intentando dejar huella...

...en cada uno de los visitantes

Ideas Para la Clase.com

Portafolio de experiencias en la clase de español para Middle School.

littlegreybox

like. read. laugh. love.

déborah rueda

Un sitio más pero diferente sobre marketing on line

No solo los 80's

La mejor música de la historia

Molly Balloon's Blog

Identity + Dressing + Colour

El OJO PUBLICO. / Глаз общественности

Ver para contar & contar para ver. / Чтобы рассказать

Think Creative Idea

Marketing, publicidad, web y negocios

Social Media y más

Social Media, Redes Sociales, Marketing, SEO

The Coaching Alliance

El camino hacia el éxito

Luces y sombras de las marcas

Social Media, Marketing y Comunicación

CNN en Español: Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Ultimas Noticias de Estados Unidos, Latinoamérica y el Mundo, Opinión y Videos

Javier GM Photography - México y más.

“En al fotografía, debemos ser auténticos, tenemos que ejercer nuestra capacidad de asombro para poder, a través de nuestras imágenes, expresar emociones, provocar reacciones y despertar pasiones..” ~ Javier García-Moreno E.

Natalia Gómez del Pozuelo

Experta en comunicación y oratoria

aloyn

Alimentación, ocio y negocios, ALOYN, es un Grupo dirigido a Directivos y Propietarios de empresas, interesados en el mundo de la industria de alimentación y bebidas. Tanto por la parte de la industria productora como por la parte de la industria consumidora y/o distribuidora (Distribución Comercial, Horeca, Vending, Venta Directa, etc). También nos interesan las actividades ligadas al agroturismo y el enoturismo como magníficas actividades de promoción y difusión de la cultura gastronómica.

Blog de Jack Moreno

Un blog de Joaquín Moreno sobre recursos, literatura y ciencia ficción

Mashamour

Ensalada de Manjares

Infographic List

For those who love Infographics - www.infographiclist.com

URieLaRtE

hoy es el primer dia del resto de tu vida

be.blog

be. Intelligent Multimedia Education

unmonodelsiglo21

Un pequeño espacio virtual para pasarla bien

Curso Web 2.0

Diseña tu sitio web gratis y consigue visitas!

~~Mente en Gravedad~~

************************************************************************************************************

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 4.355 seguidores

%d personas les gusta esto: