TC Magazine Style Guide by Tech Crewsaders

GENERAL STYLES + PRACTICES SECTIONS IN THE MAGAZINE f

STARTERS

ANDROID KITKAT LAUNCHES BY JINWOOK LEE

BY STIAN MIKALSEN Spotify is a digital musicstreaming service that gives you on-demand access to millions of songs on all your devices. There is both a free and premium version—the latter of which is based on subscription plans. Some of the benefits of the premium version include unlimited streaming of music and no ads.

NEWS OPINIONS SHORTS LIFEHACKS SNIPPETS AND RAMBLINGS THE MERGE GOOGLE PLUS AND YOUTUBE BY CALLUM MCEACHEN

ven those who dwell in the darkest of caves will still have heard of the day YouTube was merged with Google+, or, in other words, the day Google shoved it’s social networking site down our throats. It was the day the Internet exploded with rage, anger, and frustration. Campaigns and petitions immediately popped up in all corners of the interwebs, but till this day Google has not responded to the voices of these netizens.

Google has just taken the newest swing in the fight agains iOS with their release of Android 4.4, dubbed as “Android Kit-Kat”.

However, the inevitable eventually happened. I had just returned from Cambodia and wanted to comment on a video and BAM, “Create a Google+ profile to comment”. I refreshed the page, hoping it would disappear, but it just would not leave. I finally gave in and created an account and re-uploaded my profile picture (because the people at Google are too lazy to transfer it from my old YouTube Account), but there were still some problems. I actually had to edit my picture because Google deemed it “too dark” and so kindly edited it for me to make it brighter, and then I had to spend more time trying

to get back to the way I wanted it in the first place, without those magical Google Enhancements. Of course, Google is a very powerful business and it knows it can get away with doing anything short of murder with few consequences and naturally, everyone hates change, especially if it involves doing something they will never need, want or use. But eventually we will adapt to the new ways, even if we still dislike the changes. Not very long ago, YouTube went through a major redesign of its entire

On October 31st, 2013, Google finally unveiled their latest operating system— Android Kit-Kat—and to match it, a new smartphone named the Nexus 5. This reference-design phone (manufactured by LG) is the first to be equipped with Android 4.4, and it’s electrified the market. Specs, display, price, there’s nothing it lacks. The Nexus 5 also works unlocked, so you can use it anywhere in the world, without a contract.

site with new video layouts, menus and navigation. Everything was brand new, from the buttons that used to be there to the buttons that never existed, effectively turning YouTube into a fully fledge Google product. It was clear at the time that the changes to YouTube would not end with the outer coat of looks and design but would, in time, extend to every cog in the system. After the redesign, creating new accounts on on YouTube, a service that was once been of independent entity from Google, became very Google in nature. From the demand for you to use your real names to linking your YouTube accounts with your Google accounts, it seems as though Google wants to be part of everything in my life, from my emails, now my videos, and probably, in the future, my identity.

COURTESY OF NESTLÉ

Those of you who have YouTube accounts have been asked to get a Google+ account for a very long time now. This thoroughly annoyed me personally, because, at that time, I was pretty sure the number of people who used Google+ was pretty much similar to the total number of people who, for whatever reason, still use MySpace.

The true highlight of the OS launch hides behind something called “Project Svelte”. This makes Kit-Kat a welcoming release in that it can now support more low-end devices than previous updates. Google set out to make the Android 4.4 more accessible to older, cheaper devices; instead of the 1 GB of RAM encouraged for the previous version, 4.4 now only requires a minimum of 512 MB of RAM to be able to be used comfortably. This way, more phones can experience the benefits of KitKat.

you relevant information without having to search for it. Searching Google on Android 4.4 is easier, through a more accurate voice search (that listens 25% better), and a new portion of the home screen dedicated to Google Now and it’s cards. The message application has also been changed into Google Hangouts so all messages from Google Plus and SMS can be viewed in one place. The overall user interface is also improved. The transition across different screens is smooth and multitasking is more efficient with fewer crashes and lags. The general aesthetics also underwent a small redesign with more whites and greys than the all-black predecessor. Icons are bigger and less cluttered, making for a more organized visual. However, the general looks will still stay similar to the past Android 4.1 and 4.2. So, when will you be able to get Android 4.4? That’s up to your smartphone’s manufacturer and when they release an update to your model. Good luck, all you Samsung-endorsers, as Samsung’s says that updates are “in due course”. (Don’t expect it anytime soon)

Regardless, I use Spotify and believe it’s a phenomenal application for those who really enjoy listening to music as you can get unlimited access to any album or artist. If you want Spotify Premium you have to be in one of the countries where Spotify is available and download it there. And as long as you have the premium version of Spotify you should be able to access music anywhere internationally.

Back in September of 2013, Apple released its newest iteration of iOS 7, and marked the biggest release of iOS since Steve Jobs showed the world the first iPhone in 2007. As Evernote’s CEO, Phil Libin, puts it, the day iOS7 Launch was “the biggest day in technology ever. There has never been another day like this in the history of the universe where hundreds of millions of people will see a big change to something that they’re used to. Nothing of this scale has ever occurred.”

BY DHIRA KHEWSUBTRAKOOL AND JUSTIN KAE

—8—

COURTESY OF STEPHEN LAM—REUTERS; JEFF SCOTT; JUSTIN SULLIVAN—GETTY IMAGES

CHANGING MILLIONS

AND THE FUTURE

• • • • • • •

Outer border color Content area border Section title Article titles Bylines Drop caps Text Heavy

This section is where short pieces are added similar to newspapers. The content of this section can range from important news, to special tips on doing something (ie. life-hacks etc.) The normal length with the section is 2 spreads or 4 pages (A4).

The custom title page Header styles Large and powerful images

In the magazine there are 2 in-depth articles. Their length, based on text, is around 1600 words to 2400 words and their length, based on spreads, is around 2-3 spreads per article. WE want to keep this section image heavily while still maintaining a large amount of text.

Over the last two years Apple’s technique of imitating the user interface as ordinary objects (skeuomorphism), from the green felted Game Center to the leather stitched Notes app, have intimidated designers the world over. For the many, it was regarded as the “new Comic Sans” of user interface, but using skeuomorphism is not necessarily a decision that Apple can avoid. Apple’s genius has always been in creating innovative user interface that look and feel like something much better than the future, but in order to achieve such a goal, skeuomorphism has to be used. From the very first folder icon on the Mac, skeuomorphism has been crucial to advancing and maintaining Apple’s reputation for “intuitiveness.” The iPhone is testament to why skeuomorphism and imitation must be used to bring to this world a truly innovative product. The hardware was beautiful and the skeuomorphism user interfaced allowed it to be approachable for millions and millions of consumers around the world who had never had a smartphone. If skeuomorphism was not used, the iDevices we know of today may not have taken off the way we had seen in the last few years.

IN-DEPTH ARTICLES • • •

THE WHY

COURTESY OF ROB WAUGH

SHORTS/STARTERS

—5—

FLATTENING

THE BIGGEST REDESIGN

EXAMINING

Piracy is still a big issue in Asia but the premium service’s ability to offer a more convenient way to get musical content is near unbeatable. Ofcourse Torrenting is free, and you could theoretically capture a streamed track in all its 320 kbps glory, but free accounts should adress this illegal alternative,.

THE LAUNCH

THAT ANY PRODUCT EVER HAD

THE IMPACT

Today, Spotify is a popular service in Europe and America, but has yet to come to Korea and many other countries. Currently Spotify is only available in 35 countries, mostly in Europe, but is also now available in Australia and the U.S.A. However Spotify is slowly moving towards Asia as it launched in Singapore, Malaysia and Hong Kong earlier this year. However due to piracy concerns, Spotify has refrained from entering the Asian market on a wider basis.

One benefit of Android 4.4 is the increased integration of Google Now. Google Now is a search assistant giving

—4—

WHY SPOTIFY IS NOT HERE

But it has now been 7 years and hundreds of millions of people around the world have grown accustomed to use them, and thus the market is, without a doubt, ready for something new, something exciting. Skeuomorphism is no longer a solution to a problem but instead a problem that needs a solution. Enter Jony Ive’s iOS 7.

—9—

