Faculty Guide line for Graphics, Exercises of Computer Graphics

Download Faculty Guide line for Graphics and more Exercises Computer Graphics in PDF only on Docsity!

Whistling Woods

International

MEV02-

Design, Graphics and

Layout II

Facilitator Guide

MEV02-122: Design, Graphics and Layout II

This course introduces students to the elements of design involved on Digital Newspaper and Magazine

Layouts. It teaches students how to create and maintain a webpage, the software involved, and the

essential elements of webpage design and layout.

Session 1: Digital Newspaper Layouts

This session starts with understanding of Digital Newspaper

Session Plan

Session 1: Digital Newspaper Layouts

Total Time: 3 Hours

Topic

Objectives Time In

Minutes

Introductory session Smartphones, tablets, and even our computers have

allowed readers to access most of their news from

sources online. Do you agree? Start the session with

this question and make the learners participate.

15 Minutes

Newspaper Website

Layout: Characteristics

1. Black on White

2. Minimal Graphics

3. Grid-based Design or Multi-column Layout

4. Headlines and Excerpts

5. Primary and Secondary Content

6. Intuitive and Consistent Navigation

7. Categorization

8. Space for Advertisement

9. Functional Sidebar

10. White Space Maximization

11. Frequent Content Updates

12. Social Sharing Encouraged

140 Minutes

Summary Summarize the Learning Points 30 Minutes

It is true that “well designed grid systems can make your designs not only more beautiful and legible, but more usable” (Mark Boulton). The grid-based layout allows you to break the content into comprehensive blocks; thereby engage users to read your website not skim.

Similar but not the same is multi-column layout. These should be a few columns of a right height, but not necessarily the same width. The wider the columns are, the more readable the text is. Two columns can make great look, though three and more are definitely better. The columns, as grid, help to differentiate the content, make it easier for users to find an interested section. While, going for this style of layout you shouldn’t forget about the column gap. The website will be extremely hard to read, if the columns are too tight to each other.

4. Headlines and Excerpts

Do you want to open each post and read it when you enter a website or blog with many texts? Headlines help us to differentiate interesting article from the secondary one. So, each content block needs to be entitled. Whether it is a small section on a grid or a full-height column, it should have a headline. The headline is to be of a bigger font, typed in bold or highlighted with a different color. This point is clear, I suggest.

Excerpts are short descriptions of the text articles. These are always done to raise readers’ interest and give them an understanding of a long text in a few sentences. This element is useful, if you run a blog, online periodical, news website, etc.

5. Primary and Secondary Content

Draw a borderline between the parts of your content. Define what is the most important and which texts can wait to be read. For example, you can design your front page with a large header section for new posts (one or a couple). This is a featured area with large images and graphics. The other content will be smaller and based on grid fractions. This makes a strong focus on the latest arrival and help to gain more social shares.

6. Intuitive and Consistent Navigation

Newspaper website layout is designed for content and this content must be easy-to-navigate. Consequently, the navigation menu is characterized by its simplicity, and right position.

The best position is a top page area, because this zone is the first to be mentioned and it always on the same place – just scroll up if you are at the bottom. In case, you love vertical navigation and can’t stop loving it – make your menu oriented vertically but do it on the left. We read from left to right and not vice versa, so the elements on the left fall into eye earlier than on the right.

Newspaper style websites share tons of texts, and they need to be reachable for users.

7. Categorization

Better use of categories is available within newspaper website layout the most. It refers to blogs particularly, and any other websites too. Most sites fail, because they have content purely organized. Categories are necessary if you post frequently and on diverse topics (e.g. news websites).

Divide your content into categories and display them either on a sidebar or on the navigation menu bar.

8. Space for Advertisement

How are you going to make money before your website become popular? Advertisement is how many website owners make rather big profits. Ad banners have to be placed not just somewhere but this position has to be defined exactly. The right places are sidebar, both left and right, Header or Footer. Promotion banners are often seen right in the middle of the text articles, but this point is controversial: it is good for you as a person who takes money for this, but these elements can also irritate your readership.

9. Functional Sidebar

Sidebar can feature not advertisements only, but content categories, recent content, search box, email newsletter bar, navigation, social sharing buttons, discounts/special offers, etc. Newspaper website layout is great to implement sidebar on, because it would be just another column in the row.

There are a couple of ingredients of a successful sidebar design:

• Size (height and weight);
• Colors;
• Fonts;
• Placement.

