Area of interest-interactive

 Website design research and analysis critique: 03.11.23

I am currently in the process of making a detailed PowerPoint for this and when its complete with all the information, pictures and research and analysis done, then i will screenshot all the slides from the PowerPoint onto here and put a link to my PowerPoint i created for my website critiques below as well just in case, as a backup link to my critiques and analysis if the pictures don't screenshot clearly and have bad readability. 

https://studentstanmoreac-my.sharepoint.com/:p:/r/personal/gol23000958_student_stanmore_ac_uk/_layouts/15/Doc.aspx?sourcedoc=%7B47899152-8564-47F8-8BB2-345F92209126%7D&file=Website%20analysis%20critique%20the%20good%20and%20bad%20websites(%203%20good%2C%203%20bad%20ones).pptx&action=edit&mobileredirect=true&DefaultItemOpen=1&login_hint=GOL23000958%40student.stanmore.ac.uk&ct=1699043631866&wdOrigin=OFFICECOM-WEB.MAIN.EDGEWORTH&cid=190ef822-43cd-4554-92fe-65b45af6a492&wdPreviousSessionSrc=HarmonyWeb&wdPreviousSession=a2270c51-d758-4213-b3fd-9da02a2263d7

Initial idea-I decided to pick a website that works and is directly linked to my theme of a jewish community and i researched and found out that chai cancer care charity works with GIFT so its relevant to look into their website more than the British red cross society, so i ended up choosing to research that website for that charity instead of my first initial idea of a charity website to research, to help me later on when i create my website design, related to community. 

 

Please see the link below to my research and in depth analysis of websites, i chose to look deep into. I did my work on powerpoint because it felt more organised and structured and blogger is unreliable and i wrote a lot and i didn't want to risk loosing all my work and it being locked out for the teachers to view like last time.

Website analysis critique the good and bad websites( 3 good, 3 bad ones).pptx- if this link doesn't work try the one below it.

https://studentstanmoreac-my.sharepoint.com/:p:/r/personal/gol23000958_student_stanmore_ac_uk/_layouts/15/Doc.aspx?sourcedoc=%7B47899152-8564-47F8-8BB2-345F92209126%7D&file=Website%20analysis%20critique%20the%20good%20and%20bad%20websites(%203%20good%2C%203%20bad%20ones).pptx&action=edit&mobileredirect=true&DefaultItemOpen=1&login_hint=GOL23000958%40student.stanmore.ac.uk&ct=1699893868755&wdOrigin=OFFICECOM-WEB.MAIN.EDGEWORTH&cid=9eb13ebf-7e15-4254-add2-cb8b14a5b3c8&wdPreviousSessionSrc=HarmonyWeb&wdPreviousSession=fbfaaf61-6576-4298-9119-874305590959

WWW Timeline and key coding terminology:20.11.23

Key coding terminology:

1.- WWW: The World Wide Web - also known as the web, WWW or W3 -refers to all the public websites or pages that users can access on their local computers and other devices through the internet. These pages and documents are interconnected by means of hyperlinks that users click on for information. The World Wide Web is a subset of the Internet consisting of websites and webpages that are accessible via a web browser. It is also known simply as "the Web." While the terms "the Internet" and "the Web" are often used interchangeably, it is important to note that the Web is a collection of sites, documents, and resources that you can browse; the Internet is the network itself that also carries other types of data and traffic like SSH connections, FTP file transfers, online gaming, and email.

What is World Wide Web?

World Wide Web, which is also known as a Web, is a collection of websites or web pages stored in web servers and connected to local computers through the internet. These websites contain text pages, digital images, audios, videos, etc. Users can access the content of these sites from any part of the world over the internet using their devices such as computers, laptops, cell phones, etc. The WWW, along with internet, enables the retrieval and display of text and media to your device.

What is World Wide Web

The building blocks of the Web are web pages which are formatted in HTML and connected by links called "hypertext" or hyperlinks and accessed by HTTP. These links are electronic connections that link related pieces of information so that users can access the desired information quickly. Hypertext offers the advantage to select a word or phrase from text and thus to access other pages that provide additional information related to that word or phrase.

A web page is given an online address called a Uniform Resource Locator (URL). A particular collection of web pages that belong to a specific URL is called a website, e.g., www.facebook.com, www.google.com, etc. So, the World Wide Web is like a huge electronic book whose pages are stored on multiple servers across the world.

2. -HTML:Stands for "Hypertext Markup Language." HTML is the language used to create webpages. "Hypertext" refers to the hyperlinks that an HTML page may contain. "Markup language" refers to the way tags are used to define the page layout and elements within the page. Below is an example of HTML used to define a basic webpage with a title and a single paragraph of text. 

Small websites store all of their WebPages on a single server, but big websites or organizations place their WebPages on different servers in different countries so that when users of a country search their site they could get the information quickly from the nearest server.

<!doctype html>

<html>

<head>

3. -HTTP: Hypertext transfer protocol or HTTP is a fundamental protocol used on the Internet in order to control data transfer to and from a hosting server, in communication with a web browser. HTTP is the essential means of communication between web users and the servers that maintain the websites themselves. 

As the web becomes more complex, HTTP is evolving, too. The ways that web users and sites interact have been subject to some pretty significant evolutions over the last couple of decades.

For example, in general, the era of Web 2.0 has been a time in which company and other websites have become more interactive. There are more user registration fields and other user events embedded in web pages in general, and all of these have to be managed with HTTP, or more accurately HTTPS.

4. -Hyperlinks: A hyperlink is an element in an HTML document that links to either another portion of the document or to another document altogether. On webpages, hyperlinks are usually colored purple or blue and are sometimes underlined. A hyperlink can be thought of as an interface that links a source to a target. Clicking the hyperlink at the source will navigate to the target. Hyperlinks can assume any of the following appearances:

• Text
• Images
• URLs
• Controls (for example, a button)
• Anchor text is a type of hyperlink represented by plain text. Anchor text is very important in SEO (search engine optimisation).

Hyperlinks can be presented in different forms, like an image, icon, text, or any type of visible element that, when clicked, redirects you to a specified url. For example, if you were to click HERE, you will land in my profile with a list of my other articles. That's a hyperlink.

5. -CSS:  CSS is the language that makes the web look nice. CSS stands for Cascading Style Sheets with an emphasis placed on “Style” and the latest version is CSS 3. While Hypertext Markup Language (HTML) is used to structure a web document (defining things like headlines and paragraphs, and allowing you to embed images, video, and other media), Cascading Style Sheet language comes through and specifies your document’s style — page layouts, colors, and fonts (shoutout to font-family and font-style!) are all determined with CSS syntax, meaning that CSS is one important language for you to master in terms of styling your web pages!

Think of HTML as the foundation (every house has one), and Cascading Style Sheets as the aesthetic choices (there’s a big difference between a Victorian mansion and a mid-century modern home). You need both to create a web page and JavaScript to make it interactive.

How Does CSS Work?

CSS 3 brings style to your web pages by interacting with HTML elements using syntax. Elements are the individual HTML components of a web page — for instance a paragraph — which in HTML might look like this:

<p>This is my paragraph!</p>

If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:

p  {  color:pink;  font-weight:bold;  }

In this case, “p” (the paragraph) is called the “selector” — it’s the part of Cascading Style Sheets code specifying which HTML element the CSS styling will affect. In CSS, the selector is written to the left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector.

Properties are things like font size, color, and margins, while values are the settings for those properties, and you can change these by applying changes to the selector. For example, “background-position,” “border-color,” “border-style,” and “border-width, “and “text-align” are properties and “top,” “red,” “dotted,” “thick,” and “left” are values, respectively.

For a practical example, in the example above, “color” and “font-weight” are both properties, and “pink” and “bold” are values. The full bracketed set of

{  color:pink;  font-weight:bold;  }

is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more on your web page by choosing the specific selector. For instance. . .

body  {  background-color: lightblue;  }

would make your page’s background light blue, or. . .

p  {  font-size:20px;  color:red;  }

will create a 20 point font paragraph with red letters.

Significant hardware development:

For software products, the flow of deliverables is such that new and usable features appear steadily over time, and these features are aggregated into a newly-released product. For hardware products, the flow of deliverables generally does not produce a steady flow of usable features over time, and the product features become usable late in the development cycle. However, the deliverables can still be developed and tested throughout the cycle, and this is the key point. This point enables the continuing scope adjustment and refinement needed to hit planned shipment dates with the best possible value. More specifically, it enables, and we recommend, a Scrum process. An example of the overall flow of development, for hardware product that contains a software component, is illustrated in the figure:

Examples of software used for web development:

Web development software can be used to help professional Web Developers and non-Developers alike build websites, mobile apps, and other digital products.

Although the basic tools involved in web development are programming languages such as HTML, CSS, JavaScript, Java, and Python, there are a number of top web development tools, web design software, website builders, and content management systems (CMS) that will help you design web pages regardless of your web development experience.

Web Developers use a variety of tools and programs depending on their specific job responsibilities, but these are some of the most types of development software and tools.

The best web development software and tools will help you more effectively and efficiently create websites and mobile apps, whether you have web development experience or not.

With the full range of applications in mind, here are the 11 best web development software and tools:

• WordPress
• Drupal
• Joomla
• Wix
• Adobe Dreamweaver
• Weebly
• Sublime Text
• Chrome Developer Tools
• jQuery
• Django
• Laravel

When looking for web design software or a website builder, companies are usually looking for a more comprehensive and user-friendly tool than even your most intuitive CMS platforms. For small businesses or companies that want to build a site without input from a Web Developer, a web design platform or feature-rich site builder might be a better option as opposed to a more complex CMS.

With that in mind, here is some of the best web design software in a web development environment:

Wix:

No coding experience? No problem if you’re using Wix. One of the most popular website creation platforms on the Internet, Wix has hundreds of attractive templates to help you get started and a drag-and-drop editor loaded with worthwhile features that can be adjusted to your liking.

Features of Wix:

Available in a free version, though it will feature ads and space limitations

Plenty of powerful features

Good for people with no coding experience

Different types of websites and when they where developed with examples:

https://blog.hubspot.com/website/types-of-websites

When it comes to envisioning the perfect website, understanding the different types of websites is crucial in determining the right design and execution for your online business. Whether you have rough ideas, wireframes, or no clue at all, finding inspiration from over 1.8 billion existing websites can feel overwhelming. 

Types of Websites That You Can Make:

• Business
• Ecommerce
• Blog
• Entertainment
• News
• Nonprofit/Organization
• Membership
• Portfolio
• Personal
• Forum
• Knowledge Base

1. Business Website: A business website is a company’s digital presence — it presents a business for visitors. While business websites come in many sizes and shapes, they all aim to present the business’s products and services to visitors in a way that acquires new customers, clients, and/or partners.

Usually, business websites include descriptions of their offerings, and a way to either purchase through the website or contact the team to initiate a sale or partnership. From there, it’s all up to the business to decide what to include on its site — some sites are dense, while others are stripped-down with just one or a few pages. It’s all about what best aligns with your branding and what your target market wants to know.

Let’s look at two business sites that show this contrast. Modern Health is a personalized mental healthcare delivery service with a website that explains the app’s purpose, value, features, and plan options for employers. It accomplishes this with a mix of copy, videos, testimonials, infographics, and blog posts.

Image Source

What We Like: Modern Health's website lays bare everything you need to know at a glance. It draws attention to the mission statement, while also providing social proof through spokeswoman Naomi Osaka.

In contrast to Modern Health’s content-rich site, the website for Cambridge-based low-waste shop Cleenland has no frills. The layout and design choices are simple to give prospective customers all the information they need when planning a visit.

Image Source

What We Like: This simple website design echoes the company's mission statement of reducing waste. Cleenland brilliantly employs white space to draw attention to the content that matters.

Whatever business site you’re trying to build, the most important thing is that you have a company website. When someone learns about your business and wants to know more, they’re likely to search your name online. When this happens, you’ll want your website to show up in search engine results, as it’s pretty much assumed any legitimate business these days has a website. If they can’t find yours, they’ll probably lose interest.

There are hundreds of solutions for building business websites (and websites in general), ranging from more involved and customizable content management systems like WordPress and CMS Hub to low-touch website builders like Squarespace and Wix. Business websites may also include ecommerce, blog, community, and knowledge base components as well, all to engage and convert visitors.

2. Ecommerce Website

Ecommerce websites sell products, be it physical goods or digital content. Visitors can browse the website’s listings, read up on product details, and purchase directly from the website. Ecommerce websites are focused entirely on retail, but business websites, blogs, and other website types may also host an online store for selling products or merchandise.

Ecommerce sites sell all sorts of things, but most stick to a familiar model — products are categorized and presented in a list format, and clicking an item brings users to a dedicated product page. Visitors can usually search for products as well via a search bar. On each product page, visitors can add the item to a virtual “shopping cart” or “shopping bag.” At any point users may enter the checkout process, in which they enter shipping and payment information to complete a purchase. Some website builders and hosting platforms even have different ecommerce specialties. For example, Blinkstore is a free website builder created exclusively for print-on-demand companies. It includes plenty of features such as product mockups, an order management system, shipping integration and more. These tools make it simple to build a professional-looking website with specific features catered for running a successful ecommerce business.

For an example of a visually engaging, informative ecommerce site, check out Briogeo Hair Products. Its pages capture attention with a rich pastel color palette to highlight its different products. The navigation menus include product thumbnails to reduce reading, and it displays its mission, results, and blog sections prominently alongside its shop.

Image Source

What We Like: This website boasts an exceptional design that seamlessly combines captivating visuals, intuitive navigation, and compelling storytelling to create an immersive and user-friendly experience.

Because ecommerce websites are often large, complex, and require infrastructure to securely handle payments and shipping, ecommerce platforms are a very popular go-to for new businesses launching online stores. Shopify is the leading option — for a monthly fee, it handles everything from site design to hosting to payment processing. Shopify also integrates with HubSpot to level-up your online marketing, sales, customer service, and analytics capabilities.

