Curiosita Labs

Thoughts on programming, web development and design.

Circuit Board

Category: Design Page 17 of 22

Pretty Does Not Equal Design

By

On May 13, 2013

In Design, Miscellaneous

Art PencilsNotes from the Milwaukee WordPress Meetup “Stop Making Things Pretty and Start Designing”.

Design is more than themes, graphics, fonts or the look and feel of a website. The most beautiful sites aren’t the most successful. People come to your website to solve a problem, get a task done or to learn something new.

Things don’t need to be attractive to solve a problem. Michelle Schulp

Websites like Google and Craigslist have very simple designs. Most people wouldn’t call them beautiful. These sites focus on helping you get a task done instead of looking pretty.

Design is a technique that you can use to solve problems. It can help you to build a website or an app that your visitors will want to use.

Start Designing

Design is fundamental. It helps you to focus your attention on the details and see how everything fits into the final product.

Be deliberate! Everything on a website or web application should have a purpose. The most important question to ask when designing is Why. When you ask why, you can get to the reason for a font, color or photo on a website. You can then determine whether or not it really helps your visitors or just makes the site pretty. Design adds value.

Design is a process. Your job is to help your client and yourself remember that the design is not for you; it is for your customers. To help you do this, use tools like a mood board, style tiles and style guides. They help you to focus on choosing the colors, patterns, fonts and logos before you create a prototype. Gray screen prototypes can help to focus on how the site works before adding colors and fonts.

Related Article

Build a Better Website

By

On April 23, 2013

In Design, Miscellaneous, Web Development

Computer CodingYou’ve built your website. The site gets enough traffic, but you want it to do better. What things can you do to build a better website? Speed, images, navigation and forms can help or hinder how your audience works with your website.

Does your site load fast?

Check your site for speed issues. A slow loading website with make people leave your site if it takes too long. Two of the simplest checks are image sizes and the location of JavaScript in your web page.

Images with large file sizes take longer to download than smaller sized files. You can use PhotoShop or another photo editor to shrink down the size. If that doesn’t work, consider using Smush.it to remove unnecessary bytes from image files.

JavaScript’s location in your web page has an impact on the speed of the site. You need to determine if a specific script need to be in the head tag or placed before the end body tag. When a web page loads, it stops loading the page when it sees a JavaScript. It processes the JavaScript before continuing to load the rest of the page. If you have several JavaScripts, it has to process each one. To improve speed, you need to move the scripts that don’t impact the page immediately to the bottom of your page.

Do you have images that work?

Too many, not enough or even the wrong type of images can turn off visitors. You want the images that you use to help your visitors to decide to stay on your site and to do something. Whether that is sharing your article, buying a product or signing up for your newsletter. To help use images to make your site more usable, 1st Web Designer has some tips on how to use images effectively.

Can your visitors find what they want?

Your navigation menu is an important tool to help your users find what they are looking for. If your visitors have to use two or three clicks to find anything, you need to reconsider how you have organized your site. To create effective navigation, you need to use words that your visitors will understand. Standards like About Us, Home, Contact Us, Products and Services help people to navigate your site. You may want to add features like a sitemap or additional navigation at the bottom of each page. Your design can help visitors too. By being consistent with colors, word choices and images, these design choices can help your visitors interact with your site.

Are your forms easy to use?

Forms that look like a tax form is going to make your visitors leave. You want to build forms that are easy to use, guide the visitor and quick to fill out. If you need ideas on how to build a better form, get inspiration from these 5 Web Form Designs.

By looking at speed, navigation, images and more, you can improve the overall experience for your visitors.

10 Web Fonts for Websites

By

On April 10, 2013

In CSS, Design, Miscellaneous, Web Development

Fonts are a great way to add personality to your websites. Before CSS3, you couldn’t easily add fonts that weren’t supported by the browser. In CSS3, let you add the fonts that you want to use. This means you no longer are limited to fonts using web-safe fonts. By using the @font-face rule, you can add more style to your website. I have complied a list of 10 free web fonts for you to experiment with. All of these fonts can be downloaded from FontSquirrel. You can also download the @fontface kit, so you can easily add the fonts and CSS to your website.

