<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title> &#187; Layout</title>
	<atom:link href="http://www.whiteinkblog.com/tag/layout/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.whiteinkblog.com</link>
	<description></description>
	<lastBuildDate>Wed, 02 Dec 2009 19:03:58 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>EdenSpiekermann &amp; Design Students</title>
		<link>http://www.whiteinkblog.com/2009/05/13/edenspiekermann-students/</link>
		<comments>http://www.whiteinkblog.com/2009/05/13/edenspiekermann-students/#comments</comments>
		<pubDate>Wed, 13 May 2009 23:38:31 +0000</pubDate>
		<dc:creator>Youssef Sarhan</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Amsterdam]]></category>
		<category><![CDATA[CBS]]></category>
		<category><![CDATA[Dutch Design]]></category>
		<category><![CDATA[Eden Spiekermann]]></category>
		<category><![CDATA[Forms]]></category>
		<category><![CDATA[iMac]]></category>
		<category><![CDATA[Layout]]></category>

		<guid isPermaLink="false">http://www.whiteinkblog.com/?p=515</guid>
		<description><![CDATA[
Some of you may already know that I started working at EdenSpiekermann this week. As of January 2009, Eden Design &#38; Communication, Amsterdam merged with SpiekermannPartners, Berlin to form EdenSpiekermann. They have a serious amount of experience with a staff of about 100 strong; be sure to check the brand new website www.edenspiekermann.com for loads [...]]]></description>
			<content:encoded><![CDATA[<p><img class="size-large wp-image-518" title="EdenSpiekermann_" src="http://www.whiteinkblog.com/wp-content/uploads/2009/05/edenspiekermann-1024x665.jpg" alt="EdenSpiekermann Gate" width="1024" height="665" /></p>
<p>Some of you may already know that I started working at <a href="http://www.edenspiekermann.com">EdenSpiekermann</a> this week. As of January 2009, Eden Design &amp; Communication, Amsterdam merged with SpiekermannPartners, Berlin to form EdenSpiekermann. They have a serious amount of experience with a staff of about 100 strong; be sure to check the brand new website <a href="http://www.edenspiekermann.com">www.edenspiekermann.com</a> for loads more. I hope to write regularly on what I&#8217;m doing at ES, what I&#8217;m learning and anything else I think is worth sharing.</p>
<p>Okay, so last Monday was my first day, the usual meet and greet through the three floors. So many hands to shake, I felt like a broken record, but they were very welcoming and friendly. The average age is probably about the 30–40 mark. I&#8217;ve <em>officially</em> being studying design for just under 2 years but when you compare that to someone who has about 20 years experience, it&#8217;s a wake-up call. Nobody can claim to know it all, but with that much experience you&#8217;re doing well.</p>
<p><span id="more-515"></span><a href="http://www.whiteinkblog.com/wp-content/uploads/2009/05/deskedens.jpg"><img class="alignnone size-full wp-image-539" title="deskedens" src="http://www.whiteinkblog.com/wp-content/uploads/2009/05/deskedens.jpg" alt="deskedens" width="800" height="530" /></a></p>
<p>Monday was pretty chilled, when I came in was given my own desk, a new 24&#8243; iMac and a bright room to share along with about 15 other designers. The wooden floors, massive desks, high ceilings makes working comfortable. There&#8217;s no feeling of hierarchy or fat-cats sitting in their offices telling the pixel-pushers what tricks to perform. Everyone is working together, to improve as a unit, as a collective; in college you don&#8217;t get that as much but I think that comes with time &#038; experience. Students aren&#8217;t the best at taking criticism or even opinion, it offends them. Sometimes it&#8217;s the system you have to thank for this, promoting &#8216;competitive atmospheres&#8217;, it may sound like a good approach but in practice it&#8217;s not (from a students point of view), it&#8217;s detrimental to developing a genuine love for what you do. You should naturally have ambition, and not because you&#8217;re going to <em>win</em> something. There is a serious difference between doing your best and trying to be the best, they sound similar but yield polar results. Having everyone in competition creates resent, traditionally to win a competition you need to be better then the rest and everyone else needs to be worse than you; so by definition in a competitive atmosphere everyone is hoping that everyone elses work is worse than theirs. Why help someone if it means they are going to beat you? Time and time again students get upset because someone gave an opinion on their work that wasn&#8217;t positive, a critique. Not everyone is going to like what you do, it&#8217;s a good thing they don&#8217;t, instead of getting upset ask why they said what they said, regardless of how they phrased it. I wonder how students would react to Gordon Ramsey as design maestro.</p>
<p>I digress.</p>
<p><center>
<div style="padding-bottom:10px; padding-left: 20px;"><object width="425" height="344" data="http://www.youtube.com/v/am5Y5Pvrb4M&amp;hl=en&amp;fs=1&amp;rel=0" type="application/x-shockwave-flash"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/am5Y5Pvrb4M&amp;hl=en&amp;fs=1&amp;rel=0" /><param name="allowfullscreen" value="true" /></object></div>
<p></center></p>
<p>The project I&#8217;m working on is from the <a href="http://www.cbs.nl/en-GB/menu/home/default.htm">CBS</a>, which is the Centraal Bureau voor de Statistiek, in english, Statistics Netherlands. They have a lot of data that needs to be presented as clear as possible. The project required us to come up with a new colour scheme that could be used in any of their graphs, forms and charts. They also required that the newly designed charts could be re-created in Excel. By the time I arrived the final colour scheme was decided upon but the implementation was still in progress. Here&#8217;s an example of a chart that needed to be reconsidered, it&#8217;s totally illegible on the left, CBS actually uses that, the right is the after. It may seem boring but what stands out for me is it&#8217;s relevance, this sort of work is essential to good design practice and awareness, it opens your eyes to reality a little more and reminds you that not all projects are like college projects. Here&#8217;s a side-by-side, before &#038; after.</p>
<p><a href="http://www.whiteinkblog.com/wp-content/uploads/2009/05/cbsformsbeforeafter.jpg"><img class="alignnone size-large wp-image-570" title="cbsformsbeforeafter" src="http://www.whiteinkblog.com/wp-content/uploads/2009/05/cbsformsbeforeafter-1024x725.jpg" alt="cbsformsbeforeafter" width="1024" height="725" /></a></p>
<p><a href="http://www.whiteinkblog.com/wp-content/uploads/2009/05/picture-19.png"><img class="alignnone size-full wp-image-567" title="CBS Before" src="http://www.whiteinkblog.com/wp-content/uploads/2009/05/picture-19.png" alt="CBS Before" width="651" height="922" /></a></p>
<p>So many of the elements were unnecessary, they caused confusion and didn&#8217;t follow convention. For a statistical information like this it&#8217;s very important to keep in mind what is familiar to the reader. For instance there are 18 rows and 8 columns of numbers, most are double digits. They aren&#8217;t all related so that should be shown, it&#8217;s hard to tell if the top two rows of numbers relate to the 8th and 9th rows. By adding in some thinner rules I&#8217;ve sub-divided the chart. The thicker (6pt) rules divide page in half into two major categories at the top and bottom of the page, the thinner hairline rules (.5pt) sub-dive the two categories into more visually manageable statistics. Amongst what is already taught in college I would like to see an introduction of these ideas.</p>
<p><a href="http://www.whiteinkblog.com/wp-content/uploads/2009/05/picture-20.png"><img class="alignnone size-full wp-image-568" title="CBS After" src="http://www.whiteinkblog.com/wp-content/uploads/2009/05/picture-20.png" alt="CBS After" width="645" height="921" /></a></p>
<p>After a pretty relaxing first few days in Amsterdam I&#8217;m flying back to Ireland for the weekend for a friends birthday. I&#8217;m be back on Monday. If you&#8217;d like some further reading on my rant about students, I would suggest you read <a href="http://www.subtraction.com/2009/04/09/dear-designer-you-suck">Dear Designer, You Suck</a>. If you&#8217;d like to read more on design theory and practice or If you appreciate anything I&#8217;ve written regarding the above layout then you need to read <a href="http://www.vignelli.com/canon.pdf">Vignellis&#8217; Canon</a>, print it off, read it, then read it again, then keep it by your desk when you work. That&#8217;s the best advice I can give on it.</p>
<p>You can follow me on twitter for regular updates or if you&#8217;d like to get in touch, chat or network.</p>
<p><a href="http://twitter.com/YoussefSarhan">Follow Youssef Sarhan on Twitter</a></p>
<p>For now, Auf wiedersehen, no, wait&#8230; vaarwel!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.whiteinkblog.com/2009/05/13/edenspiekermann-students/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Design Deconstructed: Google</title>
		<link>http://www.whiteinkblog.com/2009/02/03/design-deconstructed-google/</link>
		<comments>http://www.whiteinkblog.com/2009/02/03/design-deconstructed-google/#comments</comments>
		<pubDate>Tue, 03 Feb 2009 14:41:03 +0000</pubDate>
		<dc:creator>Youssef Sarhan</dc:creator>
				<category><![CDATA[Photography]]></category>
		<category><![CDATA[Typography]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Arial]]></category>
		<category><![CDATA[Design Deconstructed]]></category>
		<category><![CDATA[Design Process]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Layout]]></category>
		<category><![CDATA[Search]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Website Design]]></category>
		<category><![CDATA[Youssef Sarhan]]></category>

		<guid isPermaLink="false">http://www.whiteinkblog.com/?p=300</guid>
		<description><![CDATA[In this feature I try to shed some light on the development process and/or elements of a selected design. By deconstructing the design into layout, typeface, colours &#38; use of images we will hopefully develop a better understand of how the final result was achieved. I feel that this degree of awareness is crucial to [...]]]></description>
			<content:encoded><![CDATA[<p>In this feature I try to shed some light on the development process and/or elements of a selected design. By deconstructing the design into layout, typeface, colours &amp; use of images we will hopefully develop a better understand of how the final result was achieved. I feel that this degree of awareness is crucial to a graphic designers development; being able to not only identify the design elements but the rationale behind them.</p>
<p>In this edition of <a href="http://www.whiteinkblog.com/category/design-deconstructed/">Design Deconstructed (DD)</a> I am going to be highlighting and discussing some of the design issues of internet/information magnate, <strong><a href="http://www.google.com/">Google (http://www.google.com/)</a></strong>.</p>
<p>Ever since it&#8217;s early days Google has been aiming high, in 1998 they had circa 25,000,000 million pages that were searchable. That was pretty huge. The site read, &#8216;<em>Index contains ~25 million pages (soon to be much bigger)</em>&#8216;, there weren&#8217;t wrong either; 10 years later they broke 1 trillion. This number is growing at an alarming rate so the information they need to display must be displayed clearly. The idea is that you can find exactly what you are looking for, and easily. I can imainge reading this at some point in the future and these figures being irrelevant.</p>
<p>Something interesting to note:</p>
<p>&#8216;So how many unique pages does the web really contain? We don’t know; we don’t have time to look at them all! :-) Strictly speaking, the number of pages out there is infinite — for example, web calendars may have a &#8220;next day&#8221; link, and we could follow that link forever, each time finding a &#8220;new&#8221; page. We’re not doing that, obviously, since there would be little benefit to you. But this example shows that the size of the web really depends on your definition of what’s a useful page, and there is no exact answer.&#8217;</p>
<p>Ok, onto the visuals of Google. There are many variations of google, depending on country etc. I am going to use www.google.com as the example.</p>
<p style="text-align: center;"><a title="Google Home Page by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3249678243/"><img class="aligncenter" src="http://farm4.static.flickr.com/3493/3249678243_34da73d4e2.jpg" alt="Google Home Page"/></a></p>
<p><span id="more-300"></span></p>
<p>The main content (search field, buttons, advanced search link etc) are center aligned. There are links at the very top, linking to different areas within google. Areas such as Images, Video, Maps, Gmail, iGoogle, etc. Upon searching you are prompted with search suggestions, this can be a very handy way to search for related content. It can also be a bit of a &#8216;feeder&#8217;, telling you what to search for. Sometimes distracting, sometimes helpful.</p>
<p style="text-align: center;"><a title="Google Search Suggestions by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3250516640/"><img class="aligncenter" src="http://farm4.static.flickr.com/3057/3250516640_a16a8a19ff_o.png" alt="Google Search Suggestions" width="400" height="220" /></a></p>
<p style="text-align: center;"><a title="Google Logo 1998 beta by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3250529670/"><img class="aligncenter" src="http://farm4.static.flickr.com/3450/3250529670_fded5a4b73.jpg" alt="Google Logo 1998 beta" width="400" height="118" /></a></p>
<p>The current official Google logo was designed by Ruth Kedar, and is a logotype based on the <a href="http://www.identifont.com/find?font=catull&amp;q=Go">Catull typeface</a>. For me, it seems like an unorthodox choice of typeface, but google has become so easily recognizable it works. I&#8217;m not sure a sans-serif would be able to replace it. However I could see google changing their logo in time, it could do with a make-over. I feel, the bevel/drop shadow is very &#8220;Look what I can do in photoshop&#8221;, but in reality, it works as Google is a service that does it&#8217;s job excellently, it&#8217;s service speaks for itself. It&#8217;s not relying on tidy kerning and a slick colour palette. The logo works because the technology works. In saying that it has become something very distinctive. These colours are bold and are now strongly associated with Google.</p>
<p style="text-align: center;"><a title="Google Logo 1999-Present by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3250529782/"><img class="aligncenter" src="http://farm4.static.flickr.com/3385/3250529782_3db9137988.jpg" alt="Google Logo 1999-Present" width="400" height="157" /></a></p>
<p>Search results are displayed clearly, with enough emphasis on what are Paid Ads and what are Indexed Pages. It&#8217;s important that these are separated, for a couple of reasons, most importantly from a users point of view; it allows people to choose whether or not they are clicking on an Advert, it also means that adverts get their own place, they&#8217;ll stand out and thus that is the privilege you get by paying for listings. Something that irritates me are integrated advertisements. Links that are styled to fit the page, where you believe that the links are actually part of the site but they turn out to be AdSense/AdWord links. I&#8217;m sure we&#8217;ve all experienced this, after a while you can spot them, and learn to avoid them. Perhaps styling adverts too much like page content is a bad idea, google seems to do that well on their search pages.</p>
<p style="text-align: center;"><a title="Google Search Results Example by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3249741513/"><img class="aligncenter" src="http://farm4.static.flickr.com/3375/3249741513_a2ccfbb027.jpg" alt="Google Search Results Example" width="400" height="254" /></a></p>
<p>I found it hard to identify a grid, but there&#8217;s more a logical arrangement rather than a strict grid, it seems to work. All indexed results appear on the left with a line-width of about 545px. This is the same on all resolutions. The AdWords take up just under a 3rd of the screen to the right. So you could basically say it&#8217;s 2 thirds indexed listings, 1 thrid ads. Roughly.</p>
<p style="text-align: center;"><a title="Google Result Layout by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3249779945/"><img class="aligncenter" src="http://farm4.static.flickr.com/3523/3249779945_306626d0b5.jpg" alt="Google Result Layout" width="400" height="298" /></a></p>
<p>The typeface/font choices are pretty simple:</p>
<p style="padding-left: 30px; background-color: #eeeeee; text-align: left;"><code>.h{<br />
font-family:arial,sans-serif<br />
}</code>
</p>
<p style="text-align: center;"><a title="Google Body Typeface by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3249858781/"><img class="aligncenter" src="http://farm4.static.flickr.com/3355/3249858781_cc2aae540d.jpg" alt="Google Body Typeface" width="400" height="361" /></a></p>
<p>The colour palette doesn&#8217;t really exist apart from the logo. Links appear blue and turn red for the duration of time you hold down on them.</p>
<p style="text-align: center;"><a title="Google Palette by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3249858839/"><img class="aligncenter" src="http://farm4.static.flickr.com/3025/3249858839_eebec6342b_o.jpg" alt="Google Palette" width="400" height="250" /></a></p>
<p>Another small obvious feature I like is the result information bar that appears on the right, above the adverts. It has a link to the definition of the word you&#8217;re searching for. There are many other handy codes you can put into your search as a prefix or suffix to tweek what google searches for.</p>
<p style="text-align: center;"><a title="Google Search Results Info by Youssef Sarhan, on Flickr" href="http://www.flickr.com/photos/youssefsarhan/3250686790/"><img class="aligncenter" src="http://farm4.static.flickr.com/3017/3250686790_82610e060d_o.png" alt="Google Search Results Info" width="447" height="47" /></a></p>
<p>There are other user features to Google, but these are the main ones that I feel you have to deal with 90% of the time. It&#8217;s a simple interface thats easy to use, tried and tested daily by millions of people. For the moment, Google&#8217;s layout works, and it is small on-going changes that will improve it. A drastic change couldn&#8217;t really happen, people are to used to it. It may not be slick or sylish, but overall, it&#8217;s a great layout, with a solid backend, and for it&#8217;s purpose it&#8217;s working perfectly. Ok, so I hope you found this useful. What do you think?</p>
<p>Is Google user-friendly?<br />
What do you like/dislike?<br />
Anything you would change? Suggestions?<br />
Perhaps you might just be onto something.</p>
<p>By the way, if you like you can <a href="http://twitter.com/YoussefSarhan">follow me on twitter</a>, I&#8217;l be posting links to blogs and other cool things, along with my own thoughts and questions. If you&#8217;re into it, follow me!</p>
<p><a href="http://twitter.com/YoussefSarhan">http://twitter.com/YoussefSarhan</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.whiteinkblog.com/2009/02/03/design-deconstructed-google/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
