Latest Entries »

Blog Post #5 Advice

Advice for one and for all…. read the book….. read the book.. read the book.. read the book.. read the book.. read the book.. read the book read the book read the book read the book read the book read the book . Web design is definitely technical and practice is a must if you expect to see improvement. Intro to web equips you with everything you need to learn the basics of web design but doesn’t offer much time for practice. Practice makes perfect not for the fact that you learn what to do, but discover all the errors early on so that you get to spend more time building designs in class and less figuring out invalid codes.

Yet with all the preparations, you are bound to run into blocks, no matter how organized you are or how much you’ve read ahead.Where it would seem why a method that worked in  the past would not a second time, or why a site that worked this morning is not working out in the afternoon. The culprit for all your future problems is unlikely to be the technology but is human error, 99.9% of the time. There are many ways of how to get yourself back on the right path. Heres three of them.

1.Firebug – The quickest way to spot a problem. very useful when you have no idea where a problem is coming from.

2.Google – 99.9% of all your problems would be answered through google. The art of it is knowing how to ask your specific question. A general question would send you searching multiple sites with no answers.

3. Youtube – I am one of the few that learns much better with a person showing me the process step by step. Youtube has been my personal favorite source of figuring out problems.

Heres the part of web that bothered me, those who tend to be more technical have the upper advantage. Im not saying that those who aren’t would be bad, but those who aren’t,  will have a harder learning curve and will require more practice. Those who think in numbers and are quick with codes will need less time building and more time experimenting more advance approaches to design. And for all, remember you are designing for a viewers experience. Therefor your designs must cater to the needs and enjoyment. Consider how they will view the site, what is the best navigation that would have them locate information in the most efficient way possible. To custom your site to be the same experience for those with big computers to small mobile devices, from outdated browsers to the newest. Last and not least, ask questions, even if the answer was so easy class laughs at you ..and if I forgot, make sure to read the book.

Regardless if welcomed or not, HTML5 is coming and is sure to stay. There has been a lot of thought on the complications of the new methods, whether its a matter of practice or it being an acquired taste, it is obvious that all would have to get over the learning bump to start seeing the new benefits. HTML is not here to completely change the mark up experience but to label and categorize  in a better way. Gone are the days of multiple “div id’s” , labeled by preference, but are now labeled appropriately in common terms used by all designers  and developers.

TEXT LEVEL SEMANTICS

Text-level elements are what used to be in-line elements. These are semantics placed inside of paragraphs and divisions to place or effect certain parts, phrases, or words. We are going to looks at four; mark, time, meter, and progress.

Mark – The mark tag highlights a word or phrase in a paragraph that will enable it to be searched online for either reference or description. Much more efficient than a span or href tag. This also does not semantically give it any importance or extra meaning like a strong, em, or cite tags.

Time- The name tells  it all, it is a tag used to identify time. Obviously little to no need, at times, for such a tag unless the data is required for microformats. This would be a way to consistenly mark up bits of semantics for easier use of gathering or categorizing information.

Meter- The meter tag is used to mark up specific values of a known range or value. This would  not be used for such scalar measurements as height, age, or weight. There are six measurements accounted for this which are value, min, max, high, low, and optimum. This tag would be beneficial for percentages and rise or decline of increment values such as bating averages or scores.

Progress-The progress tag shows a percentage of the process of change, like a meter for a download button. It has 3 attributes which are value, min, and max. Downloading and uploading would probably the only use for this tag.

FORM ELEMENTS

In the past many designers found it dreadful to design forms for the sake of the boring corporate feel associated with forms. HTML5 now may bring life and fun into designing forms with their new elements, these are simple tags to create and simplify every part of forms with little to no css. These are a few of the many elements in HTML5.

Placeholder Text – creates text area.

<input name="firstName" placeholder="First Name" required />

Date Picker –  A custom calendar widget appears for the viewer to click and select a date without having to manually type.

<input id="birthday" name="birthday" type="date" />

Datalist – Upon filling out a form the text box lists completed lists of options.

<input id="country" type="text" name="country"  size="40" list="countries" /> <datalist id="countries"> <option value="Australia"> <option value="Canada"> <option value="Germany"> <option value="France"> <option value="United Kingdom"> <option value="United States"> </datalist>

Numbers – The text area displays an up and down button to click for and increase or decrease of numbers.