10 Web Fonts for Websites

Links to Web Fonts

Caviar Dreams, Sans Serif
Colaborate, Sans Serif
Comfortaa, Sans Serif
EB-Garmond, Serif
Libre Baskerville, Serif
Lobster 1.3, Script
Riesling, Retro
SciFly, Sans Serif
Limelight, Retro Style
Tangerine, Calligraphic

6 Chocolate Shops to Indulge and Inspire You

By

On March 11, 2013

In CSS, Design, Web Development

What better inspiration than chocolate? Chocolate Shops are fun to visit. You can usually find something to tempt you. From chocolate truffles to old fashioned candies, the following sites tempt you with their products and design.

Chocolate Shops

Indulgence Chocolatiers

They sell exceptional chocolates to the Milwaukee Area and beyond. Their site opens with a banner that shows their chocolate. Each page shows a different picture of chocolate in the header. Their minimal design uses a blue, gray and white color scheme.

Indulgence Chocolatiers

Sweets Chocolates

Sweet’s of Lake Forest sells chocolates, toffees, ladybugs and more. The site opens with a large photo of a Sweet’s gift tray as part of the background. It works with the blue, white and brown color scheme. It has a simple, modern design to help you focus on finding and buying the right chocolate selection.

Sweets

Victorian Chocolate Shoppe

Victorian Chocolate Shoppe is an old time candy shop. Their website has an old time feel. They use elements of vintage design like dark colors, a script font, antique scroll border and a victorian wallpaper like background.

Victorian Chocolate Shoppe

Ashley’s Confectionery

Ashley’s Confectionery makes creamy homemade fudge, finest hand-dipped chocolates, old-fashioned candies and more. The website has a fun, modern look. It uses bright colors like pink, green and blue. The site uses segued shapes to draw your eyes to the call to action.

Ashley's Confection

Gail Ambrosius

Gail Ambrosius makes fine chocolates by hand. Her shop is located in Madison, Wisconsin. The website has a simple, modern look. It uses different shades of browns to create the look and feel of chocolate. The home page shows you different pictures of their chocolate and store.

Gail Ambrosius

DB Infusion Chocolates

DB Infusion Chocolates sells hand crafted chocolates. Their website is like their chocolates is uses a blend of modern with classic elements. It uses vintage design elements like dark, muted colors, paper-like background and chocolate wallpaper for the site background. From modern design, they use contemporary elements like a modern, fun font and simple, yet attractive buttons.

DB Infusion Chocolates

Website Redesign: Moving From HTML to PHP

By

On March 6, 2013

In CSS, Design, Programming, Web Development

I updated Burlington Footwear‘s website. It was a static website built using HTML and CSS. I created this site when tables were the way to build sites. Over time, I changed the pages to use CSS for more of the layout. The site was becoming a chore to maintain. It was showing its age and needed to be changed. The goals for the web site redesign are update to HTML5, use CSS for layout (no tables) and move to PHP. I found a basic tutorial on how to make a PHP Website From Scratch.

Burlington Footwear

Website Redesign from scratch

I started from scratch with an HTML5 template. I rebuilt the page using CSS and HTML5. The home page is a simple two column design. I reused some of the CSS from the old site with slight modifications. It looks similar to the old site but better. I replaced the images used in the navigation with a CSS Navigation List. The site has less images to download which should help make it load a bit faster on all devices. As mentioned in Front End Performance for Web Designers and Front-End Developers, if you can do it in CSS you should.

Moving to PHP

The next step was changing the HTML page to PHP. The site has several elements that are use on every page. To make maintenance easier, I separated the common elements: Header and Footer into separate include files. I copied my original HTML file and changed it to PHP. I added the include files in the appropriate spots. I tested it on my web server. The page looks exactly like the HTML page.

For the rest of the site, I used the PHP file as my starting point. By using the tutorial as a guide, I was able to achieve the structural and programming goals for the redesign.

Page 17 of 22

Previous

Next

Powered by WordPress & Theme by Anders Norén