The making of the Dragtimes website
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](dragtimes-process-19.jpg)
Creating the minimum required set of functional and style elements based on those used in the concept.
![dragtimes process 20](dragtimes-process-20.jpg)
Deciding on the principle of navigation in the left column and indication of the current page.
![dragtimes process 21](dragtimes-process-21.jpg)
Rendering the logo in all required formats.
![dragtimes process 22](dragtimes-process-22.gif)
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](dragtimes-process-25.jpg)
Moving on to the event page. Using tabs under the cover to implement second-level navigation.
![dragtimes process 26](dragtimes-process-26.jpg)
The tabs will contain event description, results and information for visitors and participants, depending on the type of the event.
![dragtimes process 27](dragtimes-process-27.jpg)
Next up is the race results section.
![dragtimes process 29](dragtimes-process-29.jpg)
Replacing photos with illustrations.
![dragtimes process 30](dragtimes-process-30.jpg)
Creating a special set of controls for the rating filter.
![dragtimes process 31](dragtimes-process-31.jpg)
Polishing small details in tables. Several parameters are measured at checkpoints, combining them with a bracket.
![dragtimes process 32](dragtimes-process-32.jpg)
Adding a separate column to indicate the driver’s progression through the overall record list.
![dragtimes process 33](dragtimes-process-33.jpg)
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](dragtimes-process-34.jpg)
The column selected for sorting will have a diagram of sorted values as a background.
![dragtimes process 35](dragtimes-process-35.jpg)
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](dragtimes-process-36.jpg)
Working on the layout to make tables as informative as possible.
![dt site process cars](dt-site-process-cars.gif)
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](dragtimes-process-38.jpg)
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.
![](dragtimes-process-40-big.gif)
![](dragtimes-process-40-big.gif)
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](dragtimes-process-42.jpg)
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](dragtimes-process-43.jpg)
To prevent all stories from looking the same, making the grid change depending on the number of articles in the story.
![dragtimes process 44](dragtimes-process-44.jpg)
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](dragtimes-process-45.jpg)
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](dragtimes-process-47.gif)
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](dragtimes-process-51.jpg)
Clicking a tile will open a quick view, clicking a link will take to the publication page.
![dragtimes process 52](dragtimes-process-52.jpg)
Starting to work on the Drivers section. Thinking about the format of the drivers list.
![dragtimes process 54](dragtimes-process-54.jpg)
Now the driver page. Here we need to show the driver’s results, information about their cars and achievements as icons.
![dragtimes process 55](dragtimes-process-55.jpg)
Working on the driver’s results table. Creating the diagram layout and grouping of results by heats.
![dragtimes process 56](dragtimes-process-56.jpg)
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](dragtimes-process-57.jpg)
Drawing achievement icons.
![dragtimes process 58](dragtimes-process-58.jpg)
Now the cars. Planning for each car to have a photo of a required format.
![dragtimes process 60](dragtimes-process-60.jpg)
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](dragtimes-process-61.jpg)
Time to work on the online store. Making the first approach.
![dragtimes process 63](dragtimes-process-63.jpg)
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-64.jpg)
![dragtimes process 65](dragtimes-process-65.gif)
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](dragtimes-process-66.jpg)
The client likes it. Preparing the online store for typesetting.
![dragtimes process 67](dragtimes-process-67.jpg)
The driver’s account page will be based on the regular driver’s page.
![dragtimes process 68](dragtimes-process-68.jpg)
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](dragtimes-process-69.jpg)
Working with the Overview mode.
![dragtimes process 71](dragtimes-process-71.jpg)
Creating the live search.
![dragtimes process 73](dragtimes-process-73.jpg)
Fixing bugs and polishing the layouts.
![dragtimes process 74](dragtimes-process-74.jpg)
![dragtimes process 75](dragtimes-process-75.jpg)