A sidebar should be smaller or equal to the regular column on your layout, no way bigger. It should be kept in neutral colors, but with visible typography. The placement can be both left and right but as we already said everything on the left is seen immediately.

10. White Space Maximization

So far as we are creating a multi-functional website with impressive layout, we can’t but remember about white space. This is an essential component even for a newspaper style design. Let it be space between columns, empty sections from the sides or at the bottom. Users should have a chance to avert their eyes from the text wall and think over.

Generally, white space is considered to be a section where nothing is typed. There is a more narrow meaning: white space is between text lines and letters, around content elements. It is everything that makes your website more readable and simple, even though it is filled with an excessive number of content items.

11. Frequent Content Updates

Newspaper website layout obliges you to work on your project constantly. The website with many columns and grid sections being empty will look awkwardly. You need to fill the website thoroughly, and keep with the tendency to upgrade the content regularly, make your publications frequent and change the featured content in the Header (or wherever you do it).

Content and frequency is a couple, like king and queen. Besides the website look itself, frequent content effects on your results in search engines. People visit your website rarely, if it is out-dated, and Google sees it. So, your content gains worse scores in search results.

12. Social Sharing Encouraged

Blogs and news sites are the most common to use newspaper style, and these websites can’t exist without social media integration. It’s the epoch of mass sharing, and social networks are where people spend much of their time. You should use cool follow and share buttons for each network: Twitter, Facebook, Google+, Pinterest, LinkedIn, etc. The only caution: don’t use the accounts you abandoned, use just those you post on oftentimes. Create these buttons the most visible on the website to ensure yourself a better visual exposure on the media platforms.

One more thing we would like to mention about the peculiarities of newspaper website layout is the responsiveness. This layout will never remain the same on mobile devices, and there is no way to make a mobile version keeping it in a newspaper style. Mobile website should not have a multi-column content arrangement, and this is a must for newspaper web design. A mobile website can’t have sidebars. And it is better to reconsider the navigation, because it is more useful to make your mobile site scrollable instead of clickable.

30 minutes Summarize the learning points

constituting reader’s path.

Summary, QA and

discussion

Summarize and discuss some of the vital points 15 Minutes

Time

Content

15 Minutes Introductory Session

Faculty Guide

The best way to explain this topic by way of showing some examples of Layouts, so this gets registered in their mind.

30 minutes Digital Magazine Layouts

As print magazine newsstand sales and subscriptions are declining, magazine publishers are looking for new opportunities to reach readers. Contrary to print media environments digital publications no longer depend on print production constraints—neither in volume nor publishing frequency. Still, traditional publishers are accustomed to print legacy workflows that significantly impede innovation. Magazine publishers, specially the small ones, blame software tools vendors for setting high production costs and highly regulated distribution ecosystem. It is also easy to assume that slow digital magazine market adoption relates to publisher's fear of losing money in uncertain markets. However, new breed of publishers emerge without intention to print considering tablets as the main distribution channel.

More people are now getting news on cell phones, tablets or other mobile platforms—on the rise of social media sites digital news already surpassed newspapers (and radio). In January 27 2010 Steve Jobs introduces the first iPad which is considered as a revolutionary device that finally would serve digital magazine purposes connecting “ users with their apps and content in a much more intimate, intuitive and fun way than ever before”. Meanwhile, digital magazine publishing still experiences stagnation. According to AAM report digital replica editions hold only 24 % of the total magazine industry average circulation. Since digital magazine publishing is relatively new, there is not a lot of

academic research done. There are two studies found, related to the field—research on digital magazine layout aesthetics and design evaluation analysing differences between manual design and automated content aggregation. In this study general attention is paid to digital magazine format and layout disposition principles. Content entity structure and magazine consistency is analysed in order to assess its effect on usability.

60 minutes Digital magazine standards

Until the first Ipad was introduced by Steve Jobs, digital magazine definition implied digital version of print issue by providing access to contents on a remote server or delivered in a file format using email. Alliance for Audited Media (leading North America’s membership organisation of advertisers, advertising agencies and content providers) qualification standard states: “The label “Digital Edition” is used to describe the distribution of a magazine's content via electronic means. The digital edition must maintain the same identity of the host publication by maintaining the same name/logotype characteristics.

After the first tablet computer had launched, Condé Nast, publishers of Wired magazine initiated the proposal to revise digital magazine definition. In March 16 2010, Alliance for Audited.

