The making of the Dragtimes website

OverviewProcess I• Process II

Our work on the concept resulted in a couple of pages. Using them, we now need to create a graphic language and styles of the future website.

Starting with typography. Deciding on the number of styles we need.

dragtimes process 19

Creating the minimum required set of functional and style elements based on those used in the concept.

dragtimes process 20

Deciding on the principle of navigation in the left column and indication of the current page.

dragtimes process 21

Rendering the logo in all required formats.

dragtimes process 22

Putting the top menu in order.

Starting to work on the internal sections. Deciding to create two views for events, a list and a calendar. Showing event load of each month at the bottom.

dragtimes process 25

Moving on to the event page. Using tabs under the cover to implement second-level navigation.

dragtimes process 26

The tabs will contain event description, results and information for visitors and participants, depending on the type of the event.

dragtimes process 27

Next up is the race results section.

dragtimes process 29

Replacing photos with illustrations.

dragtimes process 30

Creating a special set of controls for the rating filter.

dragtimes process 31

Polishing small details in tables. Several parameters are measured at checkpoints, combining them with a bracket.

dragtimes process 32

Adding a separate column to indicate the driver’s progression through the overall record list.

dragtimes process 33

Deciding to use a text icon instead of a car illustration to show drivetrain type: colon, dash, colon. The text car drives left to right. Vroom! :—:

dragtimes process 34

The column selected for sorting will have a diagram of sorted values as a background.

dragtimes process 35

The tables will have a blank line after each ten rows to make it easy to see top ten, top twenty, etc. results. Hard-earned prizes will be displayed for the drivers who made it to the top and their row hover color will match the color of their medal.

dragtimes process 36

Working on the layout to make tables as informative as possible.

dt site process cars

The client has concerns about readability of the tables and asks to try highlighting every other row with a different color. Doing so adds noise to the table, deciding not to use the idea. Explaining the reason to the client: while looking at the table, users read the lines one after another, using the closest emphasis to the right to orientate themselves. Adding different background for every other row will create twice as many elements competing for the users’ attention which would make reading the table more straining.

dragtimes process 38

We end up with quite a few formats for presenting the results. Creating a small diagram to make sure other people working on the project understand their relationship.

While everyone is busy with the diagram, moving on to the new section. Articles are one of the main assets of the website. This section needs to keep the viewers updated from the moment they open it. Experimenting with layout and formats on the first page of the section.

dragtimes process 42

Client: Let’s bring it closer to real life. 8 or maybe 9 out of 10 articles will have photos. I would like you to think about how to create a feed with latest news items here. Right now we don’t use it because we don’t have the tools to do it, but in fact over 40 records were broken at the latest event in Yevpatoria alone and we had no way to immediately cover them.

To maintain the viewers’ interest, giving a new tool to the editors: stories. They will always follow the chronological news block and will be created based on the subject.

dragtimes process 43

To prevent all stories from looking the same, making the grid change depending on the number of articles in the story.

dragtimes process 44

Creating an individual format and indicators for each publication type to allow the viewer to see whether it’s an article, a photo gallery or a video.

dragtimes process 45

Creating rules for adaptive text styles to get rid of gaps on widescreen monitors.

The number of stories on a page is unlimited. Inserting links to interesting sections between the stories. Each section has its own illustration.

dragtimes process 47

Illustrations are also used on the covers of internal pages of each section.

Working with the Photo and Video sections is slightly easier as they share the same logic. Putting all media in tiles on the first page of each section, similar to the main page of the concept. Deciding to get rid of fat white margins, sticking the items together and elaborating the logic of building the page depending on the number of publications.

dragtimes process 51

Clicking a tile will open a quick view, clicking a link will take to the publication page.

dragtimes process 52

Starting to work on the Drivers section. Thinking about the format of the drivers list.

dragtimes process 54

Now the driver page. Here we need to show the driver’s results, information about their cars and achievements as icons.

dragtimes process 55

Working on the driver’s results table. Creating the diagram layout and grouping of results by heats.

dragtimes process 56

Deciding to make a timeline with main events from the driver’s biography. Trying different options for placing the events, settling on a vertical feed.

dragtimes process 57

Drawing achievement icons.

dragtimes process 58

Now the cars. Planning for each car to have a photo of a required format.

dragtimes process 60

Client: Most likely there will be hundreds of cars, not every one of them with a photo.

Senior designer: Let’s make the section simpler by creating a single-level list with photographs that appear on hover, similar to the drivers list. Typeset the car page following the design of the driver page.

dragtimes process 61

Time to work on the online store. Making the first approach.

dragtimes process 63

Art director: Boring. It should look exciting enough to make you want to buy something.

Designer: What if we take high resolution photos but only show parts of them? Then on each product page viewers will be able to look at the photos up close.

dragtimes process 64
dragtimes process 65

Art director: OK. We just need to decide on the presentation format so that the client can use it to take photos of the products.

Writing down requirements for photographs and showing to the client together with the mock-ups.

dragtimes process 66

The client likes it. Preparing the online store for typesetting.

dragtimes process 67

The driver’s account page will be based on the regular driver’s page.

dragtimes process 68

With each new achievement, drivers will get points that they can redeem in the online store. Creating a relevant promo block on the driver’s account page to reflect this.

dragtimes process 69

Working with the Overview mode.

dragtimes process 71

Creating the live search.

dragtimes process 73

Fixing bugs and polishing the layouts.

dragtimes process 74
dragtimes process 75