Blue is the New Black

Interesting article I found about the use of the color blue in art.

Read More . . . 

Advertisements

Homepage and App Icon

This week I have been struggling with creating a clean and yet interesting homepage design that incorporates all of the elements of the existing site. I Began by adding a clear header and nav bar at the bottom of that. Then I added a space for a slideshow of the images I downloaded from the current site and a footer at the bottom with the hours of operation, phone number and address with a directions map, placing the map on the homepage instead of only on a separate page.  I decided to use the color wheel that I was working with for the app icon design to create a new logo with tagline.

I am still not sure how to incorporate the About Us and Services text as on the current page. I feel that the home page could get to busy and text heavy quickly by including these elements. The About Us may be best on a separate page and more images may bring more vitality to the homepage.

This week we were given the assignment to come up with ideas for a redesign of the homepage for Color Group’s current website. In addition we also need to design an icon for the mobile app. I spent much of my time this week researching homepages for a few different printing companies and sign companies on both computer and mobile device. I then also researched some of the available apps specifically for printing services to see what they offer and how they would look visually. I loaded screenshots of some of these in the Research on the Webstite for Projects page of this blog.

I began designing the layout for the homepage in Illustrator. I plan to make headers and footers that run across the full length of the page to help define the space better.  I also began designing the concept for the app icon using the color wheel as inspiration as it is both a vital tool to artists and reflects the prismatic colors already existing in the current logo.

Beginning the Project

In this class we will working with two different organizations this semester, one is an established and successful printing company, Color Group Inc. in Hawthorne, NY, and the other is The Peekskill Chamber of Commerce in Peekskill, NY. Over the course of the semester we will be working with these companies to produce a mobile app, a web page, and an e-book.

The first project is to design a mobile app for the printing company Color Group Inc. The first thing I have done is to research the client, Color Group, by visiting the website and noting the main features and pages as well as their target clients, past projects and portfolio. I also looked at existing apps in general, particularly ones with business as the focus, for features that may be helpful to the company and customers. Assuming the app needs to incorporate features of the existing web site one of the things that I think would make the app useful is basic information. The website offers a list of prices as well as turn around time for different kinds of printing projects that a client might be seeking. Making this information available through an app would help new as well as existing clients find out quickly how long a project may take and what the price for the service might be.

Another thing that is on the site is the option to upload a project and submit it for either an estimate or for order, including images and contact information. Making this feature mobile-friendly could also be useful. Additionally, the app could send notifications when an order is ready. It could also send proofs or other notifications throughout the production process. The app could also be used to set up payments and send receipts of transactions.

Additional Pages

This week I designed a few wire frames for additional linked pages for my main site; the About page, the Adopt a Horse page with the preliminary How to Adopt a Horse page. The based on these designs I began rearranging some of the absolutes in my home page (index) saving this as the new pages. Two of these pages are text heavy and the other is largely photos.

I managed to tweak my slideshow on the home page to line up with my initial design and added the black background color to the div to make the slides float over the black. I added text and also added links to all the elements that would be clickable links on the page including the site map on the footer.

Top Bar and Slideshow

With the side nav bar set up I now had to create the top nav bar. Again I used an example of code from Listamatic, http://css.maxdesign.com.au/listamatic/ , and chose Rollover Horizontal List Navbar. For this I tested the code in a separate document , copying and pasting the code, then changing text and color to fit my site. With the basic setup working, I then copied this into my homepage, including both CSS and HTML. Of course the name of the nav bar had to be changed so as not to be redundant since the code, as written, included id’s. So this one I named navcontainer2. This was placed in the absolute div named top bar that I had already created. I then had to adjust the height and top position to make sure that it most closely resembled my design. It ended up accidentally leaving a small space between the header and this bar in the trail and error adjustments that I was making which became a design that I actually preferred.

The next change was to the images below the top bar. I wanted the text images to be links to other pages that could be clicked. So for this I created two different images, one with the light blue background and one with the dark blue from the logo that when rolled over would change. I used Dreamweaver and the behaviors window to create a mouse over effect that would swap one image for the other, essentially making changes to the color of that one button and indicating an active button. I did this for both of the text images over the photos on the homepage.

The space below that is where the slideshow runs. Once again I used an existing code from an example slideshow provided by the professor from an internet resource. I had already created a div for the slideshow on the page. I then created several slides that would circulate out of several smaller pictures together as a collage. I wanted to use photos from the actual site of horses, both available and adopted that would represent the organization well. The photos on the site, however, were often of different sizes and dimensions. Therefore, I had to take several and place them together in an organized and interesting arrangement. These collages I then saved as png files for the slide show.

Again for the code, I created another blank document to copy and paste the slideshow code into. After plugging in my own images as slides there were some changes I had to make. The size of the slides that were in the example slideshow were a bit smaller than mine so that was one of the things I had to adjust in the CSS script. I had to make many adjustments to find the right parameters that needed changing for this to occur. I ended up changing the width of both slides containers as well as the overall container to make the viewable area bigger as well as the hidden overflow to accommodate my slides. I struggled with this several times trying to get the viewing size right but then also keeping the overflow smooth and fluid. I took some trial and error to find the right measurements.

In addition to container size problems there was also a frame image included in the sample slideshow intended to be visible around the outside of the slides. This I also had to resize. However, I kept having problems getting the slideshow to center over the frame image. I eventually decided to scrap that element for now since it was not part of my initial design, yet I feel it could be a good element to have in the future and wish I could solve the positioning dilemma.

With what I could include of the slide show, I plugged this code into my homepage script within the div I had set up for slideshow. Testing this in live view and web browsers showed it working.

List, Images and Tile

This week I set up the navigation bar, added images and adjusted the background tile to finish the image elements of the homepage. For the list I searched the site Listamatic, http://css.maxdesign.com.au/listamatic/ for a nav bar code that would support my intended design. Using the “Reflowing Folder Image Rollover Nav” code I could substitute the image of a folder with my own image, in this case the ribbon I created in Illustrator. I saved two version of this image as a png file, one the main dark blue of the logo and the other a lighter shade. This later image would be the rollover creating the effect of a block “lighting up” as the cursor rolls over it. I added to these new ribbon blocks the accompanying names from my homepage design which could be typed right into the HTML code in the lines where the text of the folders falls.

I also had to make the horizontal list design a vertical design. To do this I had to add width to the CSS code for the box within which the images are contained. By adding a width of 175px the nav container was stretched allowing the images to line up vertically. I then changed the top margin to 195px to drop the whole nav bar down to below the header. The next obstacle was getting the images closer to each other to allow as little space as possible between them. After many adjustments to the numbers in height and width in the margin code, it turned out the solution was the height of the images themselves. Changing this number pressed the images closer together.

The png images I created by making slices in Photoshop I then brought into the code. By placing the cursor in the line where I had made the absolute box before, I could then use Insert Image and select an image from my images folder. This was how I imported image elements into the design. To the header and footer I added color under “background color” in the CSS code using the hexadecimal number, color that was previously commented out with /**/.

I made some small changes to the background tile that I had been using which was a royalty free clipart png I found online, scaled down in size. I had used it as a repeating background image but felt that it might compete with the foreground. To limit that effect I tried a slightly less smaller scale of the image and added an opacity of 75% on it in Photoshop by making it a regular layer then again saving it as a png file. I may continue to make changes to this image to find the best compromise of  interest for the background and visual clarity for the foreground.

Tag Cloud