The making of the IB Translations website

Overview   Process  

We start by getting acquainted with translation services and existing websites.

ibt process 01

It’s all very bad. Flags, globes, handshakes, politically correct stock photos. Also, loads of bullshit: every freelancing student claims to have 20 years of experience and guarantees the highest quality.

Analyzing the findings and moving further. We have a boutique translation agency, not a shady “one hour translation” bureau, which is exactly what we need to move away from. Writing down all thoughts and associations in a notebook grouping them by directions.

ibt process 02

Instead of abstract slogans and sweeping statements we need to emphasize the facts: not “here are the logos of our clients”, but real deals and translations; not “a young team of experienced professionals” (which often turns out to be a loose group of unreliable freelancers), but a list of employees with a summary of their qualifications and work experience; not “flawless quality” but “each text is treated by five experts including a terminologist and an editor.” And the mood: the website shouldn’t be shouting to pull in customers and spilling out a fountain of lies as a TV shopping channel, it has to be reserved, calm and confident.

According to the statement of work, the website needs to be in two versions, Russian and English. But the English version of the website is exactly the result of the translators’ work! We get the idea to show versions for both languages at the same time so that clients can judge the quality of work by the quality of translated texts. Adding a slider to compare the translation by the client’s team with the results from Google Translate, by a freelance student translator and a sketchy “one hour translation” bureau. Moving the slider completely changes half of the text on the website.

Creating a sketch of a single-page website to demonstrate the concept.

ibt process 04

The art director likes the idea. Getting ready to present to the client, brushing down the page, replacing the filler content with real text, adding explanations and videos on the margins.

ibt process 05

The client approves the concept. Moving to the detailed design stage, incorporating the client’s comments.

One of the features of the client’s portfolio is a long list of business transactions concluded with the help of the company. Singling them out and placing them in a separate section that starts with an impressive total sum of all contracts which speaks volumes about the professionalism of the company.

ibt process 06

The client asks to arrange the list of deals as tombstones, which is a traditional business deals design format. Studying what tombstones are.

ibt process 07

The second attempt.

ibt process 08

Yeah, they surely have their own way of doing things in the business world. Trying to maintain the standard and make it look pretty.

ibt process 09

A color background will reveal the problem with company logos placement. Margins between company cards eat up the valuable horizontal space (let’s not forget, the site is only half a page wide) and too many lines create visual noise. Choosing the most effective distribution method and starting to typeset the contents.

ibt process 10

Art director: Bottom right is OK.

Spending a lot of time trying to marry visual sizes of dozens of logos.

ibt process 11

Sometimes using blur to easily see visual weight.

ibt process 12

The client asks to maintain the format by aligning the cards by height and to remove the information about the editors. OK. The client also doesn’t want to show the total sum of all deals they handled. Trying to replace this information with other facts.

ibt process 13

Much less convincing and not exactly relevant. Instead, deciding to show the largest deals. For example on a carousel.

ibt process 14

The deals have to be presented in a tombstone format. Trying to use a huge deal card.

ibt process 15

Ultimately deciding to simply put featured transactions on a separate line.

ibt process 16

Typesetting the rest of the materials.

ibt process 17

Art director: The list of translations looks like a design portfolio, as if they were the ones who designed these websites and reports.

Deciding to go with company logos. Then discarding type icons, too.

ibt process 18

The client asks to include links to the original documents. Searching for ways to achieve this.

ibt process 19

To make sure external links do not stand out too much, choosing the last variant and making it even more inconspicuous.

ibt process 20

The Services and Quality section has too much text, trying to introduce some hierarchy. First we add a switch with a sliding frame to choose service types.

The written translations appear to have their own hierarchy. Trying to give it some structure. First, by using a pass-through menu.

ibt process 22

Not OK, it can be confused with a slider and visually it’s not the best style anyway. Trying a different menu that scrolls along with the page. Choosing the best visual style.

ibt process 23

The “Karaoke menu” wins.

The client asks to add a careers section, a location map and some translation-related articles.

While trying to fit the new data we come to realize that the location map and employment conditions are probably not so important as to warrant overloading the website with content. To maintain the single-page layout we decide to use pop-up windows to show additional information.

ibt process 27

Deciding what part of this information is to be kept on the main page and what the pop-up links should look like.

ibt process 26
ibt process 25
ibt process 28
ibt process 29

Combining the map and geotag variants together. There will only be a map preview with the nearest Metro station, while the exact address will be hidden in a pop-up window (you have to make an appointment before you can come anyway).

ibt process 30

Choosing the map style.

ibt process 31

Searching where to put the articles: they will be in Russian only, which means we can’t put them on the main page. Trying to put them in a bar on top.