<input id="computers" name="computers" type="number" min="0" max ="100" step="1" value="2" />

It has been over a decade since HTML has upgraded and has been left behind in terms of being able to run current program capabilities. Due to this many third party companies had to  create external plug ins to get videos and music players to work, viruses also became an issue, some would tag along external plug ins and cause majors problems.. The problem with this is that every person was bound to have different web experiences. With the competition among companies, its not often to have two programs being compatible with one another . This causes a rift in the flow of the web for consumers, especially that with in the last five years technologies such as tablets and smart phones has redefined the average internet user.  By 2015, it is predicted that more than seventy percent of internet user will mainly browse the web on their mobile phones. This currently is a new horizon for developers and designers to provide sites that would work flawlessly with the same experience as a desktop. Problems here again deals with what plays flash or what code would work for different settings on different browsers, depending on what device a site is being visited on.

HTMl5 is suppose to put a stop to the inconsistencies from different programs, plug ins, and devices. The goal is to have a standard web experiences for all users. That companies will have to create programs that would based on the rules and regulations that would apply to all platforms and browsers. Where all needed to view the web would be provided without the need to download extra content and not have to worry about cross compatibility. This would not only benefit users but developers and designers as well. Once a site is created, it would be able to load up and wouldn’t have to worry about what works on what browser or if  there would be any differences in looks. Thus the designs will only have to create one marked page rather than a multitude fo different versions of a page. This will able everyone to learn only one standard way to create sites or apps. Thus making content open to everyone and that everything will be able to be searched an seen by everyone regardless on what means they search information on. All this said, HTML5 is bound to make the web and its content friendlier to users and creators, minimizing the work and need to update.

Although with good must also come the bad. Although many are using the obvious advantages of this new technology, HTML5 is still in the process and has yet not been finalized. Due to this, many browsers and platforms have not quite caught on the band wagon and are still lagging behind this technology. So far, Chrome, Opera, and Firefox have began implementing the benefits of HTML5 while Safari and Ipads has not. This increases again another different experience among the many.

One interesting program that tackles the problem of different video experiences is Adobe EG. Adobe Eg is a free program that provides the ability to create flash but save it in a way that is compatible to HTML5. The great selling point of EG is that it is free! Although still in early development, it is available to all with the sign up of an adobe account. EG will extremely easy to use especially for those who have experience with After Effects since the panels and functions are the same.

Arcade Fire came out with a music video in which the site implemented the capabilities of a responsive flash and typographic animation and video integration with a separate ability to link with Google maps. Here you would type your address and the music video would play the clip using the background of your area while opening multiple windows for a unique experience. The “Wilderness DownTown” shows up the same on all browsers yet, but a bit slower in upload and flow in firefox compared to Chrome. The site won the The FWA Awards for giving a glimpse of the future of web entertainment.

In the site for the song “3 Dreams of Black” by Rome, also done by Chris Milk who directed the site of Arcade Fire, is a visually inspiring video in where the movement of the cursor turns the camera giving the view  screen as if seen through the users eyes. Very inspiring and exciting for the fact that at this is time we are only at the beginning of html5 and yet although amazed, we are no where near the prime of what it can do. This keeps everyone at the excitement to find out whats to come.

Project 2 Mood Board

Barista is an ice coffee brand I created in package design class. For this site I plan on expanding the product for both hot and cold. Barista is going to have a “young” look thus having a different look from the rest of the coffee sites. The brand is to attract consumers who are new to coffee drinking, those who might be intimidated to the bigger coffee brands like Dunkin Donuts or Starbucks.

In my opinion, a clean site like the Seattles Best ( first image above ) works well with coffee, rather than a more texturized site with multiple pictures like the Dunkin Donuts site.  I feel that the coffee bean and bag textures have been over used. If I plan to create a brand that would attract new coffee drinkers I would stay away from previously used styles. The color patterns will be treated the same way, more new colors such as red, green ,blue, and purple, not five different colors of brown.

JQuery is a great way to enhance a viewers experience of a site. Many interactions,  responsive information, and animated transitions  allows a person enjoy observing a site while absorbing content at the same time. This will make a probable client to be eager to visit a site a second or third time. This technicality showcases the experience and budget of the site owner, adding trust and security on the offered service. On the web designers side, JQuery offers less lines of code compared to standard java script. A vast library of possibilities are available giving flexibility and options to the designer. One of the best reasons to currently get into JQuery is that this technology is  new and popular among programers. Being popular, JQuery has a large community offering plenty of updates, tutorials, and add-ons.

