A WordCamp Presentation on Typography, some basic aspects of it including how to choose different fonts for your website, why you should care about typography, and some specific WordPress tips and plugins to help out.
Typography & WordPress - WordCamp Hamilton 2015AndyStaple
This document discusses various aspects of typography and how it can be implemented and styled in WordPress. It begins with introducing the speaker and providing an overview of the discussion topics, which include the goals of convincing the audience that typography matters and showing simple and advanced ways to improve WordPress sites with type. The document then covers type anatomy, readability considerations like font style and size, visual hierarchy, choosing and combining fonts, and techniques for styling type like drop caps, quotes, and decks. It concludes with recommendations for implementing web fonts, drop caps, and other styling through plugins or CSS.
Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.
How to Become a Thought Leader in Your NicheLeslie Samuel
Are bloggers thought leaders? Here are some tips on how you can become one. Provide great value, put awesome content out there on a regular basis, and help others.
Practical Typography or Typography vs DesignRavi Bhadauria
The document is a presentation on practical typography by Ravi Bhadauria of ADMEC Multimedia Institute. It covers topics such as why typography matters, typography rules, terms, use of typefaces, readability and legibility. Specific guidelines are provided on type selection, font pairing, line length, leading, alignment and more. Examples demonstrate the impact of typography on design. The goal is to teach designers best practices for incorporating effective typography.
HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.
These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.
These are the UI slides
About Kathryne Sakata
====
Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds.
Event info: http://www.hicapacity.org/2013/05/23/ui-ux/
Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.
Term Paper Crowdsourcing Crowdsourcing in the field of interfac.docxmehek4
Term Paper: Crowdsourcing
Crowdsourcing in the field of interface design takes tasks traditionally performed by specific individuals and spreads them out among a group of people or a community. These assignments are usually done through an open call. Crowdsourcing has become increasingly popular with the growth of Web 2.0 and online communities.
Write a fifteen to eighteen (15-18) page paper in which you:
1. Examine the invention and growth of crowdsourcing in the field of interface design.
2. Describe the impact that crowdsourcing has had on the field of interface design.
3. Analyze and discuss at least three (3) benefits of incorporating crowdsourcing in a design project.
4. Analyze and discuss at least three (3) challenges of incorporating crowdsourcing in a design project.
5. Propose a solution for generating interest in your design project from an online community.
6. Suggest a solution for evaluating the skill set and quality of the code submitted by potentially unknown users.
7. Describe how crowdsourcing may affect the budget and timeline of a design project.
8. Assess crowdsourcing in regard to the legal, societal, and ethical issues it raises, and suggest methods to alleviate these concerns.
9. Use at least five (5) quality resources in this assignment. Note: Wikipedia and similar Websites do not qualify as quality resources.
Your assignment must follow these formatting requirements:
•Be typed, double spaced, using Times New Roman font (size 12), with one-inch margins on all sides; citations and references must follow APA or school-specific format. Check with your professor for any additional instructions.
•Include a cover page containing the title of the assignment, the student’s name, the professor’s name, the course title, and the date. The cover page and the reference page are not included in the required assignment page length.
...
Typography & WordPress - WordCamp Hamilton 2015AndyStaple
This document discusses various aspects of typography and how it can be implemented and styled in WordPress. It begins with introducing the speaker and providing an overview of the discussion topics, which include the goals of convincing the audience that typography matters and showing simple and advanced ways to improve WordPress sites with type. The document then covers type anatomy, readability considerations like font style and size, visual hierarchy, choosing and combining fonts, and techniques for styling type like drop caps, quotes, and decks. It concludes with recommendations for implementing web fonts, drop caps, and other styling through plugins or CSS.
Reveal.js is an HTML presentation framework that allows users to create beautiful presentations using HTML. It has features like vertical slides, nested slides, Markdown support, different transition styles, themes, slide backgrounds, images, video, tables, quotes, and linking between slides. Presentations can be exported to PDF and custom states and events can be triggered on each slide. The framework is touch optimized and works on devices like mobile phones and tablets.
How to Become a Thought Leader in Your NicheLeslie Samuel
Are bloggers thought leaders? Here are some tips on how you can become one. Provide great value, put awesome content out there on a regular basis, and help others.
Practical Typography or Typography vs DesignRavi Bhadauria
The document is a presentation on practical typography by Ravi Bhadauria of ADMEC Multimedia Institute. It covers topics such as why typography matters, typography rules, terms, use of typefaces, readability and legibility. Specific guidelines are provided on type selection, font pairing, line length, leading, alignment and more. Examples demonstrate the impact of typography on design. The goal is to teach designers best practices for incorporating effective typography.
HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design.
These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road.
These are the UI slides
About Kathryne Sakata
====
Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds.
Event info: http://www.hicapacity.org/2013/05/23/ui-ux/
Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.
Term Paper Crowdsourcing Crowdsourcing in the field of interfac.docxmehek4
Term Paper: Crowdsourcing
Crowdsourcing in the field of interface design takes tasks traditionally performed by specific individuals and spreads them out among a group of people or a community. These assignments are usually done through an open call. Crowdsourcing has become increasingly popular with the growth of Web 2.0 and online communities.
Write a fifteen to eighteen (15-18) page paper in which you:
1. Examine the invention and growth of crowdsourcing in the field of interface design.
2. Describe the impact that crowdsourcing has had on the field of interface design.
3. Analyze and discuss at least three (3) benefits of incorporating crowdsourcing in a design project.
4. Analyze and discuss at least three (3) challenges of incorporating crowdsourcing in a design project.
5. Propose a solution for generating interest in your design project from an online community.
6. Suggest a solution for evaluating the skill set and quality of the code submitted by potentially unknown users.
7. Describe how crowdsourcing may affect the budget and timeline of a design project.
8. Assess crowdsourcing in regard to the legal, societal, and ethical issues it raises, and suggest methods to alleviate these concerns.
9. Use at least five (5) quality resources in this assignment. Note: Wikipedia and similar Websites do not qualify as quality resources.
Your assignment must follow these formatting requirements:
•Be typed, double spaced, using Times New Roman font (size 12), with one-inch margins on all sides; citations and references must follow APA or school-specific format. Check with your professor for any additional instructions.
•Include a cover page containing the title of the assignment, the student’s name, the professor’s name, the course title, and the date. The cover page and the reference page are not included in the required assignment page length.
...
Mobile ui trends present future – meaningful mobile typographyHalil Eren Çelik
This document discusses mobile UI typography trends both present and future. It begins by noting that typography on small screens does not mean small type, but rather type designed with specific intent and meaning. It then provides guidelines and best practices for mobile typography, including using sans serif body text, giving words some space, paying attention to alignment, creating subtle contrast, simplifying hierarchy, and not forcing desktop conventions onto mobile. It concludes by discussing trends like moving away from thin fonts to more readable medium weights and using card-based interfaces to improve link management.
This document discusses typography fundamentals and guidelines for graphic design. It covers topics like typeface categories, font characteristics, layout tips, and file formats. It also provides guidance on website requirements gathering, including defining the owner and user's goals, technical considerations, determining costs and timelines, and preparing a project bid. The key aspects are selecting appropriate fonts based on readability, balancing white space and text formatting, and understanding client and user needs for a website.
Marketing· Product or Service · If product Product, Price, P.docxinfantsuk
Marketing
· Product or Service?
· If product: Product, Price, Place, Promotion (Consider whether consumer/industrial goods, durability of product,…)
· At what stage of the product life cycle is this market? Are we dealing with a new product category or a mature and well-established one?
· If service: what is the process of delivery? What are the qualifications of the service staff (in direct contact with customers)?
· How large is the market for the product/service? Is it growing or shrinking?
· What are the major forces influencing demand for this product/service?
· Is demand of product/service consistent over time? Does the demand fluctuate sharply or in response to temporal or cyclical factors?
· Can the organization satisfy the demand in the market?
· Who are the competitors serving this market and what are their market shares? How and why have these shares been changing over time?
· Are customers loyal to your product/brand?
· How is the market for this product/service segmented?
· What are the demographic characteristics of customers and potential customers in this market? Consider customer’s willingness to pay.
· Are there any major customer needs or wants which are not currently being satisfied?
· Is it difficult for customers to switch from your product to competitor’s products?
· How closely does the product/service match the need of the market?
· How well do the activities of the organization drive demand?
· How well do the activities of the organization ensure that the product/service is available to the customer at the moment and location of need?
· How would you rate the after-sales service and/or warranty services of the organization?
Collaborators and External Relationships:
· What types of relationships exist? Duration? For what services?
· Whose strengths best complement those of the organization?
· How will each partner benefit from a strategic alliance?
· What are the risks & rewards of collaboration?
Grid System Analysis
Design Grids are Not
Mathematical Grids
They have gutters, and
type fits in perfectly
against all the edges
They act as a tool to
divide images and words
in a satisfying way
This confuses a lot of
people a lot of the time.
This zine was made to
help you make design
grids and to give you the
resources to delve further
into the grid world.
written by
Andrew Maher
This process is necessary whenever creating a grid, as
it gives us the divisions on the page which we have to
follow if we want the grid to look really tight. You’re
going to have to trust me because you won’t see this
until a little further on down the track.
So we’re going to define how wide our text columns
are. Again think first about what it’s going to be used
for, if this were a book or a magazine, you want to give
the reader enough room on the outside of the page to
stick his or her thumbs on. But don’t forget the inside
of the page either, as they arch up more and more a ...
Graphic design touches everything we see from billboards to websites. It combines visual elements like words, pictures, and charts to create something distinctive. Good design focuses on practical aspects like functionality but also understands why designs work on emotional and psychological levels. There are basic design theories and principles that apply across different mediums like balance, scale, and emotion. Successful designs employ principles like balance, rhythm, proportion, dominance, and unity.
1. The document discusses how to properly design a pattern catalog for user interface design. It outlines several key principles to follow, including designing the catalog to be used, focusing on intended users, considering other formats beyond patterns, thinking carefully about use contexts, including visual examples, and finding out how patterns are actually used.
2. The document cautions against common mistakes like describing obvious design solutions without insight, lacking visual examples, and failing to support patterns after publication. It advocates designing catalogs with the real needs of users in mind based on surveys of how designers apply patterns in practice.
3. The key lessons are to create concrete and practical guidance for users, present patterns in a usable organization, and supplement descriptions with informative
1. The document discusses how to properly design a pattern catalog for user interface design. It outlines several key principles to follow, including designing the catalog to be used, focusing on intended users, considering other formats beyond patterns, thinking carefully about use contexts, including visual examples, and finding out how patterns are actually used.
2. The document cautions against common mistakes like describing obvious design solutions without insight, lacking visual examples, and failing to support patterns after publication. It advocates designing catalogs with the real needs of users in mind based on surveys of how designers apply patterns in practice.
3. The key lessons are to create concrete and practical guidance for users, present patterns in a usable organization, and supplement descriptions with informative
Peer review is often seen as a cornerstone of modern science. We are going to discuss the current peer review practices in software engineering research, their strengths and limitations. Next we will discuss tips and tricks for writing code reviews, as well as implications for writing papers. I will also share some insights in my own reviewing practices.
Learning ObjectivesIdentify major areas of concern in the drafJospehStull43
Learning Objectives
Identify major areas of concern in the draft essay during revising and editing.
Use peer reviews and editing checklists to assist revising and editing.
Revise and edit the first draft of your essay and produce a final draft.
Revising and editing are the two tasks you undertake to significantly improve your essay. Both are very important elements of the writing process. You may think that a completed first draft means little improvement is needed. However, even experienced writers need to improve their drafts and rely on peers during revising and editing. You may know that athletes miss catches, fumble balls, or overshoot goals. Dancers forget steps, turn too slowly, or miss beats. For both athletes and dancers, the more they practice, the stronger their performance will become. Web designers seek better images, a more clever design, or a more appealing background for their web pages. Writing has the same capacity to profit from improvement and revision.
Understanding the Purpose of Revising and Editing
Revising and editing allow you to examine two important aspects of your writing separately, so that you can give each task your undivided attention.
When you revise, you take a second look at your ideas. You might add, cut, move, or change information in order to make your ideas clearer, more accurate, more interesting, or more convincing.
When you edit, you take a second look at how you expressed your ideas. You add or change words. You fix any problems in grammar, punctuation, and sentence structure. You improve your writing style. You make your essay into a polished, mature piece of writing, the end product of your best efforts.
Tip
How do you get the best out of your revisions and editing? Here are some strategies that writers have developed to look at their first drafts from a fresh perspective. Try them over the course of this semester; then keep using the ones that bring results.
Take a break. You are proud of what you wrote, but you might be too close to it to make changes. Set aside your writing for a few hours or even a day until you can look at it objectively.
Ask someone you trust for feedback and constructive criticism.
Pretend you are one of your readers. Are you satisfied or dissatisfied? Why?
Use the resources that your college provides. Find out where your school’s writing lab is located and ask about the assistance they provide online and in person.
Many people hear the words
critic
,
critical
, and
criticism
and pick up only negative vibes that provoke feelings that make them blush, grumble, or shout. However, as a writer and a thinker, you need to learn to be critical of yourself in a positive way and have high expectations for your work. You also need to train your eye and trust your ability to fix what needs fixing. For this, you need to teach yourself where to look.
Creating Unity and Coherence
Following your outline closely offers you a reasonable guarantee that your writing ...
The document discusses using digital technology like Google Drive to help students improve their writing skills. It outlines common problems students have with writing like lack of ideas, planning, revising, and sense of audience. Google Drive tools like Docs, Forms, and Hangouts can help with generating ideas, planning, multiple drafts with teacher feedback, and collaboration. An example unit plan is provided that uses Drive tools throughout the writing process, from brainstorming to publishing the final work. The document argues the collaborative features of Drive create a better environment for writing instruction compared to traditional methods.
Design process interaction design basicsPreeti Mishra
This document provides an introduction to interaction design basics and terms. It discusses that interaction design involves creating technology-based interventions to achieve goals within constraints. The design process has several stages and is iterative. Interaction design starts with understanding users through methods like talking to and observing them. Scenarios are rich stories used throughout design to illustrate user interactions. Basic terms in interaction design include goals, constraints, trade-offs, and the design process. Usability and user-centered design are also discussed.
This was a workshop I gave at http://csforum.eu in 2011.
DESIGNING NARRATIVE CONTENT
---------------------------------------
How can you be sure your content reaches the largest audience possible? By designing content for all contexts, that will reach your audience via any device, any phone, any laptop, anywhere.
This workshop will discuss how to create a content strategy for narrative content. We'll explore how to tailor your content, as well as your editorial workflows, for different devices and audiences. We'll use Treesaver, an open-source content layout framework to illustrate narrative content principles.
Publishing usually comes at the end of your content strategy, but by orchestrating your process for narrative content, you can ensure your stories, news, product descriptions, and more will be tailored for your audience wherever they are.
What you’ll learn
How to optimise workflow, production, and deployment for narrative content.
How to use the technology behind narrative content.
How to customise content for different contexts.
Great text: 21+ ways to make your content feel freshDerek Slater
Infographics and podcasts are great, but you can create content variety without them. Here's an idea book with creative types and formats to try in your good old text articles.
This document announces a graphic design seminar that will cover fundamentals of effective graphic design. The seminar will cover topics such as understanding your audience, using headlines and subheads, composing ideas, knowing your objectives, and basic typography rules. It will teach skills for assembling text and graphics to catch a reader's eye and elicit the desired response. Attendees will learn how to apply these basic design skills to communicate ideas on paper swiftly, clearly and effectively.
The document provides guidance for students completing a major project for their GCSE ICT course. It outlines the four stages of the project: finding out and generating ideas, deciding on project ideas, creating the project, and presenting the finished project. It includes examples of potential project topics, questions to consider, and tools to use at each stage.
This document provides tips and tools for creating and using visuals effectively in presentations. It discusses finding and using existing visuals such as photos, graphics and videos. It also provides tips for creating visuals using tools like online chart builders and photo editors. Guidelines are given for designing visuals with considerations for layout, color, font and keeping the visuals simple and clear. The document also discusses using visuals appropriately for different audiences and topics. Overall presentation tips are provided such as including an agenda, title slide and contact information.
The document provides instructions for a student project to create pages for a magazine and website. Students will learn skills in Photoshop, InDesign and website builders to develop their own content, including images and written work. The project involves research on existing magazines and websites, creating a proposal, production research using software, planning pages and content, production of magazine and website pages, and evaluation of the final work.
This document discusses different types of writing that are produced in the creative media sector. It provides examples of various genres such as advertising, film scripts, fiction, journalism for newspapers, magazines, television and radio, documentary scripts, game stories, and web content. It then provides more detailed descriptions of the types of writing involved in newspaper journalism, broadcast journalism, magazine journalism, and film scripting. The document outlines the roles and skills required for different writing genres in the media industry.
This document is a dissertation written by Ashley Samways in 2015 exploring how digital technologies and the World Wide Web have impacted graphic design jobs and skills. It provides a history of the development of the Web from its origins in the early 1990s through advances in browsers, coding languages, and the growth of commercial websites. It examines how roles for graphic designers expanded with the rise of the digital economy and user expectations for engaging design online. Through interviews with designers, it also considers how workflows and skills have adapted to keep pace with new technologies and media.
HijackLoader Evolution: Interactive Process HollowingDonato Onofri
CrowdStrike researchers have identified a HijackLoader (aka IDAT Loader) sample that employs sophisticated evasion techniques to enhance the complexity of the threat. HijackLoader, an increasingly popular tool among adversaries for deploying additional payloads and tooling, continues to evolve as its developers experiment and enhance its capabilities.
In their analysis of a recent HijackLoader sample, CrowdStrike researchers discovered new techniques designed to increase the defense evasion capabilities of the loader. The malware developer used a standard process hollowing technique coupled with an additional trigger that was activated by the parent process writing to a pipe. This new approach, called "Interactive Process Hollowing", has the potential to make defense evasion stealthier.
Mobile ui trends present future – meaningful mobile typographyHalil Eren Çelik
This document discusses mobile UI typography trends both present and future. It begins by noting that typography on small screens does not mean small type, but rather type designed with specific intent and meaning. It then provides guidelines and best practices for mobile typography, including using sans serif body text, giving words some space, paying attention to alignment, creating subtle contrast, simplifying hierarchy, and not forcing desktop conventions onto mobile. It concludes by discussing trends like moving away from thin fonts to more readable medium weights and using card-based interfaces to improve link management.
This document discusses typography fundamentals and guidelines for graphic design. It covers topics like typeface categories, font characteristics, layout tips, and file formats. It also provides guidance on website requirements gathering, including defining the owner and user's goals, technical considerations, determining costs and timelines, and preparing a project bid. The key aspects are selecting appropriate fonts based on readability, balancing white space and text formatting, and understanding client and user needs for a website.
Marketing· Product or Service · If product Product, Price, P.docxinfantsuk
Marketing
· Product or Service?
· If product: Product, Price, Place, Promotion (Consider whether consumer/industrial goods, durability of product,…)
· At what stage of the product life cycle is this market? Are we dealing with a new product category or a mature and well-established one?
· If service: what is the process of delivery? What are the qualifications of the service staff (in direct contact with customers)?
· How large is the market for the product/service? Is it growing or shrinking?
· What are the major forces influencing demand for this product/service?
· Is demand of product/service consistent over time? Does the demand fluctuate sharply or in response to temporal or cyclical factors?
· Can the organization satisfy the demand in the market?
· Who are the competitors serving this market and what are their market shares? How and why have these shares been changing over time?
· Are customers loyal to your product/brand?
· How is the market for this product/service segmented?
· What are the demographic characteristics of customers and potential customers in this market? Consider customer’s willingness to pay.
· Are there any major customer needs or wants which are not currently being satisfied?
· Is it difficult for customers to switch from your product to competitor’s products?
· How closely does the product/service match the need of the market?
· How well do the activities of the organization drive demand?
· How well do the activities of the organization ensure that the product/service is available to the customer at the moment and location of need?
· How would you rate the after-sales service and/or warranty services of the organization?
Collaborators and External Relationships:
· What types of relationships exist? Duration? For what services?
· Whose strengths best complement those of the organization?
· How will each partner benefit from a strategic alliance?
· What are the risks & rewards of collaboration?
Grid System Analysis
Design Grids are Not
Mathematical Grids
They have gutters, and
type fits in perfectly
against all the edges
They act as a tool to
divide images and words
in a satisfying way
This confuses a lot of
people a lot of the time.
This zine was made to
help you make design
grids and to give you the
resources to delve further
into the grid world.
written by
Andrew Maher
This process is necessary whenever creating a grid, as
it gives us the divisions on the page which we have to
follow if we want the grid to look really tight. You’re
going to have to trust me because you won’t see this
until a little further on down the track.
So we’re going to define how wide our text columns
are. Again think first about what it’s going to be used
for, if this were a book or a magazine, you want to give
the reader enough room on the outside of the page to
stick his or her thumbs on. But don’t forget the inside
of the page either, as they arch up more and more a ...
Graphic design touches everything we see from billboards to websites. It combines visual elements like words, pictures, and charts to create something distinctive. Good design focuses on practical aspects like functionality but also understands why designs work on emotional and psychological levels. There are basic design theories and principles that apply across different mediums like balance, scale, and emotion. Successful designs employ principles like balance, rhythm, proportion, dominance, and unity.
1. The document discusses how to properly design a pattern catalog for user interface design. It outlines several key principles to follow, including designing the catalog to be used, focusing on intended users, considering other formats beyond patterns, thinking carefully about use contexts, including visual examples, and finding out how patterns are actually used.
2. The document cautions against common mistakes like describing obvious design solutions without insight, lacking visual examples, and failing to support patterns after publication. It advocates designing catalogs with the real needs of users in mind based on surveys of how designers apply patterns in practice.
3. The key lessons are to create concrete and practical guidance for users, present patterns in a usable organization, and supplement descriptions with informative
1. The document discusses how to properly design a pattern catalog for user interface design. It outlines several key principles to follow, including designing the catalog to be used, focusing on intended users, considering other formats beyond patterns, thinking carefully about use contexts, including visual examples, and finding out how patterns are actually used.
2. The document cautions against common mistakes like describing obvious design solutions without insight, lacking visual examples, and failing to support patterns after publication. It advocates designing catalogs with the real needs of users in mind based on surveys of how designers apply patterns in practice.
3. The key lessons are to create concrete and practical guidance for users, present patterns in a usable organization, and supplement descriptions with informative
Peer review is often seen as a cornerstone of modern science. We are going to discuss the current peer review practices in software engineering research, their strengths and limitations. Next we will discuss tips and tricks for writing code reviews, as well as implications for writing papers. I will also share some insights in my own reviewing practices.
Learning ObjectivesIdentify major areas of concern in the drafJospehStull43
Learning Objectives
Identify major areas of concern in the draft essay during revising and editing.
Use peer reviews and editing checklists to assist revising and editing.
Revise and edit the first draft of your essay and produce a final draft.
Revising and editing are the two tasks you undertake to significantly improve your essay. Both are very important elements of the writing process. You may think that a completed first draft means little improvement is needed. However, even experienced writers need to improve their drafts and rely on peers during revising and editing. You may know that athletes miss catches, fumble balls, or overshoot goals. Dancers forget steps, turn too slowly, or miss beats. For both athletes and dancers, the more they practice, the stronger their performance will become. Web designers seek better images, a more clever design, or a more appealing background for their web pages. Writing has the same capacity to profit from improvement and revision.
Understanding the Purpose of Revising and Editing
Revising and editing allow you to examine two important aspects of your writing separately, so that you can give each task your undivided attention.
When you revise, you take a second look at your ideas. You might add, cut, move, or change information in order to make your ideas clearer, more accurate, more interesting, or more convincing.
When you edit, you take a second look at how you expressed your ideas. You add or change words. You fix any problems in grammar, punctuation, and sentence structure. You improve your writing style. You make your essay into a polished, mature piece of writing, the end product of your best efforts.
Tip
How do you get the best out of your revisions and editing? Here are some strategies that writers have developed to look at their first drafts from a fresh perspective. Try them over the course of this semester; then keep using the ones that bring results.
Take a break. You are proud of what you wrote, but you might be too close to it to make changes. Set aside your writing for a few hours or even a day until you can look at it objectively.
Ask someone you trust for feedback and constructive criticism.
Pretend you are one of your readers. Are you satisfied or dissatisfied? Why?
Use the resources that your college provides. Find out where your school’s writing lab is located and ask about the assistance they provide online and in person.
Many people hear the words
critic
,
critical
, and
criticism
and pick up only negative vibes that provoke feelings that make them blush, grumble, or shout. However, as a writer and a thinker, you need to learn to be critical of yourself in a positive way and have high expectations for your work. You also need to train your eye and trust your ability to fix what needs fixing. For this, you need to teach yourself where to look.
Creating Unity and Coherence
Following your outline closely offers you a reasonable guarantee that your writing ...
The document discusses using digital technology like Google Drive to help students improve their writing skills. It outlines common problems students have with writing like lack of ideas, planning, revising, and sense of audience. Google Drive tools like Docs, Forms, and Hangouts can help with generating ideas, planning, multiple drafts with teacher feedback, and collaboration. An example unit plan is provided that uses Drive tools throughout the writing process, from brainstorming to publishing the final work. The document argues the collaborative features of Drive create a better environment for writing instruction compared to traditional methods.
Design process interaction design basicsPreeti Mishra
This document provides an introduction to interaction design basics and terms. It discusses that interaction design involves creating technology-based interventions to achieve goals within constraints. The design process has several stages and is iterative. Interaction design starts with understanding users through methods like talking to and observing them. Scenarios are rich stories used throughout design to illustrate user interactions. Basic terms in interaction design include goals, constraints, trade-offs, and the design process. Usability and user-centered design are also discussed.
This was a workshop I gave at http://csforum.eu in 2011.
DESIGNING NARRATIVE CONTENT
---------------------------------------
How can you be sure your content reaches the largest audience possible? By designing content for all contexts, that will reach your audience via any device, any phone, any laptop, anywhere.
This workshop will discuss how to create a content strategy for narrative content. We'll explore how to tailor your content, as well as your editorial workflows, for different devices and audiences. We'll use Treesaver, an open-source content layout framework to illustrate narrative content principles.
Publishing usually comes at the end of your content strategy, but by orchestrating your process for narrative content, you can ensure your stories, news, product descriptions, and more will be tailored for your audience wherever they are.
What you’ll learn
How to optimise workflow, production, and deployment for narrative content.
How to use the technology behind narrative content.
How to customise content for different contexts.
Great text: 21+ ways to make your content feel freshDerek Slater
Infographics and podcasts are great, but you can create content variety without them. Here's an idea book with creative types and formats to try in your good old text articles.
This document announces a graphic design seminar that will cover fundamentals of effective graphic design. The seminar will cover topics such as understanding your audience, using headlines and subheads, composing ideas, knowing your objectives, and basic typography rules. It will teach skills for assembling text and graphics to catch a reader's eye and elicit the desired response. Attendees will learn how to apply these basic design skills to communicate ideas on paper swiftly, clearly and effectively.
The document provides guidance for students completing a major project for their GCSE ICT course. It outlines the four stages of the project: finding out and generating ideas, deciding on project ideas, creating the project, and presenting the finished project. It includes examples of potential project topics, questions to consider, and tools to use at each stage.
This document provides tips and tools for creating and using visuals effectively in presentations. It discusses finding and using existing visuals such as photos, graphics and videos. It also provides tips for creating visuals using tools like online chart builders and photo editors. Guidelines are given for designing visuals with considerations for layout, color, font and keeping the visuals simple and clear. The document also discusses using visuals appropriately for different audiences and topics. Overall presentation tips are provided such as including an agenda, title slide and contact information.
The document provides instructions for a student project to create pages for a magazine and website. Students will learn skills in Photoshop, InDesign and website builders to develop their own content, including images and written work. The project involves research on existing magazines and websites, creating a proposal, production research using software, planning pages and content, production of magazine and website pages, and evaluation of the final work.
This document discusses different types of writing that are produced in the creative media sector. It provides examples of various genres such as advertising, film scripts, fiction, journalism for newspapers, magazines, television and radio, documentary scripts, game stories, and web content. It then provides more detailed descriptions of the types of writing involved in newspaper journalism, broadcast journalism, magazine journalism, and film scripting. The document outlines the roles and skills required for different writing genres in the media industry.
This document is a dissertation written by Ashley Samways in 2015 exploring how digital technologies and the World Wide Web have impacted graphic design jobs and skills. It provides a history of the development of the Web from its origins in the early 1990s through advances in browsers, coding languages, and the growth of commercial websites. It examines how roles for graphic designers expanded with the rise of the digital economy and user expectations for engaging design online. Through interviews with designers, it also considers how workflows and skills have adapted to keep pace with new technologies and media.
Similar to Typography & WordPress - WordCamp Rochester 2016 (20)
HijackLoader Evolution: Interactive Process HollowingDonato Onofri
CrowdStrike researchers have identified a HijackLoader (aka IDAT Loader) sample that employs sophisticated evasion techniques to enhance the complexity of the threat. HijackLoader, an increasingly popular tool among adversaries for deploying additional payloads and tooling, continues to evolve as its developers experiment and enhance its capabilities.
In their analysis of a recent HijackLoader sample, CrowdStrike researchers discovered new techniques designed to increase the defense evasion capabilities of the loader. The malware developer used a standard process hollowing technique coupled with an additional trigger that was activated by the parent process writing to a pipe. This new approach, called "Interactive Process Hollowing", has the potential to make defense evasion stealthier.
Honeypots Unveiled: Proactive Defense Tactics for Cyber Security, Phoenix Sum...APNIC
Adli Wahid, Senior Internet Security Specialist at APNIC, delivered a presentation titled 'Honeypots Unveiled: Proactive Defense Tactics for Cyber Security' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
Securing BGP: Operational Strategies and Best Practices for Network Defenders...APNIC
Md. Zobair Khan,
Network Analyst and Technical Trainer at APNIC, presented 'Securing BGP: Operational Strategies and Best Practices for Network Defenders' at the Phoenix Summit held in Dhaka, Bangladesh from 23 to 24 May 2024.
2. About Me
Hi, I’m Andy
I’m a Designer and Front-End Developer at Staple Web Design, also
the Co-Founder of the Buffalo WordPress Users Meetup and
WordCamp Buffalo.
Web: staplewebdesign.com
Twitter: @AndyStaple
2
3. Where are the Slides?
Slides are available at:
staplewebdesign.com/wcroc
3
4. The Goals of this Discussion
• to convince you that typography matters.*
• to show simple and not-quite-as-simple ways to
make your WordPress site(s) better, with type.
* Using some empirical evidence even!
4
5. The Goals of this Discussion
… and to ruin your day when you’re walking down the street.
5
7. Type Anatomy and Style
A very, very broad view of some elements and
classifications of type.
People who love ideas must have a love of words, and that
means, given a chance, they take a vivid interest in the
clothes which words wear.
- Beatrice Warde
7
“
”
10. You may be thinking
“…but no one notices
typography”
• Trustworthiness
• Engagement
• Playfulness
• Somberness
You should care what your website is portraying itself
as. Some characteristics a website might aspire
towards
Your Typography Helps
10
11. You’re a financial blogger, and want your opinion
taken seriously.
Typography & its effect on people
Trustworthiness
Higher interest rates mean slower
economic growth and less job creation.
Under normal circumstances, the effects of
a 50 bp increase in 10-year rates would be
really big: cutting GDP growth by about 1.5
percentage points over two years and
costing about a million jobs.
Higher interest rates mean slower
economic growth and less job
creation. Under normal circumstances,
the effects of a 50 bp increase in 10-
year rates would be really big: cutting
GDP growth by about 1.5 percentage
points over two years and costing
about a million jobs.
Gotham Rounded - 20ptPT Serif - 18pt
11
12. You’re managing the website for a Sports Car Racing
Team, what type of headings would you think fit?
Typography & its effect on people
Mood
Performance Racing
Performance Racing Riesling
Nitro
12
13. In 2012, a writer for the New
York Times conducted an
interesting experiment. It was
thought to be a simple quiz to
find out if a reader was an
optimist or pessimist.
In reality, it was a test seeing if
typefaces had an affect on the
readers perception of credulity
and their confidence.
Typography & its effect on people
Credulity & Confidence
Source: [2]
13
14. Typography & its effect on people
Credulity & Confidence
Source: [2]
14
15. In a quasi-experiment, a college
student named Phil Renaud attributed
changes in essay grades to his font
choices.
Could a more controlled study help
validate these results?
Typography & its effect on people
Magic Essays
Source: [1]
Times New
Roman
Trebuchet MS Georgia
11 Essays 18 Essays 23 Essays
Average: A- Average: B- Average: A
15
16. Two Experiments Conducted by Kevin Larson (Microsoft) and
Rosalind Picard (MIT) examined how good versus bad typography
affected 20 participants.
The participants would read an article from the New Yorker with good
or bad typography.
Typography & its effect on people
Aesthetics and Mood
Source: [4]
16
17. Typography & its effect on people
Aesthetics and Mood
Source: [4]
17
18. Results: Problem Solving after reading the New Yorker article.
Typography & its effect on people
Aesthetics and Mood
Source: [4]
4 / 10 participants solved the
problem correctly after reading
with good typography.
0 / 9 participants solved the
problem correctly after reading
with poor typography.
Participants were also interrupted while reading the article, and asked
how long they’d been reading.
3 minutes, 18 seconds
average underestimate when
reading good typography.
24 seconds
average underestimate when
reading poor typography.
18
19. Typography & its effect on people
Comic Sans
Source: [3]
Proof that even scientists
find typography hard.
…and that Vincent Connare
has a good sense of humor.
19
20. The ease in which individual glyphs (e.g. characters, punctuation) are
recognizable and distinguishable from one another.
Legibility
Focuses on larger sections of text. How much effort and strain does it
take to read extended amounts of text (e.g. a blog post).
Readability
20
21. Readability
Font Style and Purpose
The font you choose has a huge role in readability.
Certain fonts are built specifically to be used at larger
sizes. Avoid very dramatic or exaggerated styles in the
paragraph font.
21
23. Readability
Font Anatomy
Adobe Garamond Pro - 20pt
Maecenas sed diam eget risus varius
blandit sit amet non magna.
Maecenas faucibus mollis interdum.
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor
auctor. Vestibulum id ligula porta
felis euismod semper.
Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis
vestibulum. Vivamus sagittis lacus
Maecenas sed diam eget risus
varius blandit sit amet non
magna. Maecenas faucibus
mollis interdum. Aenean eu leo
quam. Pellentesque ornare sem
lacinia quam venenatis
vestibulum. Vivamus sagittis
lacus vel augue laoreet rutrum
faucibus dolor auctor.
Vestibulum id ligula porta felis
euismod semper.
Aenean eu leo quam.
Pellentesque ornare sem lacinia
quam venenatis vestibulum.
Vivamus sagittis lacus
Maecenasseddiamegetrisusvarius
blanditsitametnonmagna.Maecenas
faucibusmollisinterdum.Aeneaneu
leoquam.Pellentesqueornaresem
laciniaquamvenenatisvestibulum.
Vivamussagittislacusvelaugue
laoreetrutrumfaucibusdolorauctor.
Vestibulumidligulaportafelis
euismodsemper.
Aeneaneuleoquam.Pellentesque
ornaresemlaciniaquamvenenatis
vestibulum.Vivamussagittislacus
Georgia - 20pt
Freight Display Pro - 20pt
23
24. Do you or others struggle when going from one line to the next in
a paragraph?
- The Leading (Line-Height) could be too small
- The Measure (Line-Length) could be too large
Are your font sizes too small?
- Different typefaces are built for different size scales.
- There is no excuse for small type. The Fold DOES NOT exist.
Your readers will be happier with larger type.
Are you using fonts not built with readability in mind?
- Do a little research and find out.
- Don’t use Papyrus (I’m looking at you Alternative Health Sites)
Readability
Questions to think about
24
26. Leading:
The Space between lines
of text.
in CSS:
p {
line-height: 1.3;
}
Readability
Leading / Line-Height
Maecenas sed diam eget risus varius
blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Donec id elit
non mi porta gravida at eget metus. Lorem
ipsum dolor sit amet, consectetur
adipiscing elit.
Example
26
27. Leading:
The Space between lines
of words.
in CSS:
p {
line-height: 2.0;
}
Readability
Leading / Line-Height
Maecenas sed diam eget risus varius
blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Donec id elit
non mi porta gravida at eget metus. Lorem
ipsum dolor sit amet, consectetur
adipiscing elit.
Example
27
28. Leading:
The Space between lines
of words.
in CSS:
p {
line-height: 1.0;
}
Readability
Leading / Line-Height
Maecenas sed diam eget risus varius
blandit sit amet non magna. Donec id elit
non mi porta gravida at eget metus.
Vivamus sagittis lacus vel augue laoreet
rutrum faucibus dolor auctor. Donec id elit
non mi porta gravida at eget metus. Lorem
ipsum dolor sit amet, consectetur
adipiscing elit.
Example
28
29. Hierarchy is the arrangement and stylizing of elements that a user
sees. It expresses the relative importance of items on the page.
Visual Hierarchy
29
30. A Structured Hierarchy is very important to keep your visitors comfortable
with your content.
Different ways to show Visual Hierarchy:
- Font Family
- Font Sizes
- Font Weight & Style (bold, italics, small-caps)
- White Space
Visual Hierarchy
Including Structure
30
31. A Typical WordPress
Article
Simple but useful hierarchy
in a formatted post.
What would this look like
without any visual cues?
Visual Hierarchy
Examples
31
33. A great example in the wild
of simple visual hierarchy.
Visual Hierarchy
Examples
33
http://dearestnature.com/blog/2012/10/an-interview-with-laura-e-pritchett/
34. There are thousands upon thousands of fonts
available for you to use on your websites.
Choosing your Typefaces
34
35. Simplest Solution are web-safe fonts.
Web-safe fonts are fonts that are typically pre-installed on a vast
majority of devices.
(Multiple weights of Arial, Helvetica, Georgia, Times New Roman,
Impact, etc…)
Exponentially more choice with web fonts (aka @font-face fonts).
A relatively new way to show fonts that weren’t thought of as web-
safe on your website previously.
Choosing Fonts
What is Available?
35
36. Well supported by most devices and web browsers.
Watch for Rendering differences between Operating Systems and
Browsers.
@font-face
The CSS rule to add fonts to your site. (Or let a plugin do it for you,
which we’ll get into shortly).
Choosing Fonts
Web Fonts(@font-face)
36
37. There are many services that allow you to load quality web-fonts for you.
Paid Services:
• Typekit - http://www.typekit.com
• Cloud Typography - http://cloud.typography.com/
• Fonts.com - http://fonts.com/
• Font Deck - http://fontdeck.com
Free:
• Google Fonts - http://google.com/fonts
• FontSquirrel - http://www.fontsquirrel.com
Choosing Fonts
Web Font Services
37
38. Look for a font that works well in paragraph form first. This is what
people will be reading most. General rule for your anchor font:
• Legibility, Readability, Large X-Height, Simple form
• Make sure the font has multiple weights, and italics
• Normal/Regular, Bold, Light/Thin (and italic versions of each)
• Many Type Designers write descriptions of their typefaces. This can
help you sort out what style the font is.
Choosing Fonts
Actually Choosing a Font
38
39. Building an Eye for great combinations of multiple fonts is not easy. It
takes time. There are things you can do though.
• Limit yourself to 2, at most 3 different fonts
• Find typefaces from the same Foundry or Designer
• Find “Superfamily” Fonts
• Droid Sans and Droid Serif
• FF Meta Sans and FF Meta Serif
• Roboto and Roboto Slab
• Lucida Sans and Lucida Serif
Choosing Fonts
Combining Multiple Typefaces
39
40. • Find what Time Period the typeface was designed in, and combine
typefaces from similar dates.
• Combining a Blackletter and a Geometric Sans is hard to pull
off.
• Avoid typefaces that are too similar in style.
Choosing Fonts
Combining Multiple Typefaces
40
41. If you’re unsure of what fonts work best on your website, experiment.
You can also look at some sources online or off, that give some good
ideas for typeface combinations
• https://www.typewolf.com/
• http://justmytype.co/
• http://hellohappy.org/beautiful-web-type/
• http://fontsinuse.com/
• http://typographica.org/category/typeface-reviews/
Choosing Fonts
Find Some Inspiration
41
42. You have a ton of options at your disposal to add
some personality and functionality to your
typography on your WordPress sites.
Styling Your Voice
42
43. An example to the right of a
Drop Cap and Run-in.
Brings the users eye to the
beginning of the article and
creates an elegant,
sophisticated feel.
Styling Your Voice
Initial Caps, Drop Caps, Run-Ins
43
http://jessicahische.is/thinkingthoughts
44. A Brief paragraph or
block of text that
serves as an
introduction to the text
below.
Styling Your Voice
Decks
44
http://www.smashingmagazine.com/2015/04/16/
building-custom-wordpress-archive-page/
45. Quotes, when styled
correctly can be used
to add emphasis to
intriguing parts of an
article.
You can grab your
readers attention.
Styling Your Voice
Block Quotes, Pull Quotes
45
46. Designers, Developers and Weekend-Warriors who can wrangle
some HTML and CSS will have more flexibility in controlling exactly
how they want their typography to display.
If you’re not in the groups above, don’t worry. There is still a lot you
can do, and WordPress can make it easier for you.
Implementation
46
47. Implementing
Web Fonts with Plugins
47
Easy Google Fonts Plugin
Allows you to use any font in
the Google Fonts Library -
and you can preview your
site with the customizer.
https://wordpress.org/
plugins/easy-google-fonts/
48. Implementing
Web Fonts with Plugins
48
Typekit Fonts for WordPress
Add Support for Typeset Fonts
without editing your themes
template files.
https://wordpress.org/plugins/
typekit-fonts-for-wordpress/
Requires a Typekit Account.
49. Implementing
Drop Caps and Initial Caps
49
Here is a relatively simple CSS
technique to use progressive
enhancement to show Drop Caps
to visitors.
p:first-child:first-letter {
color: #ef957d;
line-height: 72px;
font-size: 70px;
float: left;
margin-right: 8px;
}
Or Use a Plugin:
https://wordpress.org/plugins/simple-drop-cap/
50. Implementing
Decks with CSS
50
A simple way to include Decks to your
posts and/or pages via CSS.
.entry-content p:first-child {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.8;
}
51. Implementing
Block-Quotes & Pull-Quotes
51
Block Quotes:
Button built-in to the Post Editor
and can be styled via CSS. Most
themes have some styling to the
block-quotes.
Pull Quotes:
Perfect Pullquotes
https://wordpress.org/plugins/perfect-
pullquotes/
52. Implementing
Styling the WYSIWYG Editor
52
What you see is often not what you
get. We can fix it.
You (or the theme designer) can style
the editor text, colors, and other
elements via CSS so that your
WYSIWYG editor is much closer to
seeing what you’ll be getting.
https://codex.wordpress.org/
Editor_Style
https://tommcfarlin.com/wordpress-editor-styles/
58. References
1. “The Secret Lives of Fonts” - Phil Renaud
http://web.archive.org/web/20100403022212/http://fadtastic.net/2006/03/12/the-secret-lives-of-fonts/
2. “Hear, All Ye People; Hearken, O Earth” - Errol Morris
http://opinionator.blogs.nytimes.com/2012/08/08/hear-all-ye-people-hearken-o-earth/
3. “CERN Scientist Inexplicably present Higgs Boson findings in Comic Sans”
http://www.theverge.com/2012/7/4/3136652/cern-scientists-comic-sans-higgs-boson
4. “The Aesthetics of Reading”
http://affect.media.mit.edu/pdfs/05.larson-picard.pdf
58
59. Thank You!
Feel Free to catch me here with any questions or comments. If
you’re shy, you can also tweet at me from the protection of your
screen.
Twitter: @AndyStaple
59