White Paper

Image

A screenshot of my white paper

Image

A picture of the flexible reader by LG

 

A quick note on flexible electronics: The whole concept of “printing” the circuits reminded me of how Lester and Perry got started in Makers!

As I mentioned in an earlier post about wireframes, I do not particularly enjoy creating them. However, after reading the articles about wireframes, I do recognize their worth in web design. Additionally, I understand the 960 grid CSS framework, which helped me understand a bit more about how creating the wireframes on a grid helps the implementation process.

I used myself as a client, but if I ever were to design a website for someone else, I know now that using wireframes to show mock-ups of the webpage to the client can save a lot of time if they want something to change or if they have not yet decided on a color scheme. Again, I used Mock Flow to create the wireframes, which is slightly frustrating because of its interface. If I were getting paid to design a website, I would probably use one of the other suggested wireframe tools.

Strategic Document

Wireframe for my homepage

 

 

 

 

 

 

 

 

Wireframe for the portfolio page

 

 

 

 

 

 

 

 

Wireframe for my contact page

Image

Logo 1

Image

Logo 2

To: Laura Hall, laura-e-hall.com

From: Laura Hall, Graphic Designer

Date: 3 May 2012

Subject: Completed Logo

I am writing to inform you that the logos for your personal website have been completed. Please review the attached graphics to see if they have been created to your satisfaction.

To create your logos, I perused your personal site, www.laura-e-hall.com, and incorporated the current color scheme of yellow and pink. Additionally, I reviewed your recent strategic document concerning wireframes and created two logos for the site, one logo for the main page (Logo 1) and the other for the sub-pages (Logo 2). I hope these two versions meet your unique needs.

I used several resources in researching logo designs. These include the Lynda.com tutorial  “Designing a Logo Hands-On Workshop” by Nigel French and chapters from the book  Logo Design Love: A Guide to Creating Brand Identities by David Airey. The video tutorial by French explained how to interact with clients, choosing only essential elements for the logo, and how to work with different elements such as graphics, clip art, and negative space. Airey also emphasizes using white space wisely, as well as being aware of the prevalence of logos in everyday life.

In his book, Airey cites Dharma Singh Khalsa, M.D. saying that Americans see 16,000 labels, advertisements, and logos daily. That is a lot! Because of this, I wanted to create a unique, professional-looking logo for you to use on your personal website, one that will make your site stand out from all of the other websites that belong to various “Laura Halls” (there are many).

One element that I tried to focus on is the typeface. I tested various combinations of typefaces before I found one that stood out to me. The words “Laura” and “Hall” use the Century Schoolbook font, and the “E” is in Edwardian Script ITC. I used all capital letters to make the name look bold on the screen. I felt that the juxtaposition between the all-caps serif font and the cursive “E” created a fun feeling while still maintaining professionalism. Additionally, I customized the kerning of the font so that the letters all line up in Logo 1. Typefaces are especially emphasized in the French tutorial, so I spent much time testing out different combinations of fonts to create your logo.

The circle behind the “E” in both logos is meant to provide contrast and be eye-catching. Because I generally abide by minimalism in my designs, I want to make sure each element serves a purpose. According to Smashing Magazine, circles are often found in headers and navigation in minimalist designs. Additionally, in the tutorial, French uses circles to turn text into a logo in no time at all. For your personal needs, I think that the circle turns the words “Laura E. Hall” from plain text into a logo.

I believe that this logo fits the five principals of an effective logo: simple, memorable, timeless, versatile, and appropriate (according to Smashing Magazine). After various versions, experimenting with typefaces, color, layout, and shape accents, I am confident that the current version of your logos will perfectly fit your needs for your site. You have been provided with different formats of the logo, including PNG and JPEG. I have the Photoshop files with layers, and can edit your logo at your request. Please let me know if you would like to make any changes to your logo, including typeface, color, and layout changes.

I hope you are satisfied with your logo, and will consider my services again if you ever need another logo made or other graphic design work.

After reading the CSS Frameworks articles, I decided to create a framework using the 960 grid system. When we used wireframes in class for the first time, I used a 960 grid to design my Minisite 2. Now that I know the concept behind the 960 grid, the pink and white lines make much more sense to me. The resource I found most helpful was the tutorial by Jeffrey Way, “A detailed look at the 960 CSS framework.”

