What is real on the internet?

So much of the internet, both now and the in the past, has been affected by, or the cause of, the spread of misinformation. Misinformation has been pervasive throughout the internet’s history and speaks to a larger, structural relationship between free and open communication. Without the intervention of fact-checking, any given piece of communicated information is at risk of, regardless of intention, being misconstrued and added to the already gargantuan pile of misinformation.

Reasons for Misinformation on the Internet

I think one of the most clear and obvious reasons for the spread of misinformation on the internet is the intentionally large space for individual users to generate content, platforms, conversations, etc. This radical shifting of how communication and media is transmitted from past technological generations decentralizes so much of broadcasting. Thus, rather than large teams of trained professionals working to create, for example, an educational science show, individuals, who are much more prone to make mistakes or be affected by personal bias, instead provide that type of content. By this measure, much of misinformation online can be explained by the simple mistakes of individuals.

Aside from these simple mistakes, however, lies a broad swath of interlocking sociological and psychological components that generate the growing apparatus of internet misinformation. Multiple sources, including a 2016 article titled “The spreading of information online,” have outlined two main components to the spread of misinformation: human psychology and algorithmic amplification. Social media platforms, in particular, although these systems branch out to other parts of the internet as well, actively choose to prioritize content that receives the most engagement rather than content that, for example, contains the most factual information. Obviously that’s a simple conclusion about social media algorithms, but the architecture of these platforms being designed to use human’s susceptibility to confirmation bias and echo chambers showcases a clear effort to deprioritize non-misinformation if it comes at the cost of engagement.

AI’s Role in Misinformation on the Internet

It is impossible to talk about misinformation (or really anything on the internet) without mentioning the growing institution of AI. Truly, its nearly impossible to say anything new on the subject. My personal opinion is that AI is used as a tool for misinformation in two ways. Neither of which are good, but one of which is, to me, not necessarily groundbreaking. The first form of misinformation influenced by AI refers to the “hallucinations” or simple factual errors chatbots routinely make. Although these can be worrisome, especially considering many people now think of chatbots as nearly as good, or just as good as an authority in any given field its asked about, I don’t think AI is spreading more misinformation than normal through this means of communication. I think, in many cases, those people who are using chatbots for simple factual knowledge such as this and find hallucinations are just as likely to find incorrect factual information on the open internet. Not to say that the spread of misinformation in this regard is irrelevant, I just don’t think its groundbreaking.

On the other hand, the second form in which AI spreads misinformation is, I think, much more pressing. In particular, the tendency for creators on social media to use AI to actively spread misinformation and disinformation can be extremely harmful. These videos can have a veneer of legitimacy due to their perceived high production quality when compared to misinformation streams of even the recent past and, as such, can easily lure people in. I think these instances of AI-spread misinformation are much more important to identify and address.

AI Chatbot Experiment

The prompt I asked the three chatbots was “What are a couple of good framing devices and tactics when writing the third speech for either Proposition or Opposition for a World Schools style debate? Please cite sources whenever possible.” They each responded as such:

For a World Schools third speech, your job is usually to win the debate, not add a new case: rebut the opponent, clarify your side’s logic, and give the adjudicator a clean way to compare the two teams.

Useful framing devices

  1. “This debate is really about…” Reduce the motion to the central clash.“This debate is really about whether protecting people from predictable harm outweighs the loss of individual choice.”
  2. Comparative weighing Compare impacts using clear criteria:
    • Magnitude: Which harm is bigger?
    • Probability: Which outcome is more likely?
    • Timeframe: Which happens sooner or lasts longer?
    • Scope: Who is affected?
    • Reversibility: Can the harm be undone?
    “Even if Opposition proves a cost to autonomy, our side still wins because the harm we prevent is larger, more likely, and irreversible.”
  3. Burden framing Explain what the other side needed to prove but failed to establish.“Opposition has shown that this policy is imperfect, but not that it is worse than the status quo.”
  4. Principle versus implementation Separate whether the idea is desirable from whether every detail is perfect.“The question is not whether our policy solves everything; it is whether it produces a better outcome than doing nothing.”

