Curiosita Labs - Thoughts on programming, web development and design.

Photographing your own background patterns

On February 20, 2012

For certain projects, you may want to use a texture. You have two options: buy one or create your own. When you buy, you take a chance that someone else has used it one of their projects. To ensure that your project is unique and interesting, you can photograph your own textures. Vandelay Design explains How to Photograph Your Own Textures.

After reading this article, I was inspired to take photos to use as textures. I used my Android Phone and Canon PowerShot to take the photos. I used the suggestions by Vandelay Design to experiment with photographing textures. Here are a few results from my experiment:

Oil on Pavement
Driveway Cracks
Salty Driveway
Orange Wall
Industrial

HTML 5 Inspiration

By djbrensinger

On February 4, 2012

In CSS, Design, Web Development

HTML5 can be fun and challenging when you begin to learn how to use it to create your websites. You have new tags and selectors to learn. The way you build your website changes when you use tags like header, footer and aside. You have to build a few sites before you are comfortable with HTML5. Developers like to learn by doing and by reviewing what others have done. Design Modo wrote an article showing you 20+ Professional Examples of Websites Using HTML5. Use these examples to be inspired and to learn how you can use HTML 5 to build better websites and web apps.

Vintage Design

By djbrensinger

On January 31, 2012

In CSS, Design, Web Development

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:

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

By djbrensinger

On January 19, 2012

In CSS, Web Development

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?

By djbrensinger

On January 5, 2012

In Programming, Web Development

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

A good computer with plenty of memory, hard drive space and a speedy processor. Choose the computer that fits your needs.
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.
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.
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.
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.
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.