Author Archive

Searching the Industry

by Dallin

For a long time I never thought the title “web design” was remotely equivalent to “graphic design.” In fact, the idea of a web designer seemed to me as someone who knew how to program a site and to make it functional online. I was completely wrong. There is so much more to web design that allows the word “design” to grow to it’s full potential.

A Brief History
First we need to look at what graphic design is in our day in age. Easily put, graphic design is the use of balance, contrast, emphasis, proportion, proximity, repetition, color, light, texture and many other elements to create a work of digital art that is pleasing to the eye. From that definition we can see that graphic design is simply using hierarchy to share particular information in a way that the reader can understand and enjoy. As I was looking at the history of graphic design and trying to apply it to web design, I found some interesting information that ties graphic design and web design together.

Grids
Grids are structure imposed on chaos. You must always have a grid structure when working with any form of design. It’s interesting to see that only recently, web developers and designers are using a grid system in their sites. I have seen the web as a very “boxy” medium and I almost feel like you can’t break the grid when working in the web. Steven Snell describes using grids by saying,

“Designers of all types (web, print, etc.) are constantly facing issues involving the structure of their designs. Web designers are increasingly turning to grids to control the structure of web pages, and grids have long been used extensively in other design mediums. For many designers, grid-based design is still somewhat of a mystery.”

I think that this makes graphic design along with web design very exciting. We are still learning how to communicate and it allows us to continue to grow.

Solving Problems
Now that I’ve discussed the need for a grid, we need to understand that graphic design is not just organized information into a grid, but it’s much more than that. Through several years of experience as a graphic design student at Brigham Young University–Idaho, I have found that the graphic design industry has a plethora of jobs and skill sets. In fact, I’ve had a difficult time choosing the thing that I must enjoy in graphic design.

Graphic design can be easily describes and “making something look pretty.” I can agree with that statement. But it is also communicating something beyond just looking nice. There can be so many hidden jewels in a work that requires someone to look beyond what they see, but to intellectualize the ideas that are being portrayed. Everything in a graphic design work should come together in perfect harmony within the piece. An article by Greg Quinton states,

“Graphic design is about solving problems using design to communicate the solution. The solution can be subjective and there is always more than one option, but selecting the right one can make a real and positive difference. If a picture can say a thousand words, imagine how many words a well-designed poster could communicate. It could convey a message that will stay in the mind for years.”

What makes a Graphic Designer
When going into the work place, there are several things that need to be addressed. I would first like to discuss the idea that a graphic designer needs to communicate not only in print and web, but also in person. When getting a job or meeting with a client, people skills are essential. How is it possible to sell your work of art without selling yourself in the process? Your work should describe you and you should describe your work. This can be done through trust and respect.

In today’s world graphic design is perceived by many as being a fun, artsy, stress-free job where you sit and draw pretty pictures all day. The truth of the matter is, graphic design isn’t always so glamorous, and it certainly isn’t a ride in the park. Like any job, the days can be long and the workload piled up to the ceiling. You must put yourself in this situation as someone who can handle himself or herself well. You must be flexible and will to work with others. Anyone can use Photoshop, or Illustrator, but you need to show your boss or your client that you can use it well.
Combine the Elements
Throughout the research of this paper I found a quote that helps me to see how a real graphic designer is born. It says, “A man who works with his hands is a laborer; a man who works with his hands and his brain is a craftsman; but a man who works with his hands and his brain and his heart is an artist.” This was written by Louis Nizer. Reading into that quote a little more I found that a designer, whether it be in web or print must put more than just the organization on the page, but must use his ideas to coordinate with his feelings to create a masterpiece. And what is a masterpiece?

It gives the person who sees the work an experience that communicates exactly what you wanted them to see. The last few months I have seen in a new light since I began designing for the web. It’s a different medium, and I think is a different industry all together. But I can also say that the same principles of graphic design and visual communication are being used in the web, and it takes a real graphic designer to use them correctly and allow the reader to accurately understand what is being taught.

In Conclusion

The industry is changing and we need to be on board. The web is become an even greater resourse for good graphic design. This will allow us to build our portfolios and jump on the train to new ideas and media.

A Link To My Site

by Dallin

Visit my website for the 2009 State of California Public Schools | 5th Grade Science Curriculum | focusing on the water cycle.

http://paradigmredesign.com/

How I Executed and Implemented My Site

by Dallin

I believe I’ve accomplished each of the steps required for this basic site. The process was difficult at first but once I completed one step, the others were easily doable.

The first thing I looked at was to save my images for web using the appropriate file format. The format was either done with PMG or JPG. For each image I made sure they were the proper size so that they fit in their particular place on the site.

I accomplished the process of markup of my content as HTML. Making sure the content was placed into dreamweaver with the proper fonts and styles as my Photoshop mock up was done took a few more steps then I realized. But it became easy when the CSS styles were implemented to my HTML pages. That leads to the next step to define presentation styles with CSS. This was done with multiple style sheets including my basic CSS style sheet, and the style sheets retrieved offline that would zero out any defaults that different browsers would have.

Another step that made it the way my site should be was to check it in different browsers. They all seem to work pretty well with my site, but the newest version of Firefox is where I based most of my design. I found that there were subtle changes in placement on other browsers such as Safari.

