Open publication - Free publishing
Brief Two What makes a good App
Brief Three Typo 12
Open publication - Free publishing
Brief Four ISTD Circus
Open publication - Free publishing
Design Practice
Showing posts with label Brief 2 App Design. Show all posts
Showing posts with label Brief 2 App Design. Show all posts
Tuesday, 11 December 2012
OUGD301 Presentation Boards
Brief One The Loft Space
Brief Two What makes a good App
Brief Three Typo 12
Brief Four ISTD Circus
Brief Two What makes a good App
Brief Three Typo 12
Brief Four ISTD Circus
The Circus app development
As time is short I am going to use the content from the Circus brief to propose an app design idea. Potential to submit with ISTD brief. I am also going to focus designing for iOS and a mobile platform rather than a ipad screen. Ideally I would ensure the design is suitable for both size screens. I do think in a museum people will be more likely to use the App from a Mobile phone.
My app idea in one sentence:
Circus Experience: Getting the most out of your Circus Experience.
Will include Introduction, maps, booking, details of each experience, Exhibit details ie history of costumes. Interactive features whilst at the Museum. Interactive feature share your Circus Experience.
From my research I should produce to communicate my idea and content to a developer:
1. a flow map
2. A series of wireframes
3. A series of storyboards
My app idea in one sentence:
Circus Experience: Getting the most out of your Circus Experience.
Will include Introduction, maps, booking, details of each experience, Exhibit details ie history of costumes. Interactive features whilst at the Museum. Interactive feature share your Circus Experience.
From my research I should produce to communicate my idea and content to a developer:
1. a flow map
2. A series of wireframes
3. A series of storyboards
Mock ups in iPhone 5:
Saturday, 8 December 2012
Digital research/ Web and Apps Wireframes
How to design Content maps for websites
How to design better Apps
1. Wireframe Your App
When we talk about an app’s design, we’re talking about two main components. These two components are user experience (UX) design and user interface (UI) design.
Experience design is all about the goals of the app, such as which features to include, and how the user will accomplish those goals. The user interface design is what that experience looks like visually. That includes the colors, textures, and fonts used to craft the visual style of the app.
2. Use Finger-Sized Tap Targets This is the biggest thing you can do to improve the usability of your app: Increase the tappable area for every button. You’re designing for fingers and thumbs, not mouse cursors (which have a higher pointing accuracy). Apple recommends a minimum of 44x44px for any element the user is expected to interact with.
Now this doesn’t mean that the button needs to visually look that big. The tappable area can extend beyond the visual size of the button. This will help users avoid the frustration of trying multiple times to tap an element. Just be careful if you have several buttons close to each other. Make sure that your extra tappable area doesn’t overlap with other buttons.
3. Have Only One Primary Goal Per Screen When you’re designing a screen in your app, focus on the primary goal you want the user to accomplish. For example, in the email list screen in iPhone’s Mail app, the user’s primary goal is to read emails. Though there’s a secondary action for composing an email, the button is off in the corner and not emphasized.
4. Avoid Default Button Styles The default style for UIButtons on the iPhone is one of my biggest design pet peeves. Almost all of the default elements included with iOS look good. Then there is the default button.
5. Add Extra Views When There’s a Lot of Information Moving into a new view (either through a push or modal transition) is very easy for the user. So if you find yourself trying to add too much information to a single view, then just add another view.
The Benefits of wire framing your design
Free templates
Tips for wireframing
Research assesses that Companies need mobile enabled websites
App design touch screens
To the untrained eye, a finger looks podgy
and inaccurate in comparison to a mouse
pointer. How, you might wonder, can this
flabby, clumsy little digit replace the pixel-perfect
accuracy of a mouse? Well, though human fingers
may seem like bloated embarrassments, they are in
fact more versatile. They can pinch, rotate, zoom,
stroke, dab, slide, flick, and many other gestures are
within the finger’s repertoire. But, best of all, the
finger allows something called Direct Manipulation.
What is Direct Manipulation?
When you move a computer mouse, this motion is conveyed along the wire connecting the mouse to the computer, then into the computer screen, then to a mouse pointer which moves in relation to the motion of your hand. The action on the screen and the action of your mouse are connected, but of the input device (the mouse) causes the motion of the pointer. Contrast this with the way a user’s fingers manipulates targets on a touchscreen mobile device: On a touchscreen you literally and directly ‘move’ the objects you are interacting with. Touchscreen manipulations, and the way we interact with actual 3D objects in real life, are almost exactly the same.
The manner, direction, distance, and speed of movements are all directly determined by your fingers. Fingers specify the direction of travel, how far the object moves, and how fast it moves. This is the first time in the history of computing that mass market devices have allowed direct, and literal, manipulation. The touchscreen is totally unlike a mouse. With mouse, you must fish about wildly on the screen, first to locate the pointer position, and then to adjust your movements relative to this starting point. The touchscreen, however, allows you to instantly ‘see’where you want to touch and home in straight on this point. There is no need for orientation. This is the magic of touchscreens.
The other great thing about touchscreens is that you have lots of fingers available to you at any one time. Again, contrast this with the traditional mouse or stylus input system. Mobile devices have been popularised by the emergence of the finger as a new input instrument. It has often been said that the best camera is the one you have with you, the same is true of input devices. The best input device is the one you have with you. For most people on the move, this is the human digit. You don’t have to rifle through your dusty backpack for a stylus, or peck about on an inefficient travel keyboard. The touchscreen has liberated us from decades of cumbersome computer input paraphernalia.
Understanding finger ergonomics
Fingers can be remarkably efficient at inputting complex information. Consider the efficiency of sign language. See how vivid and meaningful hand gestures can be. Many touch screens respond to over eleven finger-touches simultaneously; this gives you enormous scope for different interaction methods in your apps.
Trends in mobile User Interface (UI) design and typography
The UI world is heading towards minimalism and simplicity, especially in mobile app design. The overburdened designs of the past have given way to a fresh new era of pure-purpose.
How offering fewer choices frees the user: Why less is more.
Good design is more about what you leave out than what you put in. Make sure you have refined your idea to its purest point. Take a leaf out of leading designer Jonathan Ive’s book. He has said, “Most of our competitors are interested in doing something different, or they want to appear new - I think those are completely the wrong goals. A product has to be genuinely better. This requires real discipline, and that’s what drives us - a sincere, genuine appetite to do something that is better. Committees just don’t work, and it’s not about price, schedule or a bizarre marketing goal to appear different - they are corporate goals with scant regard for people who use the product.” This is key to great design. The more choices you offer a user, the less they tend to enjoy your product. This is because every choice left to the user is an unfinished design decision that you did not have the confidence or authority to make for them. Computers are fast becoming appliances, and this is no bad thing. Mobile devices with touchscreens are set to reach people in a way traditional computers never could - these are the people need you to design for, make good choices for them. Be brave and be bold.
Innovative App design
Many first-time designers fixate on an idea before considering the input system that controls the software. Remember: Input is everything.
Think first: How can I use this hardware in a unique and creative way? The purpose of your app stems from the input method used to control it.
Other input systems to be aware of on major smartphones include the GPS (Global Positioning System) which allows you to discover where a user is geographically – this is especially useful for mapping apps and other location-aware services.
Finally, there is a newer sensor, called a digital compass, which can not only geolocate a user, but also let your app know what direction the user is facing in. This can help with navigational apps. You can also dream up uses that nobody else has thought up yet. All these control systems supply raw data, it’s up to you what you do with those data feeds.
Working with the accelerometer
The accelerometer is an amazing device that can detect the direction and force of motion applied to a smartphone or other mobile device. It can be used to signal a change in screen orientation by a quick flick of the wrist, or a variety of other manual gestures. The accelerometer feeds live data to the smartphone cpu, and you can interpret this data however you like. The possibilities are endless and exciting.
A free physics engine called Chipmunk Physics allows you to create movements in direct response to the force and direction of motion, responding as if it physically exists.. This is an amazing tool for any app designer and you can find out more about it here: http://chipmunk-physics.net/
This free app iHandy carpenter takes advantage of the accelerometer.
What is Direct Manipulation?
When you move a computer mouse, this motion is conveyed along the wire connecting the mouse to the computer, then into the computer screen, then to a mouse pointer which moves in relation to the motion of your hand. The action on the screen and the action of your mouse are connected, but of the input device (the mouse) causes the motion of the pointer. Contrast this with the way a user’s fingers manipulates targets on a touchscreen mobile device: On a touchscreen you literally and directly ‘move’ the objects you are interacting with. Touchscreen manipulations, and the way we interact with actual 3D objects in real life, are almost exactly the same.
The manner, direction, distance, and speed of movements are all directly determined by your fingers. Fingers specify the direction of travel, how far the object moves, and how fast it moves. This is the first time in the history of computing that mass market devices have allowed direct, and literal, manipulation. The touchscreen is totally unlike a mouse. With mouse, you must fish about wildly on the screen, first to locate the pointer position, and then to adjust your movements relative to this starting point. The touchscreen, however, allows you to instantly ‘see’where you want to touch and home in straight on this point. There is no need for orientation. This is the magic of touchscreens.
The other great thing about touchscreens is that you have lots of fingers available to you at any one time. Again, contrast this with the traditional mouse or stylus input system. Mobile devices have been popularised by the emergence of the finger as a new input instrument. It has often been said that the best camera is the one you have with you, the same is true of input devices. The best input device is the one you have with you. For most people on the move, this is the human digit. You don’t have to rifle through your dusty backpack for a stylus, or peck about on an inefficient travel keyboard. The touchscreen has liberated us from decades of cumbersome computer input paraphernalia.
Understanding finger ergonomics
Fingers can be remarkably efficient at inputting complex information. Consider the efficiency of sign language. See how vivid and meaningful hand gestures can be. Many touch screens respond to over eleven finger-touches simultaneously; this gives you enormous scope for different interaction methods in your apps.
Trends in mobile User Interface (UI) design and typography
The UI world is heading towards minimalism and simplicity, especially in mobile app design. The overburdened designs of the past have given way to a fresh new era of pure-purpose.
How offering fewer choices frees the user: Why less is more.
Good design is more about what you leave out than what you put in. Make sure you have refined your idea to its purest point. Take a leaf out of leading designer Jonathan Ive’s book. He has said, “Most of our competitors are interested in doing something different, or they want to appear new - I think those are completely the wrong goals. A product has to be genuinely better. This requires real discipline, and that’s what drives us - a sincere, genuine appetite to do something that is better. Committees just don’t work, and it’s not about price, schedule or a bizarre marketing goal to appear different - they are corporate goals with scant regard for people who use the product.” This is key to great design. The more choices you offer a user, the less they tend to enjoy your product. This is because every choice left to the user is an unfinished design decision that you did not have the confidence or authority to make for them. Computers are fast becoming appliances, and this is no bad thing. Mobile devices with touchscreens are set to reach people in a way traditional computers never could - these are the people need you to design for, make good choices for them. Be brave and be bold.
Innovative App design
Many first-time designers fixate on an idea before considering the input system that controls the software. Remember: Input is everything.
Think first: How can I use this hardware in a unique and creative way? The purpose of your app stems from the input method used to control it.
Other input systems to be aware of on major smartphones include the GPS (Global Positioning System) which allows you to discover where a user is geographically – this is especially useful for mapping apps and other location-aware services.
Finally, there is a newer sensor, called a digital compass, which can not only geolocate a user, but also let your app know what direction the user is facing in. This can help with navigational apps. You can also dream up uses that nobody else has thought up yet. All these control systems supply raw data, it’s up to you what you do with those data feeds.
Working with the accelerometer
The accelerometer is an amazing device that can detect the direction and force of motion applied to a smartphone or other mobile device. It can be used to signal a change in screen orientation by a quick flick of the wrist, or a variety of other manual gestures. The accelerometer feeds live data to the smartphone cpu, and you can interpret this data however you like. The possibilities are endless and exciting.
A free physics engine called Chipmunk Physics allows you to create movements in direct response to the force and direction of motion, responding as if it physically exists.. This is an amazing tool for any app designer and you can find out more about it here: http://chipmunk-physics.net/
This free app iHandy carpenter takes advantage of the accelerometer.
App design online course
To get me started with understanding more about App design I have been doing an online course with Excel Business. Basically the course has a Course diagnostic to guide you to the areas you wish to focus on. I have put more focus on the basics not the developing/coding at this stage. I can go back and change this as I progress through the course.
Theses are some infographics which came with the course.
The first explains the structure of the course and which modules cover which areas
1. Introduction
- Need to reserve an app name though the app-submission process similar to domain-name squatting early on.
- Platform choice iOS v Android - consider demographic of target audience
- Consideration to pricing -free(revenue from advertising), too low (perceived as low quality),too high. Offer lite versions to give a taster
- Websites which offer details on tracking success of apps -appannie.com and flurry.com
- Most users hear about your app through word-of-mouth or press coverage, about which you’ll learn more in Unit 18.
- App submission - iOS to Apple/ Android to Google Play
2. Basic Platform considerations
iOS v Android
- Will generally make more money on iOS. There are over 315 million iOS devices out there (iPhone, iPod Touch and iPad sales combined), and Apple has the largest credit-card number reservoir in the world. Although Google does not provide precise sales data, The Loop estimates that in 2011 Apple enjoyed a 12.4 percent share of the mobile device market while Google’s Android had 5.7 percent. If you had to pick just one platform, iOS will give you access to the largest number of customers, and more importantly the largest number of paying customers. For every ten apps that developers build, roughly seven are for iOS,” according to app-trackers, Flurry.
- iPhone users are prepared to pay for apps, while Android users, largely, are not. Since Apple started selling apps, iOS developers had been paid a total of $4 billion – Google refuse to release comparable data. It is estimated that a developer who got $1 on the iTunes App Store would get $0.24 from Google Play.
- Why tablets are not just big mobile phones. Tablets, in particular the iPad, are an immensely popular new platform with consumers. The marketplace for these devices is exploding. However, it’s important to recognise that there is a big difference between designing apps for tablet-sized screens and mobile phones. Just scaling your interface will not cut it. The ergonomics of a tablet are radically different from those of a mobile phone.
- Using 360 degrees of rotation/ Reach patterns
As you reach across the screen the hand is covering the screen so the hand would obscure any graphical transformations.
Best to have main controllers on easy reach of thumbs like above rather than higher up the screen as below
Always consider designing screen for both landscape and portrait- tablets are rotational devices.
Dont necessarily need to hard code the rotational feature as the software SDK automatically adds this functionality.
Check Flipboard for an elegant hard coded interpretation for rotational interfaces
Reach pattern on a mobile phone presents less of an issue as can generally place user interfaces anywhere on the screen.
The Killer App idea
The peculiar
paradox of app design is this: Simple is hard.If your app cannot be explained in one sentence, in clear, plain English, then you already have a marketing nightmare on your hands.
A few successful apps and the one sentence description that could be used for each of them: Instagram: Make your photos look old-fashioned and attractive.
Angry Birds: Fire flightless birds through the air to kill evil pigs.
Pages: Write and edit documents.
• The app stores are tough places to sell apps, discard any idea that you can’t figure out how to sell
• Use the power of YouTube to promote your app once it’s on sale
• Make a video that is compelling enough that people will share it even if they don’t care about your app
There are guidelines and conditions for designing apps (so avoid being too controversial)
Planning an App
Careful projet management is important when developing an app.
It is often most cost effective to design all the graphics of the App before getting a developer on baord. there is no harm scheduling a developers time as Mobile OS developers are in high demand.
You will also need to check what format the programmer requires graphics in. Usually you will deliver graphic designs as single layers exported to Jpeg or PNG formats. PNGs can contain transparent or ‘alpha’ pixels, so they are commonly used for graphical assets that move.
Storyboard the design, plan how the user will interact with the design and annotate appropriately.
A cheap project
management tool is Google Apps
You will also need to check what format the programmer requires graphics in. Usually you will deliver graphic designs as single layers exported to Jpeg or PNG formats. PNGs can contain transparent or ‘alpha’ pixels, so they are commonly used for graphical assets that move.
Storyboard the design, plan how the user will interact with the design and annotate appropriately.
Partnering with a programmer
A basic overview of the two major languages used by the leading mobile platforms.
Xcode
This the programming suite for Apple’s iOS and includes provision for deploying projects on the iPhone, iPod Touch and the iPad. This tool collection is mature and extensively documented – both by Apple and by the huge community of developers that use these tools. Xcode allows programmers to code in a language called Objective C, which is quick and powerful, but relatively unforgiving to newcomers. Seasoned programmers can also code in a variety of other languages and use Xcode to wrap these. The Xcode software is free to download and it is free to run code on the hardware simulator. However, to distribute apps to actual devices, or to submit an app to the store, you must sign up as an Apple developer for the price of $99 per year
Android SDK
This is a software development kit (SDK) which enables developers to create applications for the Android platform. It includes tools for programmers such as the required libraries, a debugger, a handset emulator, sample code and even some tutorials. Applications are written using the Java programming language. Android applications exist in .apk format and are stored in / data/app folder on the Android OS (the folder is accessible only to root users for security reasons).
These are examples of actual storyboards sent to a developer.
Introduction to Xcode
There is a whole introduction to coding which at this stage I have not time to go through. As with web design i think it would be useful to at least grasp an understanding so I will return to this later. I have embedded the videos as I only have access to this for a limited time.
Tuesday, 13 November 2012
Progress tutorial with Andy
The Loft Space
The Seasonal Promotional strategy works. Consider keeping some of the Seasonal imagery but use on other ways rather than behind the logo. Maybe consider getting a stamp printed wit the logo on so can stamp bags, labels and other collateral
Typo
Consider using different typefaces for each Speaker quote to convey tone of voice. Look at coloured stock maybe yellow for the 'gold' idea. Can carry this through to the posters.
The Circus
Logo works consider using the jacquered diamond in other letters as cut outs/? Could convey the projected lights/logo onto the building using a simple animation. Source some straight 'museum/exhibition' walls to display the signage rather than curved. Experiment with Vintage display type poster layouts for the Visitors Guide.
Andy said the designs made him think of this work: craigandcarl
App Brief
Find Computer Arts article about responsive design. Discussed using the content from wither Typo or Circus to inform the eventual App design.
The Seasonal Promotional strategy works. Consider keeping some of the Seasonal imagery but use on other ways rather than behind the logo. Maybe consider getting a stamp printed wit the logo on so can stamp bags, labels and other collateral
Typo
Consider using different typefaces for each Speaker quote to convey tone of voice. Look at coloured stock maybe yellow for the 'gold' idea. Can carry this through to the posters.
The Circus
Logo works consider using the jacquered diamond in other letters as cut outs/? Could convey the projected lights/logo onto the building using a simple animation. Source some straight 'museum/exhibition' walls to display the signage rather than curved. Experiment with Vintage display type poster layouts for the Visitors Guide.
Andy said the designs made him think of this work: craigandcarl
App Brief
Find Computer Arts article about responsive design. Discussed using the content from wither Typo or Circus to inform the eventual App design.
Monday, 12 November 2012
Choosing typefaces Print and Screen
One area I have been consciously trying to develop is my understanding of Type and Layout. Since Typo I have been dipping into a couple of books:
And also checking some websites.
What is becoming evident with Typeface choice is whilst there are no hard rules there are Typefaces which are appropriate or inappropriate.
I found Will Harris through Typophile. His website is a mine of information. He recommends typefaces which can work together.
The best combos tend to be a serif and san-serif from the same Type designer or foundry. Our from the same period
Ive had a look at Memphis the Slab Serif I have chosen for the logo for Circus.
Background
Egyptian, or slab serif, typefaces surged to popularity in the early 1800s. Memphis was the first Egyptian revival, designed by Dr. Rudolf Wolf in 1929 for the Stempel foundry. The letter shapes are geometric and stems and serifs have the same weight values.
Designer(s) Rudolf Wolf
Foundry(ies) Linotype , D Stempel AG
Release Year 1929
Country of Origin Germany
Classification Serif, Slab Serif, Geometric Serif
Original Format Metal (Foundry) Distributor(s) Adobe Tags geometric, slab serif
This http://typedia.com/search/release-year/1929 website is quite good as you can search for typefaces with the same release dates, authors and Foundries.
memphis-typeface_27
In addition to evolving from Modern “fat-face” typestyles, Dr. Rudolf Wolf’s conception for Memphis drew heavily from the 1927 geometric sans-serif typeface Futura by Paul Renner. Memphis may well be regarded as a serif variant of Futura, hence the appellation “Futura with serifs”.
I am going to try using Memphis and Futura. Need to experiment as Futura is san serif font and so may not be the best choice for the body copy. Also Memphis is based on a display typeface so again may not work as a body copy typeface.
I am aware the Barbican use Futura across their literature. Their Brand Guidelines are here.
A few tips on chosing web fonts
Hinting--this can make or break any screen font. Simple font shapes are easier to read. Slab serif, and sans serif faces tend to be easiest to read. Most people find serif faces more familiar--even on-screen. So sans serif type isn't necessarily most comfortable for people to read.
Larger x-heights help, because they give each letter more pixels to work with. Too high of an x-height, however, can make it difficult to distinguish between upper and lower case, and can make lines look crowded without extra leading.
Character spacing is crucial--
fonts that are too tight cause letters to touch on-screen. Touching letters make on-screen reading much harder. Faces with a little extra space between the characters are much easier to read on-screen. The two keys to making type readable are size and space. You can use any font you want, no matter how complex or wacky--if you use it large enough. But the best size to use for body text is the default browser size, normally +0 or "12" When you choose the default size, your visitors will see type set in the size they chose for their default--hopefully the size that's most comfortable for them and easiest to read. You can go one size smaller (-1 or "10") but I've found from thousands of reader letters, that readers are happiest when type is at the default size. They're so pleased that it's easy to read and can't figure out why it is on your site but not others. People would rather have larger type and scroll than smaller type and not scroll.
Biggest size don't - Points and Pixels
If you use CSS to specify the size of your type, do not use points or pixels as your unit of measure. This is a common mistake, and a bad one. When use you points or pixels, you lock out the browser's ability to make type larger and easier to read, so people are stuck with your size--which if you look around at sites that do this, is inevitably too small. Points and Pixels also create cross-OS problems. Font sizes on the Mac and Windows are different, and when you lock them in with these units of measure, they're going to appear too small on one system, and too big on another. So what do you use? Ems or %. an Em is the width of the upper case letter M in a font. This is a standard graphic design term (even if you haven't heard of it). Ems are scaleable, based on the visitor's default browser size. Percentages are just that--percentages of the default browser size. This means if people set their font larger, your sizes are scaled appropriately. So say your body size is the default, and your headers are 200%, they'll be twice the size of the default text. If you use these settings you can still set type with precision, without locking people into type sizes they find hard to read, which can cause them to leave without reading.
Line Length
One key to easy to read type is line length. The optimal length of a line of text should be between 40 and 70 letters long. Shorter than that and it's disruptive. Longer than that and people have a hard time finding the next line, so it slows reading. If you use the default browser font, a good rule of thumb is that your text blocks should be around 400 pixels wide. You may get a few people asking, "Why doesn't the text run from one side of my screen to the other," as if you are wasting space somehow. But if you did have very long lines, fewer people would read, and this would defeat the purpose of your site!
Horizontal Spacing / Tracking
Using CSS, it's also possible to change the "tracking" of type--the amount of space between letters. Because of the low resolution of the computer screen, letters that touch are doubly hard to read, so having a tiny bit of space between each letter, so they're distinct, is a real advantage. Georgia and Verdana have this. If you use default fonts, you don't need to add extra tracking, and you should not tighten the tracking to make the letters closer. It's a huge mistake that's guaranteed to make it harder to read your text. Use web-safe, undithered background colors and low-contrast backgrounds Solid colors are always less distracting, but low-contrast images can work for pages that use large text. The easiest-to-read text is black text on a white background. Patterned backgrounds decrease readability, so consider putting your graphics on the side, rather than under your text. Some people claim that lightly textured backgrounds help readability. But in reality, thee added "visual noise" and cluttered of these backgrounds really just makes each character less distinct and more difficult to read. So, keep your backgrounds pure. Don't set type in colors other than black People confuse colored text for links--and text set in colors is harder to read than text set in black
And also checking some websites.
What is becoming evident with Typeface choice is whilst there are no hard rules there are Typefaces which are appropriate or inappropriate.
I found Will Harris through Typophile. His website is a mine of information. He recommends typefaces which can work together.
The best combos tend to be a serif and san-serif from the same Type designer or foundry. Our from the same period
Ive had a look at Memphis the Slab Serif I have chosen for the logo for Circus.
Background
Egyptian, or slab serif, typefaces surged to popularity in the early 1800s. Memphis was the first Egyptian revival, designed by Dr. Rudolf Wolf in 1929 for the Stempel foundry. The letter shapes are geometric and stems and serifs have the same weight values.
Designer(s) Rudolf Wolf
Foundry(ies) Linotype , D Stempel AG
Release Year 1929
Country of Origin Germany
Classification Serif, Slab Serif, Geometric Serif
Original Format Metal (Foundry) Distributor(s) Adobe Tags geometric, slab serif
This http://typedia.com/search/release-year/1929 website is quite good as you can search for typefaces with the same release dates, authors and Foundries.
memphis-typeface_27
In addition to evolving from Modern “fat-face” typestyles, Dr. Rudolf Wolf’s conception for Memphis drew heavily from the 1927 geometric sans-serif typeface Futura by Paul Renner. Memphis may well be regarded as a serif variant of Futura, hence the appellation “Futura with serifs”.
I am going to try using Memphis and Futura. Need to experiment as Futura is san serif font and so may not be the best choice for the body copy. Also Memphis is based on a display typeface so again may not work as a body copy typeface.
I am aware the Barbican use Futura across their literature. Their Brand Guidelines are here.
A few tips on chosing web fonts
Hinting--this can make or break any screen font. Simple font shapes are easier to read. Slab serif, and sans serif faces tend to be easiest to read. Most people find serif faces more familiar--even on-screen. So sans serif type isn't necessarily most comfortable for people to read.
Larger x-heights help, because they give each letter more pixels to work with. Too high of an x-height, however, can make it difficult to distinguish between upper and lower case, and can make lines look crowded without extra leading.
Character spacing is crucial--
fonts that are too tight cause letters to touch on-screen. Touching letters make on-screen reading much harder. Faces with a little extra space between the characters are much easier to read on-screen. The two keys to making type readable are size and space. You can use any font you want, no matter how complex or wacky--if you use it large enough. But the best size to use for body text is the default browser size, normally +0 or "12" When you choose the default size, your visitors will see type set in the size they chose for their default--hopefully the size that's most comfortable for them and easiest to read. You can go one size smaller (-1 or "10") but I've found from thousands of reader letters, that readers are happiest when type is at the default size. They're so pleased that it's easy to read and can't figure out why it is on your site but not others. People would rather have larger type and scroll than smaller type and not scroll.
Biggest size don't - Points and Pixels
If you use CSS to specify the size of your type, do not use points or pixels as your unit of measure. This is a common mistake, and a bad one. When use you points or pixels, you lock out the browser's ability to make type larger and easier to read, so people are stuck with your size--which if you look around at sites that do this, is inevitably too small. Points and Pixels also create cross-OS problems. Font sizes on the Mac and Windows are different, and when you lock them in with these units of measure, they're going to appear too small on one system, and too big on another. So what do you use? Ems or %. an Em is the width of the upper case letter M in a font. This is a standard graphic design term (even if you haven't heard of it). Ems are scaleable, based on the visitor's default browser size. Percentages are just that--percentages of the default browser size. This means if people set their font larger, your sizes are scaled appropriately. So say your body size is the default, and your headers are 200%, they'll be twice the size of the default text. If you use these settings you can still set type with precision, without locking people into type sizes they find hard to read, which can cause them to leave without reading.
Line Length
One key to easy to read type is line length. The optimal length of a line of text should be between 40 and 70 letters long. Shorter than that and it's disruptive. Longer than that and people have a hard time finding the next line, so it slows reading. If you use the default browser font, a good rule of thumb is that your text blocks should be around 400 pixels wide. You may get a few people asking, "Why doesn't the text run from one side of my screen to the other," as if you are wasting space somehow. But if you did have very long lines, fewer people would read, and this would defeat the purpose of your site!
Horizontal Spacing / Tracking
Using CSS, it's also possible to change the "tracking" of type--the amount of space between letters. Because of the low resolution of the computer screen, letters that touch are doubly hard to read, so having a tiny bit of space between each letter, so they're distinct, is a real advantage. Georgia and Verdana have this. If you use default fonts, you don't need to add extra tracking, and you should not tighten the tracking to make the letters closer. It's a huge mistake that's guaranteed to make it harder to read your text. Use web-safe, undithered background colors and low-contrast backgrounds Solid colors are always less distracting, but low-contrast images can work for pages that use large text. The easiest-to-read text is black text on a white background. Patterned backgrounds decrease readability, so consider putting your graphics on the side, rather than under your text. Some people claim that lightly textured backgrounds help readability. But in reality, thee added "visual noise" and cluttered of these backgrounds really just makes each character less distinct and more difficult to read. So, keep your backgrounds pure. Don't set type in colors other than black People confuse colored text for links--and text set in colors is harder to read than text set in black
Friday, 9 November 2012
Responsive web layouts
One area which I am interested in understanding better is responsive web layouts ie design for different devices and their screen sizes. When I went to the design studio 10 associates although they dont develop websites they do design them. They always design for both screen and mobile.
I have found this website which is quite informative:
http://www.hongkiat.com/blog/responsive-for-mobile-screens/
From my experiences over the summer I had decided that it wasnt important to beable to code the website as there are many developers out there who have far more experience than me. However Simon is taking us through Dreamweaver again so I think this may help me understand deigning for screen better. By understanding the language better I can in turn understand the more complex issues Developers are having to or are able to handle.
The areas I want to gain a better understanding of are
Designing for responsive layouts - what information would a developer need?
Web fonts - how to use them in CSS and what the implications of using them are
The love Full photograph websites - I want to understand the implications of using full photograpfs ie for Mobile download speeds, costs etc What sizze iamges do you use how to make the image files as small as possible without losing quality.
How Photoshop slicing works and how it links with Dreamweaver
I have found this website which is quite informative:
http://www.hongkiat.com/blog/responsive-for-mobile-screens/
From my experiences over the summer I had decided that it wasnt important to beable to code the website as there are many developers out there who have far more experience than me. However Simon is taking us through Dreamweaver again so I think this may help me understand deigning for screen better. By understanding the language better I can in turn understand the more complex issues Developers are having to or are able to handle.
The areas I want to gain a better understanding of are
Designing for responsive layouts - what information would a developer need?
Web fonts - how to use them in CSS and what the implications of using them are
The love Full photograph websites - I want to understand the implications of using full photograpfs ie for Mobile download speeds, costs etc What sizze iamges do you use how to make the image files as small as possible without losing quality.
How Photoshop slicing works and how it links with Dreamweaver
Sunday, 4 November 2012
Typo 2012 Sean McBride
What typo 2012 say:
Sean is happiest looking for opportunities at the intersection between user experience constraints and technical constraints. He is an client-side developer and designer working at Adobe on Typekit in San Francisco. He joined Typekit in July 2010, and he led the frontend development of the new Typekit.com font browsing interface and the Typekit/Wordpress.com integration. He also maintains the JavaScript that loads the fonts for billions of pageviews every month. Before Typekit, Sean worked at Google in Mountain View as a user experience designer and web developer. He built prototypes for the Google Apps control panel, in-product help, Buzz, and finally Google+. He enjoys exploring San Francisco restaurants and cocktails. What social is in interface terms? Sean will let us find out.
A Renaissance in Web typography
Web fonts are enabling incredible new design. In the last few years, we’ve seen an explosion of great work fueled by these new tools. Web fonts are improving the web by allowing a broader range of expressiveness. As designers, we can finally access the full spectrum of typographic emotion without sacrificing accessibility, maintainability, and performance. In this talk, we’ll look at examples of great work, explore the history of typography on the web, dig into @font-face and CSS, and discuss some of the unique constraints and challenges of using web fonts.
Typekit ; Web fonts
After this short introduction to webfonts McBride went into the differences between typography on the web and in print.
First there is the issue of licensing. Since you are actually sending the font-file to your visitors, and the old licensing models did not allow that, (re)sellers had to come up with different licensing models.
Then there are different formats than the rtf & otf files we were used to. There’s woff, eot & svg. Formats that are more efficient for the web.
A big difference to print is the rendering. Since all browsers and operating systems handle rendering differently, your type is going to look different on different platforms. Each computer has to try to figure out how to display small type on low resolution screens (most screens are generally around 75 pixels per inch). This has the effect that, for example, the type looks more fuzzy on OS X’s coretext and crisper on Windows’ directwrite. It’s a problem which will hopefully someday go away when higher resolution screens become more ubiquitous.
With webfonts it’s a good idea to keep page size in mind, as each webfont adds kb’s to be sent to the visitor. And finally there’s fallback fonts to consider. You should define a stack of fonts to be used if your webfont somehow doesn’t load, and how this will affect your design.
McBride went on to cover the different rules and possibilities the web brings, which we must respond to. While we must not start with the old form and try to cram it into a new form. Instead, he mentioned an method Jonathan Hoefler talked about on Pivot: AIGA Design Conference:
WOW Hoefler has certainly been educational and opened up Typography for web
you start with an idea and through a design system you create the form. So for instance the content of a newspaper would be the idea, which would go through different design systems resulting in a newspaper and a website.
After this there was sadly not enough time left for McBride to go into detail on fluid or responsive layouts on the web. But luckily he had given us a good introduction to the possibilities of typography on the web by then.
Sean is happiest looking for opportunities at the intersection between user experience constraints and technical constraints. He is an client-side developer and designer working at Adobe on Typekit in San Francisco. He joined Typekit in July 2010, and he led the frontend development of the new Typekit.com font browsing interface and the Typekit/Wordpress.com integration. He also maintains the JavaScript that loads the fonts for billions of pageviews every month. Before Typekit, Sean worked at Google in Mountain View as a user experience designer and web developer. He built prototypes for the Google Apps control panel, in-product help, Buzz, and finally Google+. He enjoys exploring San Francisco restaurants and cocktails. What social is in interface terms? Sean will let us find out.
A Renaissance in Web typography
Web fonts are enabling incredible new design. In the last few years, we’ve seen an explosion of great work fueled by these new tools. Web fonts are improving the web by allowing a broader range of expressiveness. As designers, we can finally access the full spectrum of typographic emotion without sacrificing accessibility, maintainability, and performance. In this talk, we’ll look at examples of great work, explore the history of typography on the web, dig into @font-face and CSS, and discuss some of the unique constraints and challenges of using web fonts.
Typekit ; Web fonts
An engineer and web developer at Typekit which is a hosted web fonts subscription service.
Design adjust to fit screen so the canvas of the web is fluid
Gives you the ability to chose same typefaces for book, print and web.
Brief history
1993 - No web fonts
2008 18 standard fonts- Ariel, georgia, Verdanna
If need anything else had to use images or flash embedded fonts
Responsive Design - changing design with rules for break points
A big difference to print is the rendering. Since all browsers and operating systems handle rendering differently, your type is going to look different on different platforms. Each computer has to try to figure out how to display small type on low resolution screens (most screens are generally around 75 pixels per inch). This has the effect that, for example, the type looks more fuzzy on OS X’s coretext and crisper on Windows’ directwrite. It’s a problem which will hopefully someday go away when higher resolution screens become more ubiquitous.
With webfonts it’s a good idea to keep page size in mind, as each webfont adds kb’s to be sent to the visitor. And finally there’s fallback fonts to consider. You should define a stack of fonts to be used if your webfont somehow doesn’t load, and how this will affect your design.
McBride went on to cover the different rules and possibilities the web brings, which we must respond to. While we must not start with the old form and try to cram it into a new form. Instead, he mentioned an method Jonathan Hoefler talked about on Pivot: AIGA Design Conference:
WOW Hoefler has certainly been educational and opened up Typography for web
you start with an idea and through a design system you create the form. So for instance the content of a newspaper would be the idea, which would go through different design systems resulting in a newspaper and a website.
After this there was sadly not enough time left for McBride to go into detail on fluid or responsive layouts on the web. But luckily he had given us a good introduction to the possibilities of typography on the web by then.
Tuesday, 16 October 2012
New rationale and new Brief 2
Based on Fred's Briefing on Monday I have decided to replace Brief 2( Culture exhibition) with the App design brief. It was the words any work to submit for assessment on Design Practice 3 cannot be resubmitted...I definately think i would do this brief more justice after Christmas as a potential FMP brief.
The App design brief will still challenge me and I will get more out of it not trying to squeeze it in amongst everything else
So revised Rationale as follows:
The App design brief will still challenge me and I will get more out of it not trying to squeeze it in amongst everything else
So revised Rationale as follows:
Friday, 12 October 2012
Subscribe to:
Posts (Atom)