Effective tactics

For a World Schools third speech, think less like a new advocate and more like the person who tells the judge what the debate was really about and why your side won. The third speaker should not introduce new substantive arguments; the core job is rebuttal, rebuilding, clash organization, and weighing. 1 2

1. Frame the debate around two or three decisive clashes

Do not organize the speech chronologically—“their first speaker said…, then our second speaker said….” Instead, group the debate into the major questions the judge must answer. 1 3

Useful clash frames include:

  • Does the policy actually achieve its goal?
  • Which side bears the greater harm or benefit?
  • Is the policy fair, legitimate, or enforceable?
  • Should we prioritize individual autonomy or collective welfare?
  • Even if the other side gets some benefit, is it large enough to justify the costs?

For each clash, use this sequence:

  1. State the question: “The first issue is whether this policy actually reduces harm.”
  2. Represent their best argument fairly.
  3. Explain why it fails: attack the mechanism, evidence, assumptions, or response to your team.
  4. Rebuild your side’s analysis.
  5. Weigh the result: explain why winning this clash matters to the ballot.

This gives the adjudicator a ready-made decision structure; a strong third speech resolves clashes rather than merely repeating rebuttals. 1 3

Proposition example

“The first clash is whether the ban meaningfully reduces pollution. Opposition gives us inconvenience, but they never show that these costs outweigh the large, predictable reduction in emissions. On the central policy question, Proposition still wins.”

Opposition example

“The first clash is not whether the policy has an attractive goal; it is whether this particular policy achieves it without imposing disproportionate harm. Proposition has shown an intention, but not a credible mechanism.”

2. Use a clear judging metric or principle

Give the judge a test for evaluating the round, then show that your side satisfies it better. This is especially useful when both teams claim benefits but disagree about what matters most.

Possible metrics:

  • Net welfare: Which side produces the better overall consequences?
  • Protection of the vulnerable: Which side better protects people with the least power?
  • Necessity and proportionality: Are the harms justified by the benefits?
  • Feasibility: Which side has a credible mechanism that can work in practice?
  • Rights or legitimacy: Which side better respects autonomy, equality, or democratic accountability?

A good metric should not be an abstract slogan. Tie it to the motion and use it comparatively:

“The question is not whether Opposition identifies a cost. The question is whether that cost is large enough to defeat a policy that prevents substantially greater harm.”

Third speakers are rewarded for selecting the issues that matter and explaining why those issues decide the debate; strategy is a distinct part of World Schools adjudication. 1 3

Tactics that make either frame effective

Compare, do not merely rebut

Use explicit comparison:

  • “Our impact is larger because…”
  • “Our harm is more likely because…”
  • “Our benefit occurs earlier and affects more people.”
  • “Their argument depends on an assumption they never established.”
  • “Even granting their best point, our side still wins because…”

The third speaker’s distinctive contribution is comparative weighing—showing what survived the debate and why it matters more—not simply summarizing what each team said. 1 2 3

Concede strategically

You do not need to claim that your team won every minor point. Concede a limited issue, then make it irrelevant:

“Even if Opposition is right that implementation is costly, that does not decide the debate. The relevant comparison is whether those costs outweigh the serious harm our policy prevents.”

Strategic concessions can increase credibility and allow you to identify which clashes are genuinely decisive. 3

Prioritize rather than cover everything

Choose two or three major clashes and spend enough time explaining them. A long list of tiny responses often sounds like line-by-line rebuttal without a clear reason to vote. 1 3

End by cashing out the ballot

Your final minute should answer:

“Given everything in this debate, what should the judge write on the ballot?”

For example:

“Opposition wins that the policy has transition costs, but Proposition wins the central question: whether the policy prevents greater and more certain harm. Because that is the motion’s decisive impact, Proposition wins the debate.”

