Presentation guidelines

Presentation Guidelines

lecturePresentation skills are essential in the creative field. You will have to sell your ideas to your teammates, boss and clients, over and over again. The more persuasive you are, the more successful you will be. Not everyone likes to speak in public: it usually helps if you stick to a “script” that you can rehearse ahead of time. Your presentation should be short and sweet, and it should explain your creative reasoning.

Remember that you will be graded for your presentation in this class.

What to Talk About

When presenting your work, talk about the following:
1) Who is your client and what kind of project it is
2) Who is your specific target audience
3) Who is your competition
4) What is your client’s current look and feel
5) What was the project’s goal
6) What is your solution
7) If you had concrete positive results, talk about it

Presentation Requirements

On presentation day, both in class and in the real world, use the following guidelines:
1) Dress for the occasion (business casual)
2) If the assignment is a redesign, show the original design, if possible.
3) Speak directly to the clients and present your design in a cohesive way
4) Each element of the design must be supported by explanation
5) Have knowledge of all aspects of your design so you can answer questions well
6) Do not focus on specific techniques unless really relevant or if asked

How Do I start?

1) Prepare, prepare, prepare.
2) Try videotaping yourself to see what you need to improve upon
3) Ask a friend to listen to your presentation
4) Try writing it down first, and then learn, so it sounds natural

Flexbox Articles

csstricks smashingFlexbox is really amazing: it allows for easy vertical centering, effortless responsive layouts, and  elements ordering independent from source order. However, as it is now, the implementation is spotty and it requires a mix of old and new syntax to work in all browsers. The flexbox layout module introduces many new properties, and it is easy to get confused at first. Css-tricks.com and smashingmagazine.com have a few comprehensive articles about the “magical” flexbox. Take the time to learn it, as it is the way we will create layouts in the future.

A comprehensive Guide to Flexbox
Using Flexbox
 Does Flexbox have a Performance Problem?
Flexible Box Layout Explained (2011)
Designing With Flexbox is As Easy As Pie

Smooth-scroll and Modernizr

The smooth-scroll js plug-in we have been using has a small issue with Modernizr. To make it work with Morenzr, you need to include new event, and include the $(document).ready function inside of it. The original answer can be found here. This is a sample code:

<script src="../js/modernizr.custom.29859.js"></script>

<script>
Modernizr.load([
{
load: [
‘../js/jquery-1.10.2.min.js’,
‘../js/toggle.js’,
‘../js/jquery.smooth-scroll.min.js’
],
complete:
        function(){
            $(document).ready(function(){
                $(‘li.pagenav a’).smoothScroll();
            });
  }
},
{
     // test for media query support, if not load respond.js
test : Modernizr.mq(‘only all’),
// If not, load the respond.js file
nope : ‘../js/respond.min.js’
}
]);
</script>

 

Previewing Type Sizes

tupeRelative font size is an essential part of designing responsive layout. It is, however, not always easy to picture just how big 3.375em really is in that specific font. Enter type-scale. It is a free tool that allows you to choose a web font, and visually show it at various em sizes. Quite handy!

Great Coding Resource

codropsJoshua, a previous student,  recommended this great site, Codrops. You can find articles, demos, tutorials and code sources. Check it out!

CSS Diner

css dinerIf you are looking for a way to test your CSS Greatness, look no further than CSS Diner. This simple app will test your knowledge of CSS selectors, from the most basic to the most complex. It is also a wonderful source for reviewing the most obscure selector and see how they work.

Nth of Type with a formula anyone?

Responsive Photo Galleries

Photo galleries are a very common feature in modern websites, but they may create problems when developing a responsive site. Lucky for us, though, there are many, excellent, galleries out there that, not only offer responsive features, but usually incorporate also touch events, such as swipes for images. bxSlider, PhotoswipeFresco and Galleria are four good ones. They are very easy to implement and seem to work on a variety of devices.

bx2  swipe2   fresco2  galleria

RWD Calculator

Screen Shot 2013-07-29 at 5.34.12 PMDo you hate math? You are not alone. Flexible grids are awesome, but if you are starting with a fixed-width comp, you need to convert all these values in percentage. Who had the time for that? Enter the Responsive Calculator. It will do the math for you, and provide the code necessary. It also applies the box-sizing:border-box if you like. No more excuses: be flexible my friend.

Wireframes

There are many, many different tools for wireframing. These below are two interesting ones: Moqups offers a free plan, while WRD Wireframes is completely free.

Screen Shot 2013-07-29 at 7.04.13 PM big_moqups

 

 

RWD Inspiration

There are many source of inspiration out there. These are two of the best known galleries of great responsive designs.

Screen Shot 2013-07-24 at 10.31.28 AMScreen Shot 2013-07-24 at 10.31.38 AM