Welcome to the new design of iA.net. We redesigned everything. From the layout, to the font, to the logo. We are preparing for the 15-year anniversary of iA in November and the 10-year anniversary of iA Writer in September. There are rough edges. Tell us if you find anything that needs polishing.

This is a full width picture. It doesn’t have much to do with the design. Except that it shows how powerful content gets when the visual design stays in the background.

Say again: What is new?

Everything is new. The iA, the font, the layout and the way we handle links1, footnotes2, captions and titles. There is a new font. It’s another Quattro, from the hands of a bloody amateur. Amateur means lover. Be nice to people in love. Yes, it has ink traps, and yes, it comes in different grades and has all sorts of specials like a ligature for the iA logo. We rethought how articles work on large screens. We get an atypical amount of traffic with large screens. So we asked ourselves: How can we use the space better than just making the font bigger and we came up with this crazy layout:
See, this is what you’d see if you used a desktop or a laptop or a tablet to look at the site. Pinch in to be stunned.

What is this?

It’s a three column layout.3 On the left you see titles, in the middle the text and on the right you see footnotes, captions and links? Say again, links? Yes, we figure that it would be nice to show where a link points to so you don’t have to hover. Therefore, we treat links like footnotes. Or better: Sidenotes. There is room for improvement on mobile, but for now we put the footnotes reference on the bottom and scroll you right there. We are proud of the headings on the left. They allow you to read the whole body text in one go without disruption. They allow you to quickly scan long articles and pick out the chapters you want to read. Again, there is room for improvement on mobile, where we’d like to introduce Wikipedia style folding, sooner than later.

What is important?

This design has been influenced by previous websites. We wanted to close circles. We have done these footnotes before, and we have done the boring home page before. And for ages we have avoided lines like the devil. There are a couple of lines in the tables, because tables have rows.
This is a picture from our office in Tokyo. Just that.
Let’s see another Footnote4 before I tell you what else to look for. One thing we are proud of is the new iA Writer page. Why? There is not much there isn’t it? What we did there5, is unique. We used CSS to show screen shots. The cool thing is that it automatically picks the screens from the platform you are accessing the page with.
  • Mac? Mac screenshot!
  • iPhone? iPhone Screenshot!
  • iPad? iPad Screenshot!
  • Android? Android screenshot!
  • Windows? Windows screenshot!
  • German? Everything in German!
  • Japanese? Everything in Japanese!
  • No keyboard extension? Everything without keyboard extension!
  • You get it…
Not only can we scale one screenshot to five platforms, but we can translate them in a gazillion of languages, with/without keyboard, keyboard extension or titlebar, etc. It’s simple math. With this, we do one screenshot in HTML, translate it in 10 languages, done! If we had to do screenshots, we’d have to do 10 (languages) x 5 (platforms) x 3 (states) x number of screens. Hundreds of screenshots. As of now, we have not yet done all the screenshots with all the variations. We are working on it. Beta testers wondered “why is the light iA all night now?” It isn’t. If you see it all in black it’s because your device is set to night mode. And we respect that displaying the site in night mode.

What do we expect?

Tell us what you think. If you find obvious mistakes, tell us. Via mail. Write to [email protected]. Don’t take this too seriously. Report if you think we have missed something important. We’re happy to hear that you like it. All honest and good hearted feedback helps.

Another H3 because H4-6 still have a bug in this layout

This is the moment where we need to test lists. Let’s look at how they are formatted and learn what is not ready yet:
  • Some videos are badly formatted
  • All videos on the iA Writer main page are missing.
  • Some Screenshot Examples on iA Writer page are missing
  • Screenshot variations are needed! With and without keyboard, extension, etc etc.
  • Design and About us are a mess
  • The downloads page needs visuals
  • We want to do many more examples in Support with iA Writer chrome
  • Screenshots of iA Writer for iPhone should use Quattro
  • Variable fonts with better grading are needed
  • Italics need a bit more work
  • Vertical spacing on smaller viewports
  • Horizontal spacing on smaller viewports (esp. footnotes!)
  • Missing translations for iA Writer and many :/ other pages
The real list is way longer than this. We’ll add to it as I go.

Who worked on this?

CSS and templating has been done by Taher Ali who has been very patient and thorough. Oliver has been designing this for over a year, on and off. No iA design would be the way it is without Takeshi, or Pedro. Richard and Yu have helped, Nicolae has helped cleaning it up. Project manager Iain was as central to it being built as ever. John has been working on the support section. Yumiko has made key calls. Momoco and Aki were a major influence. There were many contributions of beta testers. Thank you so much, Kris, Jürgen, Mehran, Dmitry, Rafael, Theo, Andrei, Johannes, Frank, Robin, Marianne, and Adrian.
  1. Links are blue, the URL is displayed on the right, sometimes with a comment, sometimes we repeat where the link points to. This one points to ia.net ↩
  2. Footnotes are displayed right next to the body text. That is, if you use a desktop, laptop, or a big tablet. ↩
  3. This design is new, but then again it is not. Webdesign is 95% typography, and traditional typography has come up with these tricks a long time ago. What is new is making all the tricks work fluidly over different viewports and platforms. As mentioned before there are rough edges here and there. It’s a never ending process. ↩
  4. Hey, here is another footnote! ↩
  5. You’ll have to figure out via the menu how to get there. ↩