A compact third-speaker structure

  1. Opening frame: “This debate comes down to two questions.”
  2. Clash one: Their best case → rebuttal → your rebuild → weighing.
  3. Clash two: Their best case → rebuttal → your rebuild → weighing.
  4. Optional clash three: Only if genuinely necessary.
  5. Final ballot story: State the metric, identify what your side wins, and explain why that is decisive.

For Proposition, emphasize why the Opposition’s objections do not outweigh the motion’s benefits and why your model or principle works. For Opposition, emphasize the motion’s failure conditions: lack of mechanism, disproportionate harms, unfair distribution, rights violations, or a better alternative. In both cases, the final speech should be a judgment about the debate—not a fourth constructive speech. 1 2

Sources

  • 1 Capstone Debate, World Schools Debate Format: Rules, Roles and Scoring
  • 2 DebateTab, World Schools debate speaker roles explained
  • 3 WSDC Academy, Third Speaker (Whip) in World Schools Debate
  • 4 World Schools Debating Championships, official resources and adjudicator guide materials

Here are two strong framing devices and tactics for the third speech in World Schools debate:

1. The “Collapse” Structure with Weighted Questions

One of the most effective framing strategies is what debaters call a “collapse”—narrowing the debate down to one or two major issues rather than covering everything. 1 A common approach is to frame the debate as a series of strategic questions, then show why your team wins the most important ones.

For example, on a motion about space tourism, a third speaker might frame it as: 1

  • Does space tourism provide economic benefits?
  • Is it principally just to spend money on space tourism?
  • Does space tourism produce innovations useful on earth?

Each question gets at a different dimension of the debate. The third speaker then identifies which 1-2 questions are truly decisive and explains why their side’s analysis is superior on those points. 2 This approach makes it easy for the judge to see exactly where your team comes out ahead.

2. The Narrative-Driven Frame (Core Values Analysis)

A strong third speech relies heavily on narrative—identifying the core ideas your side stands for and explaining why they’re fundamental. 1 Rather than just listing rebuttals, frame the entire round as a clash of competing values or principles.

For instance: “This debate comes down to one central question: does the motion prioritize X principle (economic efficiency, human dignity, etc.) over Y principle? Our team has shown throughout this debate that X principle is both more logically sound and practically more defensible because…” 1

This framing gives judges a clear interpretive lens for understanding all the earlier arguments. It transforms scattered rebuttals into a coherent narrative where your team’s side emerges as more principled and internally consistent. 2

Key Tactical Elements to Both Approaches

Regardless of which frame you use, maximize your third speaker’s effectiveness by: 2

  • Pinpointing 1-3 critical clashes rather than trying to cover everything
  • Providing direct comparison between your side’s and the opposition’s arguments on these key issues
  • Persuasively explaining why your team wins on balance, making it obvious to the judge which ballot to sign 2
  • Using your protected time strategically—the final minute to synthesize your winning argument and lock in the judge’s thinking

The third speaker’s job is to give judges “a clear, biased lens through which to view the round, making it easy to sign the ballot in [your] favor.” 2

Here are two effective framing devices and three tactical approaches for the third speech (Reply Speech) in a World Schools Debating Championships (WSDC) format, specifically for either Proposition (Government) or Opposition. These are grounded in WSDC adjudication norms and coaching resources:


