Posts Tagged ‘CSS’
Part 2 of the “concept-to-completion” series focuses on the Design of a Professional website. In the previous article, Anatomy of Professional Website Design – Part 1, we discussed the Creative Direction, Sitemap & Sketches. The following series will focus on the Development and the Flash Animated Introduction.
Design – now we can crack open Photoshop!
Now that we’ve taken time and analyzed the scope of project, we have our creative direction, Sitemap, and sketches we can now crack open Photoshop. (See the before and after in the captions below)
(Right: Here is a screenshot of the original Photoshop design layout, notice the owners portfolio shot, it was changed towards launch as her clothing color scheme did not compliment the web page design. Left: Plan D Website Sketches gave me an opportunity to establish page structure, draft the homepage splash, interior pages, and other notes.)
This article will concentrate on the full Website Design life-cycle, from ”concept-to-completion”, of a Professional website I recently completed for NAMYnot Multimedia. The goal is to give other aspiring web designers the inside tips, tricks and processes they’ve been yearning for. This will be a 3 part series:
- Creative Direction, Sitemap & Sketches
- Design & Development
- Flash Animated Introduction
Project Synopsis: The anatomy I’ll be breaking down is the Plan D Real Estate website redesign. Plan D Real Estate offers professional services in Residential Sales and Buyers Representation, Residential and Commercial Interior Design Consultation, and Home Staging incorporating Green sustainable friendly materials in the Chicago Metro area. The client did not want a typical realtor website, instead desired a website that showcased the aesthetics of interior design and home staging, as well as a marketing vehicle for the real estate industry.
The scope requested a Flash animated introduction, photo gallery, blog engine, emailing list manager, and the client wanted the ability to manage the content themselves. This instinctively suggested to run the website on a Content Management System. CMS Made Simple, an open source PHP CMS software, was the CMS of choice as it offered all the capability needed natively, and the few features that were not included can be easily downloaded with 3rd party plug-ins. More about the CMS will be covered in Part 2: Design & Development.
As a Web Designer, we sometimes get comfortable in old ways of designing, especially when trying to make your design cross browser compatible. This post is regarding some things to remember when making the leap toward designing with XHTML Strict document type.
This tip focuses on using CSS to replace the background images on INPUT button types. Take a look at the button for my Comment Box, it has plain text over a custom background image controlled by CSS. Below is a breakdown of the code:
Download the Complete Source Files. CSS Tip: CSS Image Buttons
You can find a wealth of methods to place CSS Rounded Corners in your design. This tip will focus on the methods that work for me. The methods mentioned are Pure CSS Liquid or Elastic so they expand with your design. Download the source files for this tip, CSS Tip: Rounded Corners.
Join the Blog!
Categories
- ASP.NET 1
- CMS 3
- CSS 8
- Flash 2
- Freebies 3
- IIS 1
- Interviews 1
- Mobile 5
- Android 1
- Rants 6
- Web & Internet 7
- Web Design 15
- Web Hosting 1
- Web Servers 1
- Website Design Anatomy 2
- WordPress Themes 2