ibt process 32

Art director: Looks like a “Download our browser” bar. Don’t be afraid to use more space.

Expanding the panel, adding drag and drop scrolling.

ibt process 33

Retypesetting the team section, making the careers link look like a button to add yourself to the team, coming up with an animation.

Inviting the company’s employees to the studio, holding a photo shoot. Thinking about making a group photo but ultimately deciding not to use it.

ibt process 35

Aligning portrait sizes. Beautiful!

ibt process 36

The client asks to add a section that would tell about their ability to understand any professional area, from cattle milk yield to tokamak part names. Coming up with a solution of showing an object with detailed break-down of its parts that have names no one knows about. For example, a diagram of a diamond.

ibt process 37

Art director: The diamond looks sad and noisy. Make me a tasty picture that I would want to pin on Pinterest.

Studying the art director’s Pinterest account. The very nature of our subject invites to draw it in a modern style.

ibt process 38

Making an attempt.

ibt process 39

Art director: You do realize that such style doesn’t match the flat look of the website?

Removing some of the volume, aligning the callouts, adding highlight on hover for the text.

ibt process 40

Working on all the traditional stuff: a favicon, an error page, a preloader, a lorem ipsum page.

Making preloader animation in the style of the website.

ibt process 42

Art director: Sure, very traditional. Want to make a really cool one instead?

Examining the latest development in the world of preloaders.

ibt process 43

Deciding to make one based on a stylized æ ligature.

ibt process 44

Trying to add a cool animation.

ibt process 45

Nope. The ends run away from each other instead of going one after another.

ibt process 46

Nope. The gap changes size.

ibt process 47

Seems OK, but the result is not as we planned. Due to the overlay of straight lines the gap doesn’t appear to be traveling around the symbol. It looks more like a four-leaf clover with its leaves blinking. Expanding it a bit, making lines thinner, slowing down animation when the logo looks the most like a ligature.

ibt process 48

Art director: Cool.

Now the favicon. First relying on Photoshop to scale down the icon.

ibt process 49

Photoshop fails. Rasterization of the typeface in logo also gives pool results. Indulging our passion for scrupulosity and going down to the pixel level.

The technical designer makes the first attempt.

ibt process 50
ibt process 51
ibt process 52

And the second.

ibt process 53

Designer: It only made it worse. The letter ‘I’ had a clear stroke on the left and a semi-clear one on the right, but you added a semi-transparent stripe on the left and the entire letter became blurred. Also, send the results in PNG to make sure JPEG compression doesn’t screw up such subtle things.

Technical designer:

ibt process 54

Designer: Make the letter ‘I’ slightly thicker and more crispy (i.e. make the right stripe of the main stroke more saturated). The letter ‘B’ has a slightly odd shape of the top hole and the bottom arch is blurry.

A couple iterations later the designer himself decides to have a go.

ibt process 55

All that’s left is to make sure a circle is a circle, not a cut-out piece of soap.

ibt process 56

Working on the hinting of the circle. It is aligned along the pixel grid which gives harsh edges on the sides. Removing the “Snap vector tools and transform to pixel grid” checkbox in Photoshop and resizing the icon to achieve round edges (while staying within 16 pixels).

ibt process 57

The final favicon.

ibt process 58

Creating error pages at the first try.

ibt process 59

Trying to add some inconspicuous effects. Like slider highlight on mouse hover, the same as on tabs in Chrome browser. Creating two prototypes with different transformations: using transparency and dislocation.

Transparency wins. Turning the effect down a bit to make it less noticeable and implementing on the website.

To make switching versions of the translation fun, adding some interesting features. For example, the student fails to finish the translation in time because of the exams and the “one hour translation” bureau wants more money for translating glossaries.

ibt process 62

Breaking all formatting in the Google Translate mode as the online translator can’t accommodate “rich” text design.

ibt process 63

Choosing the introductory text. It will also be used as a menu as it will contain links to key sections of the website.

ibt process 64

Trying to make it as effective as possible without looking like a SEO expert’s dream. Counting words and symbols, comparing different options.

ibt process 65

Spending a lot of time positioning the portraits. They have to form a nice mosaic at any screen width and expand on click. The previously recorded video with expanding heads turns out to be unviable, coming up with a new solution. When the technologist gives up, the designer steps forward and together they achieve the right effect of the heads moving out of circles on click.

Finalizing and fixing bugs.

ibt process 67

Creating a video for technologists with bugs and correct animation sequences.

Time to write the announcement. Getting the art director’s approval, typesetting, writing the Process section.

ibt process 73

Testing the website, polishing it some more, launching.

Order a design...