The step-by-step instructions on how to implement the 960 grid was very helpful, and I found myself creating the structure for my website along with the tutorial. Way advises that beginners to CSS should not use this (or any) framework in creating their websites, because they will not understand what is going on “under the hood.” I agree with his statement, though I think that his suggestion that users should have 1-2 years experience is a bit of an exaggeration. I have only a couple of months experience and I think that I understand much of what is going on with the grid, though I know I could not write a framework myself.

Though this is not one of my more complicated sites (*finals*), I feel like a framework such as the 960 grid system would greatly decrease the amount of time working with layouts for websites. I wish I had known about this when I was creating columns in my second minisite. If the website is designed on a grid, it will be much easier to implement it with the 960 grid framework. I like how the user can just choose how many of the 12 or 16 or 24 grid lines for each object. I also like the troubleshooting techniques Way presented at the end of his video.

Obviously a 960 grid framework is not ideal for every website. I believe that what we have been doing in class is object oriented CSS, and there are many other options such as Blueprint, which has much of the design built in; YUI, which has weird naming conventions; and the 1KB Grid, which is lightweight therefore lacking robustness, from the Nathan Smith article in .net. The article “15 Responsive CSS Frameworks Worth Considering” also has some interesting frameworks that I feel would be more relevant to super-creative websites and designing for various devices such as smart phones and tablets.

For my website, I decided to style a webpage for Walt Whitman’s “Leaves of Grass” using the 960 grid system. Two of the versions I used two sections of five & seven and six & six grid lines. The other version I used three equal groups of four grid lines. Again, my websites are not complicated at all, but they use the 960 grid. I would be very interested in using CSS frameworks again, maybe using responsive frameworks in designing an application.

I only ran into two problems while creating the sites. The first was that the 960 CSS files were not in the right folder, so they were not styling my pages. I fixed that easily. The second problem I did not find a solution to. For some reason, I could not figure out how to put borders around the images in the grid. I am not sure if they were too big, or what, but I tried several times and they never worked.

Image

First example using the 960 grid system (6 and 6)

Image

Second example using the 960 grid system (4, 4 and 4)

Image

Third example using the 960 grid system (5 and 7)

 


Image

A screenshot of my paper

Image

A screenshot from Kickstarter.com

White Paper: Smart Watches

Image

A screenshot from my website.

Another badge completed! After looking at the sites that my classmates have used to host their domains, I chose to host mine through iPage.com just to be different and check out a new one. The price was very good, at $3.50/month it is one of the cheapest options I found. However I did have to pay for a year upfront (money back anytime, the site boasts!) and I felt like I had to purchase the security option for an extra $9. Additionally, I looked at the website webhostingeeks.com, and it is ranked as the number five web hosting service, as it has unlimited, bandwidth, and email. The price was important to me, so I felt like I would try out iPage to see if a cheap option could provide quality hosting. 

I created a simple webpage about myself, after trying out many domain names (Laura Hall is not a very unique name!). I loaded my pages to the site using Cyberduck. The only trouble I ran into was how to make my home page show up when laura-e-hall.com is called. I was so stuck that I decided to use chat support, although I figured it out while I was waiting for a representative to respond to me (about 10 minutes).

Overall, I found the site and control paneleasy to navigate and set up my personal site. Honestly, I did not use a website tutorial and just clicked around to find things, so I could have probably avoided a little frustration. The After I set up my website, I made a couple of email addresses such as laura@laura-e-hall.com and spam@laura-e-hall.com. The email part of the website was easy to use, and let me forward mail from my new addresses to emails that I check regularly.

Eventually, I would like to work more on my site so it is fully functioning, and change the CSS styling. I think that having a personal site will be very beneficial, and it is just plain cool! 

laura-e-hall.com

Image

A screenshot of the Registration page: P!nterest

Finally done with Minisite 3! This was the most difficult project of the semester. I have taken programming classes in the past with little luck in really grasping any of it, but this semester, I feel like I was getting the hang of programming (HTML) until we started Javascript. I learned a lot about using Javascript through this assignment, but the more I learned, the more I figured out my limitations. I wanted to make the registration form (below) so that it would require all the fields to be filled before submitting. I also wanted to include a search results page, but I could not print a “getElementById()” more than once per page (by definition id can only be used once). I eventually gave up on my search to solve these problems, as I already put so much time into this project (SO MUCH TIME). I did figure out how to find out what browser the user is looking at the page with-tricky, Javascript! Now that I have the project finished, however, I am still wondering about how to use these other Javascript tricks. Also, at one point I actually tried to use my Scroogle page as a real search engine!

The finished product.