Framing Devices

  1. The “Clash Matrix” Frame
    • What it is: Structure your speech around a 2×2 or 3×3 grid of the key clashes in the debate, explicitly labeling where your side wins and where the opposition fails. This forces clarity and ensures you address all major arguments.
    • How to use it:
      • Open by saying: “This debate hinges on three core clashes: [X], [Y], and [Z]. We win [X] and [Y], and on [Z], the opposition collapses because…”
      • Use a visual aid (if allowed) or describe the matrix verbally. For example:ClashProp PositionOpp PositionWho Wins?Moral Duty[Your argument][Their argument]PropFeasibility[Your argument][Their argument]PropAlternativesN/A[Their argument]Opp (but irrelevant)
    • Why it works: Adjudicators love comparative analysis, and this frame makes it effortless for them to see why your side prevails. It also preempts the opposition’s attempts to reframe the debate.
    • Source: Adapted from the WSDC Adjudication Core Manual (2023), which emphasizes “comparative weighing” as a key criterion for Reply Speeches. The matrix itself is a tactic popularized by teams like Singapore and Australia in the 2022 and 2023 WSDC Grand Finals.
  2. The “Story Arc” Frame
    • What it is: Frame the debate as a narrative where your side’s arguments form a coherent, compelling story, while the opposition’s case is fragmented or contradictory. This is especially useful for value-driven debates (e.g., human rights, ethics).
    • How to use it:
      • Open with: “This debate isn’t just about isolated arguments—it’s about two competing visions for [topic]. Ours is a story of [X], while the opposition’s narrative falls apart because…”
      • Example for a debate on “This house would ban deepfake pornography”:
        • Prop story: “A story of dignity, consent, and protecting the vulnerable from exploitation.”
        • Opp story: “A story of censorship, slippery slopes, and distrust in technology—until you realize their arguments contradict each other.”
      • Highlight internal contradictions in the opposition’s case (e.g., “They claim this is about free speech, but their own examples show how deepfakes silence women.”).
    • Why it works: Humans are wired to remember stories, and adjudicators are no exception. This frame makes your speech memorable and persuasive by tying arguments to a larger theme.
    • Source: Inspired by Harvard Debate Council’s training materials on “narrative debating,” which cite cognitive psychology studies on storytelling in persuasion (e.g., The Storytelling Animal by Jonathan Gottschall). Also used by Team Canada in the 2021 WSDC Finals.

Tactical Approaches

  1. The “Two Worlds” Tactic
    • What it is: Contrast the world your side creates with the world the opposition creates, using vivid language to show why yours is superior. This is a micro-version of the story arc but applied to specific arguments.
    • How to use it:
      • For each major argument, say: “In our world, [positive outcome]. In their world, [negative outcome].”
      • Example for “This house would make voting compulsory”:
        • “In our world, elections reflect the will of the people, and politicians are accountable to all citizens. In their world, elections are decided by a vocal minority, and the marginalized remain ignored.”
      • Use hypotheticals or real-world analogies to make the contrast stark.
    • Why it works: It forces the adjudicator to visualize the impact of the debate, making your side’s arguments feel more tangible and urgent.
    • Source: A staple in British Parliamentary (BP) and WSDC debating, popularized by teams like Oxford Union and Team Germany. The tactic is outlined in The Debater’s Handbook (2020) by Liam McArdle.
  2. The “Principle vs. Practicality” Tactic
    • What it is: Argue that the opposition’s case fails on either principle or practicality, while yours succeeds on both. This is particularly effective for Opposition Reply Speeches when the Proposition has a strong moral case.
    • How to use it:
      • Structure your speech around:
        1. “Even if we accept their principle (which we don’t), their case fails on practicality because…”
        2. “But their principle is flawed because…”
      • Example for “This house would abolish prisons”:
        • “Even if we accept that prisons are morally flawed (which we don’t, because they provide justice for victims), the opposition’s alternatives—like restorative justice—are unworkable at scale. But their principle is also wrong: prisons aren’t just about punishment; they’re about protecting society from dangerous individuals.”
    • Why it works: It preempts the “moral high ground” the Proposition often claims, forcing them to defend both their ideals and their feasibility.
    • Source: Common in WSDC and BP debating, particularly in Team USA’s 2022 WSDC training materials, which emphasize “two-layered refutation” (principle + practicality).
  3. The “Time Bomb” Tactic
    • What it is: Identify an unanswered argument from earlier in the debate that explodes the opposition’s case if left unaddressed. Frame it as a critical flaw they’ve ignored.
    • How to use it:
      • Open with: “The opposition has ignored a ticking time bomb in this debate: [argument]. If we accept this, their entire case collapses because…”
      • Example for “This house would ban private schools”:
        • “The opposition has never answered our argument that private schools entrench generational wealth. If we accept that private schools give rich kids an unfair advantage, their case—that parents should have choice—becomes irrelevant, because choice shouldn’t come at the expense of equality.”
      • Key: The argument must be central to the debate (not a minor point) and unrefuted by the opposition.
    • Why it works: It shifts the burden onto the opposition to explain why they’ve ignored a critical issue, making their case seem incomplete or evasive.
    • Source: A classic WSDC tactic, often used by Team South Africa and Team India. It’s discussed in The Art of Debating (2019) by Bo Seo, a two-time WSDC champion.

Bonus: Delivery Tips for Reply Speeches

  • Signpost aggressively: Use phrases like “Let’s be clear: the opposition’s case fails on three levels…” to guide the adjudicator.
  • Use “even if” arguments: “Even if you accept their [X argument], we still win because [Y].”
  • End with a “mic drop”: Close with a short, punchy line that summarizes your framing. Example: “This isn’t about freedom—it’s about fear. And fear is no basis for policy.”
  • Source: WSDC Adjudication Core Manual (2023) and The Debater’s Handbook (2020).

Key Sources Cited

  1. World Schools Debating Championships (WSDC) Adjudication Core Manual (2023). Link (See Section 4.3 on Reply Speeches).
  2. McArdle, Liam. The Debater’s Handbook (2020). Chapter 7: “Framing and Narrative in Debating.”
  3. Seo, Bo. The Art of Debating (2019). Chapter 5: “Tactics for Reply Speeches.”
  4. Harvard Debate Council. Narrative Debating: A Cognitive Approach (2021). Internal training materials.
  5. WSDC Grand Finals Footage (2022, 2023). Teams like Singapore, Australia, and Canada frequently use these tactics. Example: 2023 WSDC GF.

    Token Usage: 5,500

Conclusion

The main conclusions I have from this experiment is that, when prompted, all three of the above chatbots were able to provide reputable sourcing and logical arguments for how to build an argument. I think OpenAI’s explanation is probably the most in-depth and helpful for a beginner debater. However, I think the bluntness of AI is on display in all of the above responses. In particular, the lack of contextual advice that underscores so much of how arguments are built out throughout and debate and become relevant to the third speaker at the end of a debate is lost in the above analysis by these Chatbots. Despite this, I think the general points were completely fine and standard teaching for most debate students while being backed up by reputable debating sources.

Creating Images

Affinity Vector Image

An illustration of a purple and green flower logo with the words "Rem Cycle" in the middle.
Created by Remi Newhart | Affinity 2026 | Affinity Website

The Editing Process

The first image I created was for my site icon. I chose to use the platform Affinity to create this because it was recommended for creating vector images. Also, it was a new platform I had never tried before, so I thought I would give it a try. First, I used the “Cloud Tool” and adjusted the proportions to create the flower-like shapes. I then changed the color of the two flowers and used the “Stroke” tool to give the flowers colored outlines. I wanted to use outlines to bring more contrast to this design and to highlight the two shapes I used. Next, I used the “Artistic Text Tool” to add the name of my website in the middle. I also added a black outline to the letter to bolden the letters and add contrast against the mint green flower.

Design Choices

I chose to make a flower design because, quite frankly, I like flowers and wanted to incorporate it into my website somehow. In addition, I chose the two main colors that are featured in my website’s theme – purple and mint green. I am using these colors because they look nice together and offer a deep color contrast. I wanted something similar for my site icon so my work could be easily identified. The contrast between the mint green and dark purple lettering makes it easier for viewers to read. I downloaded this image as a JPG because that was the most recommended file format for saving images without distorting them. Learning new tools is never easy, but it was fun!

Canva Raster Image

An illustration of a yellow background with colorful flowers splayed across the bottom.
Created by Remi Newhart | Canva 2026 | Canva Website

The Editing Process

The second image I created was for my website’s header photo. I used Canva to create this because I am most familiar with this platform and wanted an easier method to create my second image. I find that Canva is easy to use and has many designs to choose from, especially since I have Canva Pro. I first started from a blank template of 1,920 x 1,080 pixels, which was recommended by WordPress’s website. I then used the “Background color” tool to change the whole background to yellow. Then, I selected a pre-made floral image from the “Elements” tab and attached it to the bottom. I used the “Crop” tool to adjust the height and width of the flowers so it would show nicely in my header. This was an easier process than my first image, but less creative because I did not create my own design from scratch.

Design Choices

I first background color to yellow because it is my favorite color and wanted to add something different to my page. I also thought the yellow would stand out nicely from my website’s purple background because they are complimentary colors! I chose the flowers because I thought they looked pretty all together and wanted something with a pop of color. I intentionally cropped the photo from the bottom without all flowers showing because I felt that it added some depth and movement throughout the header photo. Last, I saved this image as a PNG because I wanted to save it without the flowers being distorted.

Images

Here I discuss how I learned to create different types of images and applied them to my page.

Creating a Favicon

Graphic design of a white radish. Grey with dark grey accent lines and bright green leaf sprouts.
by Rob Hatch, created in Affinity.

I set out to create a unique site icon know as a “favicon”, its a small symbol that is seen next to the name of the website on the tabs of your browser. I created the image above with the Affinity graphic design software. It took some time to learn, but it functions similarly to most Microsoft programs. If you have used PowerPoint or any other program that allows you to crop, edit, or draw over an image, you’ll be familiar. Before I started to draw anything I created a new square canvas with an aspect ration of 1:1. I chose the 1000-pixel grid and manually adjusted the page height and width to 512px X 512px, this is important or it wont work as a favicon. To make the shape of the radish I used the “Heart Tool” to drag and manipulate the heart until it resembled the classic elongated carrot/radish shape. I used the “Path Brush Tool” to draw on the horizontal accent lines and adjusting the width and color of the stroke. Once the lines were drawn, I used the “Stroke Width Tool” to create the uneven taper for the lines. For the sprouts, I used the Path Brush tool again but this time I only drew a few lines at the top of the sprout. It didn’t look like a leaf until I used the “Blend Tool” to replicate and connect the lines to form the leafy sprouts. When I was finished, I exported the image as a .png file, since this is the recommended file type for a favicon. The software that I used can be downloaded for free here: Affinity Download page.

Header Image

A bushel of white radishes.
Photo by Blowing Puffer Fish, posted on flickr.

This turned out to be more difficult than I thought it would be, in fact I had to use my “phone a friend” life line. Finding and altering the image was easy enough, I found it on flickr then uploaded it to Canva digital design webpage and applied a filter to increase the color contrast. Now comes the part that tripped me up, editing and creating a custom theme that allows for a banner photo. Once you have entered the editing portion of your WordPress page, on the tool bar on the left of the screen select appearance and then themes. If you have an active theme already, select customize at the bottom of the page. You will be brought to a page that allows you to make edits to your current page, a new set of options will appear on the left, select patterns. It will display a bunch of premade patters (most you have to pay for) but on the left there is a section for headers, that will present you a few options. Pick one that has a header image already. It will open a new editing page, click on the image, then the top tool bar select replace to either upload or open from your media library. I made sure to save my image as a .jpg as WordPress recommends. Now your photo should be in the banner, you can adjust the image focus and width of the header from there. Once saved, check to make sure that this header is displayed throughout your whole page.

Creating Blog Images

My Favicon

Pennant with initials AC
Created by Abbey Crumley in Affinity

When creating my website icon, I wanted it to feel somewhat outdoorsy and fun. This is why I settled on a pennant design with outdoorsy themed colors. I made this icon using Affinity using the shapes tool. I then added my initials, AC, and used a warp tool to stretch the letters to better fit the style and shape of the pennant. After some troubleshooting, I was able to save this design as a 512mm x 512mm PNG to make sure the photo keeps its resolution.

My Header

Abbey Crumley Digital Studies 101. Includes image of cat and Abbey outdoors.
Created by Abbey Crumley in Canva

