WROC# conference is a really unique opportunity for industry specialists, .NET enthusiasts, and all thirsty for knowledge to see well-known and respected experts. Their goal is to bring together bright minds and give inspiring talks that are focused on subjects and issues close to the .NET web developer’s heart.

Objectivity had to create a visual communication for the second edition of WROC# .NET conference. They created a set of prints, fully responsive webdesigns, promo animations and social content based on dedicated illustrations.

The second stage was to implement designs as WordPress theme. Objectivity decided to contact Pagepro and do this part together.

DESKTOP walkthrough

Requirements

  • Convert PSD into HTML/CSS templates
  • Implement static files into WordPress Theme
  • Style Guide Development
  • Cross browser & device testing

The Cooperation

Objectivity dev team was fully booked, they needed to focus on projects for their core clients. They decided to outsource whole development part of this project to Pagepro.

Time frame

Whole project took us 6 weeks.

Step 1 Kicking off

As always, first thing was to check if we have all materials. Objectivity provided us well ogranized Photoshop files for web-designs and Illustrator files for vector images.

We've made sure if we have the latest version of the files by presenting them materials summary on FrontendApp (our internal tool), also we've checked if SVG icons are prepared for web-use.

Step 2 Project Architecture

We've listed all sizes, colors, margins, font families and font sizes.

Objectivity provided us specs for animations, so we exported Ilustrator vectors to SVG and started to prepare reusable animations.

All listed items and icons were displayed and explained in first version of style guide.

Step 3 HTML & (S)CSS coding

After preparing project architecutre we started to build HTML & CSS.

BEM Methodology

BEM (Block, Element, Modifier) is an open source technology for developing websites that need to be created quickly and maintained over many years. BEM is used in the front-end development of all Pagepro services.

Well designed SCSS

SCSS structure needs to be well designed and should be refactorized during project life time. Using easy to understand variables for colors and sizes is a must have. It makes code reusable and easier to understand for other developers.

Step 4 Animations

WROC# website needs to be attractive for target audience- developers. We cound't release the project without smooth front-end animations.

On Scroll Animations

Some of website vector images had to be animated on scroll. Two most important animations was: event date block animation (to correspond with WROC# brand identification) and analog clock animation on Agenda Section.

Typing Animations

We have been using Typed.js jQuery plugin to develop typing animations for hero section.

  • <li class="gadgets-list__item">
        <div class="gadget gadget--flop">
            <figure>
                <img src="gadget-flop.png" alt="">
            </figure>
        </div>
    </li>
  • $color_white:             #fff;
    $color_grey_1:            #e4e4e4;
    $color_grey_2:            #a8a8a8;
    $color_grey_3:            #797b7b;
    $color_black:             #000;
    $color_blue_3:            #3e67aa;
    $color_blue_2:            #007cb6;
    $color_blue_1:            #008cc9;
    $color_orange:            #ff4721;
  • Animations

Step 5 Responsive version

We used SASS Breakpoints to create 
the tablet and mobile layouts.

desktop version of the page
tablet version of the page
smartphone version of the page

Smartphone walkthrough

Step 6 Style guide update

Styleguide was been generated automatically based on comments in SASS files. At this stage we've checked if everything generates in correct order and is easy to read and understand.

Styleguide Driven Development is a practice that encourages the separation of UX, Design and Front-end from Backend concerns.

Living style guides are increasingly popular front-end development staples. Integrating a live style guide into your process streamlines workflow, promotes ongoing design cohesion and provides a simple way to visualize how style updates will impact elements site-wide.

Step 7 Fine tuning... and The project is ready!

We did a quality assurance of all pages, then tested the site on mobile and tablet devices. The front-end phase of the project was completed.

We paid attention to both the appearance and the quality of the code, so that it met our coding standards. Finally, we sent a preview of the static HTML files to our client.

Testimonial:

Very reliable, flexible and uncomplicated. Their team produced great results, helping us kick start our WordPress project.

Urszula Koper
Urszula Koper, Objectivity
http:// wrocsharp.com
WrocSharp Screenshot