Media presented new standards stating that a replica digital edition must include a print edition’s full editorial content and advertising, but it no longer needs to be presented in a layout identical to the print version. As a result publishers could start reporting also tablet distribution averages and mobile application purchases.

Since digital magazine production has print publishing origins, AAM has developed standards for digital replica magazines. Although guidelines strongly encourage to take advantage of new technologies, there is still noticeable restrictions regarding the content. To qualify and, therefore, to be admitted to submit circulation reports digital replica magazine has to meet several criteria. “A digital replica edition must include the print edition’s full editorial content, including photography. In addition, any advertiser appearing in the print edition must have the opportunity to appear in the digital replica edition. The layout may be reformatted to accommodate different delivery devices.

60 Minutes Digital magazine format

Digital magazine format in the context of this study is a collection of characteristics of logical and physical content units within the structure constituting reader’s path. (Figure 1)

CONTENT ENTITY (quote, text column, picture, video)

Framework

Structure (path interaction)

Entity

Session 3: Webpage Design and Layout

This session we cover study of Webpage Design and Layout

Session Plan

Session 3: Webpage Design and Layout

Total Time: 3 Hours

Topic Objectives Time In Minutes

Introductory Session What do you think which will attract more audience?

Web Design or Web Layout. Ask this question and make the

learners participate.

15 minutes

Webpage Design and

Layout

There are two primary jobs involved in creating a website:

• The web designer and web developer, who often work

closely together on a website.

40 Minutes

Tools and technologies Web designers use both vector and raster graphics editors to

create web-formatted imagery or design prototypes.

Technologies used to create websites include W3C standards

like HTML and CSS, which can be hand-coded or generated by

WYSIWYG editing software.

40 minutes

Page layout Part of the user interface design is affected by the quality of the

page layout. For example, a designer may consider whether the

site's page layout should remain consistent on different pages

when designing the layout. Page pixel width may also be

considered vital for aligning objects in the layout design. The

most popular fixed-width websites generally have the same set

width to match the current most popular browser window, at the

current most popular screen resolution, on the current most

popular monitor size. Most pages are also center-aligned for

concerns of aesthetics on larger screens.

60 minutes

Summary Summarize the learning points 30 minutes

Time

Content

15 Minutes Introductory Session

Faculty Guide The best way to impart this session is to make learners aware about the difference

between web designer and developer and various tools used by them.

40 minutes Webpage Design and Layout

There are two primary jobs involved in creating a website:

• The web designer and web developer, who often work closely together on a website,

The web designers are responsible for the visual aspect, which includes the layout, coloring and typography of a web page.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark-up then they are also expected to be up to date with web accessibility guidelines.

Although web design has a fairly recent history, it can be linked to other areas such as graphic design. However, web design can also be seen from a technological standpoint. It has become a large part of people’s everyday lives. It is hard to imagine the Internet without animated graphics, different styles of typography, background, and music.

40 minutes Tools and technologies

Web designers use a variety of different tools depending on what part of the production process they are involved in. These tools are updated over time by newer standards and software but the principles behind them remain the same. Web designers use both vector and raster graphics editors to create web-formatted imagery or design prototypes. Technologies used to create websites include W3C standards like HTML and CSS, which can be hand-coded or generated by WYSIWYG editing software. Other tools web designers might use include mark up validators and other testing tools for usability and accessibility to ensure their websites meet web accessibility guidelines.

60 minutes Page layout

Part of the user interface design is affected by the quality of the page layout. For example, a designer may consider whether the site's page layout should remain consistent on different pages when designing the layout. Page pixel width may also be considered vital for aligning objects in the layout design. The most popular fixed-width websites generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size. Most pages are also center-aligned for concerns of aesthetics on larger screens.

Steps to the perfect

website layout

1. Define what success means
2. Put your thoughts on paper first
3. Start sketching a top-level framework
4. Add a grid
5. Choose your typography
6. Select your colour theme
7. Divide the layout
8. Rethink the established
9. Think in motion
10. Prototype, prototype, prototype
11. Challenge yourself
12. Pay attention to the details
13. Refine every component
14. Sharpen your work
15. Tidy up your design files
16. Design the best case; prepare for the worst
17. Obsess over the design until you hate it
18. Share designs with clients early on
19. Be your developer's best friend
20. Present things as clearly as possible
21. Don't get too attached to your ideas
22. Follow your design into development
23. Show your work in progress