I then made my site live which was difficult. It included several trial and error attempts to get what I needed done. Here is a screen shot of my life site including the toolbar.

Screenshot of my live site - all the buttoms work!!

Screenshot of my live site - all the buttoms work!!

Style Guide in process

by Dallin

I’m not completely sure how to make a style guide at this particular juncture, but I found that looking at my basic home page template, that it was the basic for all of my type and actions on my site.

The style stay the same throughout my simple site

The style stay the same throughout my simple site

The vocabulary page imcludes the same font and styles

The vocabulary page imcludes the same font and styles

I tried to stay simple in both font style and in actions. As you switch the different pages within the site, you know where you’re going and and return to where you’ve been very easily.

I haven’t yet placed a style guide in my site, but I believe we are going to be working on that later on in the course.

My Water cycle IMAGERY

by Dallin

As I was working on my images for this assignment, the main goal was to make them simple to analyze by a 5th grader. I created my own images through the process of illustrator and Photoshop displaying each of the topics regarding the water cycle, including condensation and evaporation.

Thinking of images for this site took be back to when I was in elementary school learning about the same topic. I tried to focus on those things that every kid would know about including rain, snow, fog and so forth. I think these images work well for my structure of my site.

a simple watercycle image

a simple watercycle image

This is a chart that displays the water located on the earth.

This is a chart that displays the water located on the earth.

Showing evaporation mainly coming from the ocean

Showing evaporation mainly coming from the ocean

Condensation coming in many forms

Condensation coming in many forms

Lakes and rivers are a large portion of the fresh water on the earth, this is an image displaying that.

Lakes and rivers are a large portion of the fresh water on the earth, this is an image displaying that.

The preservation image for the page discussing recycling of water.

The preservation image for the page discussing recycling of water.

Searching Typography

by Dallin

As I looked through several site I found that typography is very limited, but there are several way to make it look beautiful. I found that when I use typography in any project, I think about how hierarchy will help with the visual motion of the page.

I am using a lot of san serif attributes to my site because I decided it was easier to read in the long run. Because fonts are so limited on the web, I wanted to find something that would be easy to read for the main copy. I chose a serif for any main copy, and hierarchy is achieved through that typeface by using such thing as bold, italic, and space between sections.

I have been tweaking my idea throughout the process, but I just remember that simple can be the best, especially when the client is a 5th grade student.

Website Mock Up’s for the Water Cycle

by Dallin

When creating a mock up, i wanted to see my site as realistic as it will be on the web. Things have continued to change through the past week and here are my posts as of yep for my mock ups.

The mock up’s have changed very subtly in the past week or so, including the background image behind the site. I just did the change on my dreamweaver site and didn’t bother changing the mock ups. I do have my live site screen shot with the background I am using. I also changed my activities page to a quiz because I found it would be a nice thing to quiz them on what they’ve learned on the site. They can also divert back to the other pages to retrieve information.

When I first put together the Photoshop mock ups I had each page in a different file on my jump drive. I was then told by Brother Franson to put them all together in one Photoshop file and just seperate them out into several different folders within my layers pallet. I did so, and it helped me realize how realistic that is to working in dreamweaver and on a real site.

This is a mock up of an activities page i put together.

This is a mock up of an activities page i put together.

Mock up for Homepage

Mock up for Homepage

Lab 10 – Sketching to Communicate

by Dallin

Finding a to see websites in a new light by seeking out those sites which are well designed and allow the visitor to easily understand how the site works. In order to truly learn how to do this I went out to search for those websites I thought would easily portray the direction of the site and draw them in thumbnail form. This helped me to see how the construction a several sites work, and find some ideas that will help me to organize information into different quadrants.

My favorite sites and their contruction sketches

My favorite sites and their construction sketches

There were several things I learned as I sketched different sites. It took me several hours to even find sites that I felt were even worth sketching their construction for. Such things as quadrants in which the site separated information was shown in several different ways, but in many cases I felt that they basically said the same thing.

Some sites were very busy, but they had a simple structure will I don’t think i would have seen if i didn’t do this assignment. I feel that the assignments objectives gave me enough information to accomplish the task at hand. I found that there were many site that were very similar and a pattern started to develop.

In conclusion, I feel that there is an eye in every step of this assignment. Looking for well designed websites can be very difficult when so many people can just get a simple template and not put any thought on the direction in which the want their visitors to go. Some sites gave me a headache because of its lack of design. Drawing the thumbnails helped me to truly gain a better understand of the simple structure of the site and not all the colors and business.

Thumbnails by Moi

by Dallin

I drew several thumbnails and selected a few that were in the vision i was thinking for this site. I found a simple way to display the information but interesting enough to keep the views attention. It will include several images on each page and the navigation will remain on one side so that the viewer will know where they are.

Working on Sketches for Layout of site

Working on Sketches for Layout of site

by Dallin

After gathering the information for my site, I thought of several ideas that would be easily nagagated but interesting visually for the 5th graders.

For the topic of the process of evaporation and condensation it would be nice to see images that were explaining the information and allowing examples to show.

process of evaporation and condensation site map

process of evaporation and condensation site map

a wire frame of the site was also thought of that allowed me to see the general layout. This included a header and a navigation that would remain on the left side throughtout the site.

process of evaporation and condensation wireframe

process of evaporation and condensation wireframe