On the other side, there are some draw backs. Only JQuery commands runs JQuery javascript. This may add a bit of memory which may add on a few seconds of loading time. Although there are easy commands, a designer will still have to be familiar with CSS, so not everybody can run JQuery. Aside for these few complaints, the pros out weights the cons. With a little learning one can create a complex and imaginative site  easier than ever.

1. Tiny Tips

Tiny Tips is great plug in that allows a viewer to inter act with the text. simply highlighting any word on the page  gives the option to look up the word in the dictionary as shown in the example below.

2. Quicksand

Quicksand allows items to move in an “animated stacking order”. This would enhance the viewers experience from the mundane, to make  a stacking motion enjoyable.

3.Photoshoot

This is by far this one of the most impressive plug ins I’ve seen. Photoshoot turns the cursor into a transparent box that allows the viewer to take snap shots at large images. There are apps than are built for more fun than functionality, I would say this is one of them.

4. jqFancy Transitions

This is another transition that offers a more technical abstract design approach. I doubt its nothing that we havent seen before but is done well.

5. Game Query

Game Query is mini game that maybe found into the footer of a site. The purpose of the game query and how it would tie the content of the site is still undetermined, Game Query is still in the early stage development. Although for the moment purposeless, the plug in promises a surprise for  happy young gamers.

CUTESTPAW.COM

(JQuery Masonry is another stacking order plug in that imitates the float characteristics but orders them automatically stacking them according to the  images height and length.)

Cute Paws is a site witha basic service, to provide visitors with the “cutest animal pictures in the world”. The site contains only images to be shared via download, email, Twitter, or Facebook, plain and simple. The Masonry plug in places depth and creativity form your normal fitted grid system. Upon hovering the pictures, a light box effect comes into play. Images are first presented above the fold, the more you scroll down the site loads more pictures. This saves screen space as well as displaying only what needs to be seen. The navigation seems to be fixed and animates downward upon scrolling down. I think it is very friendly of the site to provide an option for the viewer to translate the site in English, Japanese, and Chinese. The site has option from animal categories to most popular with a search bar. Although simple in purpose, the site shows complex designs, thus increasing the amount of visitors and come backs to the site.

CSS Zen Garden: Mood Board

To start off I want to state ahead that I am no fan boy of any graphic designer that makes it onto a clothing label. I would rather hold my comments  for those who automatically feel “artsy”  just buy purchasing a designers overpriced clothing item. Rather than, I have always appreciated daring-political art by many designers and artists. Although some are funny, political art to me doesn’t make fun of our times hard choices in politics, but  rather holds a mirror to our culture. Purpose is to show mistakes of the present to better the future and to bring to public what our generation thinks of the powers that be. I have always wanted to find a reason to use these illustration styles in personal projects. From kaleidoscopes, eroded textures, and stencil use, the look of street art has always inspired me as a kid, to be rebellious against classical art methods. Having a project where the artwork was up to me, regardless of the topic, gives me a reason to use political art style.

Luckily for me the structure width of my Intro to web Final was designed using minimal space. This would allow smaller screens to view the full site as well as larger screens as well. The only problem would be when the page would narrow in width under 300 pixels wide, this would apply to smart phone and tablet users. Majority of my content are spaced in three column sections. Responsive web design would allow me to crop pictures and join content from three, to two, to one columns.

I know for the content to automatically adjust is to apply percentages in adding pictures. Having images with a numerical width and height in pixels applies a fixed perimeter. Fixed perimeters do not to scale down or adjust to a smaller screen.

On a tablet I would assume that my 900px container would minimize up to 600px. In this scenario I would put away the main picture with the quote, the bubbles on the sides, and the shark image in the banner, keeping only the “Sharks” logo and the columns. I would also compress the space in between the columns for a tighter fit. The navigation bar would be gone since it will be too small to function properly as a touch screen button. The three pictures will be replaced as navigation for abilities, strength, and history as well as the logo as home touch screen button.

Image

From a tablet to a cellphone, I assume the screen might narrow from 600px to 150px. With a change this drastic it would make sense to be prepared for a single column format. Here the blue side borders would completely be gone and the text would align in a single column. The three images and the logo would be cropped even further.

