Website DesignA Crash Course. Part 2.
Monique Sherre,[email protected]
Tech PapersDue 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
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
1st Part of Web Design WorkflowStage 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
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
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
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
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
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
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 processh,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
Source: Don’t Make Me Think by Steve Krug
Design Piaalls
13
Source: Don’t Make Me Think by Steve Krug
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
Quick Walkthrough of a Redesign
15
Pre-‐2009 —> 2009 Redesign
Sketch > Wireframe > Design
16
17
Branding & Tagline
Nav Wrapper
Sidebar
Content
Footer
18
19
20
21
22
23
ChrisDne’s going to help us next week
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
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
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
– Move the “wordpress” folder and all its contents to the “htdocs” folder in MAMP so the folder structure is MAMP > htdocs > wordpress
• STEP 5: RUN THE INSTALL SCRIPT
– Go to h,p://localhost:8888/wordpress/
– Complete the seangs and click install
26
Now 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
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
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:
Content1. 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)
Design5. IdenDty needs, Branding, Colours6. Scope: What’s in / out for Phase 1?7. Wireframes: sketch it out8. Design comps: layered PSD
Technology9. 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
See you tomorrow!
• Meet Alan Twigg
30