3. Blog

Blogging sites are difficult to define since their use has evolved so much over time. The blog (short for “weblog”) format began as a way for anyone to publish casual, long-form written content about their interests. Since then, blogging has been adopted by entrepreneurs and businesses to mark their presence online. Today, we can consider a blog to be any website that publishes written content in the form of articles (or blog “posts”) based around a topic.

If you’re an online business, a well-written, informative blog can be a major asset to your marketing strategy. It brings traffic to your site, establishes authority on search engines, converts visitors to leads, and eventually convinces those leads to take the next step to become customers. A blog that’s relevant to your business niche proves that you’re knowledgeable and committed to being the best in your industry.

If you need an example of business blogging in action, you’re looking at one. HubSpot writes four popular educational blogs — Marketing, Sales, Service, and Website — each filled with articles to help scaling businesses grow better.

What We Like: As a blog website, HubSpot emphasizes readability, clean typography, and well-structured layout, ensuring a seamless browsing experience for readers.

Many individual bloggers have also found success, including Tim Urban. His blog, Wait But Why, explores topics in science, technology, philosophy, and math. Each post goes incredibly in-depth, so much so that you’ll forget the design is pretty standard WordPress. Still, this goes to show that quality content is king. I’d recommend starting with this mind-blowing post about the AI revolution.

Image Source

What We Like: 'Wait but why' excels in its unique design that combines entertaining visuals, relatable content, and seamless navigation, creating an engaging and immersive experience for readers.

Blogs don’t need to be part of a larger monetization push — they can be a simple way to share your passion. Most popular bloggers get their start this way. So, if you want to launch a blog to share your favorite pasta recipes with your friends and family, go for it. With HubSpot's free Blog Maker, you can have your blog up and running in no time.

4. Entertainment Website

Entertainment websites aim to, well, entertain. Like blogs, the content on these websites takes the form of articles. However, there’s usually a larger team behind these websites to produce content in larger volumes.

Take Reductress, a satirical news website that pokes fun at magazines and media targeted at women. 

Image Source

What We Like: The site’s design itself is modeled after the news outlets it parodies, right down to categorizing posts by topic, and pairs hilarious titles and subtitles with stock thumbnails to encourage clicks

You might have also heard of Pitchfork, a music review site that has been around since 1995.

Image Source

What We Like: Pitchfork has a cohesive, elegant frontend design, a sharp color scheme throughout, and clear navigation for everything the publication offers, including reviews, news, and its music festival.

Entertainment websites monetize primarily with display ads, sponsored content, and affiliate links, though they may also sell merchandise through an online store to supplement these forms of income.

5. News Website

News websites are like entertainment sites, but mostly comprise news reports. As such, these sites aim to inform more than entertain. News websites also tend to have a notably different aesthetic than entertainment websites, often with a cleaner layout and aesthetic. Take The New York Times — it heavily uses a grid layout to present the latest stories and typography to mimic its printed counterpart.

Image Source

What We Like: Despite being renowned for its authoritative journalism, the New York Times skillfully incorporates elements of sleek design, engaging visuals, and user friendly interface to deliver an outstanding news website experience.

In place of on-page advertising, many news sites offer a subscription for access to their content. The New York Times limits the number of free articles users can view before they must purchase a subscription. Other online news publications place part of their articles behind a paywall, or limit the number of free daily articles.

6. Nonprofit/Organization Website

Websites are one of the best ways to establish legitimacy for a business, and the same can be said for nonprofit organizations and non-corporate entities. These types of websites serve to promote an organization, communicate the organization’s purpose, and often request and field donations.

Just because your site isn’t selling a product service, that doesn’t merit a shoddy design. To be effective, a nonprofit’s website must clearly convey its mission and goals from the homepage with emotional weight, with additional pages going more in-depth on individual projects and initiatives. Your site may also list organizations you’ve collaborated with, testimonials from those you’ve served, a calendar of future events, and a donation CTA to capture new contributors while they’re engaged.

Nonprofits can employ different design approaches too. 

Image Source

What We Like: Color of Change meets you with a fullscreen background image and clear CTAs on the first page. Visitors can scroll to learn more, but this design choice makes a strong first impression for new visitors and potential donors.

Take Southern Poverty Law Center, another American nonprofit as an example. 

Image Source

What We Like: approaches its homepage design like a news publication might, with image tiles corresponding to stories and updates. It also prioritizes a CTA encouraging visitors to subscribe to its newsletter.

7. Membership Website

Membership websites require visitors to register an account to take full advantage of what the site has to offer. These sites range from educational resources to web apps to news and entertainment publications. In all of these, some or all valuable content is protected and only available to “members” of the website and, in many cases, requires payment to access.

How exactly a membership site’s content and services are gated varies widely — some websites reserve all content for members, while other websites make some items free and others exclusive. Membership websites may accept one-time payments for access, be subscription-based, or require no payment at all, just a sign-up. Blogs, entertainment sites, and news sites have been shifting to this model to generate revenue.

Scott’s Cheap Flights is one example of an effective membership site 

Image Source

What We Like: The service finds inexpensive round-trip flights from the United States to popular travel destinations and sends an email alert when it finds a deal for you. Users must create an account to use a service. Then, they can enjoy its free offerings or upgrade to a premium membership for access to more offers.

8. Portfolio

Online portfolios are a great way for creative freelancers and agencies to present their work. Whether you specialize in painting, illustration, film, photography, graphic design, sculpture, prose, or poetry, you can craft a portfolio website that showcases your creative best.

Portfolios are also an option for professionals outside the arts — for instance, programmers can build portfolios for their coding projects, and marketers can use portfolios to recount their most effective campaigns.

There are thousands of portfolio websites out there to inspire yours. France-based freelance designer Julie Guzal’s is just one example.

Image Source

What We Like: The minimalist, broken grid layout places focus on her body of work, with several small design quirks to make it memorable. There’s also a prominent (but not distracting) contact button near the bottom to get in touch.

Musician websites are another great reference for innovative design. The band Japanese Breakfast updated its site’s visuals to accompany an upcoming album release. 

Image Source

What We Like: Again, we see a prominent CTA on the homepage, with subtle links to view their music, tour dates, and more.

Since creative professionals and agencies utilize portfolios to land work with clients, these sites lean more formal in their presentation. For a more casual approach, you might consider a personal website, which we’ll cover next.

9. Personal Website

A personal website is all about you. Use it as a medium to express yourself and your thoughts through writing, projects, visuals, or media, as long as it reflects your unique perspective.

The goal of your personal site is also up to you — if you want to use a personal site to advance your career, you could post your resume detailing your work experience and consider adding a bit more visual flair than a plain PDF file. If you’re an entrepreneur, a personal website establishes your personal brand. Or, you might just need an online space to vent your ideas — doing so has never been easier.

As one example, the personal site of front-end developer and designer Fatima Burke exemplifies a more professional take on the personal site, listing skills, clients, projects, and products.

Image Source

What We Like: This website is great as a personal resume, as it immediately displays the about section and key skills in an easily digestible manner.

10. Forum

Forums are online spaces for people to discuss things that interest them. They consist of message boards for different topics and moderators to ensure things stay civil. If a visitor wants to participate in your forum, they’ll register with an account first — membership can be free, or you can charge for it.

While forum websites certainly exist on their own, they’re also valuable as an extension of an existing site. For example, an educational website may include a forum where students can chat about courses and answer each others’ questions. Community platform app Duolingo does this, with a section for forums, blogs, articles, wikis, and more

Image Source

SaaS companies also often leverage forums as a support resource. Products with strong developer communities are invaluable in lowering the learning curve of a product — as are knowledge bases, our final website type.

11. Knowledge Base

If you run a business, you can bet that your customers will have questions. To get out ahead, you can create a knowledge base, a website that contains documentation and answers to common questions about your product or service.

Knowledge bases sort their support resources into hierarchies, making them easier to navigate and find what users need. Knowledge bases are typically also searchable — the fewer obstacles between you and your desired resource, the better. Plus, you can analyze your visitors’ search queries and reshape your product to better address needs. This all works to decrease the number of support requests and makes for a frictionless experience.

Again, we can look to HubSpot for a model of what a knowledge base can be. The HubSpot knowledge base provides answers to product-related questions and guides for every feature. Easily searchable, our knowledge base lets you filter queries by resource and see your location on the site with breadcrumbs.

What We Like: The neat layout that emphasizes the search bar and different sections with accompanying pictures will keep visitors coming back.

What’s your website?

Now that we’ve reviewed the kinds of websites that are out there, you hopefully have a better idea of where your future site falls and what conventions you can adopt. Narrowing things down a bit and finding your niche narrows your options, helping make the design process much less intimidating and time-consuming.

It’s also good to know that your design doesn’t have to reinvent the scroll wheel to make an impact — reference the above examples as a jumping-off point, and check out our Website Inspiration Lookbook for even more case studies in web design.

Different browsers-dates and popularity:

We all know the basic functionality of the browser — it’s what connects you with everything on the web. Your browser allows you to shop online, watch videos, upload pictures, play games, and billions more. More technically though, the browser is a software application that retrieves and displays information from a server including web pages, text, images, videos, and other content. But that’s just the beginning.

Why do different browsers respond differently to websites, and why is there more than one to begin with? How do browsers work and where did the need for cross-browser testing come from? By understanding the history and backend of some major browsers including Chrome, Safari, Internet Explorer (IE), Firefox, and Opera, it’ll be easier to understand what goes into developing and testing a cross-compatible website.

Browser Timeline:

There’s an entire history of web browsers. Before the web browsers we knew today, there were the first browsers, which are no longer in use or have highly evolved.

1990 – The WorldWideWeb (not to be confused with the World Wide Web) was the first browser ever created by W3C Director Tim Berners-Lee, then renamed Nexus to differentiate from the actual World Wide Web. Unlike today, this was the only browser and the only way to access the web.

1992 – Lynx was a texted-based browser that couldn’t display any graphic content.

1993 – Mosaic was the first browser to allow images embedded in text making it “the world’s first most popular browser”.

1994 – A noticeable improvement to Mosaic came Netscape Navigator.

1995 – Internet Explorer made its debut as Microsoft’s first web browser.

1996 – Opera started as a research project in 1994 that finally went public two years later. This was also arguably the beginning of the browser wars, mainly between IE 3 and Navigator 3 as Internet Explorer inched ahead with new capabilities.

2003 – Apple’s Safari browser was released specifically for Macintosh computers instead of Navigator.

2004 – Mozilla launched Firefox as Netscape Navigator faded out.

2007 – Mobile Safari was introduced as Apple’s mobile web browser and continues to dominate the iOS market.

2008 – Google Chrome appeared to soon take over the browser market.

2011 – Opera Mini was released to focus on the fast-growing mobile browser market.

2015 – Microsoft Edge was born to combat Google.

Modern Browsing:

Today, Chrome still rules desktop browsers while Safari owns the mobile browsing market. However, there still is no defined winner. The browser wars are still going strong and fragmentation is a more prevalent issue than ever due to the frequent updates and releases of different browser versions and operating systems.

Browsers preferences are also largely dependant on demographics including age, country, and even job. For example, many schools and companies have certain requirements about what devices, operating systems, and browsers users may access and don’t permit individuals to update on their own.

Additionally, as browsers continually update versions hoping to be the next Google Chrome, there’s no saying when one will finally surpass its popularity or when another company creates their own browser to enter the mix. In fact, with Firefox’s recent Quantum version, more and more users and considering making the switch in favor of a faster browsing experience.

Not to mention, the underdog browsers still capture a distinct user base. While something like UC Browser might not capture a large percentage of the internet in comparison to the big five, it still serves about 500 million people.

So, what lessons can we take away from the history of web browsers? As software professionals, the only sure-fire way to approach this diverse user behavior is to develop web applications to be cross-compatible and test them across different browsers to make sure they’re visually and functionally acceptable.

My hand drawn timeline of the WWW:

The history of web design in images:

The Early Web Design Days

(1991-1994):

The Evolution of Web Development

(1995-2000):

(2000 – 2006):

The Mobile Era

(2007 – 2010):

Flat Design

(2010 to Present):

Extra WWW research in dept:

This link has every the history of the internet from 1969-2023 and is really detailed and goes through every time period. -https://www.webfx.com/blog/web-design/the-history-of-the-internet-in-a-nutshell/

Thats what i put down below:

1969: Arpanet

Internet History: Arpanet

Arpanet was the first real network to run on packet switching technology (new at the time).

On October 29, 1969, computers at Stanford and UCLA connected for the first time. In effect, they were the first hosts on what would one day become the Internet. The first message sent across the network was supposed to be “Login”, but reportedly, the link between the two colleges crashed on the letter “g”.

1969: Unix

Internet History: Unix

Another major milestone during the 60’s was the inception of Unix: the operating system whose design heavily influenced that of Linux and FreeBSD (the operating systems most popular in today’s web servers/web hosting services).

1970: Arpanet network

An Arpanet network was established between Harvard, MIT, and BBN (the company that created the “interface message processor” computers used to connect to the network) in 1970.

1971: Email

Email was first developed in 1971 by Ray Tomlinson, who also made the decision to use the “@” symbol to separate the user name from the computer name (which later on became the domain name).

1971: Project Gutenberg and eBooks

Project Gutenberg and eBooks

One of the most impressive developments of 1971 was the start of Project Gutenberg. Project Gutenberg, for those unfamiliar with the site, is a global effort to make books and documents in the public domain available electronically–for free–in a variety of eBook and electronic formats.

It began when Michael Hart gained access to a large block of computing time and came to the realization that the future of computers wasn’t in computing itself, but in the storage, retrieval and searching of information that, at the time, was only contained in libraries.

He manually typed (no OCR at the time) the “Declaration of Independence” and launched Project Gutenberg to make information contained in books widely available in electronic form. In effect, this was the birth of the eBook.

