WRITING FOR NEW MEDIA

Dr. Olga J. Domingo

 Table of Contents

Module 4: Online Writing

Introduction 32
Learning Outcomes 32
Lesson 1. General Online Style 33
Lesson 2. Tone 33
Lesson 3. Repetition 34
Lesson 4. Case Study 36
Assessment Task 4 39
Summary 40
References 41

Module 5: Planning
Introduction 42
Learning Outcomes 42
Lesson 1. Storyboarding 43
Lesson 2. Usability 45
Lesson 3. Headlines and Hypertexts 47
Lesson 4. Places and Spaces 52
Assessment Task 5 58
Summary 59
References 59

LIST OF TABLES

No. Title Page

1 Basic Steps of the Storyboarding 44
Process
2 Critical Questions in Every Element 44

LIST OF FIGURES

No. Title Page

1 Repetition Processes 35

MODULE 4
 ONLINE WRITING

Introduction

Online writing is any text produced using (and typically meant for viewing on) a
computer, smartphone, or other similar digital devices. It is also known as digital writing.
Texting, instant messaging, emailing, blogging, tweeting, and leaving comments on social
media platforms like Facebook are all examples of online writing formats (Richard Nordquist,
2018).

This module will cover general online style and tone, as well as how repetition in
website design helps to attract viewers —- all of which should be considered before
publishing our writings online.

Learning Outcomes

At the end of this module, the learner should be able to:

1. Explain general online style;

2. Explain tone;

3. Explain repetitions; and

4. Answer questions in the case study.

Lesson 1. General Online Style (Caroll, 2010)

Online presentations and guiding styles are different from those used in print media.
In print, the text is read as a whole, with the reader's attention drawn to all of the data. On
the Web, however, each page should be able to function independently in recognition of
the fact that many users will arrive there immediately and skip the home page. Every Web
page has the potential to be an island on the Internet. In fact, visitors may land on any page
of a website before seeing anything else on it. This direct or internal access is allowed by
search engines and is frequently encouraged. As a result, each Web page should provide
an explanation of its subject and hint at its content without forcing the user to read earlier
or later pages. Pages that stand alone are helped by ubiquitous, reliable navigational
structures throughout a website.

Through visual communication, writers and readers engage with the content on web
pages. The term "document design" refers to the structured, deliberate (and deliberative)
process of planning for this interaction. Document design can also apply to language
matters, despite having a similar meaning related to visual communication. Certain types
of sentences and paragraph structures are considered. Also, developers search for those
structures that have been proven to be simple for readers to understand. Furthermore,
content creators should be involved in each of these stages of design and development,
making visual communication a part of the writer's responsibility. Because of this, visual
elements influence how readers engage with the words and even whether they interact at
all.

Lesson 2. Tone (Quinn MacRorie, n.d.)

