tylercherigo

Content Management Systems (CMS) is a software used to simplify the creation and maintenance of websites. They are responsible for managing online content, generating web pages, and allowing users to upload and modify digital content without having a certain technical expertise. In most CMSs, content is stored in an administration area and can be modifies how ever you want. This administration area can be accessed through any web browser. With this content, CMSs allow you to organize the content on web page templates to achieve the style that you desire.

There are many categories that CMSs can fall under. Some of these include a portal site, blogs, e-learning sites, e-commerce, wikis, and social media sites. Each is going to offer a different set of tools and templates to use when personalizing your site. That being said, in some situations a CMS may not be the best option. For organizations, it is important to research how a CMS would implement with your business and find out if it is the right choice. Many CMSs don’t offer flexible workflows. If you force yourself into the wrong workflow, it could be disastrous.

Here are a few advantages and disadvantages of open-source content management systems:

Advantages:

• Most are free to download and install
• Development support communities
• Most licenses allow you to modify source code

Disadvantages:

• Possible hidden implementation costs
• Technical skills required
• Large organizations require experienced staff to manage platforms

 

Currently, there are hundreds of CMS platforms on the market. The three most popular CMSs on the market are Drupal, Joomla, and WordPress.

Drupal is more of a framework rather than a CMS platform. Because it is more of a framework, Drupal is a highly flexible CMS. The only problem with this system is its level of complexity and bad UI.

Joomla is a powerful CMS that is capable of developing highly trafficked sites. Joomla lacks the complexity that Drupal has so it is easier for designers to get a site live quickly. Although Joomla is easier to use, it doesn’t offer very good security and displays an unnecessary amount of code.

WordPress is the most dominant of the three. It was initially only a blogging platform but eventually advanced on to managing websites. WordPress organizes content into categories and tags making it easy to develop relationships a produce descriptive content. Although WordPress is easy to use, it is inflexible.

Your design portfolio is the best way to display your work to potential employers. It is a representation of all of your design skills in one fully functioning website. A digital design portfolio should not only just be a way to display your work, but it should include elements of who you are. The way you design and implement your work displays your personality. An accurate display of your personality influences an employers perspective of you. When designing your portfolio, it is important to create a strong personal brand or identity.

Creating a personal brand is one the first steps into creating your design portfolio. When creating this brand, think about what parts of your personality you wish to display. Infusing your identity with your unique personality makes for a memorable brand. Consider your interests and personal characteristics that creates an identity that is unique between your competitors.

Here are a couple examples of strong, self-promotional brands:

Notice how these brands display what these individuals do through their logo. They both creatively incorporate their initials into a logo that is suitable to their expertise. This is a good technique to follow because it not only tells who you are, but also displays how your design characteristics.

Examples of Effective Design Portfolio Sections

Portfolio/Work

Mary Fran Wiley: Wiley displays her work as different sections on the page with screenshots of her websites. When you click on the preview, it takes you to a page where her work is broken down and shows her role in the project.

Pablo Vivanco: Pablo displays his work in a slide show. Underneath of the image of the project, he provides a description of his work.

About

Cleverbird Creative: Cleverbird’s website is a single webpage that skips to different sections of the page through the navigation. Their about section is fairly simple but gets the point across about what they do.

Build Films: This design company breaks up its about page into different section depending on what the content is about. Their use of tiled images effectively display some of their work through the use of their staff members.

Contact Info

Vitor: This individual uses the single webpage technique as well. In this portfolio, the designer implements his contact information into his about section instead of creating an entirely different section.

CreativeJUUS: The contact section on this portfolio does not provide an email or phone number to contact. Instead, it includes a form for viewers to fill out in order to reach the designer.

The second topic we are learning about in my Web Design II class is design content for a responsive and mobile website. The web landscape is vastly changing. No longer do web designers primarily focus on their desktop version of a website. With more devices being released that require Internet connection, websites need to become more versatile to meet consumers demands, while maintaining user experience. Mobile browsing, in fact, is projected to overcome desktop access within three to five years. Video game consoles are even coming equipped with fully functioning web browsers. With technology rapidly advancing and becoming more dependable, designers are beginning to focus more on responsive and mobile websites.

Responsive Design