1972: CYCLADES

France began its own Arpanet-like project in 1972, called CYCLADES. While Cyclades was eventually shut down, it did pioneer a key idea: the host computer should be responsible for data transmission rather than the network itself.

1973: The first trans-Atlantic connection and the popularity of emailing

Arpanet made its first trans-Atlantic connection in 1973, with the University College of London. During the same year, email accounted for 75% of all Arpanet network activity.

1974: The beginning of TCP/IP

The beginning of TCP/IP

1974 was a breakthrough year. A proposal was published to link Arpa-like networks together into a so-called “inter-network”, which would have no central control and would work around a transmission control protocol (which eventually became TCP/IP).

1975: The email client

With the popularity of emailing, the first modern email program was developed by John Vittal, a programmer at the University of Southern California in 1975. The biggest technological advance this program (called MSG) made was the addition of “Reply” and “Forward” functionality.

1977: The PC modem

The PC modem

1977 was a big year for the development of the Internet as we know it today. It’s the year the first PC modem, developed by Dennis Hayes and Dale Heatherington, was introduced and initially sold to computer hobbyists.

1978: The Bulletin Board System (BBS)

The first bulletin board system (BBS) was developed during a blizzard in Chicago in 1978.

1978: Spam is born

1978 is also the year that brought the first unsolicited commercial email message (later known as spam), sent out to 600 California Arpanet users by Gary Thuerk.

1979: MUD – The earliest form of multiplayer games

MUD - The earliest form of multiplayer games

The precursor to World of Warcraft and Second Life was developed in 1979, and was called MUD (short for MultiUser Dungeon). MUDs were entirely text-based virtual worlds, combining elements of role-playing games, interactive, fiction, and online chat.

1979: Usenet

1979 also ushered into the scene: Usenet, created by two graduate students. Usenet was an internet-based discussion system, allowing people from around the globe to converse about the same topics by posting public messages categorized by newsgroups.

1980: ENQUIRE software

The European Organization for Nuclear Research (better known as CERN) launched ENQUIRE (written by Tim Berners-Lee), a hypertext program that allowed scientists at the particle physics lab to keep track of people, software, and projects using hypertext (hyperlinks).

1982: The first emoticon

While many people credit Kevin MacKenzie with the invention of the emoticon in 1979, it was Scott Fahlman in 1982 who proposed using after a joke, rather than the original -) proposed by MacKenzie. The modern emoticon was born.

1983: Arpanet computers switch over to TCP/IP

January 1, 1983 was the deadline for Arpanet computers to switch over to the TCP/IP protocols developed by Vinton Cerf. A few hundred computers were affected by the switch. The name server was also developed in ’83.

1984: Domain Name System (DNS)

Domain Name System (DNS)

The domain name system was created in 1984 along with the first Domain Name Servers (DNS).

The domain name system was important in that it made addresses on the Internet more human-friendly compared to its numerical IP address counterparts. DNS servers allowed Internet users to type in an easy-to-remember domain name and then converted it to the IP address automatically.

1985: Virtual communities

1985 brought the development of The WELL (short for Whole Earth ‘Lectronic Link), one of the oldest virtual communities still in operation.

It was developed by Stewart Brand and Larry Brilliant in February of ’85. It started out as a community of the readers and writers of the Whole Earth Review and was an open but “remarkably literate and uninhibited intellectual gathering”.

Wired Magazine once called The Well “The most influential online community in the world.”

1986: Protocol wars

The so-called Protocol wars began in 1986. European countries at that time were pursuing the Open Systems Interconnection (OSI), while the United States was using the Internet/Arpanet protocol, which eventually won out.

1987: The Internet grows

By 1987, there were nearly 30,000 hosts on the Internet. The original Arpanet protocol had been limited to 1,000 hosts, but the adoption of the TCP/IP standard made larger numbers of hosts possible.

1988: IRC – Internet Relay Chat

IRC - Internet Relay Chat

Also in 1988, Internet Relay Chat (IRC) was first deployed, paving the way for real-time chat and the instant messaging programs we use today.

1988: First major malicious internet-based attack

One of the first major Internet worms was released in 1988. Referred to as “The Morris Worm”, it was written by Robert Tappan Morris and caused major interruptions across large parts of the Internet.

1989: AOL is launched

AOL is launched

When Apple pulled out of the AppleLink program in 1989, the project was renamed and America Online was born. AOL later made the Internet popular amongst the average internet users.

1989: The proposal for the World Wide Web

The Proposal for the World Wide Web

1989 also brought about the proposal for the World Wide Web, written by Tim Berners-Lee.

It was originally published in the March issue of MacWorld, and then redistributed in May 1990. It was written to persuade CERN that a global hypertext system was in CERN’s best interest. It was originally called “Mesh”; the term “World Wide Web” was coined while Berners-Lee was writing the code in 1990.

1990: First commercial dial-up ISP

1990 also brought about the first commercial dial-up Internet provider, The World. The same year, Arpanet ceased to exist.

1990: World Wide Web protocols finished

The code for the World Wide Web was written by Tim Berners-Lee, based on his proposal from the year before, along with the standards for HTML, HTTP, and URLs.

1990: The first search engine

Also in 1990, Alan Emtage, a college student in Montreal, created the first search engine for a school project. The search engine was known as the Archie Index.

1990s: The first photo shared on the Internet

Remember Tim Berners-Lee? He’s making waves again, sharing the first photo on the Internet. It featured a group of singers known as Les Horribles Cernettes.

1991: First web page created

First web page created

1991 brought some major innovations to the world of the Internet. The first web page was created and, much like the first email explained what email was, its purpose was to explain what the World Wide Web was.

1991: First content-based search protocol

Also in the same year, the first search protocol that examined file contents instead of just file names was launched, called Gopher.

1991: MP3 becomes a standard

Also, the MP3 file format was accepted as a standard in 1991. MP3 files, being highly compressed, later become a popular file format to share songs and entire albums via the internet.

1991: The first webcam

The first webcam

One of the more interesting developments of this era, though, was the first webcam. It was deployed at a Cambridge University computer lab, and its sole purpose was to monitor a particular coffee maker so that lab users could avoid wasted trips to an empty coffee pot.

1993: Mosaic – first graphical web browser for the general public

Mosaic - first graphical web browser for the general public

The first widely downloaded Internet browser, Mosaic, was released in 1993. While Mosaic wasn’t the first web browser, it is considered the first browser to make the Internet easily accessible to non-techies.

1993: Governments join in on the fun

In 1993, both the White House and the United Nations came online, marking the beginning of the .gov and .org domain names.

1994: Netscape Navigator

Netscape Navigator

Mosaic’s first big competitor, Netscape Navigator, was released the year following (1994).

1994: The first secure ecommerce transaction

Where would the world be without ecommerce? We can trace secure online transactions back to 1994, when the first item was purchased securely online.

The item may have been a Sting CD, sold for $12.48 on Dan Kohn’s NetMarket. However, the Internet Shopping Network suggests they completed an online transaction for computer equipment a month prior to this CD purchase.

1995: Commercialization of the Internet

Following the first secure Internet transactions, 1995 is often considered the first year the web became commercialized.

While there were commercial enterprises online prior to ’95, there were a few key developments that happened that year. First, SSL (Secure Sockets Layer) encryption was developed by Netscape, making it safer to conduct financial transactions (like credit card payments) online.

In addition, two major online businesses got their start the same year. The first sale on “Echo Bay” was made that year. Echo Bay later became eBay. Amazon.com also started in 1995, though it didn’t turn a profit for six years, until 2001.

1995: The development of cryptocurrency

What better way to complement ecommerce than with the invention of cryptocurrency? David Chaum, a computer scientist and cryptographer, created DigiCash in 1995, which went on to pave the way for Bitcoin and other forms of digital money.

1995: Geocities, the Vatican goes online, and JavaScript

Other major developments that year included the launch of Geocities (which officially closed down on October 26, 2009). The Vatican also went online for the first time. Java and JavaScript (originally called LiveScript by its creator, Brendan Eich, and deployed as part of the Netscape Navigator browser – see comments for explanation) was first introduced to the public in 1995. ActiveX was launched by Microsoft the following year.

1996: First web-based (webmail) service

First web-based (webmail) service

In 1996, HoTMaiL (the capitalized letters are an homage to HTML), the first webmail service, was launched.

1996: The creation of social media

Beyond webmail, the Internet also gets more social in 1996 with the creation of the first social media platform. Andrew Weinreich created Six Degrees, which features all our favorite social media hallmarks, including individual profiles and connections with friends.

1997: The invention of Wi-Fi

Today, Wi-Fi is almost synonymous with the Internet, and we can trace its official creation back to 1997. In this year, the Institute of Electrical and Electronics Engineers (IEEE) approved the 802.11 standard for Wi-Fi.

This “official” onset came after several foundational developments, leading back to the 1940s, when actress Hedy Lamarr and George Antheil developed a “frequency hopping” system.

The system paved the way for a team at CSIRO to invent the Wireless Local Area Network (WLAN) in the 1990s. The WLAN allowed devices to connect to a network through radio waves.

1997: The term “weblog” is coined

While the first blogs had been around for a few years in one form or another, 1997 was the first year the term “weblog” was used.

1998: First new story to be broken online instead of traditional media

In 1998, the first major news story to be broken online was the Bill Clinton/Monica Lewinsky scandal (also referred to as “Monicagate” among other nicknames), which was posted on The Drudge Report after Newsweek killed the story.

1998: Google!

Internet History: Google!

Google went live in 1998, revolutionizing the way in which people find information online.

1998: Internet-based file-sharing gets its roots

Internet-based file-sharing starts to become popular

In 1998 as well, Napster launched, opening up the gates to mainstream file-sharing of audio files over the internet.

1999: SETI@home project

1999 is the year when one of the more interesting projects ever brought online: the SETI@home project, launched. The project has created the equivalent of a giant supercomputer by harnessing the computing power of more than 3 million computers worldwide, using their processors whenever the screensaver comes on, indicating that the computer is idle.

The program analyzes radio telescope data to look for signs of extraterrestrial intelligence.

2000: The bubble bursts

2000 was the year of the dotcom collapse, resulting in huge losses for legions of investors.

Hundreds of companies closed, some of which had never turned a profit for their investors. The NASDAQ, which listed a large number of tech companies affected by the bubble, peaked at over 5,000, then lost 10% of its value in a single day, and finally hit bottom in October of 2002.

2001: Wikipedia is launched

Wikipedia is launched

With the dotcom collapse still going strong, Wikipedia launched in 2001, one of the websites that paved the way for collective web content generation/social media.

2003: VoIP goes mainstream

In 2003: Skype is released to the public, giving a user-friendly interface to Voice over IP calling.

2003: MySpace becomes the most popular social network

Also in 2003, MySpace opens up its doors. It later grew to be the most popular social network at one time (though it has since been overtaken by Facebook).

2003: CAN-SPAM Act puts a lid on unsolicited emails

Another major advance in 2003 was the signing of the Controlling the Assault of Non-Solicited Pornography and Marketing Act of 2003, better known as the CAN-SPAM Act.

2004: Web 2.0

Though coined in 1999 by Darcy DiNucci, the term “Web 2.0”, referring to websites and Rich Internet Applications (RIA) that are highly interactive and user-driven became popular around 2004.

During the first Web 2.0 conference, John Batelle and Tim O’Reilly described the concept of “the Web as a Platform“: software applications built to take advantage of internet connectivity, moving away from the desktop (which has downsides such as operating system dependency and lack of interoperability).

2004: Social Media and Digg

The term “social media”, believed to be first used by Chris Sharpley, was coined in the same year that “Web 2.0” became a mainstream concept.

Social media–sites and web applications that allow its users to create and share content and to connect with one another–started around this period. People loved the idea of being able to travel through their friends and families pictures and adventures, despite not being physically present.

Social Media and Digg

Digg, a social news site, launched on November of 2004, paving the way for sites such as Reddit, Mixx, and Yahoo! Buzz. Digg revolutionized traditional means of generating and finding web content, democratically promoting news and web links that are reviewed and voted on by a community.

2004: “The” Facebook opens to college students

"The" Facebook open to college students

Facebook launched in 2004, though at the time it was only open to college students and was called “The Facebook”; later on, “The” was dropped from the name, though the URL http://www.thefacebook.com still works.

2005: YouTube – streaming video for the masses

YouTube launched in 2005, bringing free online video hosting and sharing to the masses.

2006: Twitter gets twittering

Twitter launched in 2006. It was originally going to be called twittr (inspired by Flickr); the first Twitter message was “just setting up my twttr”.

2007: Major move to place TV shows online

Major move to place TV shows online

Hulu was first launched in 2007, a joint venture between ABC, NBC, and Fox to make popular TV shows available to watch online.

2007: The iPhone and the Mobile Web

The Mobile Web

The biggest innovation of 2007 was almost certainly the iPhone, which was almost wholly responsible for renewed interest in mobile web applications and design.

2008: “Internet Election”

The first “Internet election” took place in 2008 with the U.S. Presidential election. It was the first year that national candidates took full advantage of all the Internet had to offer. Hillary Clinton jumped on board early with YouTube campaign videos. Virtually every candidate had a Facebook page or a Twitter feed, or both.

Ron Paul

Ron Paul set a new fundraising record by raising $4.3 million in a single day through online donations, and then beat his own record only weeks later by raising $4.4 million in a single day. The 2008 elections placed the Internet squarely at the forefront of politics and campaigning, a trend that is unlikely to change any time in the near future.

2008: The beginning of Bitcoin

Remember the invention of cryptocurrency back in 1995? Fast forward to 2008, and you see the beginning of Bitcoin — specifically, the domain name bitcoin.org.

After this domain appeared online, someone — or a group of people — using the pseudonym Satoshi Nakamoto sent out a whitepaper on Bitcoin to a cryptography mailing list.

