Nikolay Shipilin - Designer/Developer/Photographer

Web Development
Web Design

Web Design

Online AppProcessLive

Technologies used

  • HTML5
  • CSS3
  • jQuery
  • PHP
  • Google Maps API
  • MySQL Database
eCommerce Project

eCommerce SolutionProcessLive

Technologies used

  • XHTML
  • CSS
  • jQuery
  • PHP
  • MySQL Database
  • OpenCart eCommerce solution
Web Design Process Piece

Development & SEOProcessLive

Technologies used

  • HTML5
  • CSS3
  • jQuery
  • PHP
SEO for Web Page

Development & SEOProcessLive

Technologies used

  • HTML5
  • CSS3
  • jQuery
  • PHP
Web Design

Web Design & PhotoProcessLive

Technologies used

  • XHTML
  • CSS
  • jQuery
  • PHP
Web Design

Branding & Web DesignProcessLive

Technologies used

  • HTML5
  • CSS3
  • jQuery
  • PHP

Web Design & SEO
Web Design

Old Site

Old site

The client had a web page for at least 5-6 years and the previous design was obviously done as a sliced Photoshop document exported as a table-based layout. It had very little information readable by search engines. Most images were compressed and yet the page was very heavily loaded on machines with average internet download speeds.
The goal was to redesign, rebrand and restyle the page as well as organize it to be much more visible to search engines and light loading on most popular platforms and browsers.
I rolled up the sleeves and got to work.

Color Shift

Color palette

The decisions on changing the color palette were made to reinforce the products' appearance. Beige and brown tones are most common in lath and plaster textures and I found complementary colors would be in the reflex blue to cyan color range. The transformation began.

Elements & Textures

Textures & Elements

Plaster textures, logo, design elements all organized and wiggled with to match the color choices.

Photoshop is my tool

Designing in Photoshop

Photoshop is my design tool: pixel based and full of magic. This layout of the homepage was put together in less then 4 hours. Many elements had to be moved around and adjusted but it was ready to be shown to the client as initial proof of layout.
Sure enough they liked it with minor changes to content and positioning of the elements.

Navigation

Navigation choices

The drop down navigation allows the client to show main categories with several sub divisions of services and related documentation. Appropriate photo galleries and samples of work were desired to be categorized within the main divisions. Finaly, the drop down menu was easy to manage with additional listings and sub categories if necessary. Unordered lists within lists were used along with jQuery to produce animations.

Call to Action

Call to Action

A call-to-action is absolutely necessary for any construction site since its main purpose is to bring sales to the client and promote public relations and awareness about this local construction contractor.

Search Engine Side Thinking

Search Engine tweaks

More ahead thinking about SEO. A list of services provided and described on each related page. Also important for local business is areas served as well as cities accessible for the business.

Little Details

Details

Little details matter and providing a visual reference to downloadable document types is a necessity.

Functionality

Forms and Functionality

Contact forms are designed to be simple, straight forward, require all of the information necessary for potential project. For security purposes the form is validated in both front- and back-end: front-end by JavaScript via jQuery form validator, and back-end by PHP for server side in order to prevent spam and security breaches. Future projects may include a databse design in order to keep statistics and contact information for clients.