Choosing the right language and tone for your online writing is essential for helping
your readers feel connected with your thoughts. Of course, different topic requires a
varying tone (if you're describing a natural disaster, best not to be too light). While you don't
want to come across as too casual with your readers, you also don't want to sound formal
or distant. Your writing should appear to have been produced by a human, not a robot for
the company. Finding the correct tone can be challenging, but research indicates that it has
a big impact on how your audience perceives your organization.

33
Here are a few key points on how to use the right tone in your writing:

• Use an active voice. Avoid passive voice. The subject of the sentence performs the
action in the active voice. The action is performed on the sentence's subject in
passive voice.
• Avoid using slang and jargon. Use the language of your users or readers. Just
because a term is used or common in an organization, doesn’t mean that you will
use it in your writing.
• Keep your industry’s standards in mind and be cautious when deploying humor or
playfulness. While adding this to your tone can make your writing appear nicer, it
can also alienate readers and possibly ruin the credibility of your organization.
• When in doubt, ask for help. A second set of eyes may be quite helpful when editing
and crafting content.

Lesson 3. Repetition

The repetition in design refers to using the same element repeatedly. You could
draw a line horizontally, then numerous more lines next to it. Repetition can be useful in
web and app design. Repeating elements helps us as designers meet user’s expectations
while also enhancing their overall experience. We use this tendency by using repetition to
keep the eye used to the components of our design. In order to keep this consistency
through repetition, we can also use shapes, colors, textures, fonts, etc. (Soeggard, 2023).

As humans, we look for and anticipate patterns. We use repetition as designers to

help people find what they're looking for more quickly and easily. Repetition in web design
helps users understand how interactive elements work. The repetition of consistent
elements within a website provides the visitor with a road map and a way to confidently
navigate around your site. Visitors who are at ease with the design elements are more likely
to stick around and visit additional pages on your site (Kittle, 2021).

Carrol (2010) stated that repetition can rapidly understand the layout of a website
and forecast where the information is by using a consistent approach to navigation and
layout. Be consistent in both content and style when choosing visuals, layouts,
typographies, drawings, and when creating navigation.

34
 Now, let’s take a look at this figure and see how the repetition is used in web
design:

Figure 1. Repetition
(Clockwork Design Group Inc., 2021)

The following elements are repeated in the Obermayer website design lifted from
Clockwork Design Group Inc. (2021):

(Check www.obermayer.com to check up close the website.)

• Navigation: Color can help you find your way around. The navigation is always gray
with white text, which helps to distinguish it from the page's content.
• Logo: The logo consists of a circle graphic with an arrow; different versions of the
logo are used depending on the space, but this never appears out of place or
unrecognizable as a mark.
• Graphics: Arrows appear on top of the video on both the homepage and the interior
pages.
• Brand Colors: Gray elements with yellow pops are instantly recognizable as
Obermayer.

35
 • Typography: The font treatment is consistent throughout the website. Headers are
always the same color: dark gray. CTAs are always highlighted in yellow.
• Photography: The imagery is always placed in a similar location across the top of
the page, making it dramatic and professional.
• Links: Links are indicated by dark gray, yellow, or white text. Throughout the site,
anything clickable has a hover state.
• Footer: At the bottom of each page of the site, you can get quick access to important
parts of the site.

To summarize, graphical repetition is the use of similar or identical elements

throughout your design. This gives your website or printed brochure a strong sense of unity,
consistency, and cohesiveness (Kittle, 2021).

Lesson 4. Case Studies

The reality of web design is that you should ideally start working on the following
project as soon as you've finished the previous one. Yet, every site you build acts as an
important component of your portfolio that showcases your expertise. While you'll typically
want to link to the most recent work on your site, it pays to perform the job correctly
(McCauely, 2021).

Meir (2019) listed designers who have expertly showcased their web design
projects in a variety of ways using Wix portfolios, as well as design case studies from which
we can learn:

1. Brown Owl Creative for Creative House Group

> Featuring custom icons and full-length screenshots

Brown Owl Creative, a multidisciplinary design firm, chose to place a full screen gif
on the top fold of this project page, instantly setting the tone. A brief sentence directly
beneath introduces the client they were working with, as well as the discipline involved and
a link to the end result: the website itself. A generous use of white space helps to focus
attention on the text.

36
 Full-length screenshots of their website design, with a simple non-obtrusive gray
border, can be found further down. They've also decided to show a section of the client's
website on a laptop, providing a different perspective.

https://video.wixstatic.com/video/bb1bd6_00448314338a4a54bc877bfb53b339d1/720p/m
p4/file.mp4

Answer these questions:

1. Cite what are the repeated elements (repetition) in the website. How does it help the
viewer?

2. What other ways you can suggest to make the website and writing more attractive and
remarkable?

3. Among the case studies presented, which best describes a website that draws the
attention of the viewer?

2. Miki Twersky for Nosta Fragrances.

> Combining video screenshots and atmospheric photographs

Many subtle additions to NYC-based designer Miki Twersky's portfolio contribute to

its success. The comic footer, delightfully honest 'About' page, and spacious layout make
for a smooth and entertaining browsing experience.

It's no surprise that her inner project pages are designed with the same care and
attention to detail. This web design case study begins with a mood-setting image, followed
by a brief explanation of the brand and some basic details, such as the date, her roles in
the project, and any other contributors. A slider invites you to scroll through to see the
different stages of the logo design process.

Miki has seamlessly integrated video screenshots of the website allowing her to
choose which aspects of her design to highlight. The page concludes with a few product
photos that help to strengthen the look-and-feel and tie everything together, as well as more
of her branding work.

37
https://video.wixstatic.com/video/bb1bd6_48669ccaa5f6436da62da6ad4a847ad3/720p/m
p4/file.mp4

Answer these questions:

1. Cite what are the repeated elements (repetition) in the website. How does it help the
viewer?

2. What other ways you can suggest to make the website and writing more attractive and
remarkable?

3. Among the case studies presented, which best describes a website that draws the
attention of the viewer?

38
 Assessment Task 4

Case Studies:

For two (2) case studies above, answer the following questions?

1. Cite what are the repeated elements (repetition) in the website. How does it help the
viewer?

2. What other ways you can suggest to make the website and writing more attractive and
remarkable?

3. Among the case studies presented, which best describes a website that draws the
attention of the viewer?

1. Adelaide Wang for Humm.ly

> Comprehensive case study with texts, images, and videos

Adelaide Wang, a product designer based in San Francisco, clearly understands

the intricacies of creating an intriguing and comprehensive case study. She was able to
share her and her team's entire work process after working on many aspects of this project
for Humm.ly, a music healthcare platform and app.

The long-scrolling page takes you through some of the most important stages of
any design project. It begins by describing their search for a distinct visual identity. It then
moves on to the specifics of the app's various screens and navigation, emphasizing the
website's accessibility. Finally, Adelaide shows the website on various devices, including a
video screenshot of the website on a smartphone.

The page has a consistent layout, with titles, subtitles, and paragraph text all using
the same style. The website's background is made up of two alternating shades of gray,
which creates a clear, but subtle, separation between folds and, as a result, contributes to
a successful user experience.

39
 These professional examples will teach you how to nail your website's UX design.

https://video.wixstatic.com/video/bb1bd6_7db2e8df471143de982044444d66232e/720p/m
p4/file.mp4

2. Din7's Studio&More
> Introducing color schemes, logo designs, and more.

Studio&more, a graphic design studio, has created another detailed web design
case study. They worked on both branding and UX for this project for the industrial design
firm Din7. As a result, they had enough material to cover everything from color palette and
typography choices to the development of the company's logo design, illustration style,
website, and various visual identity applications.

Each section of the case study is numbered and accompanied by a brief selection
of images. They've also used the brand's visual language in the background, creating a
strong and clearly defined tone of voice. Finally, the studio has chosen a few of their website
design screens to highlight separately, drawing attention to them.

https://video.wixstatic.com/video/bb1bd6_48669ccaa5f6436da62da6ad4a847ad3/720p/m
p4/file.mp4

Summary

Online presentations and guiding styles are different from those used in print
media. In print, the text is read as a whole, with the reader's attention drawn to all of the
data. On the Web, however, each page should be able to function independently in
recognition of the fact that many users will arrive there immediately and skip the home
page. Every Web page has the potential to be an island on the Internet. In fact, visitors
may land on any page of a website before seeing anything else on it (Caroll, 2010).

40
 References

Articles

ThoughtCo (2018). Learn the Distinctive Characteristics of Online Writing . ThoughtCo.

https://www.thoughtco.com/what-is-online-writing-1691358

Meir, D. (2019). 6 Web Design Case Studies We Can Learn From.

https://www.wix.com/playground/post/6-web-design-case-studies-we-can-learn-
from

McCauley, J. (2021). 5 inspiring web design case studies. Creative Blog.

https://www.creativebloq.com/features/5-inspiring-web-design-case-studies

MacRorie, Q. (n.d.). Writing for the Web: Developing Voice, Tone and Editorial
Structure. https://storytelling.comnetwork.org/explore/181/writing-for-the-
web-developing-voice-tone-and-editorial-
structure?fbclid=IwAR1JOYb_78syFcXO6GdlFb2SemxpFreXTQTNZ4xYM
eluut_DnfhvEi_9_tc

Soegaard, M. (2023). Repetition, Pattern, and Rhythm. The Interaction Design

Foundation. https://www.interaction-design.org/literature/article/repetition-
pattern-and-
rhythm?fbclid=IwAR0TmKbRuiFbTeFTk0UvFsj967vLsrd20epR3xGP-
Y_FCoDlxrh0yNQN-9w

Book
Carroll, B. (2010). Writing for Digital Media. Routledge.

41
 MODULE 5
PLANNING
.

Introduction

Before publishing your own content to the public, planning is the most
important step and requires your full concentration. It's important to establish a decent plan
and provide strong answers to certain important questions before you start selecting the
fonts and graphics for your website. What does the website aim to achieve? Who are the
viewers? What should the content be? How should it appear? Before a single line of code
is produced, the project plan enables your entire team to comprehend the scale and scope
of your project. It guarantees that you and your client will be on the same page throughout
the entire project.

Learning Outcomes

At the end of this module, the learner should be able to:

1. Discuss concepts about storyboarding, usability, headlines and hypertexts, and places
and spaces; and
2. Show competence in planning.

42
Lesson 1. Storyboarding

Leighfield (2010) defined storyboard as a visual representation of the progression

of a story, scene by scene. It consists of a chronological sequence of images with
accompanying notes. A storyboard expresses a filmmaker's vision. It defines how you want
the finished piece to flow - whether it's a feature film, a novel, a presentation, a short film,
or a marketing video - and simplifies the entire creative process. Storyboarding does more
than just summarize the most important details of your plot. It is a process that provides
you and your team members with a tangible, visual flow of a project when it comes time to
collaborate and make key creative decisions during the pre-production process. Although
creating a storyboard takes time, it will save you time (and money) in the long run.

More specifically, storyboarding entails organizing and arranging text and design
elements on paper, even if it only requires arranging the main components. Both the
elements and the content, including fonts, sizes, and colors, should be detailed as much as
is practical. A reader's eye should be efficiently guided through the page by each storyboard
or page design. At first, readers will only perceive simple shapes, prominent colors, and
dense amounts of text. They will start with the foreground and move on to the background
information. They don't see specific items or text until after this orientation, at which point
they choose where to direct their attention. With a storyboard, a designer may visualize
what readers will see. A storyboard also aids in planning out valuable screen space.

Storyboards should display a logical map or path for the reader's eye, a
recognizable hierarchy of headings and sub-headlines (or second-order headlines), and a
consistent use of color. The text should be divided up, and the page's elements should
have some room to breathe. Graphics should only be used when necessary to further the
page's purpose. A reasonable guideline when creating storyboards for internal pages is to
allocate between 50% and 80% of the page's design space to content, leaving at least 20%
of the area available for navigation. However, home pages, when presenting the
navigational scheme may require additional space and are exempt from this rule. (Caroll,
2010)

43
 The table below describes the basic steps of the storyboarding process
(Techwalla, n.d.):

Table 1. Basic Steps of the Storyboarding Process:

1 Gather the data that you want to post to the website. Both text and pictures fall
under this.
2 Sort the information into subject areas.
3 Determine the page title, headings, subheadings, and content for each page of
the website.
4 Design the structure of the information and how the pages will link. This needs
to be logical. It might be linear, hierarchical or a branch design, in the shape of
a web.
5 Arranged the menu's organization.
6 Organize the page for your template. This page ought to be the website's home
page.
7 Check the design. Consider that you are a website visitor. Any page is open for
entry. Does it work efficiently? Otherwise, start over.

Each and every element in your storyboard must address these critical questions
(Storyboarding Your Website, n.d.):

Table 2. Critical Questions in Every Element

1 What do I want my visitors to know here?
2 What do I want my visitors to do at this point?
3 What do I want my visitors to feel right now?
4 Where do I want my visitors to go next?
5 How do I make it easy for them to do that?
6 How do I "reinforce" them after they've done it?

Analyze every problem. Visitors may occasionally end up on one of your internal pages.
Will they be able to identify their location, potential future destinations, and required
actions? A visitor should be able to access your website from any location, comprehend
their location, and figure out how to get where they need to go fast after viewing the final
storyboard.

44
Lesson 2. Usability (Storyboarding Your Website, n.d.)

Usability refers to how effectively, efficiently, and successfully a particular user can
utilize a product or design in a certain situation. To achieve optimal usability, designers
typically test a design at every stage of production, from wireframes through the finished
product.

Usability Elements for Exceptional Experiences

Usability is frequently confused with user experience and simplicity of use. A part of
user experience (UX) design is usability. Usability is the second level of user experience,
according to the Nielsen Norman Group, a pioneer in the UX industry. It comes before
desirability, brand experience, and utility. So, you must address your product's usability
once you've established that it can resolve users' problems. The degree to which a design's
features suit users' demands and situations determines how usable the design is.

Hence, the usability of your design is your responsibility. These components must be
present:
1. Effectiveness - It helps people carry out tasks accurately.
2. Efficiency - The simplest procedure enables users to complete tasks fast.
3. Engagement - People find it easy to use and relevant to their field or subject.
4. Error Tolerance - It allows for a variety of user actions and only shows errors in
situations where they are actually warranted. This is accomplished by assessing
the rate, nature, and gravity of frequent user errors as well as how quickly users
can correct their mistakes.
5. Ease of Learning - Goals are simple for new users to complete and even simpler
on future visits.

Users should be able to navigate an interface when they first see it, so they can
accomplish goals without needing help from others or specialized skills. High usability
designs direct users toward the quickest and least difficult path. You must therefore make
advantage of your in-depth knowledge of user contexts. You must take into account their
limitations, such as their environment, potential distractions, and cognitive load, in order to
do that.

45
How to Design for Optimum Usability

Consider how well your design will flow in context at first. This allows for making content
basic and concentrating on the whole rather than the parts (like individual web
pages). Therefore, be sure to:

1. Use a clear understanding of the objectives of your users while creating your design.
2. Be as realistic as possible in terms of concepts, icons, and language.
3. Display only one main action per screen and messages that are easily understood
and clear of jargon.
4. Show only the information that is absolutely necessary for accomplishing activities
to create a strong information scent on an uncluttered display.
5. Keep content consistent
6. Observe accepted conventions for function and layout (e.g., logo positioning,
tappable buttons).
7. Employ the appropriate text size, color, contrast, and other elements.
8. At the beginning and end of interactive sequences, use chunking and emphasis
important information.
9. Provide thorough input on the state of the system.
10. Add functioning search and helpful navigational tools. Use appropriate font size,
color, contrast, and whitespace.
11. Make controls, including shortcuts, customizable.
12. Prevent interruptions, such as pop-ups or forced logins.
13. Make forms simple to fill out
14. To reduce errors, use autocorrect and warning functions.
15. Make it simple to identify faults.
16. Provide clear documentation for the services you need.
17. Clearly indicate contact options.
18. Provide the ability to go back and undo actions.
19. Add ALT tags to display additional image information.
20. Take into account the server's capacity in terms of page load times and
interruptions.
21. Watch out for mobile design limitations like scrolling and in-app browsers.
22. Make links active.
23. Clearly describe links.
24. Identify user personas.

46
 25. Conduct in-depth usability testing.

While using products or designs that confidently predict their actions and assist them in
finishing tasks quickly and correctly, users should feel immersed and in control. They will
begin to lose trust if they pause to consider what you are showing them. Ultimately, it should
be satisfying, if not pleasant for them.

Lesson 3. Headlines and Hypertext (Digital Grace Design, 2021)

Headlines

The title you offer to your written material is called a headline. Its purpose is to introduce
the material and grab the reader's interest. Newspapers, ads, website pages, and blogs all
employ headlines. The right readers should be persuaded by your title to read the rest of
your website page or content. Your headline should concisely describe who you are, what
you do, and whom you can help—all while grabbing (and holding) each visitor's attention
(Digital Grace Design, 2021).

As important as helping readers choose what to attend is, headlines also assist readers
in deciding what not to read. Effective headlines draw attention to content that might
otherwise go unnoticed. The sometimes-overpowering impulse to be cute, however, should
be resisted by headline writers. As the online audience has the potential to be a global one,
headlines should enlighten before they entertain. Hence, personality should not come at
the expense of clarity and truth. The use of acronyms, slang, idioms, colloquialisms, and
puns should generally be avoided for the same reason. The "just the facts" approach used
in most headlines may not win any awards for creativity, but it does assist readers in
choosing whether to pause and read or continue reading (Caroll, 2010).

Let's go over some best practices so you can make sure your website has captivating
headlines (lifted from Digital Grace Design, 2021):

47
Keep it Short

While it should be brief and prominently displayed on your website, your headline
should be simple to understand at a glance. Several marketers usually advise keeping
your headline between six and twelve words. That doesn't allow you much leeway in
terms of length, but you can turn this difficulty into an opportunity by using your
imagination. You might be able to lengthen your headline depending on the layout of
your website. To make it easier for readers to skim, it is preferable to keep it brief. They
might become readers if your first headline captures their attention. That is the influence
a strong headline has

Use Action Words

Although it may seem like a difficult task, using action-oriented words will bring
you one step closer to achieving this objective. Using action words is a simple and
efficient approach to write for improved conversions because websites convert better
when users take action.

Here are a few action words you may want to use in your headlines:
• Imagine
• Discover
• Boost
• Build
• Guide
• Create
• Go
• Access
• Craft
• Get
• Deliver
• Start
• Plan
• Act
• Amplify

48
Writing At Least Ten Headlines

Spend some time away from the list once you have your ten (or more) headline
possibilities so you can return to it with new eyes. When you're prepared to examine it,
consider the headlines that would grab the reader's attention. Ask a few members of
your audience or even previous clients for their opinions if you're finding it difficult to
focus your ideas so that your headline is as strong as it can be. If you want to take it a
step further and make a data-driven conclusion, you may also A/B test your headline
variations. With this type of testing, you may contrast the outcomes of two various
headlines and select the one that performs best.

Remember Clarity Trumps Cleverness

Change the creative version of the headline for one that is more understandable if
you need to employ obscure pop culture references or jargon to make it work. I advise
writing numerous headline ideas for this reason, among others. Which headlines are
brilliant but unclear are obvious rather fast. Clarity prevails over ambiguity. This holds
true for all other types of website copywriting in addition to headline copywriting.

Write With Your Target Audience In Mind

Without knowing whom you are writing for, it can be challenging to develop an
appealing title. This is why it's important to identify your target client right away.
Knowing your audience will make it much simpler to engage with them in your work
and establish a connection. You might need to change it or replace it with a different
title if it's not entirely clear how your company might benefit your audience from it.

Try Customizing Templates

Use pre-made headline templates if you're still having problems coming up with
catchy titles. By doing this, you may adapt the data without having to start from scratch
and make it pertinent. Also, I advise using these templates for practice so you may
become proficient at creating headlines. When the time comes for you to create your
own, you will be more assured in your capacity to create compelling headlines that will
result in conversions.

49
Hypertext (Caroll, 2010)

Hypertext has already been mentioned as a unique type of text retrieval method that
enables users to move between different electronic information resources or between
different sections of a single resource by means of links that are embedded within them.

The most popular type of hypertext is links, also known as hyperlinks. A new
rhetorical style that acknowledges this non-linearity is required since links alter the reader's
experience in or via a page or document as opposed to the linear activity of reading
supported by books. The order in which the information is read or accessed must be
acknowledged by this new style as being determined by the user, not by the author or
producer. Visitors can access different pages or areas of the website using the navigational
links. Links inside the content direct users to additional information sources as supplements
to what is being read.

Hyperlinks should be unambiguous and clear so that readers can decide whether
to click now, later, or not at all by knowing exactly what they will find when they do. The
links themselves ought to be uniform in design and explicit about the kind of content they
lead to. Standards online dictate that hyperlinks should be around the same size as the
main body text (repetition was covered in the previous chapter). Hyperlinks should be
considered content in and of themselves, much like headlines are, rather than just labels
or pointers to content. Such a pointer does not provide enough useful information; it only
leads to the material.

Here are a few examples:

Bad: For more information on the Boeing 777, click here.

Good: The company has more than a dozen Boeing 777s in its fleet.

Bad: The commission's report is available, click here.

Better: The commission's report is available: www.report.com.

Best: Read the commission's report.

50
Types of Links (Caroll, 2010)

The most common types of hyperlinks on the Web are embedded links, inline links,
and anchors. Each type has a somewhat different way of working, but they all control where
a reader clicks, either to a location on the same Web page or site where the link appears
(an anchor link) or to a different page or site completely.

• Embedded Links - are by far the most typical sort of link, and they are usually
positioned behind a word, a group of words, an object (such as an image, button,
or symbol), or a "hot region." If the visitor clicks the word or object, they will be
redirected to another location. While the majority of embedded links you come
across are HTML-coded text links, additional elements like buttons, icons,
navigation bars, and image maps can also contain embedded links.

• Inline Links - instead of sending the user elsewhere, bring content from another
location to the page they are currently seeing. Thus, there is no need to incorporate
the link or the content. The Table 3. Adapted from Hammerich and Harrison, 2002
most prevalent inline link material is made up of images and graphics. The link often
displays a small portion of the bigger information, such as a thumbnail or a low-
resolution preview of what will be enlarged when clicked. Conversely, the complete
image might be displayed yet actually be located and belong to someone else
elsewhere.

• Anchors - are internal navigational links that take users to different sections of the
same page or document. They are frequently used in text-heavy or lengthy Web
sites to create top-of-page navigation to portions below in order to save excessive
scrolling.

In the past few years, the hyperlinking ethos online has evolved from one that opposed
removing readers from a news organization's website to one that accepts that readers
demand this kind of open access. News organizations have started linked to their rivals,
making them both content providers and aggregators. According to Google's belief, visitors
will return for more information if a news website performs a good enough job of turning
them away. Journalism professor Jeff Jarvis has suggested the golden rule of linking as a

51
way to capture this new ethos: "Connect to others' good work as you would have them link
to your good stuff."

Clarity and consistency are important in good hyperlinking, as they are in writing in
general. Readers shouldn't have to sift through links while uncertain of their potential
benefits. It's about giving forth information. It involves informing them that the information
they require is available. And it involves presenting the content in a transparent manner.
Every conceivable user experience is impossible to manage. Some people might be
misinformed or click a link without coming back. By being explicit and consistent, you can
reduce confusion.

Lesson 4. Places and Spaces (Caroll, 2010)

The most relevant publications are those that are most helpful to the audience they
are trying to reach. The emphasis of this chapter is on the audience, on gathering as much
information as can regarding the information requirements, sensibilities, interests, and
goals of a desired audience, as well as on planning and creating places for certain
audiences. How we design and populate our websites with the material should be based
on a thorough understanding of who our audience is.

Pre-planning

The more interaction we have with our consumers, the better the planning will
inevitably be. Before we produce a single word of content, we need the answers to at least
two fundamental questions: Who is our audience? and What is the site, blog, or online
magazine supposed to do? Of course, the majority of site development initiatives occur on
their own, with little to no touch with the target audience. It is understandable why there is
so much garbage online.

Consider the kind of website you are creating or the audience it will serve. One way
to approach this is to imagine a continuum of types, with the highly sensory-focused at one
end and the information-rich at the other. For instance, YouTube, which emphasizes the
visual, impressions, emotions, and vicariousness, dwells at the sensory extreme. We may
place business intranets, encyclopedia websites like the Library of Congress, and websites

52
run by and for higher education institutions at the other end of the range. The majority of e-
commerce and news websites fall into this middle category because they aim to offer both
information and experiences.

Maximizing Content Fitness

You are aware of how much information should be on the site and how much a
sensory experience is desired by visitors. Now think about the information your audience is
seeking, or how the information you provide might fit into the bigger picture that your
audience is trying to piece together over time—quality of information academics refers to
as fitness. According to research, the suitability of the content, as decided by users, has
much more to do with it than technology does.

Content Development

The next logical step after identifying the types of information your audience seeks
is to create particular content that satisfies their demands. The following questions can help
you select what to create or produce as well as how to show it.

• Begin by categorizing the kind of people you want to visit your website.
The best areas to start are with occupational classifications, demography, gender,
culture, and age ranges. You may establish the level of detail and abstraction as
well as the content's overall substance by being as explicit and thorough as you
can. Consider the cerebral palsy website. The authors of this page recognized their
primary target would be highly anxious parents, and they realized the information
needed to be detailed and substantial enough to be truly informative, but not so
much that it becomes overwhelming. They also understood that there was no way
to abstract.

• Consider where your target audience lives. Are they regional, a country, or the
world? Regarding cultural, ethnic, or language factors, does the answer have any
implications for your content? For instance, if readers from Asia make up part of
your audience, you should keep clear of idioms and slang and use caution while
selecting colors.

53
 • Identify the websites, magazines, and documents that members of your audience
are used to reading. Where does your target audience go today to fulfill its needs?
Consider specific Web pages, periodicals, radio and television shows, and
newsletters. From these sources, you might learn both the right and wrong things
to do. So, what conventions from those kinds of information sources may your
design incorporate? Your content will be more enticing due to the comfort you can
provide, and you will spend less time on design and development because you won't
have to invent something entirely new.

• Discover as much as you can about your audience, including relevant Web pages
directed at the same or similar groups, bulletin boards, and online discussion and
chat forums. Spend time with the audience members and in their company, even if
social networking sites like Facebook or Linkedin, online. Go local. Pose inquiries.
Listen.

• The kind of content you create and even the media formats you could select might
be influenced by understanding the technical capabilities of your audience. What
operating systems and browsers do your visitors use? What is their connection
speed? (Firefox and Explorer, for example, are highly different; frequently, what
works on one will not function well on the other, or at least not in the same way.
Broadband? How fast is the broadband? Are they doing this at home or at work?
What cutting-edge features of browsers do they support? Style sheets, Java
applets, JavaScript, and third-party plug-ins like Flash and Quicktime?

• Finally, take into account the cultural surroundings of your audience. Most websites
have a potentially worldwide audience, therefore when choosing colors for design
and content, among other things, you should be considerate of other ethnicities and
cultural groups. For instance, different ethnic and cultural groups have radically
distinct meanings for the color red.

Information Architecture

The next challenge is how to present that information in a logical way that makes it
simple for users to find after you know your audience and the kinds of information they

54
expect to find on your site or page after you've carefully considered what this audience
needs and how they are used to getting it. Any Web site design should start with a plan for
how the information will be arranged and how users will be informed of this arrangement.

Information architecture, a process so complicated that entire academic

departments are devoted to its study, is the planning and arrangement of information. So
far, the most fundamental goal of information architecture is to create a site's information
hierarchy by assembling pertinent data into groups.

Basics of Page Layout

Website architecture, web page, or developing and setting up individual pages.

Designing effective Web pages benefit from many of the same abilities and sensibilities as
designing effective print pages. For instance, a page layout, whether it be online or in print,
should give the reader a steady visual rhythm or speed as they scroll down the page.
Shapes, colors, typefaces, textures, and connections can all be placed and repeated to
create a rhythm. We might employ a lot of tiny, tightly spaced shapes if a rapid and lively
rhythm is what we're going for. We'll probably employ big, lone shapes if sad and dignified
is the intended rhythm, though.

The grid is the main device used in print page design. A grid can be quite helpful in
laying out all of the space, including the white space, the margin areas, and the areas of
visual rest, regardless of the visual rhythm you decide to use. A grid can be used to display
text, images, graphics, and logos. Additionally, you have a rough layout or grid of the
position of your information on the web page. Then, make sure your design achieves
perfection in what we could refer to as "The Big Three," or balance, contrast, and unity, by
using some of the fundamental page design aesthetics.

Balance is an appearance of rest or an equilibrium state. A balanced page will

typically be simple to read since it appears that all of the layout's components are in their
proper locations and that no one component is overly fighting for our attention. If there is
too much weight in one area of the layout, it will be unbalanced and give the reader a
general feeling of unease. A top-heavy page, created, for instance, by layering a heavy
object, like a photo, on top of something lighter, like the body text, will lack balance and
may look unappealing to the reader's eye. The Cunard advertisement shown above is

55
effective because it has enough of body copy and a substantial back-screened box to
balance out the ship's relatively small depiction. The design has a "lightness" to it due to
how little water is present.

Symmetry is the appropriate ratio of the pieces' sizes and shapes to those of the
whole and to one another. In other words, it is an excellence of proportion and is
consequently intimately tied to balance. This basically means that each page includes a
vertical axis that may be utilized to lay out material in either a symmetrical or asymmetrical
manner for page design. Asymmetry is frequently utilized for fun, informality, and attitude,
while symmetry is most frequently employed for formal presentations.

Contrast is the dissimilarity or difference between two or more objects. In page

layouts, this distinction is made by adding variety, interest, drama, and unpredictability.
Each layout requires prominence, which contrasts with the rest of the content on the page.
Dullness, boredom, and sameness are enemies of contrast, while consistency and
advancement are not.

Unity is the difference or dissimilarity between two or more items. This differentiation
is achieved in page layouts by including elements like variety, interest, drama, and
unpredictability. Contrary to the rest of the content on the page, each layout demands
prominence. Consistency and advancement are not enemies of difference, but dullness,
boredom, and sameness are.

Developing a Style Guide

A style guide, also known as a manual that dictates how Web pages and their
content should be written and displayed, will be of tremendous use to you (and your
company) for maintaining consistency and efficiency while producing, modifying, and
presenting the material. Instead of discussing writing style or tone, as we did in prior
chapters, we are now discussing certain style manuals, of which the Associated Press
Stylebook is an example. Such a handbook offers rules for, among other things, spelling,
capitalization, grammar, and usage, and frequently includes specialized, topical sections,
similar to those in the AP Stylebook on business, sports, punctuation, and Internet-related
terminology.

56
 The terms "style guides" and "style sheets" in web development can also refer to a
set of HTML codes that programmers employ to ensure that the Web pages they are
building are uniform in both function and look. The style guides covered in this chapter are
those used for writing, not for coding or programming. When there are issues with online
copy, a style guide serves as a resource and toolset, and to the extent that content creators
adhere to it, it can be used to prevent issues. Clarity, concision, and consistency are the
objectives of good writing and are the objectives of style guides.

Creating a Style Guide

At Wired magazine, the style guide that is currently in use started out as a single
piece of paper where copyeditors chronicled every copy challenge, they encountered and
the staff-negotiated answers to these challenges. Wired Style: Principles of English Usage
in the Digital Age began as a piece of paper and developed into a big computer file.

The style manual used at Wired is a living document that is constantly changing.
When a new phrase, keyword, or acronym appears, the publication's editors discuss its
style and appropriate usage. The crew struggles with terminology and words. Out of all the
email exchanges and discussions, consensus on usage and appropriate Wired style
eventually forms.

Choosing a Guide Style

You might use an existing style guide as a platform or foundation and add to it over
time to hasten the construction of a new one. The Chicago Manual of Style, the MLA Style
Manual, and the Associated Press Stylebook is among the conventional options
(Washington, DC: MLA, 1985). These manuals were created primarily for print. For
instance, the AP Stylebook doesn't cover topics like how to show links, how to write link
text, or how to write page titles. A more futuristic style manual is E-What: A Guide to the
Quirks of New Media Style and Usage (Alexandria, VA: EEI Press, 2000). For instance,
Lynch's and Horton's Web Style Guide 2 is used for design and visual aspects in this book,
while AP is used for text. Students can be guided in creating a unique style guide that
addresses both the large picture and the small details by using a typical style guide and
augmenting it with other resources and personal experience.

57
 Details a style guide should cover include, among other elements:

• Vocabulary
• Abbreviations and acronyms
• Italics, bolds, quotation marks and parentheses
• Hyphens and dashes
• Punctuation
• Conceptualization
• Headlines and subheads, including colors and font types and sizes
• Hyperlinking protocols
• Ordered and unordered lists
• Graphic design issues
• Photo captions
• Numbers
• Spacing
• Logos, slogans, etc.

Style manuals for web writers will differ. Each sort of Web page has its own specific
vocabulary and text elements. For instance, a website offering medical information will
be very different from one offering assistance with real estate.

Assessment Task 5

Instructions:

1. Make a plan about writing online.

2. Implement your plan.

58
 Summary

The most relevant publications are those that are most helpful to the audience they
are trying to reach. The emphasis of this chapter is on the audience, on gathering as much
information as can regarding the information requirements, sensibilities, interests, and
goals of a desired audience, as well as on planning and creating places for certain
audiences. How we design and populate our websites with the material should be based
on a thorough understanding of who our audience is (Caroll, 2010).

References

Articles

Digital Grace Design (2021). Your Guide to Creating Website Headlines That Convert.

Digital Grace Design. https://digitalgracedesign.com/your-guide-to-creating-

website-headlines-that-

convert/?fbclid=IwAR13N5cDtGSZVBlifCKAieMRbF1LD1z8XVN1PsUPE6eMc0rX

-Yjpgf5Vb0w

Techwalla (n.d.) How to Storyboard your Website. Techwalla.

https://www.techwalla.com/articles/how-to-storyboard-your-web-site

Storyboarding Your Website. (n.d.).

https://nmasse.com/courses/ecom205/storyboard.php?fbclid=IwAR2xW2HM_M5y

VTAXIQOCIuD2KHaUfo0uesKRL-JI5wHWPr1MoLZZkdPHkJs

59
The Interaction Design Foundation. (n.d.). What is Usability? The Interaction Design

Foundation. https://www.interaction-

design.org/literature/topics/usability?fbclid=IwAR3QP28hzCq4swZWHlTOR1MoLn

nXpXDHndND6nmFWpDOBfqkaLrz0_3ByGA

Book

Carroll, B. (2010). Writing for Digital Media. Routledge.

60