2009: ICANN policy changes

2009 brought about one of the biggest changes to come to the Internet in a long time when the U.S. relaxed its control over ICANN, the official naming body of the Internet (they’re the organization in charge of registering domain names).

2010: The first commercial transaction using Bitcoin

Two years after the beginning of Bitcoin, the first commercial transaction was made with the cryptocurrency. The transaction, which occurred in Florida, was for two Papa John’s pizzas costing 10,000 BTC (Bitcoins).

2010: Instagram captures a new audience

With social media continuing to rise in popularity, more platforms popped up on the Internet. In 2010, the photo-sharing platform Instagram came on to the scene.

2010: Pinterest gets people pinning

The 2000s were an increasingly popular time to launch social media platforms. Along with Instagram, Pinterest launched in 2010 to get people pinning and sharing recipes, crafts, and more.

2010: HBO starts streaming

With platforms like Netflix and Hulu seeing success with streaming content online, HBO began to shift their content distribution online. In 2010, HBO launched HBO Go as their online streaming service.

2011: Snapchat caters to shortening attention spans

The average attention span has dropped by 4 seconds since 2000 (it’s now 8.25 seconds). Snapchat, with it’s 10-second snaps, became an appealing social platform for people with shortening attention spans.

2011: Microsoft buys Skype

In 2011, Microsoft purchased Skype, the online video chatting platform that enables people to video chat online.

2011: Adobe Creative Cloud is introduced

In 2011, the Adobe Creative Cloud was introduced. This took their disk-based software and put it online, allowing them to continually update and improve their software.

2013: Twitter tries video with Vine

With more people consuming video content, Twitter took advantage of the interest in this popular format. Twitter created Vine, the six-second video platform.

2013: Internet banking becomes mainstream

In 2013, more people started banking online. Ten years later, 78% of Americans prefer to bank online.

2014: Facebook purchases WhatsApp

With Facebook continuing to experience success, they purchased the messaging app WhatsApp to help expand their global communication efforts.

2015: FCC boasts net neutrality

In 2015, the FCC ruled in favor of net neutrality to keep the Internet free and open for everyone. The ruling was upheld by a federal court of appeals in 2016.

2015: Live streaming starts

With video becoming an increasingly popular way to consume content, live streaming was created. In 2015, Facebook launched Facebook Live and Twitter purchased Periscope, a live streaming app.

2016: TikTok dances to the top

TikTok came to the scene in 2016, capturing attention of users across the globe. This platform became a hub for creating video content to share with others.

2016: Google launches their voice assistant

With technology continuing to develop, more companies turned to voice assistive devices to create a better online experience. In 2016, Google launched their voice assistant through their Google Nest device and their Apollo app.

2016: Pokemon Go makes everyone want to catch them all

In 2016, Pokemon Go became a global phenomenon that took the Internet by storm. It brought augmented reality (AR) to the forefront.

2018: Data privacy takes center stage with GDPR

With increased concerns over data privacy, some countries started to focus on protecting user data. In 2018, the EU solidified data protection with the General Data Protection Regulation (GDPR).

2019: 5G rolls out

As the Internet continued to develop, companies focused on delivering better Internet services. By 2019, 5G rolled out to the public as a new way to connect online.

2020: The shift towards remote working

With the COVID-19 pandemic, people shifted to working from home, which meant working online. As a result, things like video chatting software, productivity management programs, and online collaboration spaces grew in popularity.

2021: The rise of NFTs

In 2021, Non-Fungible Tokens (NFTs) became a popular way for people to buy and sell digital art and collectibles.

2022: ChatGPT launches

In 2022, ChatGPT officially launched. This artificial intelligence (AI) platform helps people generate texts, gather information, and more.

Future of Internet:

There’s no doubt that the Internet will continue to envolve as time goes on. So, what will happen next? With technologies like AI and voice search devices continuing to rise in popularity, this technology will continue to develop and become more integral.

As for what else we’ll see in the future, only time will tell.

Presentation of Research, Planning and ideas for Magazine and Website(1)by Poppy: 30.10.23 and 01.12.23

https://studentstanmoreac-my.sharepoint.com/:p:/g/personal/gol23000958_student_stanmore_ac_uk/Eey-gOD5BX9PnZFb5SxucMQB48MY7DbUIATqkM0hdn1W7w?e=LSE29M

 

 

Planning your website:20.11.23

1. Navigation:

I brainstormed and created on a mind map using a Canva free template to show a vision of how i want, my websites front page and overall navigation to look like on my website's homepage. 

All the navigation i put was relating to my chosen topic of the Jewish community and volunteering and education about giving is important - for the recipient, the individual doing the giving and society at large. It is also widely acknowledged that practical involvement in giving activities contribute significantly to the development of a long-term giving character trait. I colour-coded and numbered every part of my websites navigation to make it easy to understand and to give it good readability. I also categorised my website into 4 main pages( i might make 5 main pages when i create my actual website) for the organization because it makes it easier for visitors to find the information they're looking for quickly and efficiently. The purple is the main pages and the light blue is all the information links that has ,more information about the main pages and it looks into more on what the website has to offer in greater depth. The information links are all hyperlinks to get you easily where you need to get to with easy and clear navigation. I added a navigation search bar and two images on the homepage (not taken by me the magazine images are from google) and when i actually layout the homepage of my website, i will make it a bit less packed all together and add my images as a background image not just randomly floating on the homepage like I've done on my mind map. 

I used volunteering and Jewish events websites such as GIFT , volunteering Barnet and JW3, also known as Jewish Community Centre London,(it is an arts, culture and entertainment venue, an educational facility and a social and community hub in north London) websites as composition inspiration for my websites homepage navigation layout. I added an extra navigation box for donate as its what keeps a non-profit volunteering organisation running and its important so i added it as one hyperlink to easily access on the homepage as soon as you go into my website. I added an image of two lines on the top corner of the homepage of my website because that's where i want my menu bar to be and look like on the homepage of my website. (A website navigation menu is an organized list of links to other web pages, usually internal site pages. Navigation menus appear in page headers or sidebars across a website, allowing visitors to access the most useful pages quickly.) That's how i want my menu to be like and all of my website's navigation as well. 

2. Framework for site:

Context: The aim of my website is to inspire and enable lifelong giving.

On my website pages, i would like a color scheme of purple, blue, and green. 

Purple is cheerful–whimsical and playful. It’s associated with an escape from reality and magical images. Purple is often a statement of independence as it’s not abasic, primary color, and it’s often a sign of fusing the mundane with the innovative. 

We associate green with vitality, fresh growth, and wealth. We generally think of it as balanced, healthy, and youthful. We use green in design for spaces intended to foster creativity and productivity, and we associate green with progress–think about giving a project the "green light".

While blue conjures images of sky and sea, it’s also the color of bravery and dedication. Blue represents introspective journeys and symbolizes wisdom and depth of understanding. The aqua and turquoise found in Caribbean waters typically engender positive feelings, and the blue of police officers’ uniforms call to mind protection, bravery, and loyalty. Blue is associated with peaceful rest, profound insight, and spiritual realization. Professional uses of blue carry connotations of stability, wisdom, and serenity.

When you are inspiring and enabling lifelong giving, you want a family-friendly environment on the website with clear navigation and lots of pictures to show what the company is all about, and 

across London, i want to inspire giving. Being kind or helping others isn’t something that just happens automatically. It is a mindset that needs to be taught, nurtured and encouraged, so that present and future generations are imbued with this core belief of Judaism. 

I am planning to have a mix of all three colours on each page, not one colour per page separately, it wouldn't look professional and it might have bad readability. Having 3 colours on the website not over shing each other but a good mix of all three will look appealing and have meaning to the colors i chose, which is what i said above. 

