SZW Schwarzwald Music Website | Layout Development

General layout developed for the Facebook page using all of the functional and graphic elements requested by the client. He only wants a single page which conveniently allows visitors to listen to his featured audio tracks, watch featured videos and check his list of upcoming events which link to Facebook Event pages. To conserve space he'd like scrollable boxes for each content module. Instead of a menu for navigating subpages, he requests a prominent horizontal menu of social networking links. Instead of audio player, he'd like to embed audio tracks from his Sound Cloud account.  Similarly he'd like to use You Tube embeds from his You Tube Channel.

Unfortunately, we cannot use this image of velvet curtains as a frame in front of You Tube video embed as he would like. I have suggested choices:

• keep current curtains as frame for JS or Flash slideshow of images
• find another image of curtains or some other image with more rectangular opening to use as background image to frame video embed.

 Client's original "lipstick grunge" mockup:

Mirror Match Color Layout

Color layout for the early development of the general look & feel for the website. Found a portfolio of "couples" photography on Veer.com that suits the clean contemporary style and target audience mainstream young adults. The photo for the landing page was chosen because its more visually interesting than the standard head on shots. The dynamic positioning of the subjects from the side could be used (after a horizontal flip) to point toward the center where the key message will be.

Mirror Match General Layout

General layout for creating a custom skin for the dating scripts I am purchasing to develop dating website. The DatingSoftware Vplus software includes every social networking and matchmaking feature the client seeks as well as some additional feature to engage members and monetize the sight.

CBC Web Design: Glossy Black Theme and its inspirations.

 [Click images to enlarged]

Finalized mockup for CBC welcome page. 

Compare to the 2 primary examples provided by the client:

the use of featured content boxes for layout

hip tekky design with dark background and metallic text

I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:

http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header

http://www.ttthings.com/   starry background

http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

CBC Web Design: Glossy Black Theme and Grid layout established

Finally getting a clear design direction for the CBC website. I needed something to reflect the client's 3D mantra and taste for chrome and gloss. The clients has objective of bring technology to an otherwise old fashioned traditional church. I wanted the design to reflect the churches respected history and tradition while looking toward the future and technology. The content was based on clients example websites like Bethel Baptist Institutional Church which used "advertisement-like" boxes to feature church activity. A flashy Jamal Bryant Ministries (refers to style and type of web site) inspired the black, glossy, metallic theme. An homage to the traditional shield type logo was used but with a Web 2.O twist. See previous post.

But I have to use my own design aesthetic for this Tradition meets Technology theme. Unique. Geometric. Coded with color. Metaphorical motifs. Far removed from the ubiquitous kitschy church websites.

I took inspirations from the following dark websites:
http://wearecyan.com/  teal/charcoal palette; icon use; cool background texture for header
http://www.ttthings.com/   starry background
http://www.futuretalent.org/ photo extraction with colored glow fade into black background; content box - glossy black w/ bright icon - MAIN INSPIRATION for sidebar in my theme

Red Arrow marks "fold" line. All above the fold stays fixed.
Blue arrow marks options for featuring up-datable "events" info -  the main body, sidebar module, button link.
Yellow arrow points out the phrase "steps" that unifies the visual "shoes" concept with the client, CBC mission on the move theme.

Nuli! Nuli! Project: Wushu Logo Design Finalized

I have completed a logo design and web page graphics for the Wushu concept using photoshop. I simplified the sillohette and added some angularity before incorporating with text. I made the text slightly 3 dimensional with a smooth gradient effect (avoiding typical glossy style as you requested). To characterize the wushu action and emphasize the "work hard" charge, I gave the text a slight deformation.

The finished logo (and arrows) has a flexible transparent background. As requested I did not replace the links with buttons; instead I also produced color coded arrows to make its interactive interface more obvious and give clarity to the web sites functionality. They can easily be removed from the table cells. Client was very happy with the design so far. Neither of us were happy with the button style yet.

Related articles

• Clever Logo Designs That Speak For Themselves (noupe.com)
• Essential Logo Design Tips (brighthub.com)
• 33 Cool Logo Design Inspirations You Should Check Out (matamala.wordpress.com)
• Handwritten Logo Design (matamala.wordpress.com)

Nuli! Nuli! Project: General Layout and Styling

Errot Fix | Zero Padding to Rid Unwanted Space

Working on subpages for the NS project, I decided to build my own html page with divs instead of a Photoshop generated table layout. But I couldn't get rid of this unwanted top space, even after setting the margins to zero. (didn't have this problem with table layout)

Padding the body at zero solved my problem. To be on safe side by default zero your margins & padding to avoid undesirable spaces that you didn't specify. The following code sets my layout to "zero" by getting rid of any unwanted spaces brought about by the browser. Note the auto margin in the outer div also centers the layout (see previous post). Need to start every new web page with this basic code to avoid headaches!

body {
padding: 0; 

margin: 0;
background-color: #D66D29;
}
#wrapper {
padding: 0;
margin: 0 auto;
width: 1200px;
}

Note To Self: Centering Web Page

1. WARNING: If exporting web page from Photoshop don't forget to take into consideration which SETTINGS to choose greatly affects your centering options.
2. The DEFAULT - TABLE based layout - allows you to easily center the web page in DW by right clicking in the white space, the choosing "center" in the drop down menu of the "Edit Tag - Table" dialog box. (You can also add the background color by editing the background of the table.)
3. Choosing a CUSTOM - CSS based layout - will produced nicely named DIVs but the CSS will include ABSOLUTE Positions which can't easily be centered by normal CSS methods. You will have RE-LAYOUT the slices using new CSS. A real pain for any complex layout.
4. Now to center webpage using CSS, you must use AUTO MARGINS for a DIV that wraps the entire layout which I usually enclose in MAIN or CONTENT DIV ( "text-align: center" is the fix needed for IE ) See this example used for my designables.net web site:

/** center web page in IE6 add text_align:center;

re-align left in wrapper **/

body {
color: #CCC;
padding: 0;
text-align: center;font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
}

/*** center web page: add auto margins outermost div; 

but re-align text center to make up for IE fix  ***/

#wrapper {
width: 670px; 
text-align: left;
border: 0px; 
padding: 0;  
margin: 0 auto; 
}

Natural Solutions: Design Solution with product spotlight

Working on body now that header is about complete. After reviewing the clients product inventory list, I decided to feature each of the vendors top sellers on the home page. I offered to provide copy for the client who has been to busy to contribute much. I chose a quote by the owner from a local newspaper article to use for the slogan text. She was very pleased. I'll use the article and brochure text I was given for the Welcome / About Us pages. Still waiting on content for services and FAQs.

Natural Solutions improved artwork helps web design, but rectangular shape still has constraints.

My first design solution was limited by inability to resize the original 437 pixels with even more destruction of the image. In this mockup the image was transformed to 600 pixels wide.

The new clean image provides a decent quality for a design solution; how ever there are some constraints to the possible compositions due to its rectangular shape. If I break up the primary elements of the artwork, the lady from the stripes I will have more possibilities for design solutions.

designables simple one page site design

 

I chose a simple one page layout for my initial website. I duplicate the gradient border used on the logo foe containers to feature content. I wanted a simple design that won't clash with the projects displayed in the "featured" box. I haven't much content to spread over a few pages. Until I build up a portfolio I will simply feature some projects on the page and provide a space for contact with a simple form at the bottom instead of a separate page. Later I can add navigation bar and pages for portfolio, services, etc.