Responsive design is a design strategy that is centered on designing web content so that it responds to the environment it is encountered in. Ethan Marcotte came up with the term and determined three fundamental techniques for responsive design: flexible layouts, media queries to help adapt content various screen sizes, and flexible images and media. For example, the way that you would design a website for a desktop computer is vastly different than designing one for a smart phone. Smart phones have very small screen sizes compared to a desktop computer which limits the content that can be displayed on the page. If your mobile site has the same exact layout as your desktop version, it will be very difficult for users to find what they are looking for because they will be constantly zooming and scanning the page to make it legible.

 

Mobile Design

Mobile design has become the most primary focus for web designers recently. More people are using their mobile devices constantly on a daily basis because it provides immediate results to any search query one might have. People use their mobile phones to enhance productivity, comfort, and pleasure, anytime and anywhere. Everything needs to be fast and reliable on mobile devices. Users expect these devices to be immediate so designers need to implicate for those expectations. If an app is working slower than normal, users are going to immediately know. An app may look astonishing, but if it performs slowly it could be detrimental to usage and brand perception.

 

This is an example of my research: A Hands-On Guide to Mobile-First Responsive Design

Example of a responsive website: Instagram

Example of a mobile website: Twitter Mobile

This week we were assigned to revise one of our previously made Facebook banners, create a smaller timeline photo of that banner, and create a same HTML page to display the two images. In doing so, we learned new skills such as file formats for images, image optimization, and saving images for the web.

There are three main file formats for the web; JPG, GIF, and PNG. JPEG images can be adjusted in compression to achieve the desired file size and visual quality. They are best for photographs where blends, gradients and hues develop complicated color combinations. GIF files are the default choice for simple graphics. They are best for type, vector, flat or hard edged images. PNG is a newer file format that are not supported by older browsers. They are best for web images, or images that require transparency against a background.

Image optimization is using the most compressed, yet visibly acceptable image in the proper file format for the image. It is essential to find the balance between file size and quality to produce the best visually appealing version of an image. A few programs that allow image optimization are Photoshop, Fireworks, and Lightroom.

When saving an image to the web it is important to know what each file format does to the image. GIF files reduce the file size by reducing the amount of colors. It then flattens the image in preparation for the web. For JPEG files, the quality settings determine file size and quality. PNG files, on the other hand, is normally given the best results through the adaptive palette. These files flatten the image similar to GIF files except it is done through an indexed color palette.

We were also given an article to read from hubpages.com titled “10 Tips to Improve Your Banner Ad Design and Click-Thru Rate.” This article talks about how banner advertising is becoming more popular as businesses are going online. It also provides a list of rules to make your banner more effective. One rule that it mentions is “Keep your message brief and to the point.” It is important that your grab the viewers attention immediately to influence them to research more. The more appealing the banner is visually the quicker a viewer will recognize it. If the banner is too cluttered or they have to read to figure out the message, most likely they will just scroll right by it.

 

Take a look at a few creative online banner ad examples.  http://digitalsynopsis.com/inspiration/50-incredibly-creative-online-banner-ads/

“10 Tips to Improve Your Banner Ad Design and Click-Thru Rate”  http://hubpages.com/business/10-Banner-Ad-Design-Tips-to-Improve-Your-Click-thru-Rate

 

 

During the first week of my Web Design I class, we learned about texture in digital graphics. More specifically we learned about the resolution of images and placement in its design that makes it visually appealing.

This week we learned how to operate the Adobe Fireworks program. Fireworks is used to edit bitmap and vector graphics to be used with other Adobe programs such as Dreamweaver and Flash.

For our first assignment, we were told to create a Facebook cover photo for Wheeler Farm in Sykesville, MD to advertise their new campaign. We were told to create this photo using the Fireworks program, implementing what we learned about editing digital graphics. I was assigned to create a cover photo for their CSA for PTA program. This program is operated through Wheeler Farm and volunteers from the community to bring fresh, local produce to schools. In order to create this cover photo I used images found from Flickr and the farm’s website.

For information about how to create an appealing cover photo, refer to this site: http://www.socialmediaexaminer.com/25-facebook-cover-photo-examples/

Hello everyone, my name is Tyler Cherigo. I am a Junior at Stevenson University, majoring in Digital Marketing. I am also a member of the football team here. I am creating this blog for my Web Design I class and plan to display my progress throughout the course. Hope you enjoy!