Setting up a Basic Squarespace Site
Friday, August 27, 2010 at 6:18PM Overview
Use the following guidelines as a way to setup a basic Squarespace site. This method is geared for speed and reliance on templates to allow for quick posting of content on the web. Squarespace is primarily about blogging and portfolio building.
Review some squarespace examples and other website to determine what functions you want to have in your website.
KEEP IT SIMPLE> Your first rollout of your site should emphasize your most important content. Do you need a blog and gallery to get going? Make a list and prioritize.
- Essential Features List:
- Desired Features List:
Now lets watch how a basic site is put together in Squarespace. Use this review less as a how to, but more to get an overview of how you can modify your squarespace environment.
Review the Creating a Minimal Style Video
Design
Now we will create a basic design the site.
THINK OF YOUR AUDIENCE --
Make a sketch of the your basic page template structure.The sketch may be on a piece of paper or on the computer.
- Navigation (top or side menu)
- Body
- Header
- Side Bar(s)
- Features (email, tag clouds, rss)
The navigatoin of your site is very important. Again, Keep it simple. Your work/content should be featured not the design of the website. You are designing the virtual gallery for your work. Get visitors to your work/content with the fewest clicks and let them know were they are within your website.
Make sure you think of the following when sketching your layout/template.
- FOCUS
- BALLANCE
- HIRARCHY
Make a navigation map to your site. Again this is a sketch that show a diagram of what pages are linked together in what order. If you have a really simple site, like a intro/home page, blog, and gallery you may be able to skip this step.
Measurement (Important Concept)
To proceed in the design you have to grasp how measurements/sizes are implemented on the web. Think pixels not inches. Pixels are the little squares (building blocks) of light on that make up the images on your computer screen. The difficult part is that the actutal physical size of the pixel is not the same on all computer monitors.... inches don't work... In the web world you use number of pixels.
A lot of people like to describe their monitors in physical size... I have a 13" Mac Air... But this is not the enitre story. Knowing that a Mac Air 13" monitor is made up of 1280 horizontal X 800 vertical pixels helps me layout the size of my webpage.
HUH... So what... Ok... I get a call from somesone who wants to look at my work. I direct them to my website. I don't know what type of computer they are using, but I can assume that it probably does not have a resolution less than 1280X800.... So even though you could design a website much larger I want to make sure that it fits on a laptop. The boss looking as my website from vaction with their laptop can see and navigate my page easily.
Statitics on Browser/Screen Resolution
Right now the quick rule of thumb for all of this is to use a 960 grid system. (960 refereing to the total number of horizontal pixels. Why not 1280? Scroll bars, borders, etc... Others who have taken the time to think about this more than me.
Grid
So I am going to reccommend that you use a total width of 960 for your website. This will be important when you create your graphcs, layout your collumns, etc..
Let generate an automatic grid/underlay for your website.
Using the Grid generator to creat a basic grid that matches your sketch(s). By using the generator you can create a proportional system with borders and get exact measurements you can use as underlays.
Create your grid and make a screen capture so you can use the grid as an underlay in photoshop and squarespace.
Color
Some very cool tools are out on the web for selecting colors for your website. If the grid generator felt restrictive color selection is boundless.
You may have at one time heard of web "safe" colors. NO MORE WORRIES... we can use any colors... well almost as long as they are in the gammut.
Go to:
Use the color selection tools to create a pallate for your webpage.
- Use the color wheel to select a color relationship....
- Use the image picker to select colors from an image...
- Use the clipboard to experiment with different color selections and save your ideas...
Once you have selected your colors write down the HEX CODE for each color. (The six digit/letter combination that discribes each color.)
Building
Now we can go into Squarespace and create our website.
1. Review the squarespace help for getting started.
2. Select the go to the style edtiting and select the template that best matches your style. Make a copy of the stlye.
3. Complte the following one time setup proceedure.
A. Start with template end with custom design. At minimum create the following four parts to your website.
HOME | COURSE WORK | PORTFOLIO | ABOUT
HOME -- this is the very first page you land when you come to your website.
Required Elements for the HOME page.
-header - your name
-body - splash image
-footer - copyright - links to utk id, college of a&d, utk homepages in text
COURSE WORK -- this is the area you create for hosting specific content related for courses and other required assignment.
Required elements for the COURSE WORK area
- create a folder named portfolio to allow for multiple journals and galleries
-journal page for this course allow comments you may choose just class members or public
PORTFOLIO - Create a folder for your portfolio. We will populate this page in a later exersise.
ABOUT - abbreviated resume (do not post personal information such as telephone numbers, addresses, and email addresses)
secure contact form - use this tool to allow people to contact you by email though your squaerspace site
SET YOUR WEBSITE SETTINGS in the website management section of your account.
Website Header and Footer
Website Header --
Site Title - Your Name
Site Subtitle - Interior Design University of Tennessee Knoxville
Site Topic Title - Your Name, Interior Design University of Tennessee Knoxville
Website Footer / Licensing Notice
Generate either a Creative Commons License or Generate Standard Copyright based on your personal preference.
Search/Indexing
Categorization
Category - Design/Art or Architecture
Business/Personal - Your Choice
Search Engine Parameters
Description - Must include Your name, Interior Design, University of Tennessee. You may include other terms to help you show up on search engines.
Optimize Title Ordering (your choice)
Create Page Specific Description Tags (recommended for advanced site development)
Allow External Search Engines to Index Site (Yes, unless you are creating an entirely private site)
Allow External Search Engines to Archive Sites (Yes, unless you are creating an entirely private site)
Locale
Geography and Time Zone - Enter per your preferences
Custom Domain is optional
This allows you to have custom URL such as yourname.com be your website name at Squarespace. Recommend if you want to develop a professional portfolio and blog site.
Membership Accounts
If you choose not to have public access to your site you must create a custom account and provide the name and password to those you wish to have access to your website.
Member Permissions
This is where you can set up what the public and or members can see within your squarespace environment.
4 Set the number of columns and column widths to match your layout.
To do this visually in the style editing mode set the page content background to your screen capture of the 960 grid you created earlier.
5. Set the colors of your backgrounds.
6. Set the typography style and colors.
Form more information on web typography go to:
7. Make a custom banner in Photoshop.