For each in-depth article there is one A4 page dedicated to the title and custom layout design/art for the section’s content.

NEW YEAR NEW DEVICES What we’re interested to get in 2014 LG G FLEX LG G Flex has a vertically curved display and it is a little flexible. It has a great battery life, and the performance is just awesome.

SONY ALPHA 7/7R

SONY SMARTWATCH 2 Despite all the new inventions involving watches connecting to their phones, there has never been a great smartwatch. There have been many such as Pebble and the Galaxy Gear, but now Sony wants to step up their game with their sequel to the failed SmartWatch, with the SmartWatch2.

As the first full frame mirrorless camera both the Alpha A7 and A7R boast unparalleled image quality for their compact sizes, and are able to compete toe-to-toe with some of the notable DSLR cameras dominating the market (Nikon I am looking at you) for a lesser price.

SAMSUNG GALAXY NOTE 3 Samsung’s New Galaxy Note 3 has a great performance with the long battery life. The display itself is really beautiful, with the 1080p super AMOLED panel. It also sports the top of the line Snapdragon 800 processor making a stellar performer. The key feature for this phone is having the ability to shoot in 4k video (thats 4 times the resolution of 1080p.

READ MORE ABOUT IT

PRODUCTS/DEVICES • • •

READ MORE ABOUT IT

•

READ MORE ABOUT IT

COURTESY OF ACER, APPLE INC., DELL, LG. SAMSUNG, SONY

READ MORE ABOUT IT

• • READ MORE ABOUT IT

SAMSUNG GALAXY GEAR Although the Galaxy Gear piece has great potential in terms of features, the question remains whether the watch is really worth the asking price of $299.

APPLE MB PRO WITH RETINA DISPLAY 13’

Pictures must solely be the product. No background, or other distractions. You will need to use Photoshop and press images. This section will act as a buffer zone before the features.

Our laptop choices for 2014 DELL XPS 12

ACER ASPIRE S7

SAMSUNG ATIV BOOK 9

READ MORE ABOUT IT

—16—

Title and Tag line Colorful background Very image heavy with drop shadows Complete articles are not included. Only their summary or 1st para. QR codes are used to link to the full articles Arrows used to show product names and descriptions

—17—

This article gains inspiration from the book Big Data: A Revolution by Kenneth Cukier and Viktor Mayer-Schonberger. Cukier is the data editor for the Economist and Mayer-Schonberger is professor of Internet governance and regulation at the Oxford Internet Institute, Oxford University.

BIG DATA DATA COURTESY OF WIRED

PATRICK TOMHON

FEATURES When you open up a book, play a CD, or even watch a VHS tape you’re utilizing a method of storing data created by man. One of man’s greatest weaknesses has long been his incapacity to remember, to recall his past experiences, ideas, or memories. It has been the inability of man to collect information and store it in large accessible quantities within his brain that has led him to create technology such as writing to enable us to store information that we need or that we think others may need in the future. From the great library of Alexandria to British trade records to the library of Congress, data has been compiled throughout human history. Yet only in the past fifty years has data taken on a new meaning in the lives of billions. Since the advent of the digital age we have looked at data in terms of bytes, gigabytes, etc. The growth of digital data was slow at first, but exponentially ballooned to quickly overtake analog data by the end of the twentieth century. With the growth of even stronger computers in the twenty-first century, data has become something that we no longer only directly create but something that we also create indirectly.

1 TERABYTE

20 TERABYTES

120 TERABYTES

330 TERABYTES

A $200 HARD DRIVE THAT HOLDS 260000 SONGS.

PHOTOS UPLOADED TO FACEBOOK EACH MONTH.

ALL THE DATA AND IMAGES COLLECTED BY THE HUBBLE SPACE TELESCOPE.

DATA THAT THE LARGE HADRON COLLIDER WILL PRODUCE EACH WEEK

460 TERABYTES

530 TERABYTES

600 TERABYTES

1 PERABYTE

ALL THE DIGITAL WEATHER DATA COMPLIED BY THE NATIONAL CLIMATIC DATA CENTER.

ALL THE VIDEOS ON YOUTUBE.

ANCESTRY.COM’S GENEALOGY DATABASE (INCLUDES ALL U.S. CENSUS RECORDS 17902000).

DATA PROCESSED BY GOOGLE’S SERVERS EVERY 72 MINUTES

• •

Similar to in-dept articles there is a dedicated title page with a unique design/layout This section will require more than text and images. Info-graphics and rich graphics (ie. Time lines, charts) will be needed

The feature section is rich in both text and images in the same way that indept articles are designed. However in order to maintain the reader’s attention for these very long feature articles infographics charts times or any other form of rich medium other than pure text must be used

—29—

KEY CHARACTERISTICS: • •

by william tomhon & ian kim

The Portrait Cover Text heavy

THE RISE, REIGN AND [POTENTIAL] FALL OF YAHOO’S MARISSA MAYER

—34—

COURTESY OF MICHAEL REMY STEINEGGER—WORLD ECONOMIC FORUM; YAHOO; ANNA SHER

ONCE UPON A TIME... In 1975 Marissa Mayer was born into a middle class home with two working class parents—far from the glamor and glory of a yet to be born booming Silicon Valley. A small-town girl from Wisconsin, her first job was not designing a computer or electrical circuitry, but working at a local grocer as an inventory manager during high school. (Although she was highly exceptional at school in math and science, she was day-to-day far from living the life of the prodigy we are familiar with today’s startup CEOs.) Taking ballet lessons, baking brownies, ice skating; just a small town girl, with ambition. However, the significance of these humble beginnings would become forever more important from this seemingly simple and typical childhood, one of the world’s most powerful executives arose. The upbringing of Marissa Meyer would transform into an American Dream consummate, despite the criticisms American meritocracy has received with the seeming fall of the American education. Meyer’s journey to unprecedented success did show first glimmers when she entered Stanford University.

BEYOND THE CEILING Four years after admission she graduated top of her class. Her excellence served her well as she entered a nascent, but potentially ground-breaking, Google, as its 20th employee. She was Google’s first female engineer, making headway into an industry dominated by otherwise maybe not macho but still male personalities, paving the way for more women to rise up in the field. Even then she was seen as proof that, no matter your gender, the Silicon Valley valued talent.

However, by no means was Meyer’s time at Google insignificant. Part of what Google is today is because of Meyer’s work at the company. Through her crucial and momentous work on nearly every Google product: Search, Images, News, Maps, Product Search, Toolbar, and Gmail, she rose from an engineer, to designer, to product manager, and soon enough one of the top executives at Google. From this position, she oversaw the design of the Google homepage, cementing her place as not only one of the most powerful female executives in the industry, if not the world.

SUPER NERD TO CORPORATE PROTÉGÉE

Yet, probably the most reflective aspect of her “super ego” is her role in the projects she has worked on. Marissa Mayer is a “product person” in the eyes of the reigning people in Silicon Valley. In the last decade and a half of innovation, she has attempted to create products that people want to use, not products that people have to use. She is noted to have superhuman energy in executing such visions, pulling 250 all-nighters in her first 5 years at Google, according to employee records, yet never burning out. Google colleagues have described her as surprisingly articulate in a sector of geeks with the “qualities of a programmer and a humanist.” Accordingly, she has captivated the

Marissa Mayer is a self described geek, a super nerd. She received a Bachelor of Arts and Science at Stanford with a degree in symbolic systems aka artificial intelligence and interface engineering, graduating with honors and later went on to receive a prestigious Master of Science at Stanford in computer programming as well. Since starting at Google, her central influence on Google’s hallmark products as well as her charismatic persona, both in boardrooms and in the office, gained her notoriety for efficiency and played a role in her selection for Yahoo’s top spot as will be discussed later. Especially, Meyer’s move to an executive position in Google brought her nomers such as “the face of Google” or “Google’s glamour geek”. Vanity Fair magazine called her a business superstar and a cultural icon. The nicknames are well founded as one of Google’s longest serving and most famous executives.

—35—

media, often stories concerning her work have been centered around more on Marissa Meyer the person, and less on Google. She has been seen at times as totalitarian to those who worked for her and it was very clear that she protected her team, but if you were not on her team, well then, as she put it, “she may not play as nicely”. This was seen in policies such as her often machiavellian human resource protocols of cutting employees who were peer-reviewed at the bottom: omens of her coming policies at Yahoo?

The Business Section is meant to be text heavy. The only images that exists in this section must always include the person that is discussed. Aim for 3-4 supporting images other than the larger portrait cover. Even though there are few images you can make them very large. Block-quotes are highly recommended.

PAGE FUNDAMENTALS This is the margin. The buffer zone of content. They represent the space between the trim size, including the gutter, and the page content. GENERALLY DO NOT CROSS INTO IT This is the a column. They are vertical containers that hold type or images. There are 3 columns in the Magazine

Marissa Mayer, then Google’s VP of Search Product and User experience, introduces new search features at its “Search On” event

Yahoo CEO Marissa Mayer speaks Tumblr at a news conference in New

[UN-]EXPECTATION

HAIL TO THE CHIEF

While, Marissa Mayer’s transition today maybe an accepted reality, the fact is she wasn’t at first the likely choice. When the search for a new Yahoo CEO was underway, the then interim Ross Levinsohn was seen as a natural successor.

traffic or drift from its initial vision. But most likely it was due to the onslaught of all of these problems at terminal velocity in the business cycle. This ultimately leads to the question, what is Marissa Mayer doing differently in the face of this inheritance she has been given and has defined the earliest part of her tenure?

After her decade long meteoric rise at Google, she has taken on the imposing challenge of saving Yahoo. The fading legend that is Yahoo, a company which peaked in the early 2000s with share prices of 118.75$ but began 2013 at around 20$, is an Marissa Mayer has been on a corporate ailing institution. “shopping” spree of mergers and

However, in a series of last minute meetings, the board of directors determined that Levinsohn was incapable of leading Yahoo to innovation

After taking the wheel, Mayer despite Yahoo’s declining stock value, has managed to maintain the 700 million user base considered to be necessary for future growth: this user-base allows Yahoo to check their email and stocks, get news and answers, to shop and search the web. Yet Mayer’s Yahoo is still seen as barely staying afloat due to its many failed acquisitions and purchases. Partly it is due to the expanding market with megalithic companies like Google continuing to squeeze Yahoo out of the picture or possibly because of its erratic

acquisitions. During the first month of Mayer’s tenure, Yahoo purchased twenty startups, and still plans on spending $4.8 billion more on nonleveraged acquisitions alone. But what does this mean in terms of a greater business strategy for Yahoo? The fact is companies she acquired do not historically generate much actual revenue or profit, and yet she has bought many of these fledgling service providers, with little concrete assets, for millions and sometimes billions of dollars out of Yahoo’s own increasinglylimited coffers. The majority of the assets of which she has acquired from M&A operations are not the products but in fact the engineering, marketing, and social networking experts; in other words, Mayer has acquired a vast pool of talent. This is an essential input for a company that has been mired by a lack of innovation and vigor. Moreover, many of her acquisitions have been a cosmetic and tactically wise decision nonetheless. Although her 1.1 billion

—1—

This is the gutter. They divide the columns and gives them space between each other. BODY TEXT NEVER CROSSES THE GUTTER. GENERALLY WHEN CROSSING THE GUTTER ALWAYS CROSS IT COMPLETELY TO THE EDGE OF THE COLUMN. DO NOT STOP IN THE MIDDLE OF ANYTHING, ALWAYS STOP ON THE EDGES OF THINGS. These are the base lines. They are 12 points apart from each other, and intersects with columns to form grids. COURTESY OF BROBERT SCOBLE

and Marissa Mayer, seen as the most radical yet capable talent, was invited to take on the future of a $300 billion rich, yet troubled, Yahoo asset network. It is important to note that in Silicon Valley and the industry in general, Yahoo is at this point a somewhat of a fading giant. (While a major victory for Mayer, it is also a great burden.) Some are already saying the Yahoo board may have made a mistake in bringing in an executive known for stepping on toes and going past shareholders. However, many say that the board knew the risks and was convinced by the profit incentive. The question that remains, however, is “what now”?

Weighed down by mismanagement under a lack of visionary leadership present in competitors, and lost acquisitions and opportunities, Yahoo needs a change, and that change for the time seems to be banked on an experienced and tenacious Mayer. And with that idea in mind, Yahoo elected Marissa Mayer to become the youngest C.E.O of a Fortune 500 company.

BODY TEXT STAYS IN THE COLUMN. BODY TEXT WILL NOT OCCUPY A WIDTH MORE THAN ONE COLUMN.

FOR ALL ELEMENTS (TEXTBOXES, IMAGES, SHAPES), EVERYTHING MUST HAVE A HEIGHT OF A MULTIPLE OF 12. EVERY ELEMENT’S TOP AND BOTTOM STARTS AND ENDS ON A BASELINE NO ELEMENT’S TOP OR BOTTOM WILL BE IN THE MIDDLE OF ANY BASELINE’S 12PT GAPS.

Good and Not So Good Practices Here the two circles are positioned in between the between and touching the baseline grid and not crossing it. They are also 12pts in height. They are also not crossing the red gutter

GOOD

Even though the circles are 12pts high and are aligned, as well as not crossing the gutter, they are crossing the baselines. This is malpractice.

NOT SO GOOD

As you can see here body text stays within the area between the baselines. However they never cross them.

GOOD

Here body texts crosses baselines. Avoid this by starting textboxes on a baseline. Never start a them in the middle. Also make sure that the font has a leading size of a multipe of 12.

NOT SO GOOD Here you can see that each text boxes and circles starts and ends on baselines.

GOOD

Here you can see that the bylineâ&#x20AC;&#x2122;s text boxes does not start nor end on a baseline. Moreover it is also intersecting with another text box

NOT SO GOOD Here the text boxes do not cross the gutters and they stay within the column perfectly. Their widths are not wider nor are they smaller than the columnâ&#x20AC;&#x2122;s

GOOD

Here, with good intention to include more of the article, the width of text box is adjusted to be wider than the column. This violates the sovereignty of the gutter.

NOT SO GOOD Here two images are on top of each other. They have one baseline gap between them, and they start at the end of the left gutter, but crosses the second to fill the next column entirely

GOOD

Though, here, the top image ends across the baseline gap, as well as starts in the middle of the left gutter, despite having the images perfectly aligned to each other.

NOT SO GOOD In this case there are two text boxes which are threaded and linked so that text flows from one textbox to the other freely.

GOOD

Here, there is only one text box with the number of columns for that one text box set to two. This is very dangerous. As soon as the width changes the sizes of those columns will change.

NOT SO GOOD In this case the layout designer decided to leave one baseline gap between the textbox and the image. This is a good practice, since both elements starts and ends on a baseline.

GOOD

Here, however, he/ she decided to leave a gap, but wanted the image to cross over the baseline gap, perhaps to save space for text. This is bad practice.

NOT SO GOOD

GENERAL TYPE FAMILIES FONT FAMILY A—LATO

LATO

TYPE Family: LATO

the quick brown fox jumps over the lazy dog (light) the quick brown fox jumps over the lazy dog (regular) the quick brown fox jumps over the lazy dog (bold) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (LIGHT) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (REGULAR) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (BOLD)

TYPE Style: LIGHT REGULAR BOLD

COMMENTS: In the magazine, Lato is primarily used for body text. The Hairline style of the font shall never be used since they are too thin for print.

FONT FAMILY B—FF DIN

FF DIN the quick brown fox jumps over the lazy dog (light) the quick brown fox jumps over the lazy dog (regular) the quick brown fox jumps over the lazy dog (bold) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (LIGHT) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (REGULAR) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (BOLD)

TYPE Family: FF DIN

TYPE Style: LIGHT MEDIUM BLACK

COMMENTS: FF Din is generally used for headings and titles. Light and black styles are preferred. Other variations of Din other than Light Medium and Black may be used for complimenting the body text.

FONT FAMILY C—HELVETICA NEUE

HEVELICA NEUE

TYPE Family: Heveltica Neue

TYPE Style: Any variations below black and above thin

COMMENTS: Heletica Neue is used to compliment the text. As such, the styles chosen within the family should give a result that contrasts the body text. Styles such as the Oblique (Obliq.) and Condensed (Cond.) Variations will be a good choice

the quick brown fox jumps over the lazy dog (Light Cond.) the quick brown fox jumps over the lazy dog (Light Cond. Obliq.) the quick brown fox jumps over the lazy dog (Regular Cond.) the quick brown fox jumps over the lazy dog (Regular Cond. Obliq.) the quick brown fox jumps over the lazy dog (Bold Cond.) the quick brown fox jumps over the lazy dog (Bold Cond. Obliq.) the quick brown fox jumps over the lazy dog (Heavy Con..) the quick brown fox jumps over the lazy dog (Heavy Cond. Obliq.)

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (LIGHT COND.) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (LIGHT COND. OBLIQ.) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (REGULAR COND.) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (REGULAR COND. OBLIQ.) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (BOLD COND.) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (BOLD COND. OBLIQ.) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (HEAVY CON..) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (HEAVY COND. OBLIQ.)

the quick brown fox jumps over the lazy dog (Light) the quick brown fox jumps over the lazy dog (Roman) the quick brown fox jumps over the lazy dog (Medium) the quick brown fox jumps over the lazy dog (Bold) the quick brown fox jumps over the lazy dog (Heavy)

THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (LIGHT) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (ROMAN) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (MEDIUM) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (BOLD) THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG (HEAVY)

GENERAL HIERARCHAL REPRESENTATION For the in-dept articles, features and business section headings and subheadings must be used to give hierarchy to the text. When working on an article, one must first choose where to start on the hierarchy then one must choose which form of representation one would like to use for that level on the hierarchy. For example, in an article with only sections and no subsections (generally in-dept articles/the business section), one can use solely the Heading 1 Style or the use solely the Heading Level 2 Style. You may not switch them. However, if the article includes sub-sections as well, use the Heading Level 1 specifications for the top level sections and the Heading Level 2 specifications for subsections.

HEADING 1 OR 1st LEVEL OR TITLE

HEADING 1 HEADING 1 HEADING 1 HEADING 1

GENERAL SPECIFICATIONS: • FF DIN Light ALL CAPS (36pts or 48pts). • Text frame is either 36pts or 48pts high. • Text is aligned in the center horizontally and vertically. • Set 12pts left and right indent. • Use the “Fit frame to content” button to help achieve equally spacing on both sides of the heading. Then increase the height manually to 36pts or 48pts. • The right side of the frame must touch either the edge of the margin or the frame. It can, however, end in anywhere and cross gutters. • DO NOT ONE FRAME FOR TWO LINES, INSTEAD USE TWO FRAMES. WITH 6pts GAP. Then leave 12pts after the 2nd frame before the next element. • There should not be more than 2 lines.

VAR. 1.0

VAR. 2.0

VARIATIONS (VAR.): • The point zero (XX.0) variation is characterized by a solid color fill and white text. • The point one (XX.1) variation is characterized with no fill but instead have a stroke around the frame (2pts). The color of the stroke and the text is the same.

VAR. 2.1

COMMENTS: There are two versions that one can use for dividing the sections of an article, depending on the length, space, and other factors. If there are 3 levels of hierarchy simply use version 2 for level 2 and use heading 2 ver. 1.0 for level 3

HEADING 2 OR 2nd LEVEL

HEADING 2

GENERAL SPECIFICATIONS: • FF DIN Light ALL CAPS (26pts or 14pts). • Text frame is either 24pts or 12pts high. • Text is aligned in the center vertically and is left aligned horizontally. • The heading should not be longer than 1 column width and no longer than 2 lines. • When the heading is two lines long, separate the frames and there is no gap between the first frame and the second frame. • Set the font color accordingly.

VAR. 1.0

HEADING 2 VAR. 2.0 COMMENTS: There are two versions that one can use for dividing the sections of an article, depending on the length, space, and other factors. If there are 4 levels of hierarchy simply var 1.0 of heading 2 for level 3 and ver 2.0 for level 4.

BODY TEXT Mosantur? Delent. Optaque et, quat et, quidia nonsequatis aut velesto conet est, ullabo. Nam faccabo resequodi dolut doluptati que prem veniend igentibusdam sum ipsunt, quissimpos as consend itaturia volute provid ut res dolut omnis essi doluptati consequia pero magnatemquae quas dolores cipiet quisquae conecus nam aut voluptas estiam que net ut officius iundelist ea volum et autat acit quat.

Di des sundae. Ni ut minciant. Ut peles autemquatur minihillicia et alitat.

ressint

otatem

Imo berum hil ipsuntibust, inus, que corit alici consequamus, consequ aepremp oritem dolut volessed et la quia a doluptatur modit od eos accum eosam nisqui omnimpo reptatur?

GENERAL SPECIFICATIONS: • Lato Light (10pts) • Use justify with last line aligned left option. • Top vertical alignment • 12pts space after (for paragraph spacing) • Text frames shall not cross the gutter and will always be one column wide. • NO HYPHENATION

Emphasizing Texts Type A—Block Quotes A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. There are different options in the ways you can approach making blocquotes, but there are a few guidelines to follow.

“Onsed maio. Itat laciis dolorpor restem audiant facesere, sundam ut moloriat.”

Nus eum vel inis exces maio. Nequo et enectot atium,

GENERAL SPECIFICATIONS: • Font Family: Helvetica Neue • Type: Medium Condensed Oblique • Sizes: 15pts or 20pts • All block-quotes must always be of separate frames than the body text with 12pts of empty space above and below the frame (for one column quotes) • For quotes with a width more than one column set the text wrap to 12 pts around. • You may decide between having the text purely left aligned or with justify with leftaligned on the last line. • Always use a color for block quotes. Never use black. • Generally, stick with Helvetica Neue, but in specific cases, change can be made. • Quotes must always start on the left edge of the column, but can end anywhere appropriate and cross the column gutters.

Good and Not So Good Practices Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit

Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit evelissi doloria quiscipis et, con eaqui

“Onsed maio. Itat laciis “Onsed maio. Itat laciis dolorpor restem audiant dolorpor restem audiant facesere, sundam moloriat.” facesere, sundam moloriat.” Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit

Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit evelissi doloria quiscipis et, con eaqui

GOOD

NOT SO GOOD

fugit evelissi doloria quiscipis et, con eaqui nobis ratur, ipsam nis et eumqui ipid ute conem re et destis alicab idebit occum alitat et “Onsed maio. Itat laciis dolorpor dolupta doluptas reicium vel restem audiant facesere, sundam inctata sperit volum cusandi onectectate veligni musapis moloriat.” quis es non reptatia sitibusdam Dant doluptam qui dolupta quatus as repra dus aute culparum et ma sum volupta estiatu reperat eveniatust exeratibusam is nonecate

Here 12pts space should be given between block-quotes

Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit

fugit evelissi doloria quiscipis et, con eaqui nobis ratur, ipsam nis et eumqui ipid ute conem re et destis alicab idebit “Onsed maio. Itat laciis dolorpor occum alitat et dolupta restem audiant facesere, sundam doluptas reicium vel inctata sperit volum moloriat.” cusandi onectectate Dant doluptam qui dolupta quatus veligni musapis quis es et ma sum volupta estiatu reperat non reptatia sitibusdam as repra dus

GOOD Here the quote

Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit

NOT SO GOOD Even though there is text wrap of 12pts implemented, the quote did not start at the left edge of a column.

SPECIAL SPECIFICATION FOR STARTERS

UMET VOLUM REPUDITAE BY LINE

TITLE

BY JOHN DOE

IMAGE

DROP CAP

BODY TEXT

Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit evelissi doloria quiscipis et, con eaqui nobis ratur, ipsam nis et eumqui ipid ute conem re et destis alicab idebit occum alitat et dolupta doluptas reicium vel inctata sperit volum cusandi onectectate veligni musapis quis es non reptatia sitibusdam as repra dus aute culparum eveniatust exeratibusam is nonecate sequiam inction pos alit optiatusam, volorepro officatur, non nostiatecus, od quament mossimi nulparu ptatur solum alic tem sum sum eiusam simpor alibus si re estisim aximil et lacea consed ut aut asit, auteceatur senihit et, ut et id molupta pliaecatet que non et fugit re vitatat ibernatiur aut que ducitia paribus ma eturectiur, sitiusdae. Apides nos magnimus.

Optur? Obis maximenimus autes etus. Erum etus dellore iureper uptatenissus utem sunt latur sam quam inus sinveni hillam labore, ut aut voluptasi consequisit volorem resciae. Nem solorio eius ut alia numquat di uta sit, nit volupta venimod eost la volupta temporeribus res ma alibus atium quis que quaes nem quodis aliquo ea dic te sequibus eaqui beaquam eaquuntor rerio id maios excepta volorero dolenec eatius volupiendem harit optatessinto

occum qui sectur sunt, omniment rati te quat pre nobit ulparumque erferiatur rescide libus. Ovit voluptas doluptat.

â&#x20AC;&#x153;Onsed maio. Itat laciis dolorpor restem audiant facesere, BLOCK QUOTE sundam ut moloriat.â&#x20AC;? debis et est, sam, omnisim uscipsa offictati inima dolupiet exerrorest, et officientem et et, est alibus del inis et di consequiae prae si imin cus quos mo molut doluptas illendi rehendi oreniae simenim odipsam, volupta taspelendeItat volenis suntus. Nem aliqui dem nonseque ex eos pere vera nimet assequid molores conse quuntemoditi dentia nos endis id modit reped eum quamet, aligento officil maximoluptat fuga. Itatur sinvendic tem que sequia ipsum eturibus, conse ratumen ditae. Bis erumet aut ex evenduci alita ditem alitatium exernatur? Untem cus seque iur re earupta testias dolest, sequam et occustibus. Quist, quo magnatae volor aut adit aut facerehendem venimosae secatem porenimus eate sam expe et a dolent, odignam volut apero bearum ium recabo. Ra culla vid magnihi cipsapi

Step 1 of Making a News Layout—Determinants Before you begin anything for an article in the shorts sections, you must first determine how many columns would you like the text to span. Whether it will be once column, two columns, or at most three columns. Then determine the theme color you will use for this section. Generally it follows the month/season it is released

Step 2—Title and Byline Before you begin anything for an article in the shorts sections, you must first determine how many columns would you like the text to span. Whether it will be once column, two columns, or at most three columns. Then you can move on to the next step with the title and byline

UMET VOLUM REPUDITAE BY JOHN DOE

GENERAL SPECIFICATIONS: • The title text frame is 36pts high and with content set to centered vertically. • Text for the title is Helvetica Neue Bold Condensed 28 pts with left indent of 12 pts • Make a line (dotted) 2pts thick that spans the amount of columns the article will touching the bottom of the title’s text frame. • Follow it with the byline’s frame which is 24 pts high and content vertically centered. • Text for the byline is FF DIN Medium 12pts, with left indent of 12 pts. • The line that folows the byline is the same as the title’s but only spans one column width.

Step 3—The Drop Cap All articles in the shorts section will have a drop cap in this form. Simply sue the first letter of the article for the drop-cap. Also do not delete the first letter of the artilce once the drop cap is made—simply include the first letter as a dropcap and along with the body text. Dant doluptam qui dolupta quatus et ma sum volupta estiatu reperat fugit evelissi doloria quiscipis et, con eaqui nobis ratur, ipsam nis et eumqui ipid ute conem re et destis alicab idebit occum alitat et dolupta doluptas

Step 4—Other Requirements Each article will also require • At least one image • At least one block quote

GENERAL SPECIFICATIONS: • Set first the stroke value to 1 pt with a color according to the section’s theme. • Then draw a box with stroke with a size of 36 pts by 36 pts • By using the text tool click on that new box to make it into a text frame and type in the letter. • The text is FF Din Medium at 24 pts aligned centered horizontally. • Once done go back to the selection tool and click the box, then change the content alignment to centered vertically. • Then set the frame to have a text wrap, with only 12pts right offset. No other offset values are needed.

DEALING WITH IMAGES Images is the biggest component of the Tech Crewsaders magazine, and it is what makes our magazine stand out. Before even beginning the search for images, you must know exactly what you are looking for, where you want it to go, how big you want it, and the purpose that the image will have. Once the search begins you must pick the image which has meaning to it. DO NOT USE CLIP ART OR STOCK GRAPHICS. Sometimes there will be cases where you simply can not find the picture that corresponds exactly to your topic. In such a case (it does occur often), simply search the most used and important word in the article that is broad enough to provide you with quality image. It might simply be an image of a person talked about in the article event hough the article his not necessarily on the person but on a separate product.

Step 1—Your Intentions on Size The first question you need to ask yourself is: how big do I want my image on the actual paper? Now, in the case of the magazine we need to be working in inches. Once you know how big the image will, take the largest number (length or height) and multiply that number (in inches) by 300. You will now receive the minimum image size (with or height depending on what is larger) for your image. Using an image lower than that is not likely to turn out well. If you really really can not find one that fits the rule try that process again but multiply instead by 250 (BUT ONLY DO THIS WHEN THERE IS NO OTHER CHOICE)

Step 2—Dertmining the Required Image Types Images fall into three categories: Screenshots, Logos/Branding, Other images. Most of the time it is not good to find screenshots online. They are mostly of low quality or just unsuitable. Only use screenshots when they can be produced with a Retina Quality (High DPI) device (Smart Phones, iPads, iPhones, Retina Mac Books Pros). If they are really necessary, you will want to consult the EIC. For Logos/Branding the first place to go is to search for the brand’s press cetner (use google search with the phrase “companX press media assets”). There you should find high quality logo files and even high quality product and services images. Other than the other two categories, the images you will find will have to be through Google Images and powerful judgements on quality will be needed.

Step 3—Google Search When searching in Google Images, you must always try to use the least amount of words as possible. From there click Search Tools>Larger than... >4 MP (2272x1704) and Under More Tools>Click “Show Sizes”

Step 4â&#x20AC;&#x201D;Download and Attribution Once you found one that you like, right click and open in new tab the two buttons that appears next to the image. (Visit page and View Image). One of the tab will belong to where the image was (copy the URL and send it to the EIC with your layout), and the other tab will contain the picture where you can right-click and Save As.

Step 5â&#x20AC;&#x201D;Usage Once the image is downloaded to your computer, go to InDesign and make an empty frame in the place where you would like the image to go. Once the frame is made simply drag and drop it into the empty frame. However at first it will apear as though the image has expanded indefinitely within the frame. To fix this press the Fill Frame Proportionally Button (ONLY THIS BUTTON). Then you may be allowed to position the image within that frame any way you like or expand the frame and then press the button again to fill it.

Make a frame

Drag into frame

NOT SO GOOD

Fill Frame Proportionally

COLORS One more thing we sure love in the Tech Crewsader Magazine are the colors that are used. But what makes them so special is that the colors are part of the same family of â&#x20AC;&#x153;flat colorsâ&#x20AC;?. Whenever you are using any colors for fill or for font color you will need to use one of these colors, for standardizationâ&#x20AC;&#x2122;s sake. Feel free to use any of these to emphasize shapes, block quotes, titles, headers et al. Eventhough they may look the same on paper, on the screen they are entirely differnt. When using paper try not to use minors but stick to majors alone.

Main

Minor

Pomegranate rgb(192, 57, 43) C18 M91 Y96 K7 #c0392b

Alizarin rgb(231, 76, 60) C4 M86 Y83 K1 #e74c3c

Alizarin M1 rgb(234, 97, 83) C3 M77 Y68 K0 #ea6153

Pumkin rgb(211, 84, 0) C14 M78 Y98 K3 #d35400

Pumpkin M1 rgb(236, 94, 0) C7 M61 Y100 K1 #e67e22

Carrot rgb(230, 126, 34) C7 M61 Y100 K1 #e67e22

Carrot M1 rgb(233, 139, 57) C3 M77 Y100 K0 #ec5e00

Orange rgb(243, 156, 18) C2 M44 Y100 K10 #f39c12

Orange M1 rgb(244, 166, 42) C2 M39 Y95 K0 #f4a62a

Sunflower rgb(241, 196, 15) C6 M21 Y100 K0 #f1c40f

Sunflower M1 rgb(242, 202, 39) C6 M18 Y95 K0 #f2ca27

Nephritis rgb(39, 174, 96) C78 M3 Y85 K0 #27ae60

Emerald rgb(46, 204, 113) C78 M0 Y74 K1 #2ecc71

Emerald M1 rgb(91, 180, 117) C66 M5 Y72 K0 #5bb475

Main

Minor

Green Sea rgb(22, 160, 133) C80 M13 Y59 K1 #16a085

Turquoise rgb(26, 188, 156) C73 M0 Y52 K0 #1abc9c

Turquoise M1 rgb(101, 197, 182) C58 M0 Y53 K0 #65c5b6

Belize Hole rgb(41, 128, 185) C4 M86 Y83 K1 #2980b9

Peter Blue rgb(52, 152, 219) C71 M28 Y0 K0 #3498db

Peter Blue M1 rgb(74, 163, 223) C63 M23 Y0 K0 #4aa3df

Wisteria rgb(142, 68, 173) C54 M84 Y0 K0 #8e44ad

Amethyst rgb(155, 89, 182) C46 M76 Y0 K0 #9b59b6

Amethyst M1 rgb(162, 108, 174) C38 M67 Y0 K0 #a26cae

Midnight Blue rgb(44, 62, 80) C85 M68 Y47 K39 #2c3e50

Wet Asphalt rgb(52, 73, 94) C83 M66 Y43 K29 #34495e

Wet Asphalt M1 rgb(61, 86, 110) C81 M62 Y39 K20 #3d566e

Clouds rgb(236, 240, 241) C6 M2 Y3 K0 #ecf0f1

Clouds M1 rgb(251, 252, 252) C1 M0 Y1 K0 #fbfcfc

MAKING LAYOUTS Once you have now understood all of the differnt design elements of the Tech Crewsader AMgazine you should now be able to make layouts! In truth however, unlike other sections, there is not necessarily a format or a template in making any layout. Inside the Tech Crewsader we believe heavily in the use of a “design philosophy” rather than “design templates”. This means that you ahve the ability to find any layout you like in the world of beautiful magazines and publications, and by using the “design philosopies” identifiable within this booklet, you can make any layout a “Tech Crewsader Layout.” Eventhoug this may sound very simple, it is very hard to do in cases where a “design philosophy” may not exist or is still under developemnet. The good thing is we have a large collections of resources you can use for inspiration (Behanc, Wired Collection, and other Magazines). Here are some case studies that describes differnt ways you can approach layout design.

Case Study 1—WIRED US 04/14

• • •

APR 2014

022

argument

works. When we cook a delicious meal, the thumbs type a tweet before the mouth gets a bite. “OK, Glass” summons a machine worn on the face to capture video, audio, and geographic location and then broadcast it to the world. With so many private moments now public, the reasoning goes, we must no longer value privacy. But a human life is not a database, nor is privacy the mere act of keeping data about ourselves hidden. In reality, privacy operates not like a door that’s kept either open or closed but like a fan dance, a seductive game of reveal and conceal. By that standard, the explosion of personal information online is giving rise to new mysteries, new unknowns. When you post a photo on Instagram, it offers up not just answers but hints at new questions: Who were you with and why? What were you feeling? What happened between the updates, and why was it left out? Secrets, creative concealments, the spaces between posts— this is where privacy ﬂourishes today. Look at the behavior of teenagers, supposedly the ones among us who care least about privacy. Microsoft researcher danah boyd has investigated how they use social media; it turns out that teens are both very public and very private, often at the same time. In a behavior called whitewalling, users post to Facebook—sometimes in great detail—but then quickly delete everything, creating a blank timeline. That’s a new form of privacy for the social media age: a mass release of information that eventually disappears. Boyd also describes

The main image The large column text on the right (Alpha encased in a shape The title of the article and the beginning paragraph.

To make this a “Tech Crewsaders” layout, one definitely keep the position of the image. Then make the blue rectangle (with a color from our palette). For the Alpha section, you can change the font to a thick variation of FF Din and the encasing thick black rectangles can be made with path finder and changed to a color in the palette as well. Of course you can keep the contrasting styling where one letter of Alpha (or what ever word you change it to use) is different than the rest of the word For the title of the article you can simply change it to our styles for titles as outlined in this booklet. However, for the first paragraph of the text you can keep it two column wide, if you change the font of the first paragraph to FF Din to signify emphasis. You may also change its color. Elements to ignore from this layout are the devision of lines in the top portions of both layout and the bottom right corner of the left page.

alpha

argument

APR 2014

by Nathan Jurgenson

HIDING IN PUBLIC HOW PRIVACY THRIVES ONLINE PRIVACY IS DEAD—or so we’re told, both by those who would mourn the loss and by those who would dance on its grave. And the murderers aren’t just the NSA and snooping corporations. We too have played a part in privacy’s demise, through our embrace of mass exhibitionism. When hands are raised at a concert, they’re holding cameras, ready to shoot and post to an ever-expanding array of social net-

021

NOMA BAR

For the bulk of the text on the right hand side I will keep the layout very similar but change a few things. Firstly, make sure that the text is perfectly devided into 3 columns. Images must respect the gutters between columns. Neverthless, the blockquote can in teh same position with our choice of font styling, and our own colors.

NATHAN JURGENSON (@nathan jurgenson) is a contributing editor at The New Inquiry, a researcher at Snapchat, and cofounder of the Theorizing the Web conference.

“social steganography,” in which teens use things like slang, inside jokes, and song lyrics to hide private messages in plain sight; one audience understands the meaning of a post while others (adults or more distant friends) scroll right by. Implicit in the fan dance, though, is the ability to choose what to reveal and when. That is, real privacy is all about autonomy. And when corporations or governments

WHEN YOU POST A PHOTO ON INSTAGRAM, IT OFFERS UP NOT JUST ANSWERS BUT HINTS AT NEW QUESTIONS: WHO WERE YOU WITH AND WHY? WHAT WAS LEFT OUT? have crossed a line in violating privacy, users haven’t hesitated to speak up. Facebook, for example, triggered a backlash when it opted users into new sharing rules without their explicit consent. More generally, a recent Pew survey reported that 86 percent of Internet users say they’ve “taken steps online to remove or mask their digital footprints.” And, of course, there

is the scandal over US government spying through the NSA. In its own way, the rise of publicness has allowed for privateness to become its own trend. In the film era, to photograph something conferred an importance on it. But today the ease and ubiquity of photography means documentation is far more the rule than the exception. It’s gotten to the point where choosing not to photograph something conveys respect for a moment, imbues it with significance. Pretty soon we might realize that one of the Internet’s favorite slogans can now be reversed: No pics or it didn’t happen. We think of privacy and publicity as being in conflict. Instead, like the fan dance, they’re a mutually reinforcing system. Yes, we’re more public than ever, with all the unevenly distributed harms and benefits that follow. But we can’t do justice to that shift unless we drop the hyperbolic notion that privacy is in its death throes. If we want to understand privacy in the digital era, we need to recognize that publicity doesn’t kill it. Rather, publicity depends on privacy—and vice versa.

COURTESY OF ROSEY LAKOS AND JESSE CRIMES

For something like this the first thing you want to draw out is the existence of a cover page which you can use to incorporate into your design. The cover page’s primary elements can be broken down as follows:

Case Study 2—WIRED US 04/14 Striking Elements (Imitate): • Profile image on the left page; not covering entirely, and over fills to the right hand page. • Emphasis on the first paragraph • Title and headings • Black bars on the outer rim of the page; use of path finder.

052

by caitlin RopeR

jason madaRa

MARCO GORAN ROMANO

ELEMENTARY SCIENCE ThoMAS GoETz oN GERMS, bIG dATA, ANd ShERLoCk hoLMES

Necessary Changes: • Font styling for the title and sub headings are similar to ours but change it to match ours perfectly. • First paragraph can be changed to a flavor of FF DIN • Columns can be perfectly aligned into three separate ones.

SHERLOCK HOLMES was as much a scientist as a detective. Maybe

THE 3 AGES OF MEDICINE

that’s because his creator, Arthur Conan Doyle, was inﬂuenced by a detective of science: Robert Koch, a German doctor who helped prove the existence of germs. In his new book, The Remedy, Thomas Goetz traces connections between the two men. The former executive editor of WIRED , Goetz now runs Iodine, a company he cofounded with ex-Google engineer Matt Mohebbi. The startup’s goal is to help people make better decisions about medications by combining their personal experiences with clinical research—in other words, giving us the tools to be our own medical detectives.

Why was Robert Koch so important? He was a particularly modern kind of scientist—his genius was both in making discoveries and crafting the process and tools to enable discovery. His great claim to fame was discovering the bacteria that causes tuberculosis—the biggest killer of his time. But he also invented new microscope techniques that allowed him to do things like take photographs of what he saw, enabling scientists to actually prove they’d found the microbe. Even more important, Koch proposed a sequence of proofs known as Koch’s postulates, which created a process for proving causality. Those three things—the tools, the discoveries, and the method—pushed away the last doubts about the germ theory of disease and ushered in a new age of science.

Where does Arthur Conan Doyle come in? As Koch’s discoveries began to gather the world’s attention, an ambitious doctor in rural England read about what Koch was doing and was inspired. This was Conan Doyle. Koch’s rigor, his method, his afnity for the microscope—these were all characteristics that Doyle would soon incorporate into the fictional detective he was cooking up, Sherlock Holmes. In the ﬁrst stories, Holmes is very much a scientist at work, and you can see in his devotion and single-mindedness the same traits that drove Koch.

apr 2014

Just weeks after Robert Koch claimed he had discovered a remedy for TB in 1890, doctors all over Europe began testing the mystery substance on patients. That would be unthinkable in today’s world of randomized, double-blind, placebo-controlled trials, which often take years. But now, says Thomas Goetz, author of The Remedy, we’re due for a new age of medical research. —Jason Kehe

In The Remedy, I was struck by the fact that the stature of scientists was not so high in the late 1800s.

The Free-for-All: 1850S–1940S Although the ﬁrst clinical trials (on citrus fruits and scurvy) date back to the 1740s, for centuries doctors acted without standards. Often that meant giving untested drugs to patients willy-nilly, based on the hope they just might work. The result was chaos—“closer to anarchy than experimentation,” Goetz writes.

There were so many diferent methods for science that it was difcult to establish credibility. But the process of moving from discovery in a lab to something that actually convinces society—that was really pioneered by these germ theorists and bacteriologists.

The Rise of Trials: 1940S–2010S If you believe a cure will work, as Koch did of his remedy, that bias can skew your results. So scientists began adopting a new protocol: the randomized, double-blind, placebo-controlled trial. Neither investigators nor patients know who’s getting treatment and who’s getting a placebo, for example. But while this method remains the gold standard—its rigor and years-long review process ensure credibility—it isn’t designed to account for unique experiences.

Koch’s ability to take photos of germs, to visualize them, was crucial to convincing people they existed. With Iodine, it seems like you’re up to something similar—visualizing health data to make it useful, right? Whenever people face a decision about a drug—from finding the right dose to dealing with side efects—data can guide them to a good choice. There’s a great body of clinical research about medications: Pharmaceutical companies spend years and billions of dollars testing drugs to prove safety and efcacy. But ultimately, those experiments are only approximations of what the truth is. Because there are clinical numbers—say 14 percent of people taking a drug had dizziness—and then there’s the reality and what that dizziness actually felt like. That pragmatic reality is what Iodine captures. And the combination of clinical evidence and user experience is something we believe will allow people to make better decisions for themselves.

Beyond the Lab: post-2010 A few hundred subjects is a good-size trial—but there are billions of people in the world. Advances in computing power now make it possible to analyze data at that scale. Goetz’s startup, Iodine, aims to combine traditional research ﬁndings with selfreported data it collects (say, a woman’s experience with a certain birth control pill). “It can be messy,” Goetz says, “but that information measures what’s happening in the real world, in real time.”

Case Study 3—WIRED US 04/14

W E MUS T C L E A N U P C OA L . N O W.

BY CHARLES C. MANN

Vacuums or electrostatically charged plates are used to remove particulates.

dan winters

The gas mixture combines with the amine solution. The carbon dioxide (a weak acid) latches onto the amine (a weak base), yielding a CO2-rich solution. Meanwhile, the remaining gas, stripped of almost all of its carbon dioxide, exits into the atmosphere.

Heat or pressure reverses the reaction that combined the carbon dioxide and amine, resulting in a stream of nearly pure carbon dioxide, which is captured for sale or storage. Almost all of the remaining solution, which includes regenerated amines, can be recycled back into the absorber.

roof that good things don’t always come in nice packages can be found by taking the fast train from Beijing to Tianjin and then driving to the coast. Tianjin, China’s third-biggest city, originated as Beijing’s port on the Yellow Sea. But in recent years Tianjin has reclaimed so much of its muddy, unstable shoreline that the city has efectively moved inland and a new, crazily active port has sprung up at the water’s edge. In this hyper-industrialized zone, its highways choked with trucks, stand scores of factories and utility plants, each a mass of pipes, reactors, valves, vents, retorts, crackers, blowers, chimneys, and distillation towers—the sort of facility James Cameron might have lingered over, musing, on his way to film the climax of Terminator 2. Among these edifices, just as big and almost as anonymous as its neighbors, is a structure called GreenGen, built by China Huaneng Group, a giant state-owned electric utility, in collaboration with half a dozen other firms, various branches of the Chinese government, and, importantly, Peabody Energy, a Missouri firm that is the world’s biggest private coal company. By Western standards, GreenGen is a secretive place; weeks of repeated requests for interviews and a tour met with no reply. When I visited anyway, guards at the site not only refused admittance but wouldn’t even confirm its name. As I drove away from the entrance, a window blind cracked open; through the slats, an eye surveyed my departure. The silence, in my view,

(charlesmann.org) is the author of 1493: Uncovering the New World Columbus Created.

charles c. mann

CARBON DIOXIDE CAPTURE

found themselves unable to wean themselves from coal. Germany, though often Burn Rate celebrated for its embrace of solar and Our dependence on coal isn’t endwind energy, not only gets more than half ing anytime soon. its power from coal but opened more coalAlthough renewﬁred power plants in 2013 than in any year in able energy is expected to boom the past two decades. In neighboring Poland, over the next 86 percent of the electricity is generated decade, coal will from coal. South Africa, Israel, Australia, remain by far the world’s top Indonesia—all are ever-more dependent power source. on coal. (The US is a partial exception: coal’s —V.T. share of American electricity fell from 49 percent in 2007 to 39 percent in 2013, largely because fracking has cut the price of natural gas, a competing fuel. But critics note, accurately, that US coal exports have hit record highs; an ever-increasing share of European and Asian coal is red, white, and blue.) According to the World Resources Institute, an environmental research group, almost 1,200 big new coal facilities in 59 countries are proposed for construction. The soaring use of coal, a joint statement by climate scientists warned in November, is leading the world toward “an outcome that can only be described as catastrophic.” Which brings me, in a way, back to the unwelcoming facility in Tianjin. GreenGen is one of the world’s most advanced attempts to develop a technology known as carbon capture and storage. Conceptually speaking, CCS is simple: Industries burn just as much coal as before but remove all the pollutants. In addition to scrubbing out ash and soot, now standard practice at many big plants, they separate out the carbon dioxide and pump it underground, where it can be stored for thousands of years. Many energy and climate researchers believe that CCS is vital to avoiding a climate catastrophe. Because it could allow the globe to keep burning its most abundant fuel source while drastically reducing carbon dioxide and soot, it may be more important—though much less publicized—than any renewable-energy technology for decades to come. No less than Steven Chu, the Nobel-winning physicist who was US secretary of energy until last year, has declared CCS essential. “I don’t see how we go forward without it,” he says. Unfortunately, taking that step will be incredibly difcult. Even though most of the basic concepts are well understood, developing reliable, large-scale CCS facilities will be time-consuming, unglamorous, and breathtakingly costly. Engineers will need to lavish time and money on painstaking calculations, minor adjustments, and cautious experiments. At the end, the world will have several thousand giant ediﬁces that everyone regards as eyesores. Meanwhile, environmentalists have lobbied hard against the technology, convinced that it represents a sop to the coal industry at the expense of cleaner alternatives like solar and wind. As a consequence, CCS is widely regarded as both critical to the future and a quagmire. At a 2008 meeting of the Group of Eight (a forum for powerful Western nations, Russia, and Japan), the assembled energy ministers lauded the critical role of carbon capture and storage and “strongly” backed an IEA recommendation to launch “20 large-scale CCS demonstration projects” by 2010. But the number of such projects around the

GLOBAL ELECTRICITY SOURCES

O T H E R* OI

7 STRIPPER

is foolish. GreenGen is a billion-dollar facility that extracts the carbon dioxide from a coal-fired power plant and, ultimately, will channel it into an underground storage area many miles away. Part of a coming wave of such carbon-eating facilities, it may be China’s—and possibly the planet’s—single most consequential efort to fight climate change. Because most Americans rarely see coal, they tend to picture it as a relic of the 19th century, black stuf piled up in Victorian alleys. In fact, a lump of coal is a thoroughly ubiquitous 21st-century artifact, as much an emblem of our time as the iPhone. Today coal produces more than 40 percent of the world’s electricity, a foundation of modern life. And that percentage is going up: In the 8 past decade, coal added more to the global energy supply than any other source. CO2 COmpreSSIOn Nowhere is the preeminence of coal more apparent than in the planet’s fastHigh pressure is est-growing, most populous region: Asia, used to compress the captured carespecially China. In the past few decades, bon dioxide into China has lifted several hundred mila semiliquid state, lion people out of destitution—arguably which allows it to be transported eashistory’s biggest, fastest rise in human ily in pipelines. well-being. That advance couldn’t have happened without industrialization, and 9 that industrialization couldn’t have happened without coal. More than three-quarInJeCtIOn ters of China’s electricity comes from coal, The CO2 is including the power for the giant electronic injected several plants where iPhones are assembled. More thousand feet coal goes to heating millions of homes, to below the earth’s surface into approsmelting steel (China produces nearly half priate geological the world’s steel), and to baking limestone formations like salt to make cement (China provides almost half beds, exhausted oil reservoirs, the world’s cement). In its frantic quest to or unminable develop, China burns almost as much coal coal seams. as the rest of the world put together—a fact that makes climatologists shudder. 10 China already emits one-quarter of the world’s greenhouse gases, more than any StOrage other country. The International Energy Perhaps the greatAgency (IEA), a Paris-based think tank est concern with sponsored by 28 developed nations, esticarbon capture and storage is ensurmates that Beijing will double its ranks of ing that the CO2 coal-fired power plants by 2040. If that doesn’t escape. happens, China’s carbon dioxide figures The best strategy is to inject it into a could double or even triple. “Coal is too porous rock layer low-cost, too plentiful, and too available such as sandstone; from reliable sources to be replaced,” says the gas expands into the pores and fuel analyst John Dean, president of the JD slowly combines Energy consulting firm. “China is putting with the stone to in solar and wind power at a tremendous form stable minerals. To prevent gas pace, but it will have to use more and more from percolating coal just to keep up with rising demand.” back up to the surDependence on coal is not just a Chinese face, ideal storage sites have layers of problem, though. Countries around the impermeable rock world—even European nations that tout immediately above. their environmental track records—have

part I

*INCLUDES BIOFUELS, GEOTHERMAL, OCEAN, SOLAR, WASTE, AND WIND

world is actually falling—except in China, which has a dozen big CCS eforts in planning or production. It is perhaps appropriate that China should take the lead: It has the world’s worst coal pollution problem. In addition, its energy companies are partly state-owned; they can’t readily sue the government to stop its CCS program. At the same time, they won’t be penalized, either by the government or shareholder advocates, if developing this costly, experimental technology cuts into their profits. In any case, outsiders should be grateful that China is weighing in, says Fatih Birol, chief economist for the IEA. Somebody needs to ﬁgure out how to capture and store carbon dioxide on a massive scale before it’s too late. “I don’t know of any other technology which is so critical for the health of the planet and at the same time for which we have almost no appetite,” Birol says. “The only place it seems to be increasing is China.”

PART II

Coal Can’t Be Ignored COAL IS MEGO until you live near it. MEGO is old journalistic slang for “my eyes glaze over”—a worthy story that is too dull to read. In America, where coal is mostly burned far out of sight, readers tend to react to the word coal by hitting Close Tab. But people in Hebei don’t think coal is MEGO, at

Source: International Energy Agency

SOLIDS REMOVAL

ABSORBER

The boiling water generates steam, which spins a turbine to generate electricity.

STEAMTURBINE GENERATOR

The still-hot, desulfurized exhaust is cooled to the temperature at which it best combines with an aminebased scrubbing solution like monoethanolamine.

4 COOLER

BOILER Coal burning in ambient air boils water and produces particulates (like soot and ash) and exhaust gases (like carbon dioxide and sulfur dioxide).

HYD

—VICTORIA TANG

SOLAR, W I N D, A N D N UC L E A R WO N’T M E E T T H E W OR L D ’ S E N E RG Y N E E D S I N T I ME .

Sulfur dioxide is removed by mixing the exhaust with lime slurry, ultimately producing gypsum, which can be disposed of or resold to make wallboard.

(Second Spread) Striking Elements (Imitate): • The dramatic dropcap P is a keeper • The location of the image on the top right • Points and quick facts running down the center. (Second Spread) Necessary Changes: • First thing one should do is postion all the necessary text for the page in three perfect column for both pages. However for the first two columns on the right, you should devrease the height of those two frames by one third of the page. • Then with another textbox make that gigantic P and place it where it needs to be. • For those facts running through I would make each point its own group and add text wrap (12-24 pts) on that group and place it where it should be

Energy experts believe that it will be at least a century before modern societies can truly convert to renewable energy. Until then, they argue, carbon capture and storage is the only way to deal with the 10.4 billion tons of carbon dioxide that the world’s coalfired power plants throw of annually. Here is an explanation of amine scrubbing—the best-known method being tested—which typically recovers 90 percent of a plant’s greenhousegas emissions.

DESULFURIZATION

(First Spread) Necessary Changes: • For the center piece change teh font to a variant of FF DIN with the last word sepperated and in a thicker variation than the rest • For the text on the side use justify with last line left alligned, as well as changing the body text to lato specifications.

1 4

CarbonEating Machine

N AT U R A L

(First Spread) Striking Elements (Imitate): • This is a layout worthy of a feature • The first page is devoted to evoke an interest in the reader with a short synopsis in the center (Similar to a block quote) • Followed by a title and the emphasis of the last word with a change in text styling. • We also can see that the first page is broken down into a table like look with three columns. Since this is a cover page you need not divide them equally. Simply copy this layout exactly. • Outlined circles are used to identify points in a list. • The page that follows the first is a cober image. Simply use one large powerful image to cover the entire A4.

Case Study 4—WIRED US 04/02 Striking Elements (Imitate): • A Perfect example of how to make very text heavy articles look interesting • The position and sizes of images should be respected • Black borders should also be respected but in another color. • The styles for the first column on the right should also be used but in out style instead • The use and position of the block quote in the second spread should also be used. • Observe that the picture of the melon going out of the spread. (It actually continues on to the next one. Necessary Changes: • The Large In should be in a thick variation of DIN as with a thiner variation for the smaller first column styling • Style for the block quote should also be changed. • Annotations should be made under the image with normal styling for body text.

Case Study 5—WIRED US 04/01 In coming up with the outline for the Tech Crewsader magazine, the product showcase section may be the section that requires the use of many tools other than InDesign. The main characteristic of any product showcase spreads and pages is that the product are always by themselves. This mean that these individual products needs to either be removed from an image with a background or they must be taken from the Brand’s Website (HQ Press Images), and then edited to have their backgrounds removed (if any). For this section Photoshop, is without a doubt, needed to truly isolate the individual products. The second component that adds flare to the products showcase section is the use of the background color composition. By observing these sample layouts, the background are either solid color, or they are shades/gradients/variation of a single color. One must learn how to be able to do this and manipulate the colors so that they represent real 3D scenes. Once all the products are isolated and the background is created, the editor must now focus on laying out the products on either one spread or 2 spreads giving room to the QR codes and the little floating product summaries. Then shadows must be applesd to each product appropriately To make the product showcase really “Tech Crewsader” simply make sure that the fonts are of our styles and that the hierarchy of text is also demonstrated.