Title
TxtDetailDscrptn
TxtDetailSpecs
|
Welcome to the Online Portfolio of Darryl Butman Designed for display resolution of 1920x1200 pixels or higher. Please allow up to 30 seconds (depending on your connection speed) for site to initialize. Your patience is appreciated! DOWNLOADING VIDEO & ARTWORK... |
FEATURED
UI Design
With over 11 years at NxTV, I've designed many UI variations as the VOD system matured.
The platform provides the latest Hollywood entertainment to guestrooms in the US, Paris and Japan.
Developed out of necessity, a functional product demo, the "Flash Sales CD" was created. Coded to support dynamic content and graphics, each sales demo was tailored for a particular audience.
Developed out of necessity, a functional product demo, the "Flash Sales CD" was created. Coded to support dynamic content and graphics, each sales demo was tailored for a particular audience.
Web Design
Picture-in-Picture VOD UI Design Turns Heads at HITEC 2008
Click the "play"
button (above) to see The Atlantis Resort's "The Blue Project" Coral Reef Conservation video hosted by actress &model, Rebecca Romijn.
The clever interface premiered at the Hospitality Industry Technology Exposition and Conference 2008 (HITEC 2008). The picture-in-picture implementation uniquely combines a looping background video, below a user controllable navigation layer and another video layer.
The clever interface premiered at the Hospitality Industry Technology Exposition and Conference 2008 (HITEC 2008). The picture-in-picture implementation uniquely combines a looping background video, below a user controllable navigation layer and another video layer.
outhern California born and raised, I've lived in the same area all my life. The son of an Aerospace Engineer & a teacher
I pursued the arts, drawing and painting at age four. Continuing on with my father's inspired model aircraft hobby, I enjoyed building,
flying and re-building after mishaps, throughout the majority of my youth.
After finishing High School with honors in Science and Art, I attended Pierce College and graduated with an AS in Electronics. Next, I transferred to California State University Northridge seeking a Bachelor's Degree. With a year's wait to join an impacted Engineering Department, I rested my heels in the Art Building and reemerged with a Bachelor's in Fine Arts a few years later.
I've worked for many companies as a Designer since my graduation in 1993 and continue to satisfy my craving for design excellence in the Web field.
Past Times: Drawing/Painting, Web Development, Building and Flying RC, Rollerblading, Weight Lifting, Camping.
ite Architecture
This site displays art in div-tags. Containers are pre-filled, then hidden or shown. Thus, the code is concealed within a single PHP file (including the preloader). After loading, the page acts like an application and the speed is superior.
Working with a single page has further advantages; coding is quicker and containers can be re-populated/reused.
Color switching is cleverly accomplished by building an empty, semi-transparent layer over a grayscale background image. By changing the div's background-color value, it appears that the background-image switches colors. It's quick, there's no need to switch out backgrounds, a single background is sufficient.
This site's CSS, Javascript behaviors and PHP are hand-coded from scratch. All artwork is originally composed.
This site displays art in div-tags. Containers are pre-filled, then hidden or shown. Thus, the code is concealed within a single PHP file (including the preloader). After loading, the page acts like an application and the speed is superior.
Working with a single page has further advantages; coding is quicker and containers can be re-populated/reused.
Color switching is cleverly accomplished by building an empty, semi-transparent layer over a grayscale background image. By changing the div's background-color value, it appears that the background-image switches colors. It's quick, there's no need to switch out backgrounds, a single background is sufficient.
This site's CSS, Javascript behaviors and PHP are hand-coded from scratch. All artwork is originally composed.
 |
 |
 |
 |
LATEST WORKS
Highly experienced UI Front-End Developer, Web Designer, and Graphic Designer. Educated as a Designer,
I hand-code XHTML/CSS following WC3 standards.
Extensive experience analyzing user and business requirements to provide quality designs. Experience working closely with back-end development team and sales staff. Accomplishments include production of sales materials, Flash product demo and animation, corporate Web sites, and maintaining design consistency in ASP back-end application.
Hand-Coding Skills:
XHTML, DHTML, CSS, PHP, ASP, JavaScript, ActionScript, XML.
Graphic Tools:
Adobe CS3 Suite - Photoshop, Illustrator, Flash, Dreamweaver and MS Design Studio.
Operating System and Hardware:
MS Windows, OS X, PC, and MAC.
Extensive experience analyzing user and business requirements to provide quality designs. Experience working closely with back-end development team and sales staff. Accomplishments include production of sales materials, Flash product demo and animation, corporate Web sites, and maintaining design consistency in ASP back-end application.
Hand-Coding Skills:
XHTML, DHTML, CSS, PHP, ASP, JavaScript, ActionScript, XML.
Graphic Tools:
Adobe CS3 Suite - Photoshop, Illustrator, Flash, Dreamweaver and MS Design Studio.
Operating System and Hardware:
MS Windows, OS X, PC, and MAC.
Download PDF Resume
The change from <table>'s to <div>'s presented an initial challenge for designers to center their websites using
absolutely positioned <div> containers and CSS. We aren't alone, John C. Dvorak, AKA "Father Dvorak",
gripes about
CSS shortfalls here.
Luckly, the centering solution turns out to be a straight-forward one, consistent in all CSS supported browsers. In this example, let's assume the overall width of the website to be created is 600px.
No matter what dimensions the user views the site with, the site will always be centered in the browser.
Luckly, the centering solution turns out to be a straight-forward one, consistent in all CSS supported browsers. In this example, let's assume the overall width of the website to be created is 600px.
- Start by creating a <div> container as wide as the total website width; 600px in this case.
- Use the style position: absolute; left: 50%.
- Next, insert a "left-margin:" style and set it equal to a negative amount that's half of the <div>'s total width. In this case, the value used is -300px.
No matter what dimensions the user views the site with, the site will always be centered in the browser.
John C. Dvorak is bugged by CSS.
It just falls apart in practice noting how Firefox displays CSS differently from Internet Explorer, which displays
differently from Opera."Everyone loses here, from users who can't under stand why things look screwy, to developers who can't get CSS to do the job right, to baffled content providers. And what's being done about it? Nothing! Another fine mess from the standards bodies."
If we could get atleast two of the popular browsers on the same page, than we would be set. Imagine if IE and Firefox rendered code the same way. Every other browser would be forced to follow or die a slow and miserable death.
Fluid Layout Landing Page Extends Nomadix's eCommerce
With a range of Internet access gateways powered by the Nomadix Service Engine (NSE) software, Nomadix provides public connectivity business solutions.
Click the picture above for a detailed view.
Emphasis on 'UI Design Diversity and Flexibility' key to NxTV's IP platform's successes.
NxTV provides video on demand for hotels world wide. Clients include Hard Rock, Four Seasons Hotels to name only a few. Click above for
a detailed view of my Calamos design.
Styles:
<style type="text/css">
html
{
font-family: Arial;
}
#divCentered
{
position: absolute;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
background-color: #00CCFF;
}
#divBody
{
position: absolute;
width: 150px;
height: 275px;
left: 200px;
top: 75px;
background-color: #0066FF;
}
</style>
<style type="text/css">
html
{
font-family: Arial;
}
#divCentered
{
position: absolute;
left: 50%;
width: 600px;
height: 400px;
margin-left: -300px;
background-color: #00CCFF;
}
#divBody
{
position: absolute;
width: 150px;
height: 275px;
left: 200px;
top: 75px;
background-color: #0066FF;
}
</style>
Centering Example