Month: January 2012

Vintage Design

Posted on by djbrensinger

Vintage Design What is vintage design? Vintage Design uses design elements that are “old-fashioned” or vintage. It focuses on design elements that were popular during the 1950s to 1980s or even older. You can create an old-fashioned motif by incorporating specific fonts, colors and graphics from a selected era. By using these specific design elements on your website, you can achieve a look that won’t be considered boring.

While researching Vintage Design for a client, I found the following articles:

  1. Retro and Vintage In Modern Web Design Smashing Magazine defines what retro and vintage design is. They show you the specific design elements that make up the look and provide examples so that you can create websites using Vintage Design.
  2. Vintage Design may use aged or Old-fashioned photos. You can achieve the Old fashioned Photo Effect with modern photos. Change your photos using Photoshop to look like vintage photographs.
  3. Another aspect of Vintage Design is how the backgrounds look. The backgrounds look aged, dark or stained. You can find some Vintage Retro Backgrounds to incorporate your designs.
  4. WebDesignShock has a collection of 175 Vintage and Retro Design Elements. Their collection includes icons, patterns, backgrounds, fonts and more. You can download them in PSD format for including in your websites.
  5. Vintage Design is not complete without fonts that help transport you to the past. WebDesignLedger has collected 30 Fonts Perfect for Vintage and Retro Style Design. Use these fonts to complete the old-fashioned look that you want.

For additional inspiration, check out 50 Retro and Vintage Web Designs to Inspire You.

CSS3 and Multiple Backgrounds

Posted on by djbrensinger

Crearegroup created a video that demonstrates Multiple Backgrounds using CSS3. This technique makes it easier to use background images that grow as your text expands. In CSS2, you needed to use multiple divs to create this effect. This video shows you how to use Multiple Background images using only one div. They also explain that this technique is not bullet proof or usable in multiple browsers. Only modern browsers seem to be able to render this technique. If you would like to use this technique, consider what browsers your visitors use before implementing it on your website.

What do you need to start web development?

Posted on by djbrensinger

Computer CodingEvery web developer needs a set of tools to begin web development. The following list of tools can help you get started:

  1. A good computer with plenty of memory, hard drive space and a speedy processor. Choose the computer that fits your needs.
  2. You’ll want to develop locally; build sites on your own computer. A web server lets you develop and test web sites on your computer whether or not you have an internet connection. You can install a web server likeXAMPP. If you want to go the Microsoft path, you can install their Microsoft Web Platform Installer.
  3. As a web developer, you’ll need to create or edit photographs and graphics. By loading software like GIMP or Adobe Photoshop, you can make adjustments to images for your web site. Even if you hire a graphics designer to make logos for you, you still need a photo/image editor to make minor adjustments.
  4. You’ll need web development tools. There are many tools to choose from. You can build a web site using a text editor like Notepad++ or TextMate. Or you can use a development tool like Dreamweaver, Visual Web Developer or Aptana.
  5. More than 1 browser. Not all web sites look the same in all web browsers. You’ll want to install more than IE to test your designs. If you build mobile, you’ll also want to test it on more than one device or mobile emulator.
  6. Web Tutorials and cheat sheets. Tutorials teach you how to complete a specific task. A task like setting up a web server, creating a CSS navigation or anything else that you need to do. As a web developer you should have a collection of web design and development sites like Web Design Dev or StackOverFlow. A cheat sheet is a short guide that contains tips and shortcuts for a certain programming language, web design technique or framework. Here are 50 cheat sheet for web designers and developers.

Once you have your computer setup for web development, you can start building web sites. You need a knowledge of HTML, CSS and JavaScript to build static websites. From that point, you can choose to build dynamic web sites by learning PHP, MySQL and a content management system like WordPress or Joomla. Or you can choose to start learning ASP.Net, Ruby or Java. Whether you choose the Microsoft or Open Source path, there are plenty of things to learn and tools to use.