Tech 802: Web Design Part 2
0 likes160 views
This document provides instructions for students regarding two technical papers they are required to submit for an online class. Students must post their papers online by January 18th and February 1st. Each paper should be 1500-2000 words and address a topic related to the class syllabus that has been approved by the instructor, Monique Sherre. Students will also review and provide commentary on two papers submitted by classmates. The document provides examples of past student papers and guidelines for formatting and submitting the papers online through the class website.
Tech 802: Web Design Part 2
- 1. Website Design A Crash Course. Part 2. Monique Sherre, [email protected]
- 2. Tech Papers Due Jan 18 and Feb 1. You will submit them by pos4ng online for the class (and the internet at large). h,p://www.ccsp.sfu.ca/wp-‐login.php Add new post > category Student Presentations & Papers Each paper will be reviewed—online—by one of your classmates before the following Friday. i.e., you will each write two papers and comment on two papers (1-‐2 paragraphs of intelligent commentary). The choice of the exact topics is yours, however, the paper topics need to be related to the topics listed in the syllabus and cleared and/or nego4ated with Monique in advance. Papers should be roughly 1500–2000 words (about 5 pages single spaced in Word—but you're going to post them to the CCSP website with links and references), and take a clear posi4on on the topic. You can see examples of previous years here: h,p://tkbr.ccsp.sfu.ca/pub802/papers-‐september/ h,p://tkbr.ccsp.sfu.ca/pub802/papers-‐2/ h,p://tkbr.ccsp.sfu.ca/pub802/papers-‐3/ 2
- 3. When & Why Do We Re-‐Design • BoxcarMarke4ng.com — no mobile • Raincoast.com — aesthe4c update • ABCBookWorld.com — legacy CMS • NewSite.com — new company, new project 3
- 4. 1st Part of Web Design Workflow Stage 1: Where to start? • Client: Kick-‐off MeeDng > CreaDve brief • Research: current site review, compeDtor sites, persona, analyDcs • Proposal, CosDng & Scope Document • ExperDse required Stage 2: What’s Involved • Content architecture • Wireframes & Page elements • Asset collecDon • Keyword research • Client: agreement on direcDon, branding, personas Stage 3: What’s It Going to Look Like • Design mockups 4
- 5. We’re going to talk about Design & Technology Tasks Today • Design comps are commonly created as PSD files (layered) • A programmer (or the designer) converts the PSD into HTML and CSS 5
- 6. 6
- 7. Before That...I Want to Fill in the Blanks • How do you get a domain name? • How do you get hos4ng? • How do you install WordPress, another CMS or upload your HTML & CSS files? 7
- 8. How Do You Get a Domain Name • yoursite.com • URLs are purchase from a Registrar. • .com or .ca is approx. $11/yr • This process is called “domain registra4on” • Use NameCheap.com, avoid GoDaddy.com • WhoisGuard protects your registra4on info • SSL is secure socket layer and required for ecommerce sites. You can purchase these cer4ficates through the registrar and assign it to the domain in ques4on • DNS is domain name system and is a series of seangs that map domain names to IP addresses. Think of DNS as the phone book of the web. • Avoid having the same company as a registrar and host 8
- 9. Finding an Available Name • Make sure your domain name is available but also that a similar username is available on social media. • Namechk.com — checks username and URL • Domain Name Generators can help for unique names • For personal sites, consider using your name 9
- 10. How to Get HosDng? • Bluehost.com is good for WordPress, also Dreamhost.com • Look for high GB or unlimited Hos4ng Space, unlimited file transfer • This is Shared HosLng—the most common, and cheapest. Also means a black-‐hat site could go rogue on your server and impact your website • Managed HosLng is like WordPress.com (you don’t do any upgrades yourself) • VPS HosLng (virtual private server) is like a dedicated server but cheaper, eg. Linode.com. Good for pros who need root access to make adjustments to system sogware • Dedicated Server is completely customizable, only for your site. eg. Rackspace.com • Cloud HosLng is pay as you go, eg Amazon EC2 10
- 11. How to Install WordPress • Hosts like Bluehost.com have a 1-‐click process • If you are self installing, you need access to your web server via FTP login (login details from the host), a text editor (TextWrangler) and an FTP client (FileZilla). • Follow the famous 5-‐minute install process h,p://codex.wordpress.org/Installing_WordPress • Which includes crea4ng a database and user with full admin access, usually through the control panel (it’s easier to create the database some4mes than to find your login info for the host) • Pick a very simple theme, which you can then customize, i.e., Twenty Twelve theme is a responsive theme that looks great on any device • (We’ll discuss customizing themes next week with Chris4ne) 11
- 12. Design Piaalls Source: Don’t Make Me Think by Steve Krug 12
- 13. Source: Don’t Make Me Think by Steve Krug 13
- 14. Good Design • Good Design is dependent on Good Content and Good Technology. • So all 3 groups need to work together because if we have good content, if we have a good website concept with layout and graphics that support the content, and if we have good structured HTML and CSS -‐-‐ only then do we have a good website. • A good designer works not only on the graphics and colour pale,e, but needs to understand how to organize their PSD file so that a programmer can easily convert it to HTML and CSS, but they also need to understand the content role of SEO, copywri4ng and marke4ng tools. 14
- 15. Quick Walkthrough of a Redesign Pre-‐2009 —> 2009 Redesign 15
- 16. Sketch > Wireframe > Design 16
- 17. Branding & Tagline Nav Wrapper Sidebar Content Footer 17
- 18. 18
- 19. 19
- 20. 20
- 21. 21
- 22. 22
- 23. ChrisDne’s going to help us next week 23
- 24. In the meanDme, we need to install WordPress Solo or in Partners? Local or Web Host? Local: Mamp or Xamp is installed on your computer -‐ h,p://www.mamp.info/en/index.html (Macs) -‐ h,p://www.apachefriends.org/en/xampp-‐windows.html (PC) Web Host: I recommend bluehost, dreamhost, webnames... anything but Godaddy. Next, install WordPress so we can then: -‐ Upload themes -‐ Upload plugins -‐ Go through all the seangs 24
- 25. Local • STEP 1: DOWNLOAD. • Mamp or Xamp is installed on your computer -‐ h,p://www.mamp.info/en/index.html (Macs) -‐ h,p://www.apachefriends.org/en/xampp-‐windows.html (PC) • Download WordPress: h,p://wordpress.org/download/ • STEP 2: CREATE DATABASE & USER Launch MAMP applica4on from your computer -‐ Follow install hdp://codex.wordpress.org/Installing_WordPress_Locally_on_Your_Mac_With_MAMP -‐ If web hos4ng: h,p://codex.wordpress.org/Installing_WordPress -‐ OR see below • Click on phpMyAdmin > Databases > Create database • wordpress is a good databasename (DB_NAME) • click the person/lock icon to specify privileges • Add user. wordpress can be used for wordpressusername (DB_USER) • Host = localhost • Password should be difficult to guess (DB_PASSWORD) • All privileges 25
- 26. Local (conDnued) • STEP 3: SET UP wp-‐config.php – Unzip WordPress, rename wp-‐config-‐sample.php to wp-‐config.php then open in text editor – Enter database informa4on from the previous step under the sec4on // ** MySQL seangs – Use the online generator to create your security keys: h,ps:// api.wordpress.org/secret-‐key/1.1/salt/ • STEP 4: UPLOAD FILES – Re-‐zip the WordPress folder with the new wp-‐config.php – MAMP > Import > select zipped file • STEP 5: RUN THE INSTALL SCRIPT – Copy/Paste WordPress folder to MAMP > htdocs – Go to h,p://localhost:8888/wordpress/ – Complete the seangs and click install 26
- 27. Local > Login & Experiment -‐ Go through the admin and poke around at everything -‐ Create a few blog posts -‐ Create a few pages -‐ Add images -‐ Upload themes (Ac4vate Twenty Eleven theme, try Customizing it) -‐ Upload plugins -‐ Go through all the seangs -‐-‐> Get very familiar with the admin. Chris4ne won't have 4me to go through this in class. -‐-‐> Search for tutorials on “customizing wp themes” or “PSD to HTML tutorials” 27
- 28. HosDng WP • You can develop the site on your local host, then install wp on your web host and use the export/import func4on to migrate the site from your local host to the live web host • Or you can develop directly on your web host. • Follow the same instruc4ons but – STEP 4: UPLOAD FILES, use gp to upload the wordpress folder to the root directory of your website (h,p://domain.com) – STEP 5: RUN INSTALL, go to h,p://domain.com/wp-‐admin/install.php 28
- 29. Assignment: Move Forward • Start customizing your WordPress install and show me where you’ve go_en to on Monday. • AlternaDvely, if you have a site you’re working on, let me know about it and what your next steps are. • Or if you’d like to start planning your poraolio site (or thinking about the ABCBookWorld project), here are a few places to start: Content 1. Users (Personas): Who are they, what info are they seeking? 2. Content: What should be there? How should you structure it (Nav, Site Arch)? 3. Context: What do you need/want the site to do for you? Who do you compete against? 4. MarkeDng: How will people find your site? (Discoverability—SEO & AnalyDcs, PromoDons—SMM) Design 5. IdenDty needs, Branding, Colours 6. Scope: What’s in / out for Phase 1? 7. Wireframes: sketch it out 8. Design comps: layered PSD Technology 9. Technology needs: domain name? hosDng? email? 10. Plaaorm opDons: Wordpress? 11. Tool integraDons: Social Media? 12. Coding the prototype: Find a template, follow a tutorial, create a working prototype
- 30. See you tomorrow! • Meet Alan Twigg 30