Above is the presentation we used to pitch our three ideas, The feedback from this crit was really useful and definitely needed because we had to make a definite decision about which idea to pursue. the main feed suggestions were to simplify down what we aimed to do in a week and be precise about our goals. Beyond this the overwhelming vote was in the direction of the Tongue Twister Tweets. however, we noticed that Simon, our tutor, voted for the Type and I blog which made the decision between the two difficult to make. So, we asked if we could talk to him for a moment about why he thought we should pursue this idea. He said that the personal advantages of doing something like Type and I, and the contacts we could form would be invaluable to each of us...which pretty much made the decision for us.
After a day of developing both 'The Sauce' and 'Tongue Twister Tweets', on the way back from college Vanessa came up with the idea of, read more... into typography. A resource that gives exposure to student work and looks at what studios are doing in the discipline with the added extra of a collection of links to resources to help students crack the enigma that many perceive typography to be. We will also Include interviews with professionals giving advice based on their experience with type. later that night me and Nessa got together to look at some website layouts and construct an email to send out to some studios and see if we got a response.
We decided on a really heavily image based look so that the content would absolutely drive the aesthetic and not become over powered by the layout or branding. The email we sent out to three different studios can be found below. Hello there!
We are a group of Graphic Design students at Leeds College of Art and we are trying to create a viral campaign exposing the amazing typography going on in Yorkshire. We love the typographic work Magpie are doing at the moment and want to shout about it. Would you be happy about us using some of the images from your website to do so? we will of course include a link to your website.
We would also love it if you could answer just a few questions about your typographic practice:
1.When approaching a brief how much time do you spend considering the typographic aspect of the designs?
2.Have you attempted designing a font? and what are the difficulties you have encountered in doing so?
3.Where do you draw your inspiration from when designing type?
4.Could you suggest a designer in this area that has inspired you?
5.What is you favourite font at the moment?
Thank you so much for your time, we really appreciate any wisdom you can share,
hope to hear from you soon.
Out of the three we contacted one got back to us, Magpie comms.
Hi Beth,
Good to hear from you and it's great you want to showcase Magpie's work.
I will refer you to one of our design team to answer your questions.
Good luck with your campaign. It sounds great, and we'll look our for it once it's launched.
Becky
Becky Edlin
Director
Magpie
We hope to hear from them soon as to the questions because it would help us fill some of the interview space on our website.
After our last group discussion we agreed to try and design some material for 'The Sauce' idea because this seemed to be the dominant direction that we were going in. These are some starting point sketches.
The idea of a banner came from the aesthetic research done into sauce brands and once again plays on the idea of the double meaning of the word. Both the source of news and a sauce of hilarity applied onto the news. We also looked into how this could be translated into some sought of web design in a quick mock up in illustrator. The idea being the word sauce on the banner is the source of the sauce. i.e. the news stories in the columns below. The three column layout is something we talked about because we wanted to emulate printed newspapers with individual scrollers so that separate pages would be unnecessary. However, we will need to look into web hosting with as little coding as possible, to understand what is possible.
Another name possibility for the same idea was Jellow, derived from the term yellow journalism which I found during my analysis of a news paper article. However, after coming together we decided the most promising name to pursue was 'The Sauce' because it was a brand that could be widened to apply to lost of areas such as 'hot Sauce' for the latest news.
These are some designs done by Ashley for the Sauce brand. they show two different possibly ways of approaching the branding and identity. Ether tongue in cheek (above) or clean smooth and minimal, content being the focus.
Once we sat down and talked about all the designs we had brought in we realised we needed to consider colouring. Ryan instantly suggested a mint green because of its connotations of freshness which would work well with news stories. So he went away and started combining some aspects of the designs that we had brought in with the colouring. Below is the most recent of his mock ups.
Being aware that we needed to have more than one idea for the pitch we very recently came up with the idea of tongue twister tweets. These are also some early branding sketches that we generated.
The idea above is taken from the impossible triangle and is intended to suggest the impossibility of the tongue twisters. it was also designed with the small format of twitter icons in mind.
This is a very basic an logical transferal of the idea of something twisting and probably will not lead anywhere.
This is another of Ashly's digital mock ups and I really like this one. It has a simplicity that would shrink down to the small icon size of a twitter thumbnail and includes the tag line we decided on when we came up with the idea.
Tongue twister tweet is an idea that we have come up with recently as an expansion on the idea of news reports as a way of getting people to read more. It would simply be condensing the latest news into quick and fun tongue twisters that challenge people linguistically and keep them in the loop at the same time. As an exercise we attempted producing some tongue twisters about current new stories. -Collaboration of Ukrainian coppers kill copious crowds in Kiev. -Crazy capsuled creature keychains create controversy in China.
This is such a simple idea that it might just work. we will definitely include it in our pitch.
Because there were a lot of ideas flying around in our last session surrounding the Sauce idea we decided to sit down again and exactly pin down the content of 'The Sauce'. Previously we had mentioned the fact that it would be a selection of news stories augmented by ridiculousness. We had said we would do this by creating a randomiser and putting a number of random words on pieces of paper and picking them out of a hat and adding them to a story. So we had an attempt at this with the recent riots in Kiev story.
However, we found that although is was funny to create these stories they just didn't have that w witty edge we were going for. So we tried another approach. Ridiculous stories that are reported by other newspapers reported with heavy satirical edge, as if to say "this is news...really?" This seems to work much better in practice. We will create a mood board for the presentation to help outline the exact way we will create the tone of voice we wish to achieve. We also decided on the different section of the website. they will be: -Hot Sauce (celebrity gossip) -Fresh Sauce (latest international news) -D.I.Y Sauce (peoples' submitted stories from their local areas)
We started out this session talking about the direction we talked about in the last session; Dyslexia. We felt like it provided a good message but would be very difficult to strike the right tone of voice, not to be patronising and not to be insulting. So we went back to some privies ideas we had and started to analyse and develop them. One of these was the idea to create widely exaggerated news reports in an attempt to get people to take notice of what they are reading and not always believe everything. There are similar websites such as buzz feed and onion, which we will need to look into in order to create something with a unique selling point. However, at this point in time we considered the idea of augmenting real news reports rather than simply making up something entertaining. We also considered the idea of contacting an existing news paper and reporting on the same things as them but with random added extras that are weird and wonderful. We could put links to the actual report endorsing them and providing them with a new audience. In return they would suggest us and promote what we are doing on line. When considering who would be the best target audience for this further research is required but again at this stage we feel a young adult audience would be right. This is because we want to create a slightly strange mix of weird and wonderful content with a strong assertive written style, which would need a relatively well educated and mature audience to fully appreciate the comic style, yet also a slight silliness will be involved in the oddness. To create this specific tone of voice, we want to look into both serious news articles and how they are constructed and exciting omit work which has the randomness of content we are looking for. We also considered the idea of creating a randomiser full of words which could stimulate the augmentation of stories in an amusingly unpredictable way. When it comes to names for this venture we really liked the name 'The sauce'. This is a reference to trashy magazines that are constantly say 'a source says that...' but not backing up or substantiating any claims, clearly false information. However, the change in spelling has a quirky edge to it suggesting the hint of the ridiculous and the idea that we are adding something to the simple story base. We will each go away and research similar ventures and ways that we might construct this particular tone of voice, not only through the written content but the designs as well.
Below details of the ten topics I will be covering when I produce my layout designs for this brief. With them I have put links to sources such as other blog posts detailing mine or others research which has been done for this brief. 1. Serif or Sans Serif (the battle of legibility and superiority) -Becca's blog link impending -Eva's blog 2. Anatomy of type - Becca's Blog link impending 3.Italics -eva's blog
4. Colour Schemes
- My blog (second part of post 9. onwards)
5. Colour schemes and how they apply to print.
-Melissa's blog
6. Colour associations and psychology
-My blog (first half of post)
7. Chronologies of type
-Olivia's blog (awaiting link)
8.Web Layout Design
-My blog
9. Grids and how they work
-Thinking with type resource
-My creating Grids from layouts exercise
10. Colour Gamuts
-my blog
Because one of the questions I wanted to answer in my layout designs was how to create web layouts I have done some research and collected the result below to be the content for my designs. This is more than I intend to include in my designs but that is because I want to allow myself flexibility in the future when is comes to deciding the precise angle the content will take. The article I found on creative bloq is perfect because it uses witty comments and top tips that make a great how t guide. In the future I may well break this down and use only parts but I felt it better to keep it intact for the sake of coherence in this post.
Claudio Guglieri, associate creative director at San Francisco agency Fantasy Interactive, walks you through the process of designing a website layout from start to finish.
When approaching the topic of designing a website layout, I thought about common mistakes I have seen in my years designing, especially with interns and new designers fresh fromweb design training.
Within this short list of steps to the perfect website layout, I aim to cover what I believe every new website builder working within a digital agency should know and do before starting a new project, and what they should pay attention to during the process.
These principles cover not only design aspects such as landing page design but also general workflow issues that will get the job nicely done. Follow them and you'll soon be on your way to creating professional website layouts.
01. Put your thoughts on paper first
Very initial sketches of an illustration series about cities around the world
This seems very obvious but I've found too often that designers jump straight into Photoshop before giving any thought to the problem they are trying to solve. Design is about solving problems and those problems can't be resolved through gradients or shadows but through a good layout and a clear hierarchy. Think about the content, the layout and the functionality before starting to drop shadows.
02. Start sketching a top level framework
Sketching a basic wires will help you to resolve UX problems and to structure the layout
When I'm asked to create a look and feel for a project, the first thing I do is come-up with a top level framework that solves all the design problems. The framework is the UI that surrounds the content and helps to perform actions and navigate through it. It includes the navigation and components like sidebars and bottom bars.
If you approach your design from this perspective you will have a clear understanding of what your layout needs will be when designing sections beyond the homepage.
03. Add a grid to your PSD
An example of a 978 Grid with a 10px baseline
It's as simple as it sounds. Before starting to design anything in Photoshop you need a proper grid to start with. There are no valid excuses for starting without a grid, and yes if you don't, I can assure in one way or another, the design won't look as good.
A grid will help you to structure the layout of the different sections; it will guide you through the specific screen size requirements, and help you to create responsive templates, to be consistent in terms of spacing as well as many other design issues.
04. Choose your typography
A general rule of thumb is to use no more than two different typefaces in a website layout
Exploring different typefaces and colours is part of the discovery phase of a project. I would recommend not using more than two different typefaces in a website but it really depends on its nature you could use more or less. Overall choose a font that is easy to read for long amount of text and be more playful with titles and call to actions. Don't be afraid of using big fonts and overall be playful and consistent when using typography.
05. Select your colour theme
Use a limited set of colours and tones to guard against visual overload
Throughout the process of choosing a set of typefaces to use you should start exploring what colours you will use in the UI, backgrounds, and text. In terms of colours I recommend using a limited set of colours and tones for the general user interface.
It's important to apply those consistently across the UI depending on the element's functionality. Think about the layout of sites like Facebook, Twitter, Quora, and Vimeo. Besides the UI there shouldn't be any colour restriction for illustrations or graphic details as long as they don't interfere with the functionality of the components.
06. Divide the layout
The simpler the structure of the site, the easier it is for users to navigate
Each section in your site needs to tell a story. It needs a reason and a final outcome for the user. The layout needs to help the content highlighting what are the most important pieces in that story. In reality there shouldn't be too many call outs on a page so everything should drive to that final "What can I do here".
Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. At the end you'll be surprise how hard is to keep it simple.
07. Rethink the established
Do we really need a search button any more? In most of the cases the answer is no
As designers we shape the way users browse the internet, it's up to us to decide how many steps a simple action will take and how efficient our site will be. Design patterns and conventions are there because they work but sometimes they are there because no one spent enough time evaluating them or rethinking them. It's important to rethink the established interactive patterns on any component and to see how we can improve them.
08. Challenge yourself
I encourage every designer out there to challenge themselves on every project. Innovation doesn't always come as a requirement for the project so it's up to us to come up with something interaction or design related. Examples of different challenges could include using a new grid system, creating a new component, or even minor challenges like avoiding blend modes or using a specific colour.
09. Pay attention to the details
Game work in progress: detail view
This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that "love" could come in different ways.
It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential and also natural if you really enjoy what you do.
10. Treat every component as if it could be presented to a design contest
Pay attention to every component, and the whole will be more than the sum of its parts
I have to admit that this piece of advice is not mine. I heard it in the past at Fantasy Interactive and I was shocked by how clear and true this statement was. Each component needs to be designed as it could stand alone as the best component ever. Sometimes designers leave some parts of a site last on their to-do list and show little respect to them at the end.
ADVERTISEMENT
11. Sharpen your work
To avoid blurry pixels, try to set the right contrast between strokes and background or background colours
Besides any aesthetic consideration there are some common things that have to be avoided in order to create a clean and correct piece of work. Some things you should be on the lookout for when trying to sharpen your work should include gradients banding, blurry edges, font rendering options (some fonts depending on their size are best viewed on a specific render mode), and strokes that merge badly with the background.
These are just few basic examples of issues to look for but in reality the list is endless. Always look at your design as a whole to see if everything works well and then analyse each component individually more carefully.
12. Tidy up your PSDs
This is (along with the use of a grid) one of the most important pieces of advice when designing with Photoshop. Despite the size of the project and the number of designers working on it, you need to keep your files clean. This will make it easier to export different sections, to speed-up the design process and to work with shared files with other designers.
13. Design the best case scenario but prepare for the worst
Bear in mind how your layout will work on different devices and screen sizes
As designers our job is to solve problems through different constraints. With web design, the constraints range from conceptual and technical issues to content related issues.
We need to build a site that can work not only in the ideal scenario, but also in the worst-case scenario. For instance a user could be using a really small screen and check the site when there is barely any content on it so it looks broken.
However for the purpose of presenting our work I always strongly recommend building the best case scenario for it. Therefore we are going to display the ideal amount of text and we are going to show the site inside the ideal browser size that should be the most common scenario for most users using it.
14. Obsess over the design until you hate it
If you are passionate about design I'm sure this is something you are already doing. Whenever I finish a comp I feel proud of, I tend to make that comp a part of my life. I take screenshots of it, check it out it different devices, make wallpapers of it and even print it and hang it on the wall.
Throughout this process I get to a point where I finally end up hating it; I start seeing everything that's wrong with it and eventually I change it. Disliking your previous work is sign of maturity, and it means that you are finally learning from your own mistakes.
15. Avoid spending too much time on a concept before sharing it with the client
When proposing an interactive concept or a design 'look and feel', you need to ensure that you and the client are both on the same page as soon as possible. Once that happens and the initial concept is approved you can relax a little bit and start production.
But if after presenting the first concept and the client doesn't fall in love with it, you should gather enough feedback to bring a second more appropriate concept to the table.
Developers are creative people and they love their jobs as much as you do. But they are not always included in a project from the very beginning and often times only get involved when the concept is decided and their creative role has been overridden. This process is wrong; some of the best ideas come from the development team, so make sure you team up with them from the very beginning of the project. Sharing your concepts and excitement with them will lead to better ideas and a better execution in the end.
17. Presentations: explain it to me like I'm a four-year-old
It's just as important to produce great work as it is to present it. Your best design can be ignored or thrown away if you don't present it properly. Always keep in mind that what is totally clear to you might not be that clear to somebody seeing your design for the first time.
18. Love each of your ideas but don't get too attached to them
There is a thin line between knowing when to advocate for your ideas and learning to realise when your team or client doesn't see them as 'the one'. As a designer you need to believe firmly in what you do, but you should also be open to quickly turning over that idea and coming up with something else. Don't forget that there is more than one unique solution.
19. Track down your design during the development process
If you work inside an agency you might have realised how easy it is to find yourself struggling with the design of a new project when the previous one you just finished is being developed. Contrary to general belief, your work on a project doesn't end when the PSD and styles- sheet are delivered.
If you really care about your designs and interaction ideas being well executed, check in on your old best friends the developers from time to time and help them as much as they need to ensure that everything little pixel is perfect.
20. Show your work in progress
Share your style sheets and work in progress components with the community
As part of a community of designers, we all love to see not just the final results but also the work in progress. Sometimes the best part of a project is left out for several reasons and gets lost in your Archive folder. Once the project is done and you get the approval from the client/producer promote it and if possible create a case study with the work in progress and designs that didn't make it to the final release. You will be helping by contributing to the community's knowledge and you will get valuable feedback in return.
The most noticeable thing with this font is the way the capitals have a straight orientation but the lower case are italic. this creates the impression of something special and important in a similar manner to medieval illuminated manuscripts. The font is clearly derived from sable origins because of the smooth way the line weight changes, rather than instantly changing at a curve like anything calligraphic would.
Although the platform for this font (signage), allows for a much more highly ornamented aesthetic a simple yet striking sans serif has been opted for. In fact it bears strong similarities to the modern angular font of the Grommet Burger Kitchen font. the simple heavy strokes suggest that this is of wood type origins yet the addition of a drop shadow instantly creates a combination of the old and the new which fits with the chic identity of a modern day barbershop.
I went in and asked how this window sign was created and apparently all the black and gold on the lower letters is on the exterior of the glass and the 'old town' letter filling is on the interior, giving it a sense of depth. The heavily ornamented font has ver strong connotations of and similarities with old fair ground fonts. In fact I think the halfway markers on each letter allow a sign painter to match up the letters, or at least possibly started out that was but have evolved into ornamentation. So In conclusion I think that this font is too heavily ornamented for it to be worth while producing it out of lead or wood, so would only suit signage, therefore hand rendered origins are the only explanation.
This takes the aesthetic of wood block type to the absolute extreme. Each aspect of each letter is formed to of a rectangle wherever possible and curves are a last resort. It seems like this font either hasn't been thought through or it is looking to be uneven. This is because there seems to be no overhang on the letters like G, so the heavy flat bottomed letters on either side appear a lot larger. Also the complete disregard for apertures rather compromises the legibility of the font because you find the eye reading the lines cutting through the letters rather than the letters themselves. The sleigh drop shadow or highlight confuses things slightly because this seems like something most likely achieve via screen print, suggesting that although the font may have been created with wood type in mind it is either digital or created like a collage from sections of paper.
This angular ampersand caught my eye because of the way the shape is much less abstract than some ampersands in roman and script font. In an effort to create simplicity the glyph has been taken back to its roots. Originally and was another letter of the alphabet in its own right known as 'et per se and', translated as and per se and. This is clearly the derivation of the name ampersand but the shape its self is an abstract version of the letters et. The figure eight shaped ampersands that have become common place are in fact very abstract. This ampersand although still recognisable as an ampersand to the modern eye is a clear combination of the aperture of an e and the stem and cross bar of a t. This fits with the simplistic functionality of the rest of the font and allows it to maintain a strong presence on the page next to the highly legible letterforms, aided by the decisive way it touches both the baseline and cap hight with solid heavy strokes
This brief asked us to create a viral campaign stimulated by the the words read more. When we first started chatting we wanted to define where to go with this by analysing the different types of reading such as reading expressions or lips as well as the traditional reading and the different formats that can take. We also discussed the fact that we felt the most successful viral campaigns had a humorous side which made people want to share them and that possibly the basic age target audience for a humorous campaign is most likely to be 18-30 because it is the widest possible with the sense of humour still being mostly similar. Any further and a large shift in what people find funny tends to occur.
Once we had discovered the most promising themes we divided up the areas of research but also identified areas such as general viral campaigns good and bad that we all needed to do. We ask agreed that going away and asking people what they most commonly read, in what format they read it and why. This was so that we could start to build an understanding not only of what people read but what the most profitable platforms might be for a viral campaign.
We also considered the connection between reading and writing, looking at the possibility of creating a story on twitter and illustrating and publishing it in some way. But we decided that each of us needed to go away and do some research and generate our own ideas and come back to it fresh. So we made a list of all the areas we wanted to start researching so that we could come up with a message when we next met. The major thing that we all needed to do was to ask people why, how and what people read.
We met again a couple of days latter and found that we weren't getting very far with the facial expressions idea or lip reading. The problem was that we needed a message to communicate to give the ideas grounding and purpose. then the idea of dyslexia came up after we started talking about the way reading might improve writing and it seemed like a good direction to go in. Settling on this has created a starting point for the specific campaign ideas to grow from and we each said we would go away do our own research and ideas generation.
Perhaps not an idea that we take to the end but something that has stimulated a lot of further ideas is using twitter to retweet spelling and grammar errors in an effort to cite the fact that it is something that happens to everyone. this idea has helped the message crystallise although we may not take it further. What we want to aim to do is reduce the stigma that surrounds dyslexia in an effort to remove the negative connotations of stupidity that are simply incorrect.
Previously we had been asked to bring three different layouts from different publications. We then overlaid them with tracing paper and attempted to pick out the grid. The grid below makes use of columns rather than many squares or rectangles (modular grid). What surprised me was the way that even when images are breaking the grid (on an angle) they are doing so by exactly the same amount. Although at fist glance this layout may not seem very similar from page to page the alignment of aspects from one page to the next appears when the gris is drawn in, clearly linking the layouts visually.
Sometimes the layout on one page did bot continue to the next in any way. this seems to be because there is an advert and its purpose is to grab attention. If it did follow the same grid as on the verso tun it would sink into the background much more. The grid here is slightly more complex than just a column grid. It is decided in the centre and then brought back together again by the thin column on the right of the page, making site the reader gets to the bottom.
This layout is way busier than any of the others. it seems to be a column grid but with many more horizontal divisions than previously found and in places that don't seem to correspond to one another. This could have been done to achieve the 'collage' aesthetic this is such a sign post of gossip magazines
Sometimes aspects align but mostly not. The rigidity created by these sparse horizontal alignments is then distorted by the odd off balance photo.
Subsequent to the workshop I did the same exercise with a full magazine to see if there was a grid that was applied throughout to achieve the same look.
There was a three column grid with some divisions and cross overs usually initiated by photos. Some horizontal alignment could be found but not a lot which suggests the dominant part of the grid is vertically aligned.
I took this grid and placed it over a few other pages. Although horizontal lines varied the three column aspect remained the same.
Even on pages where your first glance suggests the page is modular, once I placed the grid over it I found that in fact it also followed the three column plane, it was just the stronger horizontals that were added.
In conclusion the major thing that I have found is that a grid although not always instantly noticed by the uninitiated eye can create a connection aesthetically between numerous designs adding to the collective identity and branding that is so important in good design.
We decided on a really heavily image based look so that the content would absolutely drive the aesthetic and not become over powered by the layout or branding. 
However, we found that although is was funny to create these stories they just didn't have that w witty edge we were going for. So we tried another approach. Ridiculous stories that are reported by other newspapers reported with heavy satirical edge, as if to say "this is news...really?" This seems to work much better in practice. We will create a mood board for the presentation to help outline the exact way we will create the tone of voice we wish to achieve.
