Embed Size (px)
Citation preview
WEBSITE CREATION 101
Communicating Ideas Through the Written Word & Multimedia Content
Website: A Communications ToolThe most important thing about creating a website is this:
The site is first & foremost a tool for communicating ideas
Your website is first and foremost a communication tool.
It needs to say something to someone.
The something will be the various pieces of content you create -- which will be a combination of:
The something is the various pieces of content you create -- which will be a combination of:
WORDS - Headlines, Deks, Summaries, Full Articles
IMAGES - Photos, Graphics
VIDEOS - Video type runs them gamut from documentary, to how-to's, short form narratives, to PSAs, etc.
Your content should be unique to your project and be expressed in the right voice.
It should stand apart from your competitors' website.
While you know what you want to say, your message needs to fit the target audiences you have identified.
Remember we identify a primary (and secondary and tertiary) target audience b/c we can create a STRONGER, MORE SPECIFIC message.
You should direct the different pieces of content on your website to your target audiences -- make it relevant to the people you want to reach so that they read, view, watch the content, and hopefully even share it.
When creating website content, firms often think about what they want to say instead of what their audience wants to read.
It’s essential to create content for your website with your various audiences in mind and think about what’s most important to them, since that is who your content is truly for.
Identifying the top target audiences allows you to create a persona of an ideal member of that target audience and then figure out the best ways to communicate with that "ideal" audience.
By determining your key target personas, you can create more personalized, more relvant content aimed at that constituency's interests, needs and goals.
Your content is meant to answer their questions, educate them on the topics you deem important, and address their wants and needs.
Remember that you have more than one audience, and your website should have content that caters to each one.
Your website should have a variety of content that addresses different questions or concerns of your audience.
In creating content for a website, identify what you want your target audience to get out of the content. Is it to:
● Inform
● Educate
● Entertain
● Persuade
●Change their behavior
●Get them to advocate or take some other kind of action
TYPES OF CONTENT: Web Article Vs. Blog Post
Which one to choose/use?
Web article - A web article, for example, often aims to inform the reader about something. It is meant to expand the reader's understanding of a topic that person is interested in.
Blog / blog post - A blog post, on the other hand, may also aim to inform its reader on a certain topic, but in addition to building awareness, educating and answering questions on a given topic, it invites feedback.
Sometimes you will want this function on your website; sometimes you do not.
Considerations: personnel / resources.
Remember that if your website does have a blog connected to it, a moderator will have to read the comments, moderate and post relevant ones, delete any spam, and respond to those with questions. That means blogs require additional staffing.
EXAMPLE: Other Kinds of Web Content – Image Gallery
Image gallery - Remember that your site is about communicating to your audience. Sometimes an image gallery makes sense, but it MUST complement written content and/or be set up with written content, not replace it. It needs to be set up clearly as to why this is important. What purpose does it serve for which audience?
The web writers and editors for your website must have the time to research the subject areas around which they are building copy.
The web articles featured on your website must inform, educate and guide the visitors to your website.
The length of the web copy will depend on the purpose of the page and its overall message. A minimum of 300 words is a good rule of thumb for search engine optimization purposes.
However, as with all writing, the main focus of length should be quality, not quantity.
The web copy should be sure to include interesting, relevant information that will be of value to your audiences.
Note that statistics, research and quotes are effective ways to add substance to your copy, but how you present them will make the website a go-to-and-stay destination or a click-away site.
Storytelling is often the most effective way to present statistics. So figure out compelling ways to offer dry info like stats.
The website should also have a photo editor who can find, prep, sometimes create, and post relevant images and graphics that complement the web copy.
A web editor should be sure to proofread all web pages to avoid the website looking pedestrian and non-professional.
The content should be compelling and easy to read, and should be broken up on the page with the use of subheadings.
– tailor the message
Because you are creating content and writing web copy aimed at certain audiences, the language you use should speak loud and clear to those audiences.
Is your audience and subject matter technical? If so, then feel free to use technical language in your content.
If the topics on your website are anything but technical, you should stick to simpler language that will resonate with your audience and demonstrate your expertise in and familiarity with your subject matter.
.
– tailor the message
Depending on your web audience and each content piece, decide whether the style should be more conversational or more formal.
The content on your website and the way it is arranged should not make anyone work hard to find what they want. You will hire an information architect on the design side of the website who will be able to help create a structure that will organize the content appropriately.
UX design is the technique designers use to create a good design. UX stands for "user experience."
Main Stages of UX design:
1) Site map2) Wireframes 3) Mockup4) Build5) Test / Fix / Soft Launch / Hard Launch(See next section for details)
Stages of UX design:
1) Site map - Once the structure is set up, the designer will create a site map showing the hierarchy and logic of how the content is organized
2) Wireframes - These are used to show the arrangement of the content pieces and the flow of each web page. Note that there are no design elements at this phase -- it's just to show the arrangement of the content and info
3) Mockup - This works design into the wireframes. Usually mockups are layered Photoshop files that allow people to see what each page will look like.
BUILD –
Once the design is approved, the web programmers can begin to build the back-end of the website which will then house the front-end content.
Beta Test / QA Phase
Web DesignEnhancing Communication Thru Design
Web Design: The Creative Brief
A creative brief is a document that clearly outlines the client’s needs and the goals of the website, including the following:
■ Identifying the website’s purpose: Is it to sell a product? Inform or educate the visitor? Be a portal for other sites? Provide access to users accounts? Stream video?…
■ Describing the current situation and what is needed: Does client have an existing website? If so, how much of the original design will be kept? …
■ Identifying the target audiences: What is the language/age/gender/education of the target user? How up-to-date do we expect the target user’s browser to be? Is the target user familiar with the product/brand? …
Web Design: The Creative Brief
■ Timeline: When does the website need to launch? When is the first round of web proposals due? …
■ Budget■ Describe staff involved Name, role, contact info of personnel on project, short bios …■ Lay out the specifications What specific requirements will the website need to fulfill?
i.e: Responsive design, payment options, embedded videos, pop-up, spam protection, encryption, analytics etc…
■ Describe maintenance plan Who will support future needs once the website launches? i.e., Does the client have an in-house IT, or will the web development team schedule maintenance? …
UX (User Experience) Design
User Experience (UX) is the consideration of the many aspects of a user’s interactions with a website or app.
The UX Designer uses a site map, wireframes and user testing to identify the most intuitive, efficient and enjoyable experience for the user. The wireframes are eventually rendered into a mockup.
Site map: A graphical outline of all the pages of a website which will be accessible to the users. These pages are represented in a hierarchical fashion with a tree-diagram. The map also suggests the site’s navigation.
UX Design
Wireframes: Simple sketches of the site’s content and functionality often rendered in black & white and without the final content (text or images). A wireframe should answer the following questions:
What are the main topics/buckets for navigation?What content will be displayed on each page?How will the page layout make accessing content easy so that it can be easily understood?How will the page layout enhance the nav to make it user friendly?What type of media will be included on each page?
Site maps and wireframes can be hand drawn or created with Adobe Illustrator or a dedicated software (e.g., Balsamiq).
UX Design
More on Wireframes: The Ultimate Guide to Website Wireframing (see the wireframing process)
Examples
UX Design
The client should sign off on the site map and wireframes before proceeding to the next step.
Mockups: Once they’ve been approved, a mockup is developed from the wireframes – a full preview of what the website or app will look like. Color, typography, images, etc. are included, but as a static image.
Responsive Design is a design approach providing optimal viewing experience across devices – easy reading and navigation with a minimum of resizing, panning, and scrolling–across a wide range of devices (e.g., mobile phones, tablets, desktop monitors).
UX Design
Because responsive web design is pretty much standard now, the UX designer must often provide multiple wireframes & mockups for each page.
The Technical Side
Web Design: Front End Development
The development of those website elements that the user sees and interacts with directly. The front-end developer translates the mockup into HTML and CSS code and adds interactions with Javascript.
HTML (Hypertext Markup Language) is a set of instructions to a browser about what information to include in a web page (text, hyperlinks, but also images, sound, and other media). It provides structure and organization for the layout of the page. A hyperlink is an HTML element that redirects the user to another page.
Web Design: Front End Development
CSS (Cascading Style Sheets): defines the style and layout of HTML elements (i.e: color, size, typography)
HTML5 and CSS3 are the latest revisions to HTML and CSS. They provide new means of embedding media (displaying them directly on the page instead of downloading or redirecting to a separate page), creating simple animations etc… These revisions were instituted by the W3C (World Wide Web consortium), the international Standards organization for the world wide web
Web Design: Front End Development
JavaScript: Javascript is a programming language that is used to enhance user interactions. It can create transitional effects such as fading and sliding animation, drop down menus etc
Web Design: Back End Development
The key role of a back-end developer is to ensure that the data requested by the front-end system is delivered and/or saved. He/she creates the core computational logic of a website.
Back-end technologies usually consist of programming languages like PHP, Ruby, Python, etc. To make them easier to use they are usually enhanced by frameworks (i.e: Ruby on Rails) that make development faster and easier to collaborate on.
The InternetA look at the Internet - How it started and
some key terms
First Off? What Is the Internet?
Is the Internet the same as the web?
First Off? What Is the Internet?
Is the Internet the same as the web?
No.
They are different.
What Is the Internet?
The Internet is a NETWORK.
Technically speaking, it is a packet-switched network. That means information is broken down into lots and lots of small packets and then sent individually over many different routes at the same time, and then reassembled at the receiving end.
What Is the Internet?
TCP (short for transfer control protocol) is the technical component on the internet that collects and reassembles the packets of data.
IP (short for internet protocol) is responsible for making sure the packets are sent to the right destination.
The Internet’s Beginnings
The Internet’s origins can be traced back to the 1960s and the U.S. government.
In 1962-63 a computer scientist named J.C.R. Licklider working for wrote a series of memos about the “Intergalactic Computer Network” concept, which he foresaw as “a globally interconnected set of computers through which everyone could quickly access data and programs from any site.”
The Internet’s BeginningsLicklider worked for the Defense Department in a group called ARPA, short for Advanced Research Projects Agency.
The Internet’s Beginnings
Licklider’s original and far-sighted ideas outlined many of the features the Internet offers today: graphical computing, user-friendly interfaces, digital libraries, e-commerce, online banking, and cloud computing.
A Brief History of the Internet
The Internet’s Beginnings ARPANET – the U.S. Defense Department’s Advanced
Research Project Agency (DARPA) network was an early packet-switching network that used TCP/IP, the protocols that rule them all, which were developed by Bob Kahn and Vinton Cerf.
Transmission Control Protocol (TCP) and Internet Protocol (IP) are like a book of rules computers use to talk to each other.
The Internet’s BeginningsEMAIL – Roy Tomlinson (1971) develops system for
ARPANET users to send messages to each other, electronic mail (email).
WORLD WIDE WEB – Tim Berners-Lee (1991) – network of info accessible to anyone with a internet connection (originally via phone), invents HTML
History of the Internet (Life Noggin)
Some Basic Internet Terms■ Web server - special computers that are constantly connected to the internet and
are optimized to send web pages to people who request them. Big companies have their own servers. Smaller companies and individuals can get access to a web server through web hosting services (i.e., GoDaddy)
■ Client: a device (such as a personal computer, mobile device, game console) that requests information from the server. Requests always originate with the client.
■ Web browser: software that allows users to send out requests to web servers (e.g., Chrome, Firefox, Safari, Opera and IE).
Some Basic Internet Terms■ HTTP (Hypertext Transfer Protocol): a protocol for distributing information. It is the
foundation of data communication for the World Wide Web. Web browsers use HTTP to request information (i.e: http://www.nytimes.com)
■ FTP (File Transfer Protocol) is a protocol used to copy a file from one host to another.
■ Cloud computing: a network of computers that work together to store and process huge amounts of information. They are super computers kept in warehouses called data centers around the world.
■ Peer-to-peer or P2P: type of distributed network in which individual machines in the network (called “peers”) act as both suppliers and consumers of data. In other words, each machine acts as both server and client.