After creating the icon for the website with Affinity, I realized I was struggling to use this program and switched over to Canva to design my header. When creating this header, I wanted to continue to highlight an outdoorsy aesthetic while showing who I am and the purpose of this website. This is why I used green text and elements throughout the design. I added the yellow stars to balance the yellow of the shirt I am wearing in the photo. The header is 1950mm x 500mm per the recommended size of the template I am using on my website. This additionally was downloaded as a PNG to prevent any blurriness.

Creating Images for my Site

Creating my Favicon

For my favicon, I used Affinity to create an image of a laptop with my initials on the screen on a berry colored background.  I used a laptop to signify digital studies.  I created it as a vector image so that I can make it any size I need in the future.  I exported it as a PNG because it is the best according to the guide Cartland gave us. I layered simple shapes in vector editing and used the text tool.

Graphic design of a laptop with the initials R and E on the screen
Image by Riley Evans

Creating my Banner

For the banner, I used Canva to create a raster image.  The header is a blue background with “Digital Studies 101” written in yellow.  For this, I used the background and text tools.  I exported the header as a PNG.  I chose this file type because it was the best suited according to the guide.  I am concerned, however, that my header is not the correct resolution and aspect ratio.

Blue bar with the text "Digital Studies 101" in the center
Image by Riley Evans

Creating Digital Images

Blue JN site logo
JN site icon. Created by John Nett in Affinity, 2026

My Two New Image Designs

For my project this week, I created two digital images for my website Surfing the Nett. For my first digital image, I created a site icon. I chose to go with something simple that stands out, my initials JN in a blue and turquoise water theme for the site, that not only matches the sites colors, but also is a play on the, “Surfing” part of the name.

Blue ocean waves and light blue sky, digitally drawn with paintbrush .
Ocean wave header. Created by John Nett in Affinity, 2026.

My new header image shows dark blue ocean waves against a blue sky background for my banner. This also connects to the surfing theme of my website. The banner gives a nice personal touch on the webpage and the new Icon makes the website feel less like an incomplete template, and more like a real site.

Creating My First Vector and Raster Art

As suggested I downloaded Affinity on my Mac to do both images, working with different tools for each image. For my site icon, I used the vector workspace, including tools like the rounded rectangle to create a more modern icon look. I used the text tool and the impact font for an easy to read text at 85pt. Additionally I used the style vintage to give the JN some pattern flair so it wasn’t just plain colors. I added 3d layering to the JN for pop and a gradient overlay for a special look.

For the header image, I used the Pixel workspace, painting the background sky blue, then finding colors that match my site for the waves. I wanted to keep the complexity minimal, I had added a stickman surfing the wave, but it didn’t communicate the right premium feel I wanted. Additionally I used the airbrush light pattern to give a sea foam look that added just the right amount of complexity I wanted before finally uploading both and publishing the new site.

File Formats & Image Types

I learned much about the differences in vector and raster artwork. Vector artwork like svg uses math and shapes to scale, whereas raster images use pixel grids that can get pixelated when enlarged. Both my images were exported as PNG files. The new site icon is 512 x 512 pixels and the header was the recommended 1800 x 300 pixel size. I chose to use PNG for the lossless compression and transparency. I will continue to keep in mind load times of the site for future added images or changes. Overall I honestly had never done anything like this and learned a lot about Affinity and digital artwork.

Creating My Cozy Brand Images

My Favicon

For my site icon, I made a hand-drawn scalloped crest with a classic serif letter “G” right in the center. I went with this look because I wanted a custom logo that fits a cozy, low-contrast style for my website. I used Affinity Designer to draw it, and I used the vector pencil tool with a custom pressure graph to get the look I wanted. By shaping the pressure line into a pyramid, it pinched the ends of my lines into thin needle points, which gave it an authentic calligraphic ink look. When I downloaded my site icon, I made sure it was a PNG so the thin cream lines and details would stay completely crisp and sharp instead of getting blurry like a JPEG.

Cream hand-drawn flower and sage green background
Custom digital favicon artwork created by Geneva Dickerson

My Header Image