110 Minutes

Summary Summarize the learning points 15 Minutes

Time

Content

30 Minutes Static websites

A static website stores a unique file for every page of a static website. Each time that page is requested, the same content is returned. This content is created once, during the design of the website. It is usually manually authored, although some sites use an automated creation process, similar to a dynamic website, whose results are stored long-term as completed pages. These automatically-created static sites became more popular around 2015, with generators such as Jekyll and Adobe Muse.

The benefits of a static website are that they were simpler to host, as their server only needed to serve static content, not execute server-side scripts. This required less server administration and had less chance of exposing security holes. They could also serve pages more quickly, on low- cost server hardware. These advantage became less important as cheap web hosting expanded to also offer dynamic features, and virtual servers offered high performance for short intervals at low cost.

Almost all websites have some static content, as supporting assets such as images and style sheets are usually static, even on a website with highly dynamic pages.

30 Minutes Dynamic websites

Dynamic websites are generated on the fly and use server-side technology to generate webpages. They typically extract their content from one or more back-end databases: some are database queries across a relational database to query a catalogue or to summarise numeric information, others may use a document database such as MongoDB or NoSQL to store larger units of content, such as blog posts or wiki articles.

In the design process, dynamic pages are often mocked-up or wire framed using static pages. The skillset needed to develop dynamic web pages is much broader than for static pages, involving server-side and database coding as well as client-side interface design. Even medium- sized dynamic projects are thus almost always a team effort.

When dynamic web pages first developed, they were typically coded directly in languages such as Perl, PHP or ASP. Some of these, notably PHP and ASP, used a 'template' approach where a server-side page resembled the structure of the completed client-side page and data was inserted into places defined by 'tags'. This was a quicker means of development than coding in a purely procedural coding language such as Perl.

Both of these approaches have now been supplanted for many websites by higher-level application-focused tools such as content management systems. These build on top of general purpose coding platforms and assume that a website exists to offer content according to one of several well recognised models, such as a time-sequenced blog, a thematic magazine or news site, a wiki or a user forum. These tools make the implementation of such a site very easy, and a purely organisational and design-based task, without requiring any coding.

Editing the content itself (as well as the template page) can be done both by means of the site itself, and with the use of third-party software. The ability to edit all pages is provided only to a specific category of users (for example, administrators, or registered users). In some cases, anonymous users are allowed to edit certain web content, which is less frequent (for example, on forums - adding messages).

Faculty Guide Make learners aware about objective of website, audience for whom the website is been

developed, and the outcome of the website.

Exploring different typefaces and colours is part of the discovery phase of a project. I would recommend not using more than two different typefaces in a website, but it really depends on its nature. Overall, choose a font that is easy to read for big chunks of text, and be more playful with titles and calls to action. Don't be afraid of using big fonts and be creative and consistent when using typography.

06. Select your colour theme

During the process of choosing a set of typefaces, you should start exploring what colours you will use in the UI, backgrounds and text. I recommend using a limited set of colours and tones for the general user interface.

It's important to apply those consistently across the UI depending on the element's functionality. Think about the layout of sites like Facebook, Twitter, Quora and Vimeo. Besides the UI there shouldn't be any colour restriction for illustrations or graphic details, as long as they don't interfere with the functionality of the components.

07. Divide the layout

The simpler the structure of the site, the easier it is for users to navigate. Each section in your site needs to tell a story; it needs a reason and a final outcome for the user. The layout should help the content to highlight what are the most important pieces in that story.

In reality there shouldn't be too many calls to action on a page – everything should drive to that final 'What can I do here?' Think about the most simple layout you can imagine for a simple purpose and start adding components that are necessary. In the end you'll be surprised how hard is to keep it simple.

08. Rethink the established

Do we really need a search button anymore? In most cases the answer is no. As designers we shape the way users browse the internet, it's up to us to decide how many steps a simple action will take and how efficient our site will be.

Some conventions are there because they work, but some are there because no one spent enough time evaluating them. It's important to rethink the established interactive patterns of all components to see how we can improve them.

09. Think in motion

Motion is essential when designing interactive experiences. No design can be judged on its own or as a static comp anymore; every component is defined by its relationship with the system, and that relationship needs motion to be conveyed properly. Motion can illustrate dynamic effects on content or interactive states within your layout. For that second purpose I recommend taking your designs a bit further into prototyping.