Basic elements that i want and need to include in my website in order for it to have good and efficient framework in my website.  I want three pages that are the most important on my website that i will create and these pages will include a home page, a services/products page, and a contact page. On my homepage, i want to include a clear navigation bar at the top of the page and i want all my resources to be present on my website to show people how they can donate and have history and reasons why we do this and what we wish to achieve with a clear vision , with my images i have taken myself included underneath the navigation bar with moving images showing a variety of what my website has to offer, from wonderful volunteers and generous supporters (through them, we are able to inspire and enable lifelong giving, creating a community that is engaged, supported and empowered by the gift of giving to achieve a community that is generous and shows the epitome of the name of my website Firgun . My main inspiration for my planning and framework and style is the GIFt website as itsv exactly n what i want to achieve through my website as well, but i want to do what they do without copying them, but the whole topic i picked of community is heavily inspired by GIFT and what they already do because i think they are amazing and its important for the jewish community and for everyone in the world to be kindd and show generosity and volunteer and do your part to inspire gift giving and kindness to people of all ages in different living situations, from visiting elderly people in a care home and bringing them home-cooked meals, to giving families in London foood packages with the basic essentials of toiletries and food and water to get by each week and inspire gift giving and volunteering and delivering food parcels tro houses or just donating to my website. Donating to my website is just as important as the in-person volunteers themselves because the money you donate helps go towards providing and keeping the Firgun business going for the benefit of others and showing generosity, which is what we need more of in the world . My buisness will make a change in the world in the area of London and all the small things we do to help those in need will make a difference to many lives with the charity we do to help others.

1  Navigation: The website design should be easy to navigate and the menu items should easily accessible from any page. The viewer should always know exactly where they are on the website and have easy access to where they would like to be. A site map is a great idea and will be used if available. This sounds elementary but most websites could be improved in this area. Remember, there is a fine line between an interactive menu and an annoying one, so functionality should be the idea.

2 Visual Design:People are visually oriented creatures, and utilizing great graphics is a good way to make your website more appealing. Your website has about 1/10th of a second to impress your visitor - and potential customer - and let them know that your website - and business (by proxy) - is trustworthy and professional. However, it's important not to go overboard with too much. Scrolling text, animation, and flash intros should be used sparingly in your web design and only to emphasize a point for maximum effect.

3 Content:This is the backbone of your website. Not only does your content play a major role in your search engine placement, it is the reason most visitors are seeking from your website in the first place. Your website text should be informative, easy to read, and concise. Well thought out web content and copy will do more than anything else to make your website design engaging, effective and popular.

4 Web Friendly:No matter how informative, beautiful, and easy to use your website design is, it's useless unless it's web-friendly. It is important that your web designers know the keys to making your website work on all the major browsers, and that they utilize meta tags, alt tags, are fully versed in SEO (Search Engine Optimization). Many factors effect your search engine placement and visual appearance of your site, so make sure your web designers know their stuff.

5 Interaction:A truly effective website design engages your visitors immediately and continues to hold their attention through EVERY page, as well as influences them to contact you. This is called 'conversion', and is probably your website's ultimate goal. Again, there is a fine line between ʻinteractionʼ and ʻannoyanceʼ, so the level of interac- tion should never outweigh the benefit.

6 Information Accessibility:Not all visitors to your website are interested in, or have the time to peruse the entire site. They may need to access only a phone number or address, or just a certain bit of info. For this reason itʼs important to place key information in plain site, in an area thatʼs easily accessible. Weʼve all had the experience of not being able to locate some needed information on a website, and the result is always a frustrated visitor. The experience is annoying at best, and a disgruntled visitor wonʼt stay on your site very long and is unlikely not to return, much less do business with you.

7 Intuitiveness:A great website anticipates what your visitor is thinking and caters directly to their needs, and has elements arranged in a way that makes sense. If a visitor is searching for one of your products or services on a search engine or directory where your site is listed, it's important that your website have a landing page that is directly relevant to what they searched for rather than forcing them to filter through all of your information. Remember, the shortest distance between two points is a straight line.

8 Branding:Your website should be a direct reflection of your business and your brand. Your visitor should immediately make a visual connection between your logo, print material, and brick-and-mortar location. A website that does this not only contributes to the memorability of your branding, but adds a level of credibility and enhanced image of that of your overall business.

9 Turnaround Time:The number one complaint of website design customers is the time it takes to get the site up and running. Unfortunately, a firm that takes unusually long to complete your website is par for the course. The longer it takes to complete the website, the more business - and value - you lose. A website that isnʼt on the web isnʼt and working properly isn't going to bring you any business!

10 Conversion:Your website can be the most important client generator your business can have, and must place the primary emphasis on bringing in new clients and making additional services available to existing clients through increased awareness of all the services you offer. Providing them with the tools they need to do business with you in an easy and enjoyable way will increase your website conversion and bring you the kind of success you seek.

3. Style:

Hand-drawn Illustration of how i want my website pages to look like.

4. Consider the Assets and what you should include in it and make it effective:

I will include lots of photos i have taken and text in my website about the three pages that i am going to create on Wix, which are: the homepage, a page about articles and presss and another page with the title supporting us about donations and ways you can help my website work and help other people.

I will make a logo for my website that looks visually appealing and is using the colour scheme of my website, on the logo typeface colours.

My first idea of a logo for my website that is made using Canva and the present is drawn in adobe Illustrator.

This is not my final logo but is a good experiment of how i would like my logo for my website to look like.

Secondary reaserch: Competitors and industry trends

My competitors are charity organisations that rely on volunteers like GIFT for example who I want to be inspired by but definitely stand out from what they do and I want to do it double and even better to a very high level of success in the outcome of this project. ​

industry trends in non profit volunteering organisations-Formal volunteering has fallen by 40% and informal volunteering by 20-30% since 2013/14. This trend seems to have accelerated since the Covid-19 pandemic, despite a small spike in informal volunteering in 2020/21. The most common reasons why people volunteer are: “I wanted to improve things/help people” - 48%. 

How volunteering will develop in 2023:

A volunteer is a person who spends unpaid time carrying out tasks to benefit others. Examples of volunteering include, among many other things, helping out at a local food bank or community garden, campaigning or raising awareness for a good cause, working in a local charity shop or providing administrative support for charities.

What are current volunteering trends in the UK?

In the United Kingdom, the voluntary sector is facing its own set of challenges. While its workforce has grown by 27% in the past decade, declining income from the government, the pandemic’s aftermath and the rising cost of living leave smaller voluntary organisations, which make up 80%, the most exposed.

Even though it’s difficult to track the cause among all these factors, the UK Giving Report 2022 found that both donations and participation in civic engagement went down in 2021 compared to 2019, and that the cost of living or the struggle to pay the bills was often mentioned in that context.

It’s also worth noting which activities, or rather categories, are competing with volunteerism by age group or other demographic factors. After all, volunteering fulfils a need for those participating, as well, even if it’s just the satisfaction of having helped others in their community. You can offer support in various ways, though, and charities have to be aware of behavioural patterns in this regard. While older citizens tend to donate goods to charity, young people are more likely to buy ethical products.

That’s not to say those people won’t participate in volunteering, but we already know that to volunteer, you need to have the economic and mental capacity first. If people are struggling themselves, your chances of engaging them are shrinking.

All of these trends in government funding, consumerism and charities keep changing the game, and every volunteering organisation is called upon to respond. In times like these, optimising recruitment and management, as well as adapting through flexible offers such as virtual volunteering, are no longer luxuries. They’re the key strategies that’ll help small nonprofits survive.

Boom in young volunteers as survey shows Gen Z most likely to gift time:

We have seen a boom in younger volunteers since the pandemic ended – as new research suggests Generation Z (people aged 16-24) are more likely to want to help out than any other age group.

Ninety-four per cent of Gen Z would volunteer

Our survey found that over nine in 10 (94 per cent) of Gen Z respondents would consider volunteering, compared with just under three quarters (74 per cent) of Baby Boomers (people aged 59-77+) respondents.

Gen Z respondents felt volunteering would benefit them by boosting their confidence (42 per cent) and improving their mental health (39 per cent). Almost a quarter (24 per cent) of Gen Z respondents think volunteering could benefit them through adoption of health lifestyle habits, whereas 1 in 16 (6 per cent) of Baby Boomer respondents said the same.

Build your social circle in volunteering work:

Harry McCaughey, a17-year-old volunteer from Hampton, initially signed up to gain some work experience and develop his confidence in meeting and socialising with other people. He volunteers at his local shop on the weekends while he studies and loves the social atmosphere and the mix of people and ages in the team. After his A Levels, Harry hopes to go to university and have a career in dermatology.

Harry said: “I started volunteering to meet new people, and it’s been great to get to know people that I wouldn’t otherwise have met and hear advice from those that are older than me. I’d encourage younger people to volunteer, it’s a great way to expand your social circle and build confidence and responsibility at work.”

Sarah Boardman, our Retail Volunteering Operations Manager, said: “Since the pandemic, it’s been great to see consistently high numbers of young people choose to try out volunteering. The flexibility we offers makes it ideal for those looking to gain work experience and build confidence before applying for jobs or heading to university. 

“Our easy, flexible, and inclusive approach aims to make volunteering more accessible for all. We encourage everyone to bring their skills to the BHF, whether it’s for one day or one hundred.”

Experimenting with HTML and CSS using Dreamweaver on the mac computer :27.11.23

I made my HTML document using Dreamweaver and also my CSS document using Dreamweaver as well. There are many ways of doing this but i adapted because i was using the mac. I made a bit of progress and started wasn't able to add an image but im happy with the progress i made , even if i didn't download an image and add it onto my page. I was  coding in Dreamweaver and i saved my work in a file i made called my-basic-web. I am not very good at coding and i am a beginner , the last time i did coding was in year 9. I changed the colour of the background and i saved my work and put text in it. I was able to put a heading and first paragraph line in Dreamweaver. The first thing that i did was making a folder putting everything in one folder, otherwise it wouldn't have worked properly. I am happy with my progress even though i wasn't able to add a downloaded image onto my page and it was overall a good attempt and i managed to follow the instructions ok with a little bit of help as im a bit rusty when it comes to coding and its not my speciality in the media spectrum.

Building my final website process:01.12.23,04.12.23,08.01.24

This is a link to my final finished and published website -https://poppygoldberg13.wixsite.com/firgun

I am not finished but for now, i will put the link here if anyone wants to see what I've done so far. I published my website and have started adding the basic features like images and navigation to the homepage of the website and i have also started making my second page for media from my website.  I will screenshot any pages i have to think I've finished but will probably change to show my progress, experimentation, and reflection throughout the process of making my website on Wix.

This is how my 'homepage' on my website looks so far, its not finished but so far i have added a navigation bar and ,my websites colour scheme and images and other key bits of information at the bottom of my homepage. I will probably change the type on the navigation to a darker colour it has better readability on the green background.

this will be at the bottom of each page on my website

This is what i have on my 'contact' page so far.

This is what i have on the 'about us' page so far and its definitely not done yet.

I have a few more pages that I'm also working on but for now this is some progress i have made and i will carry on adding and making my website look good. The functionality and navigation of my website so far is good and easy to use and i am doing this all on wix for free using the communities Non-Profit Website Template to help me and make it easier to create my websites layout, without me having to do it with no help template would be too time consuming and hard. My website is completely made and designed by me using a ready made template , not using AI to auto fill parts of my website, i am custom designing and adding all the information and pictures and other key website features myself. I want all the images on my website to be all my own original imagery. I might delete 'News' from my navigation bar as it might be needless to have and i don't want too many pages on my website, so ill consider deleting it from my pages as i don't think i need to have a latest news page as i already have a 'press and media' page.

Update: i have finished my whole website and published it for anyone to see on desktop and mobile view. To see my website you can click the link i put above. 

Please see my user testing for my website further down the page: 

Evaluation:

I added and reused lots of features from my magazine such as the typefaces, information and the colour scheme. I checked and all the navigation is interactive and every button is clickable and easy to get from one hyperlink to another. I created 7 pages and a homepage for my website. All my pages relate to volunteering and the theme of my website which is donating and gift-giving forward.  My whole website is inspired and has lots of reused informations and features from https://www.jgift.org/about the website called GIFT. The GIFT non profit organisation was what inspired me to do community in volunteering for my area of investigation in the first place. The 6 pages i made are called  'about us',  'support us and donate' , 'events' , 'media', 'contact us' , 'groups' and a 'forum' page.  I used white text for most of my pages and followed the colour scheme of purple, blue and green throughout.  All the images on the website i created are all original imagery and the name of my website is called FIRGUN פירגון. On my media page i added a link to the GIFT podcast, not my actual podcast that i created. The images on my website are not the main sources of my navigation its the button hyperlinks that link back to my pages that i created. I added a detailed about us page and its bold and effective. I think that i could have possibly added more images on my website and maybe linked those images to pages but i think what i have achieved is functional and looks like how i envisioned it to be with an interactive menu and a nice overalll design that meets the standards of my target audience for parents and their kids. My website works properly and it loads quickly. The interactivity has buttons has a navigation menu bar on the top of the pages and has social media links on the side that don't lead you anywhere but it gives you an idea of where to find my company from the social media links attached to the screen. For research, i looked up other websites and analysed them and for planning, i did sketches and content plans ect.

I really enjoyed making my own website for the first time and learnt new skills such as how to use wix and how it can be simple to put your vision of what you want on your website into action if you have a solid, which i maintained throughout the process of making my final website. In my opinion, wix is a great site create a website on, it has many tools and it has an easy site menu you can access and site design and elements to make it your own customised website the way you envisioned it.  I used the communities Non-Profit Website Template to create my website and wix has the option to make the website for you using ai technology but that drafts the purpose of making the website in the first place. Using wix was a bit confusing at first but as i got used to using it every lesson it become easier and quicker to use. In the future, i would use wix again if i had to make a website its free and great for students and it gives you a guiding template so you dont need to worry about making the structure and elements all from scratch. Wix is generic is you let it be but it can be different , depending on how you customise it to be unique and your ideas not just ai doing all the work for you. I think that i made good use of my time and i spent equel amount of time on all the elements on my website, except i did spend a  longer on my about us page since i had to experiment with readability and making sure the white typeface and fonts and backgrounds to the typefaces were clear and not overlapping with the background of that page. Im really happy that i was able to successfully add the majority of the images that i took from the GIFT warehouse and add them on my website on every page , even the homepage, which is one element on my website that i love that differiates it from others that use images from google, it makes it more personal and meaningful to me and will lead to people connecting with the and message of my website and images featured on it more prominently.  I viewed my website from my phone and it looked great and i would say my website looks even more real from a phone than on the computer, but they both look great and functions like any other known website. I liked the choice of wixs variety of vector art, which made things easier for me to put logos and visually appealing elements on most pages. 

Next time i do something interactive in the media course, i have learnt that i should set myself a deadline and move onto the next task in general for anything in this course and i need to remember to know when to stop and have a cut off point and have in mind that the final product doesn't have to be perfect and what matters is that i put all my effort into the work i did and i tried my hardest to push myself to the best abilities without spending too many hours on the same project. When i plan, i need to have reasonable time management and not stress myself out over small imperfections in my work and i need to remember to enjoy the experience of it all and have fun while doing it with as little stress unnecessary as possible. Some negatives using wix is that it can be slow and you need to stay within the guidelines when adding text onto a page otherwise people who view my website wont be able to see the text properly and not look like there is blank spaces on the page when there really is not any and the text has to stay inside the box. This is a problem that i encountered when editing the about us page , i didn't realise until i started evaluating, that my text kept going wonky and not aligned the way i wanted it to look because i went over the gridlines, so next time i will be more aware of that so i don't waste so much time going back and forth trying to fit all the text into the space without looking messily aligned over the images in the background of it. Some positives about using wix is the attractive Templates, wide customisation selection, its a secure and safe to use website and it has great integrations and Tools· My website is for educational and inspiring purposes not a website for people to buy items on and im really glad i stuck to my original area of investigation idea of volunteering in the jewish community and its nice to have my website, app and magazine all link together and have similar element and features on them all. After user testability results and feedback, i changed some minor things about my websites pages such as changing the address to a neutral one of Stanmore collage, rather than a real address from the gift warehouse, for safety reasons. I also changed the type highlighted background on the about us page since that was one of my visual flaws on that page and it looks so much better now without the highlighted background against the words because it looked to harsh and made my website look tacky. I couldn't change the images otherwise i would of had to redo that section of my media page because of the arrangement of the photos on there. Someone told me that my website looks professional in my feedback but they could tell that i copied some parts of a website that they knew of before viewing mine, which is the GIFT website which has inspired me throughout this whole project. They told me in person that they know i am a good writer, so some bits on my website with information could have been in my own technical words, rather then directly copied from the GIFT website. The testing helped me find out what i could have improved and to see all the comments and detailed feedback from my user testing, you can see it further down on my blog.   

Another site we could have used is squarespace to create our websites because i might be more advanced because based on my experience using wix for a few months , it gives the impression of a site for beginners who just started in the media industry because its not very hard to use and understand which is great for beginners like me who have never made a website before.  After using wix and making my first website, i feel more confident in myself to do this again and next time even better since ill be used used to the way it works. Usability testing was an important part in this process because it helped me know what others, other than myself like about the website and how easy it is to understand and navigate without me telling them beforehand what its about. Doing this step helps me understand how real users interact with my website and based on that feedback i can make changes based on the results.  The logo, colour scheme and content all match my app and magazine and are like a linked family of products about community all coming together really nicely. FIRGUN is important to me because it is the first fake organisation that ive created in my life giving me a great feel of how to do this in the real world , from the planning to making the final product and ive realised that i am capable of doing this and it is enjoyable to make an idea come to life and its very satisfying to see the final product of all my hard work become a reality and a finished product that im proud to look at.

My website pages in screenshots before user testing feedback:

Homepage:

About us:

Support us and donate:

Events:

Media:

Contact us:

Groups:

Forum:

Mobile view:

My updated final website pages in screenshots after user testing feedback:

Navigation on the top and bottom of each page on my website:

Homepage:

About us:

Support us and donate:

Events:

Media:

 This is as far as i could spread the image on the media page , it looks ok but with more time and adjustments it could look better.

Contact us:

Groups:

Forum:

Mobile view:

(user experience) and UI (user interface) basics for mobile apps: App prototyping on Adobe XD reasearch:04.12.23

Adobe XD doesn't make make your app, its helps you start prototyping the app.

Mobile app UX design encompasses the experience of users before, during and after they use a mobile app. User experience (UX) refers to the user's journey when interacting with a product or service. UX design is the process of creating products or services that provide meaningful experiences for users, involving many different areas of product development including branding, usability, function, and design. UX design involves far more than the visual components of the UI. In mobile UX design, the focus extends beyond mere visual aesthetics to encompass the emotional responses, objectives, and obstacles faced by users. Good UX design can make or break your business’s product and customer relationships. Because of this, products are more people-focused than they’ve ever been. Today, best practices include answering JTBD (jobs-to-be-done) or customer needs, accommodating diverse people, offering easy-to-use interfaces, and delighting users at every step of the journey. UX design involves far more than the visual components of the UI. 

In mobile UX design, the focus extends beyond mere visual aesthetics to encompass the emotional responses, objectives, and obstacles faced by users. Good UX can help toward critical product success metrics. 90% of users have stopped using an app due to poor performance. A great experience can not only deter someone from leaving, but it can encourage them to use your app even more.

Useful: The system must fulfill the users’ wishes and needs.

Usable: The system must be as easy and self-descriptive as possible.

Desirable: The style of the system must evoke positive emotions and appreciation. Users must want to use your system.

Findable: Navigating through the system must be easy and self-descriptive. Moreover, users must find important information quickly.

Accessible: Disabled users, e.g., users with very poor eyesight, must have the chance to use your system and get the same user experience as non-disabled users.

Credible: Users must trust you and your product.

To implement these principles, designers should:

• Conduct user research to understand their target audience and their needs. 
• Create user personas and scenarios to guide their design decisions.
• Use a mobile-first approach, prioritizing the most important content and interactions for the mobile experience. 
• Use responsive design to ensure that the design adapts to different screen sizes and orientations.
• Pay attention to the visual design of the mobile UX, using a consistent color palette, typography, and imagery. 
• Use appropriate visual cues, such as icons and buttons, to guide users through the interface. 
• Consider the use of animations and micro-interactions to enhance the user experience and provide feedback to users.

Finally, designers should iterate on their designs based on user feedback and analytics data to continuously improve the mobile UX.

An example of a good UX is Todoist.  Todoist have a wealth of features to help people manage their personal or team tasks. The app is easy to navigate, drag and drop-friendly and gives you that ingrained sense of gratification when you cross a task off a to-do list.

However, the UX design example we particularly want to call out is Todoist’s recurring due dates. It’s a simple feature that showcases Todoist has really done their user research and identified one of their users’ key tasks.

User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximising usability and the user experience. Truly great UI achieves all this and more. Exceptional user interfaces won’t just facilitate the seamless achievement of the task at hand—they’ll also be aesthetically enjoyable for the user to navigate. UI can be versatile and good UI design can be achieved through effective UI design that captures users’ imaginations while keeping usability at the forefront. 

By keeping the critical user interface design guidelines for mobile applications in mind, you will be able to save the time and cost that would go behind revamping the app again and again. Furthermore, the initial time investment in Android user interface design or iOS app user interface design can lessen challenges during and after the launch. The purpose of a good UI is to make the content engaging and navigation less complicated. It helps the user understand the app flow easily, thus increasing satisfaction, and ultimately building a good market value and surpassing the competition. For example. Amazon has one of the cleanest Android/iOS user interface elements as products are easily navigable, and the application is very user-friendly.

Airbnb:

Airbnb is a giant in the hospitality industry, with operations in over 190 countries. The company’s app is live in all locations and features a stellar UI/UX to date. The app has a bottom navigation bar in both the Android phone interface and iOS versions, making it consistent and comfortable across platforms.

Another example of a good UI design is Pinterest’s waterfall effect. What would a UI design examples inspiration blog post be without a nod to Pinterest’s iconic user interface? As bonafide card design pioneers, Pinterest combines card design with a waterfall flow to provide users with a uniquely smooth and seamless experience.

By giving each card a subtle shade when interacting with the mouse, Pinterest has smartly enhanced visibility and given the elements the perception of “clickability.”

Example of a seamless UX/UI Design

The reason Pinterest is a successful app is because UI examples in the market that have an outstanding interface, are extremely well-designed, and are built to attract potential users easily.

In the end, everything comes down to a smooth user experience. Any mobile UI’s success depends on the proper mobile app UI design process and how users interact with and understand it. As a business, the only thing to ensure is that the user has the most convenient experience while using the app. Therefore, the screens must be engaging and interactive and constantly be upgraded as time passes and trends change.

What is best practice for mobile app design?

 No Web Experiences: Don't replicate web experiences on an app. Users expect certain interaction patterns and interface elements in mobile apps. Maintain visual consistency with the colour palette, typography, and all other design elements. Provide seamless experience across all devices. Don't replicate web experiences on an app. Users expect certain interaction patterns and interface elements in mobile apps. Maintain visual consistency with the colour palette, typography, and all other design elements. Provide seamless experience across all devices. It also builds trust with the brand. Avoid using underlined links, instead use buttons. Don't take users to a browser. 

This increases abandonment and reduces conversion. Avoid creating dead-end pages that act as blockers for user flow. Error states and empty states should provide instructions and actions to move forward. Design for glanceability and quick scanning as user behaviour. Glanceability refers to how quickly and easily the visual design conveys information and finally, Make sure your product works when it isn’t connected to the Internet at all. Allow caching of data.

XD and app prototyping:06.12.23

I started experimenting with Adobe XD and this was my first time using it and i think it was a success. This was good practise and it gave me good knowledge that i didn't know before about using adobe XD, and it wasn't about my area of investigation it was about shopping for furniture, but the real one will be about FIRGUN, this is just a practise prototype to help me familiarise myself using this new software. I found the instructions on the sheet a bit confusing, but I understood the concept of what we were doing well. When I saw the teacher go through the demo on teams it helped me and made me realise and understand how to do this better seeing someone do it first and then following along after, step by step at my own pace of working, worked well for me. That's what helped me make my final practise prototype designs, visually seeing the teacher show us how to do it beforehand. I made my app prototype on the wrong format, i did it on an iPad format instead of a phone format, so i remade my design but on a different iPhone 14 format and this is how it looks below.

 Firstly, I  started using the iPhone 13 mini format, and type, and then moved on to the practice stages and finished them all, within the 2 lessons we had on Wednesday 06th of December 2023,but I can still go back next lesson and make some minor tweaks and Improvements to my work. The preview shows my app prototype in a larger frame but when i make my real app i will make it a smaller phone to keep the proportions accurate. 

I started off with doing practise stage 1 by Use the tools and shape combination making a navigation bar and added text to make a company name and make it into a component. Next for practise stage 2 i renamed my artboard collection and selected both my text and rectangle and used the align tools to centre the type on the rectangle. For practise stage 3, i duplicated my collection artboard twice by selecting the name and holding down alt while dragging it to the right. I added my photo on to the board and scaled it down so that the chair will nicely fit in a quarter square to keep it neat. I also cropped the two images of the chair and sofa. For practise stage 4, i created a rectangle and two text boxes below it then, i selected the rectangle and both text boxes, and used the repeat grid tool and drag to the left and down to create 10 duplicates. For practise stage 5, i selected the 10 images in the Chairs_Text folder and drag onto the first rectangle of the grid and released to see all the images go into the image frames . Then i selected the Chair_Titles text file and draged it onto the first text box of the repeat grid, then drag the Chair_Prices text file onto the second text box of the repeat grid to see them fill automatically. I adjusted the position or size of one box, then they all changed at the same time. 

Apps continued- showing interactivity: 13.12.23

I made a practise app prototype and i exported my video of a demo of showing the interactivity of my  pages , that has all my pages linked showing evidence of interaction. I did this in design mode and created all app practise design and then added links to make my pages work like a real app would and i did that in prototype mode adding links for each page for interactivity. I then went into desktop preview and screen recorded my app in action . To do this, i went on powerpoint and clicked screen recording and then i chose my selected area and dragged over the XD desktop preview, i pressed record and demonstrated how my app links between screens. I  stopped the recording by clicking the windows key  and shift Q. I then clicked on it and saved as media and i finally named my file and put it directly as a video on my blog. I  mastered how to make shapes and use the text to help me when i make my own app, these skills are important and crucial when making an app. I also learnt skills of using adobe XD and i now know after this practise how to design in the software and view my work in prototype mode and also create my app in design mode. This is just a mockup of how i want my app to work and navigate, not necessarily look like but the usability is what i want in my own app. I used shapes for the menu and to see everything i used desktop  preview and then i  finally put my video demo below above, to show the interactivity of my app.

Xd-Planning phase of building my own app for my area of investigation: 13.12.23

Mindmap for my app  brainstorming ideas for my app:

Below is everything on my mindmap if the image text is not readable:

Mindmap Map-brainstorming ideas

What is 

your main ideas for my app?

What is 

your main idea?

What is 

your main idea?

What is 

your main idea?

Consider what your app might provide/do:

As i am sticking to the same concept and idea for my area of investigation of community in volunteering, i will keep the name FIRGUN as my apps name .

Break the main

idea down into categories

An app for the purpose having volunteering events and volunteering gigs easy and accesable through my app and can easily book a free volunteering job out of your time and generosity to help others  who need your help in the jewish community.

Break the main

idea down into categories

This app is not to sell anything, its an app i want to create to be an easy way to support and raise money for charity through my app for people in need.

My app will be to inform my audience/demographic about the importance or volunteering

My app will not be for entertainment purposes for quiz or trivia for example.

Supporting Idea

Another idea is that this app could educate the jewish community on the core values of jewdaism and how we can imput that into our daily lives , with my app offering pages to direct you to booking onliine interactive zoom sessions or in person to learn more about the core values of jewdaismn m and how we as jews can support and community through the power of volunteering and genersity.

Supporting Idea

My app will have the aim for people to be encouraged to do lots of gift-giving foward and volunteering .

Out of all my ideas, i will pick one that is most suitable for an app.

The users on my mobile app will be able to found out why you should volunteer to FIRGUN and how you can donate through my app and read peoples stories of real-life experiences  thety had of how volunteers imapcted their life through gift-giving and gicving a helping hand and showing generosity towards the npeople in need , who gwt support from the volunteers through theire actions to help the people in need in the jewish community strive.

Supporting Idea

I will reaserch  a food banlk website called the trussels trust and look into their app to give me ideas for my own app about volunteering and giving back to the community and donating food essentails , to their food bank.

It will be about  raising money and donations  for FIRGUN  for a large audience for volunteers to get involved in helping the community and when people donate through my app, it will help many people in need in the jewish community .

Supporting Idea

Another idea that i came up with is for my app to be just for the purpose for people to easily donate anytime they can to my mnon-profit organisation FIRGUN

Supporting Idea

Add supporting factor here

Add supporting factor here

Add supporting factor here

An idea that i really like is that through my app, anyone who wants to get involved can book a volunteering gig at anytime free of charge and also through my app, i want people to see all the fundraising events FIRGUN offers weekly on a consitant regular basis, to help promote and book your place at the event as a helper/volunteer  to help encourage people to come and donate money at the events for people in need and FIRGUN will be partnering with local jewish charities to show that its a real event that is working side by side withh a real charity organiusation to help for example children in need or families who need essentials  delivered to their homes, or even monety donated to buy freash ingrediants to mmake fresh home baked catred meals for elderly jews who need your support and generosity .

The app  could work  with links on one page leading youn  to a page of contact  on how you can becme a volunteer at FIRGUN , with for examplle a link to a contavct number or  a link for where people can click it and be put onto the page for  collection of food parcles  and  how you can get different volunenteering positions and what ones area available , and my app will inform people  of opportunities  they can take on  and book it through my app. Or my app might not end up having any links at all and might just be about the imporance of volunteering and peoples stories and one small link on my apps main a page leading you to  a donate page.

Add supporting factor here

Organize your ideas - from the broadest concept down to the smallest details

Another idea that i came up with is for my app to be all about showing diofferent peoples stories about how volunteers  helped them be where they are today and really helped them and provisded the essentials to help them get out of a tricky situation in their life . After reading peoples stories through my app,  they can then click the link or scan the qr code on the apps homepage to direct them to a page on the app where they can donate or at least become a volunteer themselves, or share our page to many others , who can donate and spread the message of my app of my  non-profit organisation trying to raise awareness of the importance of volunteering and how it positivley impacts the community and can change peoples lives in an extrodinary way, through  inspirational stories on my app on one page and  events on another page and a page all about the importance and making people aware of how volunteering impacts a community in a healthy and great way.

Creating a Mood board: colours, image ideas, buttons, logo inspiration,typeface style:

• Fonts are part of the main cast for user experience. Choosing the right font will make potential for user involvement with the web or mobile app even bigger.
• 
  
• The smallest example is, when the font we choose for a news application is correct, it will encourage users to read it easily.
• 
  
• If users are easy to read, they will be enthusiastic about the news. They will leave comments, share with their friends, and much more.
• 
  
• It’s different if the font we choose is not right for our mobile app.
• 
  
• So the user will have difficulty reading the information and it is not easy to understand what the application wants to convey.

5 Fonts for Mobile Apps UI Design:

1. Open Sans

The first font I recommend for mobile app user interface design is Open Sans.

Open Sans is a humanist sans serif font designed by Steve Matteson.

Open sans is optimized for website display and mobile apps. This font is designed with upright pressure, open shapes, and a neutral but friendly appearance.

With these characteristics, open sans give a pleasant impression to read.

Price : Free

Source : https://fonts.google.com/specimen/Open+Sans

2. Roboto

One of the popular fonts chosen by many mobile app developers is Roboto.

No less interesting is that Roboto was chosen by Google as the main font for the mobile operating system on Android phones.

This is because this font has a friendly and open curve. This makes the reading rhythm more natural.

Price : Free

Source : https://fonts.google.com/specimen/Roboto

3. Poppins

One of my favorite fonts for designing a mobile UI / UX app is Poppins.

Most of my mobile app designs use Poppins as the font.

For me, this font is not only comfortable to read but also gives a lively feel to the mobile application.

Price : Free

Source : https://fonts.google.com/specimen/Poppins

4. Nunito Sans

Next to the UI / UX mobile app design I would recommend Nunito, a font created by Vernon Adams.

For me personally, Nunito gives off a soft impression, making the mobile app look more relaxed.

Price : Free

Source : https://fonts.google.com/specimen/Nunito+Sans

5. Lato

Lato is a font from the sanserif typeface family. This font was designed by a designer named Warsawukasz Dziedzic in the summer of 2010.

The designer’s own naming was based on the season at that time.

Lato in Polish means Summer.

In accordance with the meaning, the use of the Lato font will give the mobile app a bright summer impression.

This certainly makes the mobile app easier for users to access and understand.

Price : Free

Source : http://www.latofonts.com/lato-free-fonts/

Below is the mood board i created on Canva:

Research an app: Justgiving

Analyse at least one app that have a related function/theme, include

images

• What do they do?

• What is the visual appearance of them?

• Why would they appeal to their target audience?

• Compare them and give your opinion

• What parts can you emulate or adapt to suit your app?

The just giving app is a bit bland, so i will research one more app that relates directly more to donating and volunteering, not an app like just giving which is basic and a genetic app, so i will research another app which is more specific to my app which is more formidable, than the just giving app. Just giving is bland and not appealing and it doesn't give people reasons for people to get involved. They dont have charities involved with them and the app is not visually appealing or colourful and wont draw the viewer in. Justgivings had no pictures and was a dull app that didn't fully relate to my app idea. 

Justgivings app Provides direct support to an individual, family or community by paying medical expenses or offering financial aid. JustGiving is one of the most popular peer-to-peer fundraising platforms and is ideal for challenge events, allowing donors to sponsor their friends and family. With the JustGiving app for Beacon, you can rest assured that all of your data is automatically imported into your Beacon database, structured and stored in the way that's right for you.

Features

Fundraisers import

When a supporter creates a new fundraising page for you in JustGiving, Beacon will automatically add them and their page as records in your account.

Donations import

When someone makes a donation in JustGiving, Beacon will automatically add the donation as a Payment in Beacon.

If the donor allowed JustGiving to pass their data to your organisation, then the donor will automatically be added as a Person in Beacon, allowing you to see the history of all of their payments in your database:

Additionally, Beacon can import the fundraiser responsible for each donation, setting them in the 'Fundraiser' field on the payment record. Helpfully, this allows you to quickly see how much a person has fundraised for you when viewing their person record:

---

Events & appeals

When importing fundraising pages and donations, Beacon will create events in your database for the JustGiving events that don't already exist in Beacon:

Beacon will also create a campaign in your database for each appeal you have in JustGiving, allowing you to easily keep track of the donations made across each one:

1. Create a JustGiving app

First up, you need to sign up for a JustGiving developer account.

Note: This is different to your regular JustGiving login.

Once you've created an account and verified your email, head to My Account > Applications.

You'll see that JustGiving has created an app already for you:

Woohoo! We're not done yet though...

2. Get your app approved by JustGiving

For this app to be used with Beacon, it needs to have it's "plan" changed by the JustGiving developer team to allow access to JustGiving's API.

Open your app, and then click Review/Change:

This should open a popup. Then click the Beacon CRM integration link on the left hand side, and then scroll down and click Request plan change.

After you've requested a "plan change" with JustGiving, the JustGiving developer team will review your request, and should grant you access within a few working days. You'll be notified by email when this happens.

3. Add your details into Beacon

Now you have your approved JustGiving app, you can connect with Beacon! Head over to Apps > Directory and click Install on the JustGiving app.

You'll immediately be prompted to connect with JustGiving:

When connecting, you will need to add your Charity ID (can be found in your regular JustGiving account Settings > Edit Charity Details):

You'll also be asked to provide your "App ID". This is for the developer app you just created, and can be found in your list of JustGiving developer applications:

The email and password fields are the usual details that you use to login to JustGiving with (not the developer details).

Once you've entered all of the details, click Connect. Review the settings and then click Save integration.

Nicely done! JustGiving is now connected to your Beacon account!

JustGiving app is forward-looking. It only imports donations that are made after the JustGiving app is installed, and only imports fundraisers for fundraising pages that are created after the JustGiving app is installed.When someone has created a new fundraising page, JustGiving sends their details to Beacon overnight (around 5am!) so you should see any new pages added as Fundraising pages and fundraisers themselves added as People within 24 hours.If a donor or fundraiser opts-in to provide their data to you in JustGiving, the data will be available for Beacon to import. They allow you to choose how to set contact consent for imported donors and fundraisers (which depends on your consent statements in JustGiving). Jamie Parkins is the API product manager at JustGiving. He specialises in developing the services and technologies that enable charities, agencies and a growing community of developers to build applications that utilise JustGiving's technologies.

The app has been built using JustGiving APIs, so charities don’t need to do much to get started. 

I have also decided to research the go fund me app. The American crowdfunding platform, GoFundMe, is one of the most popular websites that help individuals to fundraise for their needs. GoFundMe crowdfunding app is easy to use. From medical emergencies of individuals to charity works of non-profits, GoFundMe provides everyone to fundraise through its fundraising app. The fundraising and donation app GoFundMe also provides a fundraising section for bills and rents too. The option of a visual thermometer shows the real-time progress of the fundraiser that gives clarity to the users. 

GoFundMe is an American for-profit crowdfunding platform that allows people to raise money for events ranging from life events such as celebrations and graduations to challenging circumstances like accidents and illnesses. From 2010 to the beginning of 2020, over $9 billion has been raised on the platform, with contributions from over 120 million donors.

This is the Go fund me logo, its bold and effective and not boring but is 1 plain colour which is fine because its very eye catching and has a nice light green colour. Go fund me is available on all devices and it is a popular page  for people  to raise money online. Its not exactly what my app is about , but it has some similarities and the visual appeal of this app inspires me and i might use some of the aspects of this app onto my  designs, in my own way. GoFundMe is the No.1 and most trusted leader in online fundraising/crowdfunding. Since 2010, we have helped people in over 170 countries raise more than $5 billion. Start or manage fundraisers, engage with supporters and discover important causes on the go with the GoFundMe app.

I dont have this app downloaded on my phone, so i will screenshot any pages from go fund me i can find to show how an app should look like , that relates to my apps and has charities involved with the app. As it currently stands, the app is unusable, according to some google reviews.  Some of the core functions, like managing fundraisers and checking notifications, throw up an error message saying it couldn't connect and nothing shows. The UI looks good, so good on your designers. A good UI doesn't help much if the app won't work as intended even after a reinstall. A fix should be released!  The current software is surprisingly easy to use and setting up a campaign is relatively easy with any temporary confusion occurring due to various necessary steps and options. A word of advice: some functions are easier to setup on a laptop while others a better to be utilised on a hand held device. Be sure to be familiar with the app on both devices.

The app has good interface and design. Everything is a breeze from creating, updating, and withdrawal. The only issue  right now is a big bug in the system. The share page cant open and load and that's a pretty big part of it. Currently according to google reviews, you can't even access a share link in the app. The developers did well, making go fund me but it definitely has its faults.  This app has good readability and navigation and looks really good visually.  The main colour theme of the app is green and white. Everything from the search bar, to the titles on the app pages all follow a consistent green and white colour scheme, which is nice and calming. Having a platform that gives people with disabilities and life problems the chance to be able to afford the medical needs or help out a person gift giving back to a community of people in need is absolutely amazing. There's so many people that are so grateful because they need something like this! I'd recommend this app to anyone who needs to fundraise money for anyone, no matter their circumstances. 

I found some screen shots from other people who have used the app to show how some of the pages visually look below:

To support independent businesses affected by the coronavirus pandemic, Yelp and GoFundMe teamed up to make it possible for people to donate through the businesses' Yelp pages. 

This app layout is the latest mobile UI design trends. Go fund me is a perfect example of this and the screenshots above just show how good the layout and colour scheme of the app is. 

Whether it's for a charity, a local cause or for someone you know – there are many causes you can crowdfund for. People using GoFundMe can crowdfund for just about anything. This could be medical expenses, friends and family, education costs or simply just a charity which is close to their heart. GoFundMe is better for larger fundraisers with a wider audience. It ultimately depends on the individual fundraiser's goals and target audience.

My opinion on the GoFundMe design and functionality is that its good for fundraising needs and its a  flexible platform for raising money for personal causes and its got great functionality and looks very visually appealing. It is a very intuitive platform, very easy to navigate for cross-posting to social media and emails as well. For both users and donors, this software is very straightforward and easy to use. As the user, you are able to customise campaigns with messages, pictures, and videos, which added that personal touch. This charity in my opinion is not problematic and looks and works to high standards. 

One review that i found interesting was:

Good for fundraising needs

    

4.0 stars

 2 years ago

Comments: It's been a good experience thus far. I think that the reputation of GoFund me has allowed it to be a reliable app for fundraising needs!

 Pros:

I like the simplicity in the design to set up your fundraiser. It is a very intuitive platform, very easy to navigate for cross-posting to social media and emails as well.

 Cons:

I would like to see the designs for the fundraising landing pages to be updated and more versatile. It would be more appealing if it was somewhat interactive or allowed for more customization.

Lily said: 

GoFundMe Helps the world Help!

    

5.0

 4 months ago

Comments: Overall, GoFundMe solves the problem of fundraising being limited to one space and time. GoFundMe helps the world help others, and that is a powerful thing!

 Pros:

GoFundMe has truly changed the game with grassroots fundraising campaigns. Without this invaluable resource, so many would be without.

 Cons:

The qualm I have with GoFundMe is its lack of integration with Facebook. A lot of businesses use Facebook for fundraiser promotion, and it would behoove GoFundMe to improve integration.

The parts from this app that i can adapt into my app is the aspect of raising money and fundraising and supporting communities and also the design as well as its layout is effective and visually appealing, which is what i want to emulate into my app design on all my pages.

After my research, ideas iv'e had for my app is to not make it bland and to make sure the pages are inspiring and looks nice and neat and suits my target demographic and has good navigation and visual appeal. The research has inspired me to have a bold, simple and effective colour scheme and also to be aware what charities im supporting and what would appeal to my non profit-organisation i created FIRGUN. Bold and good navigation and links from page to page help make a good app, that has great style and functionality. 

Plan the pages –Use a sketch/draw it and plan the layout of my app:

Examples of layouts that have inspired my sketches:

https://www.jotform.com/app/build/233511801837352

My sketches for my app layout:

I have drawn a detailed sketch of 6 pages for my app of how i want my pages to look like, with its context and layout. My apps pages will all have pages that relate and link to community in volunteering. The pages with more content will be scrollable and i wont make them crowded on each page, so its readable and readability is a very important aspect of each page on the app. This will be an app for the purpose for people to donate and have volunteering engagement and to encourage gift-giving forward . My pages each have a navigation bar and i decided to put it on the bottom of each page on my app , instead of the top because it looks neater and it will look good on a phone format. To link my pages, i will have a homepage, collection page, landing page, Info\contact us page, our vision page and a support page. I want the events buttons to link to my info page possibly and the education button to link to my vision page and the volunteering button to link directly to the support us page to encourage people to become eager volunteers and support my non-profit organisation FIRGUN.   

For the user, my app will provide a place for people to become volunteers and learn more about the volunteering community and possibly donate or do anything you can to help. My app will have images for users to show what we do at FIRGUN and if you become a volunteer this could be you and i want my pages and app to encourage people to be generous and inspire gift-giving in a kind community who supports each other and helps those in need. I want my app to work with charities and be known because the more attraction my app gets, like GOFUNDME, the more people become volunteers, become educated and donate and make a change in the world through gift-giving and generosity. Desirable functions on my app will be the ability to become educated on the power of volunteering and even become one yourself, and if you cant just donate and it makes just as big as an impact for people in need. I will create my app on adobe XD and create frames to start off then the details inside like navigation and other key features about my pages. I might use another app making website but make features on that but paste it into adobe XD and primarily do most of the creating and designs on adobe XD.

Creating my app process: 20.12.23

I am adding my masthead from my magazine cover and reusing it onto my app , since their already related about the same thing on volunteering in the jewish community.

This is what my app looks like so far and i have not finished yet, i have successfully created 3 pages , that aren't final and can always be im proved and edited on since im a bit ahead and theirs still time to improve my app designs. I am really enjoying doing this and having a solid sketch and plan had made it so much easier for me to create my app and practising beforehand using Abode XD has helped me have a good understanding of how it works and has familiarised me using this software, so it made it easier for me to start creating my app, because i knew what i was doing. This is my second time using Adobe Xd and its going better than i expected and i got the hang of making my app quicker than i normally do , thanks to my though planning beforehand. In my opinion, its easier to use Adobe Xd , rather than in design and Photoshop. I have realised that my favourite software to use are illustrator and adobe XD for interactive design work. I tried to continue creating my appp on the mac computer but some features were missing and some things were in the wrong place so i will complete my app in the window computer room on wednesday.

I have not yet added my links to each button on the app, but i will do that next lesson. 

I made a spelling mistake on one of the pages which I later fixed but not in my screen recording. I wrote better with 3 ts instead of 2. I definitely can make it better but it showcases a great color scheme throughout of light and dark purple and that's what makes it look consistent and visually appealing to my target audience. I ended up adding an email and call page last minute and and a thank you page so the buttons I created on the pages I finished first lead somewhere and are interactive. I added a range of different images I took for my website and magazine and just used them again on my app to save time and match and link my website, app, and magazine together. I created a circular design on the top to make every page look interesting and unique and I used my magazine masthead typeface style and reused it for my app Mathshead. I created most of the elements such as my navigation bar on the bottom of each page using Adobe XD and all the other shapes, apart from the tick, balloons, graduation hat, and the open hand icon I got from Google which is an emoji. I screenshotted my Gmail page and a random call page from Google onto those pages and i spent around 4 lessons doing this app I'm overall pleased with the outcome of how it looks and works. Next time i could make all the buttons on the app interactive and make more pages, but i did not have time to do that and we were only initially meant to do 4 pages showing interactivity so i think what I've done is more than enough.

User/Usability testing task -website:12.01.23

https://pollthepeople.app/website-usability-test/

Asking these questions can help me understand how user-friendly my website is. If i find that users are having difficulty completing tasks or navigating my website, i might make some changes. Usability testing is a valuable tool that can help you create a better user experience for your website visitors. 

Below are my usability testing and actions i want my users to perform based on my  questions that i will distribute to other people in the class to answer and give me feedback on:

• Objective questions are those based in fact, where a respondent's answer can be determined as right, wrong, true or false. An example of an objective question would be to ask where someone lives or what they bought from your store. 
• https://freeonlinesurveys.com/survey-research/types-of-survey-questions#:~:text=Objective%20questions%20are%20those%20based,they%20bought%20from%20your%20store.

• Subjective questions aim to measure a respondent's feelings, attitudes and perceptions of something. For example, how they felt about the quality of customer service or what their favourite brand of coffee is.
• https://freeonlinesurveys.com/survey-research/types-of-survey-questions#:~:text=Subjective%20questions%20aim%20to%20measure,favourite%20brand%20of%20coffee%20is.

The feedback I got from 4 members of the class:

1.

2.

3.

https://studentstanmoreac-my.sharepoint.com/:w:/g/personal/y_chandra-singh_stanmore_ac_uk/EXAaKzb2EGdCq8MJpd9nrrgBWzYKdn3PTDdA91O7ECA-zw?e=UTBor6

4.

Changes I would make and do differently based on the user testing results is to change the background behind the text on the About Us page to a less harsh and in-your-face colour that doesn't match the overall theme of my website. I put that dark background behind the text because I thought it would make things clear to read but I think it just made the website look a bit out of place. I think the images I picked could have had more variety, but all the information, research, and text about my website make up for the minor mistakes and heavy-handed highlighted background in some areas where I have text. Next time, I would pick a different background colour for the text and utilise every spot on the page to make it as informative as possible with more images if I had more images. I would keep the structure/layout of the organisation of my pages as that was one of the highlights of my website to make it stand out, in my opinion. Based on the feedback I got when I wrote my user testability questions I should have simplified them and not made them so wordy so people to understand them better.  I shouldn't have made it look like the questions were all from Google because it was a mix of Google in my own words. next time if I make questions myself again I will just used my own knowledge no Google involved.

Before changes:

After changes:

Before changes:

After changes:

Final app: showing interactivity: 15.01.23

Below is a video recording of my final app's interactivity and how it works like a real app in my area of investigation of community in volunteering.  I created 12 pages for my app and I made sure that all the buttons link to something to make sure that everything is interactive. I would have screen recorded my app as it is finished but for some weird reason, it won't work screen recording on the Mac computers so next lesson I will use the PC and video a screen recording of my app's interactivity on there instead. I have finished screen recording my app from PowerPoint and I put it below as a video.

Peer assessment of App: 22.01.24

This is the link to my App for people to test out and give me feedback on:  https://xd.adobe.com/view/53e5bdb2-f833-45ca-97cf-72e7d3a9d0a2-06b6/

These are my questions that i created for people to give me feedback on:

The feedback I got from 4 members of the class:

Based on the feedback i got,  i think my app met the purposes of what i intended it to have and the majority of people liked it overall and found it very helpful and engaging and but one person thought it was cluttered , which i think is not true since i took time to plan out and structure and organise my app in a way that looks spacious and neat , but its good to hear a variety of responses so i can learn and listen to what other think on my work and incorporate it into other projects i will do on this course in the future.

Final app evaluation:

For my final piece, I created an app for my made-up non-profit organization FIRGUN. My magazine and website and the GIFT website and brand influenced my final app in a way of following along the same theme and message of volunteering in the Jewish community and how donating and gift-giving forward can make a difference by giving a helping hand in a small or large scale way you are making a positive impact on others in the world to make peoples lives better and brighten lives in the Jewish community to educate and inspire others to be generous and gift give forward when possible. On my app's homepage, i added subcategories of volunteering, education, and events. I had many ideas on what i could do my area of investigation on at the beginning of this project such as fooodbanks and exploring commerce and art, but i, later on, decided to go for community since i could add many ideas i had to it and do it on the community for something relating and meaningful to me personallly, which is my religion and being kind to others and volunteering. So I put those two ideas together and thought about places that I've had experiences at similar to Foodbanks a Jewish organization and GIFT came to my mind it was perfect and it really inspired me in my app and my overall work in this project. i went with the idea of volunteering in the Jewish community because its a different idea to anyone else's and i just love the message in what i created. Even when i was thinking of a brand name, i did research on Google and looked up Hebrew words that mean generosity or something similar and i eventually found the Hebrew word FIRGUN and i thought wow that sounds good and fits the message, and theme of my area of investigation for the community, so i went for it and used the same name for my app, magazine, and website. I used the same color scheme as my magazine but i added a different variety of purple shades to it to make it look more coordinated on each page that doesn't contrast in tone between the text and background. 

My app focuses more on ways to donate and contact FIRGUN and shows you how you can become a volunteer and donate to make a difference. I added back and forward buttons on each page for navigation and i created the majority of the elements on the pages and the icons i did create in Adobe XD, i got from Google and originally left as an emoji from Google using text. When I exported my app for people to test, some of the emojis i added on the homepage, landing page, and thank you page, disappeared and were not visible. I went back to Adobe XD and turned all the emojis from Google into PNG images then inserted them back onto the pages and it was then viable for people to see after adding that minor change to some of my app pages. I linked all my pages together using prototype mode and made sure that my app was interactive and that you could click each section or button on my app with no problems so it's easy to use. I didn't create a menu bar because i thought that the buttons on the bottom of each of my pages were the main navigation dock, but what i did is more like what you would see on your phone at the bottom of the screen for your basic navigation dock section on the phone. In design, that's where i put all my buttons, pictures text shapes, and other features and more pages in and made it look the way i wanted it in my own style, and the prototype section was where I linked and connected everything together to make it interactive. The share section is where i created a link to send to people for them to test out my app. 

I enjoyed the process of creating my app and the planning and research stage as well as I felt like i learned new skills and definitely have improved my graphic design skills when creating pages that look like a real functioning app. For me, what went well was my time management and making sure i gave myself enough time to create everything I wanted without it looking rushed. I think i completed the final app to the best of my abilities and i tried to keep it linked to my website and magazine as best as i could. I think that my final app communicates my ideas well because it has solid images, many buttons for people to click to get to the different pages and it has a clear message and theme to each page and section on my app. I was able to finish my app and i think it looks well organized, neat, and clear where each button and section of my app leads to. I think what went less well for me was some minor navigation issues and the fact that i didn't make a menu hamburger bar on the side of each page. Most of the pages i made followed my sketch when in was planning, which made it so much easier for me to create pages, knowing mostly how i wanted my pages to look overall. Im happy that i used original imagery for my gallery images on one of the pages. My app goes really well with my vision of what i wanted to show people and i'm very satisfied with my final results as it's creative and looks visually appealing with good navigation on the majority of the pages. I integrated  3 testimonial quotes into my app and i created the fake people's names and quotes but got inspiration from the GIFT website when i added that feature. Having images, references, a search page, and pages to show upcoming events and ways to donate was a key part that shows what my app is all about. 

If I were to repeat the process again, the things I would do differently would be to fully enjoy what im creating not be such a perfectionist about every little detail, and stress less about everything because i need to have a cut-off point and know when to stop because, in a real job, you can't just work and work with no cut-off point, that's not realistic, so I aim to get better with that in future projects.

Learning how to use after effects:22.01.24

After Effects works well with After Effects and it's used for editing and animation/effects.

This was good practice and I think my first time using After Effects was a success. I followed the video recording and added my own style to my first animations on After Effects. I made 2 compositions, one of the shapes moving with text and the other one with a moving background with text that merges into the rainy background. 

Teams recording of how to create animation and use After effects-https://studentstanmoreac.sharepoint.com/sites/Section_18298/_layouts/15/stream.aspx?id=%2Fsites%2FSection%5F18298%2FShared%20Documents%2FGeneral%2FRecordings%2FAfter%20Effects%20with%20audio%2D20240124%5F084140%2DMeeting%20Recording%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview

Below is a screen recording on PowerPoint of what I have created on After Effects and 2 exported separate versions of my animations on After effects.

These are some screenshots i took while making the animations.

Learning how to use after effects lesson 2 :29.01.24

Teams recording of how to create an animation with a picture and a video included with effects audio ripple effect using After effects-https://studentstanmoreac.sharepoint.com/sites/Section_18298/_layouts/15/stream.aspx?id=%2Fsites%2FSection%5F18298%2FShared%20Documents%2FGeneral%2FRecordings%2Fafter%20effects%2029%20Jan%2D20240129%5F140047%2DMeeting%20Recording%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview

I created another After effects animation, this time adding images and videos and special effects as well. I think it went well i did it all in one lesson and i followed the teams recording and added my own touch to the animation to make it more unique. I used the pre-made video and image of an anchor and downloaded them onto after effects. I created 1 composition and added 1 solid blue background with an added on audio ripple effect with the video and image attached. I exported my animation and then rendered it into my usb stick then uploaded it as a video to my blogger.

Below is a screen recording on PowerPoint of what I have created on After Effects.

Learning how to use After Effects lesson 3-trim paths:02.02.24

Teams recording of how to create an animation with trim paths using After Effects-https://studentstanmoreac.sharepoint.com/sites/Section_18298/_layouts/15/stream.aspx?id=%2Fsites%2FSection%5F18298%2FShared%20Documents%2FGeneral%2FRecordings%2FAfter%20Effects%20trim%20paths%2D20240131%5F091224%2DMeeting%20Recording%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview&isSPOFile=1&OR=Teams%2DHL&CT=1706872802601&clickparams=eyJBcHBOYW1lIjoiVGVhbXMtRGVza3RvcCIsIkFwcFZlcnNpb24iOiIxNDE1LzIzMTEzMDI4NzI0IiwiSGFzRmVkZXJhdGVkVXNlciI6ZmFsc2V9

Below are the trim path animations i have created, one is 1 line and the other one underneath it is 3 lines moving at the same time with an added star shape being trim pathed into the animation as well.

After Effects Liquid animation: 05.02.24

Teams recording of how to create an animation with a liquid effects audio ripple effect animation using After Effects- https://studentstanmoreac.sharepoint.com/sites/Section_18298/_layouts/15/stream.aspx?id=%2Fsites%2FSection%5F18298%2FShared%20Documents%2FGeneral%2FRecordings%2FAfter%20Effects%20Liquid%20animation%2D20240131%5F114231%2DMeeting%20Recording%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview

Below is the After Effects liquid animation i have attempted to create, creating a gloopy look and merging the circle fill shapes together, using Gaussian blur set on 30, inner shadows in layer styles, simple chocker set on 50 and i made 5 shape layers.  I made an adjustment layer and filled 5 circles with different colours animating it first then adding in effects to make the circles gloop and stick together. I struggled with this and found it hard but i managed to create something similar to the recording and this was good practice for me and doing these practice activities in After Effects has made me feel more confident animating in After Effects. I should have made different shape layers, but i accidentally made 1 shape layer so i was not able to add an adjustment layer to each shape as i did it all in one shape and had in my contents, 5 ellipses. I used effects control and made some sort of animation that at least works and it overlaps onto each circular shape with a nice globby effect.

Premiere Pro and After Effects: 05.02.24

Teams recording of how to create a premier pro and After Effects animation  - 

https://studentstanmoreac.sharepoint.com/sites/Section_18298/_layouts/15/stream.aspx?id=%2Fsites%2FSection%5F18298%2FShared%20Documents%2FGeneral%2FRecordings%2FPremiere%20Pro%20and%20After%20Effects%2D20240205%5F140116%2DMeeting%20Recording%2Emp4&referrer=StreamWebApp%2EWeb&referrerScenario=AddressBarCopied%2Eview

I took footage from Premiere Pro and edited part of it in After Effects and it all worked well together. I am editing a copy of my opening scene rough cut because right now im experimenting on what i could have done if I used After Effects in my opening scene, using more skills and effects using 2 software and linking them both together. I added a shatter effect to the beginning opening credits of my opening scene and i then changed the opacity of the stimulation shatter effect to blend in more with the background video and fade out nicely to make it look like a clean transition from shatter to the video on screen. I chose Shatter because its like Mandy's life is shattering around her as she keeps making bad decisions throughout my opening scene. I added a contrasting bright red colour as my text on the screen as it stands out and i used the arial rounded mt bold font, the same one i used in my rough cut as i had no need to change it as it already works well with the introduction opening credits in my opening scene. I added some animation to the opening title text clicked animate in and chose the animation, Typewriter to bring in my text as an extra added-on effect. The last thing that i did was add in a fade-out animation to remove the text subtly from the screen playing the clip. I might end up using this practice for my final cut for my opening scene. I really enjoyed doing this and have learned new animating skills for linking both the software together successfully. The one thing that ruined the brick wall shatter animation was the blue circle with lines in it, i couldn't remove that it ruined the animation, in my opinion.

Below are the After Effects and Premiere Pro linking animations for the opening credits activity exported video below shows what I have created:

With shatter and Typewriter Effect: 

Without shatter Effect but keeping the Typewriter Effect on the typeface: 

Effective use of outbound links: 05.02.24

Outbound links are most useful when they are high-quality and relevant. A high-quality outbound link is a link to a website that is trustworthy and has a good reputation. A relevant outbound link is a link to a website that is related to the topic you're discussing.

It’s important to only link to websites that you trust, as linking to a low-quality or irrelevant website can damage your own reputation. When in doubt, it’s always better to err on the side of caution and not include an outbound link than to include one that could damage your credibility.

Knowing how to determine if a link is good or bad is key to a successful link building strategy. Here are some signs that a link may be of low quality:

• Low domain authority
• Insecure link
• No follow links
• Irrelevant or harmful links
• Link spam
• How to Use Outbound Links
• Now that you know the benefits of outbound links and when they are useful, let’s take a look at how to use them.

One of the best ways to use outbound links is to link to sources that you’ve used in your research. This shows your readers that you’ve done your homework and that you’re not just making things up. It also helps build trust between you and your readers.

Conclusion: 

Outbound links are an important part of any content strategy. They’re a tool that keeps your content sharp, supported, and relevant. Check out these tips if you want to enhance your link-building strategy and start building up your brand authority.

I know marketers are busy and it may feel like there is never enough time, but these resources can help. If you’re not using outbound links, you’re missing out on a valuable opportunity to improve your SEO and provide value to your readers.

Experimenting with separating foreground and background in After Effects: 07.02.24

I used the paintbrush tool, to try and paint background strokes holding ALT to paint a green and red foreground stroke on the subject I was attempting to create an animated sequence by tracing over live-action footage frame by frame and removing the original video background, this process is called rotoscope and I did this in version 3.0 in After Effects. I could have also changed the background not just left it black, but im happy with learning this new skill and it is good to know for future projects.

Below is an exported video I attempted to make, by separating the foreground and background of an imported video:

: