Notes for Self

Just making notes on readings issued in class:

Defining text size across browsers should take user zooming into account, and thus different ways of defining text size have been examined and one found to be "better" than the others across the main browsing platforms.

In summary of the first reading (found here):

Defining text in pixels: works across Safari and Firefox however Internet Explorer and Opera do not resize (unless using page zoom which magnifies all content)

Defining text in ems: When rendered in browsers, original size (before text size change) is identical to pixel size. However, IE6 and IE7 (whilst resizing) show an excessive degree of change.

Defining text using base of percentage: Using a base 100% and defining em differences in body text (etc) works across browsers, and a less pronounced difference in IE 6 and 7.

Verdict: Define Text size using percentage, then define differences using em values.

Taking line height into consideration

Line height should be consistent despite size of text throughout document to maintain rhythm. Thus we need to find a line height that scales with the text (when users change the size of text as a whole - but not when text size varies as a result of em value changes made by web designer).

Defining line height by pixel:
Specifing a unit stops the line-height being changed by text size em value. However, it is not scaled in IE6 and IE7 - so the text becomes squished.

Defining line height by em:
Em values are scales consitently across browsers, except for a monospace glitch in Safari.

So the proposed solution is a conditional comment programmed into the CSS.

a syntax [if !IE] is ignored by Internet Explorer browsers, and by defining a font size in pixels in here, the Safari browser renders as pixels and glitch is solved.

Inspirational Webpage - Post 1

webpage at full screen size

I found this website when skimming some inspirational web pages and found this to be a possibly very useful way of keeping pages dynamic without annoying scrolling from side to side. It would be particularly useful for a website such as ImagineFx, which appears crowded and squished together - when a layout like this could keep the content at a focal point whilst retaining maneuverability.

webpage at half screen size

webpage at quarter screen size

Summary of Document 2

And straight into second one:

CSS Line-Height

Line height can be specified in CSS like in Indesign. The default is around 1-1.2 in browsers. This can be overrided with a property (line-height: 100%; etc). It can be specified by different units such as normal, inherit, percentage, length-value, unit-less value.

They can also be used with the font-size in the following format - 12px/normal - the first being font size the second being line height. Line height is inherited by the parent property - so even if the descendants all have different font sizes, the line height is the same as the parent unless otherwise specified.

The exception to this is if the line height is specified by the "normal" unit value - which calculates the lineheight depending on the individual specifications of the font-sizes. However, this doesn't allow for much control. The "number value" entered is timesed by the individual font sizes for each child and calculated separately.

Summary of CSS document 1

We've been asked to summarise two documents given in class, I find this to be a fantastic opportunity to retain information.

CSS Inheritance

HTML is like a family tree, it has an overall parent - the html language, and tags that are descendents of this element. An ancestor is an element closer to this core parent (such as the body tag). A descendent is all the elements within that tag. A parent tag is directly above one tag - and a child is the element directly below. Like families, there can be many siblings that share te same parent.

CSS tells browsers how to interpret information about a HTML page - keeping style and content in separate documents.
There are 5 components - the "selector" which defines a rule for one element on a html page under the same tag - such as "p" - within the html document, any information within a

tag is effected by this rule. The declaration block contains the information about what and how the information will look. These changes in looks are defined by "property" values - the property to be effected is typed (such as color) and the value is the specific information (red).

Inheritance is when property values effects descendents of a tree. CSS allows a certain siblings to be effected and not others, by targeting these by creating a branch finder (specifiying a parent then child before the declaration block). However, only specific property's are inherited - some such as borders are not, as they would create borders within borders and make a gigantic mess - as the coder would have to specify that only the outer

tag is to be effected, by writing code to turn off the property for all the descendants underneath.

This can be used efficiently by making a general rule (property value) for a parent which would be inherited by the descendents. You can specify a specific child under that, and make an overriding rule for that child only.

---

Yes this is a very long summary, however I can't help but feel that the document I was summarizing off was already summarized... All of the information was extremely helpful. So for my own records and sanity I've written virtually everything in my own words - unfortunately messed up and confusing to some but I know what I'm getting at ;)

Other Media

I also found it interesting to look at the magazines when on other media - and see how well they adapt to the ipad. As a whole, it appears they don't use the full interactivity of the ipad - and appear to be merely copies of the magazines available on the ipad. Which can be a good thing, its cheap to do for one, however as these usually contain tutorials and interviews there are many more opportunities for video media to be displayed and integrated with the magazine, and also for the images to be displayed with or without information.

ImagineFx Spread

ImagineFx Cover

Digital Artist Spread

Digital Artist Cover

Digital Artist Spread

ComputerArts Cover

Analysing Its Art Mag

Navigation And Layout

The Its Art Magazine Website is very different to the other websites. The It's Art logo isn't displayed on the homepage anywhere. The top banner is a scroll through of major articles presented by the website. Underneath is a navigation bar, with minimalist social media icons. Underneath that is a third party banner, with an advertisement to join the It'sArt Facebook page tasked on the side. Underneath is a myriad of thumbnail images with information on roll over in varying sizes. The first group come under the heading "Gallery", the second "Videos" and the third "Tutorials". All the while, there is a bottom bar of social media icons, and interactions with the website.

For the remainder of the website, the layouts are inconsistent with little thought to layout and clarity.


Color

Color consists of white text on black or grey, there is also some blue gradients spread intermittently.

Typography

The descriptive text is clear to read however the navigation bar text could be more visible. The headings on the front page are crude and blend with the images behind.

Strengths

Looking at this website homepage it is immediately obvious that this is a website dedicated to showcasing digital art. The range and amount of images is impressive. The navigation bar is simple and efficient.

Weaknesses

The website isn't consistent, isn't easily navigated, and doesn't have a clear identity.

Analysing Digital Artist

Navigation And Layout

The digital artist website also has it's logo in the top left corner with an add right next to it. It has its login and register buttons above that on the left, and when selected make a drop down option where you can enter your details. In the same line, on the right hand side, it has the search bar. Below the logo is the navigation bar, with clear descriptions of pages (with drop down menus for select icons) and small, unobtrusive social media links next to it. There is also another, smaller navigation bar below that skipping to the products that the site sells.

Below this there are two columns. On the left, there is an image linked to the bar of "latest updates" located next to it - changing the image when your mouse rolls over the different links. Below this is the "Featured Images" with the add on feature of a slideshow. The image is also a link to the persons body of work. Below this is the "latest images" section, showing thumbnails of 15 images and a link to more. Below this is the image categories, (showing works of a specific technique), image genre (search by specific genres), editors choice and top rated galleries (links to specific galleries). Below this is another ad, and the very bottom of the page exhibits a series of related links and contact information.

On the right column is a sign up icon, with site statistics below, an ad, a bigger news and features feed, a twitter feed, a tips and tutorials feed and a resources feed.

When looking at another page, specifically the "about us" page, it appears poorly considered. There is an extremely long scroll with massive gaps of white between content. The layout is very different to the rest of the site, with different icon language and structure.

Color

Color consists of light grey text on black, white on blue and black on white. Also green and pink are used very sparingly.

There is inconsistency with color however. The navigation bar at the top keeps everything blue, however in the roll overs just below the headings change color. Some links are blue, some are in bold and some have a bar of color behind them. The headings change from white on black to black on white, and the colored splashes behind the type is inconsistent. There are also some green buttons.

Typography

Typography wise, there is a bigger distinction between sub-headings and content, however looking at the "above the fold" page, there is only one heading visible. and your eye has no type hierarchy to follow. Similar to the imaginefx page, the type on the ads stand out more than the type on the website itself.

Strengths

The page has more breathing space, with bigger gaps between boxes of content to create distinct separations between content/services. More images on front page create immediate understanding of what the website is about. Clear "About us" page, and unobtrusive social media icons.

Weaknesses

The page doesn't present a clear identity, and it isn't continues on to the other pages. It's positioning of elements isn't consistent with it's services and content. It attempts to use too many different drop down/pop up/roll over devices.

Analysing Computer Arts

Navigation And Layout

Computer Arts like the others has its logo on the top left, but also has a tag-line (which imagine-fx also has but digital artist doesn't). There is a search bar and log-in bar in the top right. Underneath is an ad, and under that a clear navigation bar. The page is then divided into two columns.

The first item in the left column scrolls through four of the latest articles, with roll over highlights. Just below it there are three columns of more of the latest feeds - each with image, title and very short description, all with roll-over highlights. These also have a small tab indicating what service the article is from - blog, tutorial, feature etc.

The right column has a small ad for subscribing to the mag, with social media icons elegantly placed below. Underneath is the newsletter tab, then another ad. A small block underneath shows a list of the "most popular" articles viewed. Underneath is an ad banner, and next to that the three major selling items of computerarts - unfortunately appearing as another banner themselves. Tucked under these ads is the "popular tags" box, with facebook and twitter boxes under that.

A contact us, other information sections and about us links are placed very simply down the bottom of the page, and do not draw unnecessary attention to themselves.

Color

Color consists of black text on white background, with minimal amounts of white text on pink.


Typography

There are clear headings for each of the articles, but these are bigger and more attention grabbing then the division headings. In this instance, where the articles don't necessarily need a heading as this is self-explanatory, this is a good thing.


Strengths

Throughout the website the design is consistent, with color, type and similar layouts used throughout. The content is well framed, well positioned and clean. It has division space between items, and isn't cluttered. It is an engaging design with simple yet effective interactivity.

Weaknesses

Important information such as subscription and the three main products appear as ads and are generally ignored by the viewer.

Analysing ImagineFx

Looking at Navigation and Layout

The ImagineFx website has the logo clearly in the top left corner, with a clear navigation bar just below with a search bar located on this same line. There is a login box in upper most, right corner. Directly below these features is an advertisement, taking up the majority of the line with a tiny imaginefx link squished next to it.

Under these the page is divided into three, unequal parts. The very left hand side shows an image of the current issue and a self-explanatory links directing you to the buying page. Just below is a list of quick-links providing links to the main features of the site. Below that are large, distracting links to social media sites, youtube pages and a link to signing up for their newsletters, all a similar size and shape.

The center column exhibits the hero image of the day - an important image that immediately gives you an impression of the magazine's content. Below is a featured artists tab with several small thumbnail images (giving you a taste of each artists' specialties). Below this is another advertisement and an imaginefx subscription offer. At the bottom of the column, there are four square tabs exhibiting enticing examples of the main website's services - interviews, workshops, reviews and fxpose.

The right column shows the imaginefx rss feed, with a scroll down option to read more. Below this is a forum tab, displaying the latest forum feeds.

And stuck on the side of the webpage, another ad.

The bottom clearly displays some of the site contact information.

Colour

Colour consists of white text on gold blocks, or black text on white and light grey blocks. Both allow for clear readability, and are used throughout the site.


Typography

Typography wise, there is no clear placement on the more important features of the website (besides the header). Text within/on images competes with the images, and clutters up the page. Headings on tabs are lost when placed on top of two toned backgrounds, and the links on the main navigation bar at the top are poorly kerned. The quick links on the left hand side aren't read as separately functioning links at first glance, although they are very useful by providing just a bit more information

Strengths

Throughout the website the design is consistent, with color, type and similar layouts used throughout. The content is generally well framed, and minimal scrolling is used.

Weaknesses

The layout is cluttered, with emphasis being placed on pieces like (imaginefx daily and forum), when people come on the website to look at images, workshops and tutorials primarily. The page itself being always to the left leaves an awkward amount of white when viewed at full size, and the advertisement sticking out to the right looks awkward. Also some imaginefx ads blend in when positioned awkwardly next to 3rd party ads.

Competition - An overview

I've chosen five competitors and should narrow it down for my analysis due this week, therefore I've decided to have a better look at these magazines and they're target markets - and select the four that are closer to ImagineFx in terms of which are "closer" competition wise, before I start analysing website designs. In the last post I managed to overlook examining what the ImagineFx magazine is, so will start there.

ImagineFX
ImagineFx is an internationally recognized digital painting magazine, that aims at displaying inspirational digital paintings from around the world, exhibiting both masters and up-and-coming artists. It also has a heavy emphasis on tutorials, and looking into the company's and top people and their working life, day-to-day routine, inspirations and work processes.

Digital Artist
Digital Artist is also an internationally recognized digital art magazine, that also looks at illustrations of varying aesthetic appearance. It is a younger magazine, with less "big name interviews", and has less of a focus on painting and more on the broad scope of illustrations available when using digital mediums. It also allows you to make your own gallery (same as ImagineFx)

Computer Arts
Computer arts magazine is another popular international digital art magazine that is older than both ImagineFx and Digital Artist. It covers everything from manipulating photographs with Photoshop to creating amazing vector illustrations with Illustrator - very similar to Digital Artist in regards of content. However it also looks into typography, design and layout, branding, some animation and gives industry advice across the board. It doesn't have the ability to post your own work however.

2D Artist
2D artist is a digital copy only magazine that shows industry works and tutorials. The major difference here is that it doesn't exhibit up-and-coming works, and like computer arts, doesn't have allow you to post your own works. It also doesn't have any of the interactivity that these other websites have - it is purely about the magazine - buying back issues and subscribing.

3x3
3x3 is a contemporary illustration magazine, published in the US and sold around the world. It exhibits the top industry workers, but is only published three times in a year. It shows a very wide variety of illustration aesthetics - although it is similar to 2D artist in that the website is very limited - to only back issues and subscribing. It does however have a blog and an expensive application process to get your work judged to enter the magazine's esteemed content - on the whole, the most different magazine by far.

Illustration
Illustration magazine is devoted to the history of American illustration art. It also shows works about popular culture, commercial art and design, publishing history, comic books, paperbacks or pulp magazines. However, it is more of a collection of older art and has no tutorials or any real opportunity for reader contribution (like 3 x 3).


After looking at the last two magazines, I realised they were poor comparisons to Imaginefx, and weren't real competitors, so I re-looked at the short-list of runners up and decided to look at Its Art Mag.

Its Art Mag
This is an online free newsletter exhibing tutorials, interviews and galleries of 2D, 3D and Animations. It allows users to post there stuff to the website as well (like Imaginefx). However, it has a very different look that I would like to examine in contrast to these other magazines.

Magazine Assignment

For this assignment, I'll be looking at the magazine ImagineFx, and their website. I have had a subscription to the magazine for over a year, however I haven't used the resources available on the website, and questioned myself as to why.

The ImagineFx Website is used generally to:

• host portfolios, and thus get your work seen by like-minded people in the community,
• receive comments about your work,
• discuss topics, tricks and ideas,
  
• see selected/sample workshops, interviews and reviews from the magazine and
  
• participate in competitions.

Imaginefx Website

ImagineFx Magazine and CD

Other competitor magazines that I shall be assessing include:
Digital Artist Daily
Computer Arts
2D Artist Mag
3x3 Mag
Illustration