Jrollings's Blog

Rollings Photography Design Process

jrollings — Tue, 04 May 2010 02:53:19 +0000

Background – I used a black to light gray to black gradient background in a fixed position.

Banner – I placed the Rollings Photography logo on the left side and the contact information on the right side.

Navigation – I used button created in Fireworks. They are white, rounded buttons with a black outside bevel. I added a black inner bevel for a rollover effect.

Content – I used a white content box with a black border all the way around. I increased the top and bottom margin to give it a framed effect. Font colors are black for high contrast with the white background. I applied css styles to the text to for size, typeface, spacing, etc. There are five main pages and five sub-pages for sample photo galleries.

Footer – The footer section is black to separate the content from the footer. The footer has the copyright information.

RAPC Website Design Process

jrollings — Thu, 29 Apr 2010 15:30:02 +0000

Background – I used a blue/green weave seamless pattern for the background image.

Banner – I placed the RAPC logo on the left side and the contact information on the right side. Below it I placed a grass graphic to separate the navigation from the banner so that it didn’t seem to be floating in space.

Navigation – I used blue text links with a green rollover effect. The same color scheme was used for the links at the bottom of the page.

Content – I used a white content box with a blue border on the sides. Font colors are black for high contrast with the white background. I applied css styles to the text to for size, typeface, spacing, etc.

Footer – The footer has the grass image separating the content from the footer. This is an example of repitition to make the entire site flow together. The footer has the copyright information.

Apple vs. Adobe

jrollings — Fri, 16 Apr 2010 16:10:59 +0000

Is the spat between Apple and Adobe going to help or hurt web designers and developers? That’s an interesting question that I am sure will be highly debated for some time to come. In my opinion, it can go either way. This is the chance for all web developers and designers to move forward with technology and learn from previous successes and mistakes. I’ve read a lot of comments about how Adobe Flash is finished and how it is time to move forward with technology. I think that there should be a set of standards that all web developers should follow that will be compatible with all platforms, but the competition between competitors developing the different technologies can only fuel their desire to create better products. It will also be a little more difficult for future web designers and developers, because there will be much more for them to have to learn in order to catch up with all the new developments in technology. I agree with www.alistapart.com that people are what matter. It should be the main concern of everyone to create an enjoyable and easy-to-use design for the people that will be using the web and not to find complex ways to beat your competition. Apple and Adobe should put their differences aside and do what will benefit the people.

Web Standards

jrollings — Thu, 15 Apr 2010 16:51:07 +0000

What are web standards?

Web standards, according to www.webstandards.org, are standards that help ensure that everyone has access to the information that is being provided and will also make the web development process faster and more enjoyable. The W3C has different standards categories. These categories consist of HyperText Markup Language (HTML), Extensible Markup Language (XML), XHTML and modularization, Cascading Style Sheets (CSS), and Document Object Model Level 1 (DOM 1).

There are also ECMA (European Computer Manufacturers Association) standards. Their main role is to develop Standards and Technical Reports in the area of information and communication technology. Their standards have been accepted as a base for international and European standards.

Advantages of using Web Standards

Accessibility

The web standards make accessibility easier for both software/machines and people. The structural information makes it easier for search engines to access the information and index them more accurately. These standards also make it easier to put a search engine on your own site. They are written so that older browsers will still be able to display the content of your site. Web standards also make it easier for people with disabilities to use and for web pages to be understood by browsers other than the usual ones.

Stability

Data using older versions of the standards will continue to work in new browsers and data using new standards will also produce an acceptable result.

Common Information Architecture Mistakes

jrollings — Thu, 15 Apr 2010 16:18:05 +0000

What are some common information architecture mistakes that most web designers make when creating a website? This can be broken down into two categories. These categories are structure mistakes and navigation mistakes.

Structure Mistakes

One common structure mistake is that there is no structure to the website. This causes a lot of confusion for the user because they have no chance of understanding the site. This also causes them to leave the site quickly. Both the search and the structure should be integrated. The navigation designs need to indicate the user’s current location. After they click a result, they should know exactly where they are on the web page.

Navigation Mistakes

