The making of the Spetskabel website
We start by visiting the plant to see the production process.
![spetskabel site process 0](spetskabel-site-process-0.jpg)
Studying the brief and creating a draft of the structure of the future website.
![spetskabel site process 1](spetskabel-site-process-1.jpg)
Making the first attempt to gauge our understanding.
The result looks fairly standard. Playing with the layout grid.
![spetskabel site process 3](spetskabel-site-process-3.jpg)
Of all the designs we try to develop the one with the panel to the left.
![spetskabel site process 4](spetskabel-site-process-4.jpg)
The art director has a revelation. He asks to assemble a huge tower of cables on the main page. Sketching.
![spetskabel site process 5](spetskabel-site-process-5.jpg)
This direction is worthy of further exploration. Trying to apply previous ideas to the new concept.
![spetskabel site process 6](spetskabel-site-process-6.jpg)
Choosing the white-colored design and assembling a prototype with the rest of the pages in line with the main scenario.
While we prepare the presentation, we come to realize that we need image banners that would add volume to the tower and draw the viewer into visual interaction.
![spetskabel site process 8](spetskabel-site-process-8.jpg)
Trying various shapes of the banners, deciding to go with the ring.
The art director advises to show all our ideas to the client, just in case. Putting everything together and showing.
![spetskabel site process 10](spetskabel-site-process-10.jpg)
The client chooses the tower and asks to demonstrate page scroll mechanics.
Moving on to the rest of the pages. First, the catalog.
![spetskabel site process 12](spetskabel-site-process-12.jpg)
As the website is being assembled, the graphic design department is busy creating the catalog. Using our previous study of filtering a catalog by specifications.
![spetskabel site process 13](spetskabel-site-process-13.jpg)
Working out filter mechanics on a prototype.
Drawing a few cut cables for the main page with real cables as samples.
![spetskabel site process 15](spetskabel-site-process-15.jpg)
In a way, any cable can be seen as a set of cylinders of various diameters, curves and textures. We need to choose an illustration program that would allow us not to draw each cable from scratch. Deciding to use a 3D editor along with Photoshop for finalizing. Cinema 4D would work perfectly. Starting the process.
Preparing the first most simple model.
![spetskabel site process 16](spetskabel-site-process-16.jpg)
There are 13 cylinders here. Each cable core has the Twist modifier applied to it, which is used to show cores of all cables. The conductor that runs along the cable screen is twisted in the same way.
Creating the first render.
![spetskabel site process 17](spetskabel-site-process-17.jpg)
Finalizing in Photoshop.
![spetskabel site process 18](spetskabel-site-process-18.jpg)
In some models the degree and nesting of the twisting is higher, but the same modifier coupled with proper grouping of the cylinders still works well.
![spetskabel site process 19](spetskabel-site-process-19.jpg)
Some cable types have braided armor. Finding a way to show it, too.
![spetskabel site process 20](spetskabel-site-process-20.jpg)
Making sure we look at all cables at the same time to maintain continuity.
![spetskabel site process 21](spetskabel-site-process-21.jpg)
Rendering all illustrations in high resolution.
![spetskabel site process 22](spetskabel-site-process-22.jpg)
Using these images to write guidelines for the client on creating new ones.
![spetskabel site process 23](spetskabel-site-process-23.jpg)
Working on quick order mechanics. Clients can’t place an order directly on the website but it’s important to allow them to send as much information to a manager as possible.
Creating a static banner and searching for metaphors for the Company page.
![spetskabel site process 25](spetskabel-site-process-25.jpg)
Trying to bring the idea with cables to life.
Continuing to work on the remaining mock-ups. Choosing shots for information pages from a specially conducted photo shoot.
![spetskabel site process 27](spetskabel-site-process-27.jpg)
Adding automatic image switching on scroll to the sales page.
Putting together a standard page complete with graphs, formulas, lists, tables and illustrations.
![spetskabel site process 29](spetskabel-site-process-29.jpg)
The projects and clients list needs to be ranked by categories and weight. Searching for the best presentation.
![spetskabel site process 30](spetskabel-site-process-30.jpg)
Creating a detailed page with contact information, a map and useful directions.
![spetskabel site process 31](spetskabel-site-process-31.jpg)
Adding search by product parameters for advanced users. Making sure the more traditional search bar with category-based search results is also available.
![spetskabel site process 32](spetskabel-site-process-32.jpg)
Looking for metaphors for error pages.
![spetskabel site process 33](spetskabel-site-process-33.jpg)
Drawing technical graphics, fixing the layout and launching the website.
![spetskabel site process 34](spetskabel-site-process-34.jpg)
![spetskabel site process 34](spetskabel-site-process-34.gif)