When making my header, I wanted a simple but bold design that would complement my favicon. I used Canva to put it together and found the size and position tools super helpful for getting everything lined up. I found a vintage block-print flower graphic and sized the width of the piece to exactly 960 pixels inside a wide 1920 x 1080 canvas. I duplicated it so exactly two large graphics fit perfectly edge-to-edge across the top and bottom borders (960px × 2 = 1920px). This keeps the pattern looking clean and leaves the middle flat sage green space totally open so my site text is easy to read. I downloaded it as a PNG to keep the custom cream lines crisp when it uploaded to WordPress.

Sage green background with cream floral borders
Widescreen header graphic layout assembled by Geneva Dickerson using Canva

Image Creation

My Image Creation Process

I had a lot of fun in the image creation process of this module. My favicon is pretty abstract shape that looks like a combination of a bow, butterfly, star, and a heart. The only real goal was that it looked cute and girly. My header image is just a bunch of hearts in a row. Both of these images were made in Affinity under the vector and pixel sections respectively, and made practically exclusively with the shapes tool. Both images I also believe are PNG’s, which is recommended for logos and headers. I also didn’t want the images to lose information every time I edited them, like with a JPEG.

The Favicon and Header.

Abstract shape resembling a combination of a star, butterfly, heart, and bow in the colors purple, pink, and hot pink.
Created by Zander Spence in Affinity
Alternating rows of Pink-red hearts on a white background.
Created by Zander Spence in Affinty

Creation Tool

Affinity Studio

Images

Creating My Vector Image (Favicon)

In my site icon, I created an image of a flower in different shades of pink. I created this image because it can represent delicate and youthfulness, which is where I am in my life. I used Affinity by Canva and the Canva website to create my image, and I found it simple to use the shapes tool, along with the layering tool. When downloading my site icon image, I made sure to make it an appropriate size (512mm x 512mm) and I downloaded this image as a PNG file type to ensure the quality was efficient for this website.

Light pink background with a magenta colored and abstract square with a flower of different shades of pink inside
By Ava Hild

Creating My Header Image

When creating my header, I planned to keep a simple but effective design that includes my name, the purpose of this website, and complimentary designs to match the site icon. I used Affinity by Canva and the Canva website and found the pixel studio helpful when places my designs in the header. When downloading my header, I fixed the size to best fit the space (1920mm x 400mm) and I downloaded this image as a PNG file type because within the pixel studio in Affinity, at least for me, it would download as a blank document if I used any other file types.

black background with text in the middle that reads "The Work of Ava Hild," in light brown coloring. Surrounding the texts are beige and pink flowers. On the edges show abstract graphics that layer each other.
By Ava Hild

Software used and mentioned:

Canva Studio – Canva

Professional Creative Software | Craft In Affinity, Scale In Canva

Creating Images for My Website

For this project, I created two different images for my website using Affinity. The first image was a favicon, and the second image was a header image. For my favicon, I created a blue circle with my initials, FR, and a sine wave. I got inspiration from NASA because I like its simple science and space style. I made my own design in Affinity using the ellipse tool, text tool, and curve tool. I used blue, white, and black so the logo would be easy to see, even when it is small. For my second image, I created a header for my website. I made it by layering different shapes and graphics together in Affinity. I used blue waves, an atom, a coordinate sphere, mountains, and a sunset background because they connect to physics, science, and technology. I also adjusted the size and placement of each layer so the image would fit the header area correctly. I used PNG for the final images because it keeps the graphics clear and works well for websites. PNG also supports transparency, which was useful for my favicon because I did not want a white box around the logo. One difference I noticed between vector and raster images is that vector images are made from shapes and paths, so they can be resized without losing quality. Raster images are made from pixels, so their resolution matters more and they can become blurry if they are enlarged too much. This project helped me understand why choosing the correct image type, size, and format is important for web design.

Favicon

A blue circular logo with the initials FR in white and a black sine wave running through the design.
Original logo created by Fernando Reyes in Affinity

Header Image

header with blue waves, an atom, a coordinate sphere, mountains, and a sunset sky.
Original header created by Fernando Reyes in Affinity.
css.php