10. Prototype, prototype, prototype

Prototyping is the best way to test interactions and technology. There are lots of prototyping tools that make it easy nowadays, and you don’t need to be a coding guru to create effective prototypes. This is yet another way you can get your client excited and on board with concepts

and ideas that would otherwise need a lot of explanation.

11. Challenge yourself

Every designer out there to challenge themselves on every project. Innovation isn't always a requirement for the project, so it's up to us to come up with something fresh. Examples of different challenges could include using a new grid system, creating a new component, or even minor challenges like avoiding blend modes or using a specific colour.

12. Pay attention to the details

This statement has been overused lately but it's not always visible in the final product. Depending on the concept behind the project, that 'attention to detail' can mean different things.

It could be a small interaction, an unexpected animation or an aesthetic touch like a little gradient in a button or a subtle stroke around a box in the background. But overall this touch is essential – and it will come naturally if you really enjoy what you do.

13. Refine every component

Treat every component as if it could be presented to a design contest. If you pay attention to every component, the whole will be more than the sum of its parts. I have to admit that this piece of advice is not mine. I heard it in the past at a previous agency and I was shocked by how clear and true this statement was.

Each component needs to be designed as it could stand alone as the best component ever. Sometimes designers leave certain parts of a site until last on their to-do list, and end up not showing them much respect.

14. Sharpen your work

To avoid blurry pixels, try to set the right contrast between strokes and background or background colours. Besides any aesthetic considerations, there are some common things that have to be avoided in order to create a clean and correct piece of work.

Some things you should be on the lookout for when trying to sharpen your work include gradients banding, blurry edges, font rendering options (some fonts, depending on their size are best viewed, on a specific render mode), and strokes that merge badly with the background.

These are just a few basic examples of issues to look for, but in reality the list is endless. Always look at your design as a whole to see if everything works well and then analyse each component individually more carefully.

15. Tidy up your design files

This (along with the use of a grid) is one of the most important pieces of advice, no matter what design tool you are using. Regardless of the size of the project and the number of designers working on it, you need to keep your files clean. This will make it easier to export different sections, to speed up the design process and to work collaboratively with other designers.

16. Design the best case; prepare for the worst

Bear in mind how your layout will work across different devices and screen sizes. As designers our job is to solve problems through different constraints. With web design, the constraints

coming up with something else. Don't forget that there is more than one solution.

22. Follow your design into development

If you work inside an agency you'll probably know how easy it is to find yourself struggling with the design of a new project when the previous one is being developed. Contrary to general belief, your work on a project doesn't end when the PSD and style sheet are delivered.

If you really care about your designs and interaction ideas being well executed, check in on your old best friends the developers from time to time, and help them as much as they need to ensure every little pixel is perfect.

23. Show your work in progress

As part of a community of designers, we all love to see not just the final results but also the work in progress. Sometimes the best part of a project is left out for several reasons and gets lost in your Archive folder.

Once the project is done and you get the approval from the client/producer promote it, and if possible create a case study with the work in progress and designs that didn't make it to the final release. You will be helping by contributing to the community's knowledge and you will get valuable feedback in return.

15 minutes Summary

Session 5: Webpage – What is a Webpage?

This session we cover understanding what is Web Page and its features.

Session Plan

Session 5: Webpage – What is a Webpage?

Total Time: 3 Hours

Topic Objectives Time In Minutes

Introductory Session What is the difference between a website and

webpage? Start the session with multi participation.

15 Minutes

Webpage – What is a

Webpage?

A website is a collection of related web pages,

including multimedia content, typically identified

with a common domain name, and published on at

least one web server.

A document which can be displayed in a web

browser such as Firefox, Google Chrome, Opera,

Microsoft Internet Explorer or Edge, or Apple's

Safari. These are also often called just "pages."

website. A collection of web pages which are

grouped together and usually connected together in

various ways.

In other way you can say that a web page or web

page is a document commonly written in HyperText

Markup Language (HTML) that is accessible

through the Internet or other network using an

Internet browser. A web page is accessed by entering

a URL address and may contain text, graphics, and

hyperlinks to other web pages and files.

80 minutes

What is the difference

between a website and

web page?

A website refers to a central location that contains more than one web page. For example, Computer Hope is considered a website, which includes thousands of different web pages, including this web page you are reading now.

80 Minutes

Summary Summarize the learning points 15 Minutes

Time

Content

Minutes

Introductory Session