One major navigation mistake is having invisible navigation options. Don’t make the user search for the navigation. Nobody likes to have to search for it. Also, don’t put the navigation next to advertisements and similar items. This will cause the user to tune it out. Navigation elements that move or bounce also detract from the usability of the website. Consistent navigation is a must. Do not change the navigation with every page. This causes frustration.

These are just a few examples of the mistakes that are commonly made. There are many other mistakes that information architects make when designing a website.

Website and Mobile Phone Screenshot

jrollings — Tue, 06 Apr 2010 17:28:38 +0000

I’ve uploaded my website mockup and my mobile phone screenshot.

Fireworks Exercise Reflection

jrollings — Tue, 06 Apr 2010 15:14:50 +0000

I really enjoyed learning about Fireworks. I haven’t had much experience working with it and it was a little difficult to understand.

It was fun doing the tutorial on making a photo-realistic image from a digital picture. I had a few setbacks trying to follow along with the tutorial, but with trial and error I figured it out. The peelable sticker tutorial was fun too. I liked learning these little tricks to create a simple design. Those tips will definitely help with future projects.

Common Web Design Processes

jrollings — Thu, 25 Mar 2010 15:09:55 +0000

I’ve only designed two websites for my web design classes, but I didn’t realize that so much went into the overall creation of the design. After looking through a few sites and reviewing other web site designers’ processes, I’ve noticed there are a lot of similarities in their overall processes.

The first thing I noticed that all the designers do is their planning for the development of the site. The designers analyze the purpose of the website and the target audience. One article had a few detailed questions to ask when analyzing these areas. They included: What is the purpose of the site?, Is the purpose clearly stated?, Does it clearly define the intended audience?, among many more.

Another common element in their design processes is site design. They plan out the layout and overall look of the web pages. Most of the designers make many sketches of the layout and design wireframes that will be used to build the web page.

Another thing I noticed that all the others do is keep in contact with the client for whom they are building the web site. This is a good idea to keep them informed and in the design process, so that the overall product stays on track and the client will be satisfied in the end.

Web Design Issues

jrollings — Tue, 23 Mar 2010 02:45:46 +0000

This is an interesting and important topic: What are some design issues that only occur with web pages? Well, after doing some research and learning more about designing web pages, I found a few issues that need to be addressed. All web designers need to understand these issues and by doing so will have a very clean and inviting site.

The first topic is resolution. Two types of resolution need to be understood. These resolution types are screen resolution and image resolution. Most people consider screen size to be screen resolution. They go hand in hand. According to digital-web.com, 1024 x 678 and 800 x 600 screen sizes are the most commonly used. Image resolution is made up of pixel and spatial dimensions. These are the number of pixels in an image and the number of pixels per inch.

Another factor to take into consideration is what web browser will be used. Different browsers may display certain content differently due to the way it reads the coding. Designers need to test the sites on as many browsers as they possibly can to try and correct these differences.

Optimizing images for the web is also something to think about. By compressing your images before placing them on will help speed up your websites load time. There are three formats that are used for optimizing images. These formats are .gif, .png, and .jpg.

These are just a few issues that face web page designers, but there are many more that should be learned.

Optimizing Web Graphics

jrollings — Thu, 18 Mar 2010 18:52:08 +0000

Why should web graphics be optimized? That’s a good question that most graphic and web designers should know the answer to and how to do it.

Web graphics should be optimized in order to help speed up the loading process of your website. In order to optimize your images, you should know which file formats you should save your images in. The first step is instead of using the save or save as options, you should use the save for web and devices option in the file menu. This option will give you better control over the way your compressed image will appear when it is used. There are previews to look at while you’re choosing your file format.

There are three file formats to save your images in. They are .jpg, .png, and .gif.

The .jpg format is a good format for photographs because of all the different colors that may come in the picture. You can decrease the file size without too much loss of quality.

The .png and .gif formats would be better for images such as illustrations with fewer colors. The .png format will compress the image a little better than .gif, but both are still great to use.

According to a blog on uxbooth.com, a poll was conducted and 51% of people left a website due to the loading time being slow. By optimizing your images before placing them on your website, you will increase the load time.