Image

Project Rome

Project Adobe Rome is an all in one website creating/publishing application made easy. Free from HTML and CSS we are free to just drag, drop, type, and select functions. Comparing Project Rome to Dreamweaver is like comparing Microsoft Paint to Photoshop, but with a professional look. The best thing yet is that Project Rome is completely free. Adobe launches early trials on every program before it is officially launched and decided to halt the production of Rome until further analysis is gathered. Meaning Adobe can either provide the application  free for the time being or cancel Rome all together.

Many will benefit from the easy to understand layout, even those who have no knowledge of adobe products, much more web designing. Multiple templates are provided with many design layouts enabling anybody to produced a well designed page. The pros and cons is that this would be good news to consumers but bad news to graphic designers. My opinion is that these new apps that makes a graphic designers work easy to duplicate can easily endanger designers from not being needed. Not that the economy isn’t scary enough as it is with only a handfull of jobs available, but it would be four years of college summed in an easy to use app. For every design job opened per year, three times more design students will graduate, making  a job opened per three graduates. Although the facts can be terrifying, I believe competition is needed for a career field to grow and improve. Much like how computer rendered art threatened early illustrators in 60’s and 70’s, this threat gave birth to the advancement of Adobe. Pixar, video games, special effects in films, and etc… Not to say that there is a print design never be needed, but the world of web and animated design seems to be sculpting the world of Graphic design. Many other products are likely to follow the road paved by such easy to use apps as Project Rome which consistently pushes future designers to improve and adapt to the changing times.

AlvinLeeArt.com is a portfolio site from a famous comic illustrator. The site includes articles, images, and videos of Lee’s work. The site seems to be a simple lay out, centered and three columns at the most. Navigation is set to the left and the designs consist of a single horizontal gray  stripe with accents of pink lines and titles.

 

 

STRUCTURE

The site is broken from two to three grids. Every information is cleanly represented by using six headings. The h3 is colored in pink above the images of each section to follow the rest of the site’s design theme

 

 

NAVIGATION

The horizontal links turns pink when hovered on top of the navigation. The pink matches the other pink accents found on the page. a black bar is placed to the left to fill up the width of the content division. Information on each page again is broken into two to three columns.

 

 

JQUERY

The top division has a slideshow effect. This seems to be the only animation effect in the whole site. The effects made up of  group of unordered lists attached to a jquery script. Each of the images is titled and linked to sections inside the site.

 

 

TYPE 

The type choice seems to be regular and bold Arial. The top heading has a pink hover effect as seen in the navigations. The font is clean and easy to read, although I feel the h2 headings could have been designed to stand out more, rather just applying a bold look.

 

 

GRAPHICS

Having numerous colorful images can be very hard to place side by side in terms of  fighting for focal attention. I think it was a smart idea to have a white background and let the information of  the art clips stand on its own as the main design element. I believe the viewers get the gist of the illustrator and his ability/technique from the art clips, not so much the approach of the CSS/HTML.

 

My last exercise will cover interesting facts about sharks that the majority of people dont know about. Obviously I am going to primarily design using the color blue for the next few weeks. Other than the color scheme I would research lay outs and uses of texture from different sites that have close to the same subject as me.

Discovery Channels “Shark Week” website is the first source of research I came across. I knew after visiting the site that I wanted to design with a scenic background. Having an underwater image gives the Discovery site a tranquil feel that I think would compliment my subject matter too. Originally my first designs gave my subject matter a terrifying look which I had no intensions of, the scenery approach should give me the mood I was looking for.

 

On the same Discovery site was another site called Whale Wars, although the site deals with a different subject matter it still has elements that could strengthen my site. The water droplets and metal textures would give me an extra dimension to work with. Also portraying a scene in the background with action, not only am I now going to have a underwater background but images of movement with sharks as well.

 

With out any visual research I would assume my site would of looked like he Georgia Aquarium site (image above). Not that there is anything wrong with the design or functionality, but I feel like more could of been done to visually imapact the people visiting the site. I hope to strive for the visual difference between the Georgia Aquarium site and the SeaWorld (image on the bottom). The SeaWorld site looks like a collage of imagery, textures, and movement. It is obvious which one out of the two sites more effort and research was spent on.