Week 15

JordanGroll.com Final Website

Instead of changing my designistic website I decided to create another website. This website will be on my jordangroll.com domain. It features all my websites for easy access. My portfolio website is on my jordan-michael.com domain. For this design I wanted to keep it very simple. I wanted the focus to be on my name and the links to the websites. I really like how it came out. I also added some tooltips that popup when you hover over the copyright in the lower left corner and some of my website links. See it live by clicking here.


I also updated my hub page to make it easy for you to find my websites that I created for this class. To view my hub visit here.

Week 14

... To ...

Hacking Wordpress Theme

After choosing a template that I saw that had many of the features I was looking for I started to hack it to make it more how I wanted it to be. I started out by playing around in the setting sections for this theme. There I was able to chose a color scheme that I liked though it still wasn't exactly how I wanted it so I opened some of the images in photoshop and changed them to my liking. I also created my logo in photoshop and added it to the images folder. After doing as much as I could with the settings section I moved to the editor to edit the css. I started by moving the navigation down a few pixels. Then I changed the height of the slider area which actually took a while because of the way it was coded. I also redid the background to be black and redid the little button images that show what item you're currently looking at. After that I changed the footer height. I also changed the width of the whole page because viewing the website on my iphone, the text was right up against the frame so I added space around it so it reads better. After completing the home page I moved on to the blog page where I changed sizes of text and spacing. I also redid the search bar because in the original theme it didn't really look good and also it didn't function correctly. I messed around with other things in the css mainly to space them better/improve graphics.

See the live version here.

Week 13

Wordpress Posts + Pages

For this week I created 10 different posts for by wordpress website that featured different websites I have created. In each post I described different features or info about the websites. After creating the posts I created different pages. The first being the About page which tells you all about me. Then a blog page which I made as a sub navigation under the about page that lists all my posts. I then created a Portfolio page which takes the images from my blog and puts them in a nice, easy to view design. My services was my next page which basically lists the services I offer. The last page I created was my contact page which has info about the company and also a contact form.

Week 12

Wordpress

This week I searched for wordpress themes. I found several that I really liked but the pictures would not show up when I installed the themes. I than found one that I really liked because it looked more corporate which I wanted for my web design company. After finding different themes I installed wordpress on my host using the 5 minute easy install method. My hosting company doesn't have an easy way to install wordpress. I had to create a database where wordpress was to be installed. After that I played around with learning how to create pages and posts.

Week 11

The VAC Security

The VAC is an amazing Art studio but it is located off campus so security has to tighter than the main campus. Public safety has to patrol the Spaulding Street area by driving by every once and a while to make sure students are safe. Public safety is also responsible to make sure students are not parking on the streets because the neighbors are not happy when students fill there street with cars.

If you take a night classes at the VAC building make sure not to forget you student ID. After 4 pm the doors are locked so in order to get into class you need to swipe your id on the card readers outside the front and back doors. Sometimes the 3D studio building may also be locked during the day so it’s always a good thing to have your ID with. If you cannot get into any of the buildings either because you don't have your ID or it won't work, you will need to call public safety at (773) 298-3541 and they can come out to let you in. Also if you need to get into the labs on off hours you will also need to have your id to swipe in.

SXU is taking these precautions in order to keep the building and there students safer. Even though having to bring your id with may seem like a pain, without this security our VAC building could get vandalized or items could stolen.

Week 10

The Hub Redesign

This project entailed making our hub page for all our websites created in class more interesting. I kept the design pretty much the same as before but changed backgrounds and added a content carousal featuring website designed by me in photoshop. Below that I introduce the site and then show my websites created in class. I left space around them so you really focus on each one. I also created rollover images for each preview so you can see other pages of that site before you click the link.

See it live by clicking here.

Week 9

Flash Animation Part 2

Using Adobe Flash I added more info to my original flash animation/site. I used different images that I created and had them fade in to showcase my work. Once I find out how to link correctly you will be able to navigate to each section.

See it live by clicking here.

Week 8

Flash Animation

Using Adobe Flash I was able to create this short animation about me. I was going for a landing page that tells who I am and links to what I create. The last part of the animation will link to my different art mediums on my studio website, as soon as I figure out how to do that.

Click here to see the live version.

Week 7

Using Dreamweaver I created different pages that use an iframe to hold the navigation/logo element. In Photoshop I cropped backgrounds and different elements and saved them as jpg's. I was then able to create tables and divs to hold those backgrounds to create the different layouts. This actually doesn't really work that well with this design. It was more to learn how to create frames on pages and get them linked correctly. The pictures above are just two pages for this website. The rest can be seen live here.

Week 6

Home Page:

Photos Page:

Registration Page:

I created these 3 page designs using Adobe Photoshop. Using different gradients, shapes, and colors I was able to create a unique design and keep consistencies between pages such as the background, header, navigation and round content boxes. Since the site had to emphasize education and technology I tried to show this by making the page look as if it was a notebook. For the background I chose a green gradient because when I think of technology I think of the color green since circuit boards are usually green. On the home page I placed a cd and a pencil graphic to represent where learning and technology meet. Also on the home page I was thinking about how at conferences they have name tags like "hello my name is" so I tried to go off that idea.

Week 5

Before:

After:

Craft: Using Dreamweaver I created a new html page named index.html. Then I added a 2 column table with several rows. I inserted my images into the left column and text into the right. Using the "Page Properties" window I changed the basic features such as the background, text color, font size/color, and link colors. With my knowledge of CSS I created my own styles for things like the description and title. After that I went into photoshop and created my own design to make it less boring. I saved the different images and created more styles. I then made divs to hold that content (ie. the header, DW/PS logo, and the "Designs by.."). In the end this is the result > click here.

Week 4

Website: Designistic.com/web/iweb2

Craft: I used an iweb template and made 3 different pages. Each page I changed the text and pictures by typing and dropping in pictures.

Concept: To create a website that features my sister's dog and make you laugh a little while reading it. I also wanted to make it feel like it's made by the dog and I think this template, which is kind of ugly, does the trick.

Composition: I placed an interesting picture of her dog large on the first page because I wanted it to stand out. I also chose pictures that were more interesting. The template I left pretty much alone.

Week 3

My website url : Designistic.com/web/iweb1

host: 1and1.com

After publishing the site to a folder using iweb (File>publish entire site) I dragged that folder to the folder that I made for my website on my hard drive. I went to Dreamweaver and set up the correct setting in the "manage sites" allowing easy access each time I want to upload my different websites. I then used the "put" feature to correctly put my site into my remote folder on my domain.

Week 2

Craft: To create this website I used a template in iWeb and modified the colors and the overall layout using the inspector tools. I dragged and dropped my photos and created 5 different pages.

Concept: The concept was to create a variation of my current portfolio design using solely iWeb software rather than coding it by hand.

Composition: For the composition I started with keeping this blue block graphic with the page title on every page. This helps unify the design. I also placed some of my photos under the block element and changed there border style to add more interest. Overall I wanted to keep a fairly simple design.

Domain: www.Designistic.com

Week 1

Name: Jordan

Major: Art

Specialty: Web Design

Year: Junior

Hometown: Oak Lawn

Favorite Color: Blue & Green

Transportation: 2004 Mustang

5 Websites:
www.google.com
www.deviantART.com
www.smashingmagazine.com
www.jordangroll.com
www.facebook.com