Facing Illustrator’s New Tools

One of the more recent homework assignments for Humber’s Web Design, Development and Maintenance course delved into Illustrator’s newer tools. The class was tasked with creating face drawings of themselves using 3 primary skin tones in conjunction with the pen tool, blob brush, smooth tool, and shape builder tool. Using other elements like envelope distort, transparency, pattern brushes and more, we created flat illustrator images of ourselves that made for a fun project while learning various key concepts and techniques that would be used outside of class in a work environment.

Here are a few things i learned working on this project.

Pen Tool

Allows for creating vector shapes with either stroke (outline) or fills (the area inside the outline) or a combination of the two.

Blob Brush

Allows for joining of separate shapes into one shape. This allows you cut back on the amount of anchor points the pen draws and will lower your file sizes

Smooth Tool

Allows for smoothing out of rougher shaped angles or vector lines that may have been created, but not noticed earlier.

Envelope Distort

Allows a user to distort pattern fills inside a shape by dragging nodes similar to the gradient mesh function in order to give a more realistic appearance to fabric shaping.

Tranparency

Adjusting the transparency of a fill allows for creating shadow effects or just making the skin blend in and create a nicer tones overall.

Extra, Extra—Flash taken over by Edge Animate

There used to be a time when web ads and banners relied on Adobe Flash to create animation on web pages. This all changed later when Apple decided to drop Flash from its mobile and tablet devices. At the time I remember the reason from Apple was that flash allowed their devices to be left open for hackers to cause all kinds of mayhem. Flash is still a viable program today, it’s just used in different ways, like creating presentations similar to PowerPoint or used in interactive kiosks to pass on information to users.

The heir to the Flash throne seems to be Adobe Edge Animate. Able to create ads in HTML5 using Javascript, it picks up where it’s predecessor left off. The interface of Edge Animate is similar to Flash, you have a timeline and stage and use keyframes in order to animate your assets.

Users can create simple shapes with text, group the two and assign the object functions in order to create clickable buttons or other functional html objects.

You can view my ad here to get an example of a finished HTML5 ad created by Adobe Edge Animate.

Web Typography

This week’s class on Vector and Motion Graphics was an exercise on Web Typography. One of the things discussed was the use of typography and how in order to have a harmony of type on your page, you should either have contrasting font families or use variants of the same font. By the former, i mean that you might want to consider a Sans serif font for your display font and a serif font for your body text. The other rule would be to use variants from the same font family within your document. So, for example, you could use bold, normal, thin, oblique as well as other typeface variants within the same family to achieve cohesion in font style in your document.

One thing to avoid is the use of different font families that appear too similar within the same document. The result is that although the font may look a bit similar, it gives the reader enough pause to see that something is off and shouldn’t be so close one letterform to another within the same document.

Additionally, we were taught about kerning, tracking and line-spacing and how the three come together to form better type. Using google fonts as part of our assignment, it becomes clear rather quickly that some larger google display fonts really need to be kerned at larger sizes. Even at medium sizes, display fonts can benefit from kerning. As I began to go through my document, it became apparent that some lines would need to have their tracking adjusted in order to fix up rivers that occurred in the document and also the occasional widow that could occur.

We also learned about  “::selection” in CSS and how you can control the look of your selected text. I tried to bring together colour and type to form a cohesive whole in terms of design. I think overall for learning web type from scratch as opposed to the printed form, it turned out pretty well.

You can view the end result here.

MARRS NEEDS WOMEN

That was one of the lines used in the 80’s song “Pump Up The Volume” and was also used in my recent homework assignment for Front End Development. We were learning about multi-column design with the 960 grid and how to divide the 960 grid into columns to have a more presentable appearance and have objects align for a more cohesive and standardized appearance.

The concept is that each column added into your layout should have 10 pixels of margin and padding. The combination of your columns must equal to 960px to fit the wrapper’s width. The column widths are written as classes in your CSS. (ex –  .col13 { width: 280px, margin:10px, padding: 10px  }. Float your columns left and at the end of each row of content, apply a clear of “both” to start fresh content on a new line.

If you have a row of 2 columns, the two columns would each have a width of 440 pixels.
( [10 pixels margin] [10 pixels padding] [440 pixel column] [10 pixels margin] [10 pixels padding] X2) = 960px

if you have a row of 3 columns, the three columns would each have a width of 280 pixels.
( [10 pixels margin] [10 pixels padding] [280 pixel column] [10 pixels margin] [10 pixels padding] X3) = 960px

So, by these rules, the end columns in your layout would also contain 10 pixels on the side that act as a sort of indent/inset for your layout. But if you don’t want that, or you decided for example that you wanted a coloured background behind your columns, what would you do? Well, we learned that you would have to have nested columns or divs contained one inside the other.

So for example, you would need a main container with a width of 960 pixels that has no margin or no padding on its width. After you have the container div, you would insert your column div content inside that main div, taking into account that if you want the background to appear, you need to have those inserted divs have the mentioned margins and padding as above. the main container div has a background color applied to it that creates the colour behind your floating columns.

(ex. <your main container div with a width of 960 with no margin and no padding on its width><Your nested columns go in here that have 10px margin and padding on right and 10px margin and padding on the left.><your close tag for your main container div>).

Think Russian nesting dolls and you get the idea.

The multi-column grid with its set widths margins and padding is a great way to keep your items lined up  in columns as well as providing a good framework for your layout so items like images line up and your design looks simple and clean.

You can see the online version here and  listen to some tracks by Colourbox and A.R. Kane.

Not too chicken to take up the challenge

This Friday, during our class with our Web Prototyping teacher, we were faced with a surprise test. At the beginning of class, our instructor taught us how to create art-boards in Adobe Illustrator and how to manipulate them in order to later export the files as individual finished assets using a script file. AMAZING! I was hoping Illustrator had this type of functionality like photoshop and  with a script file, it is indeed possible. Thanks, Mark!

However, we were all thrown for a loop, and frankly i think most of the class felt like chickens running around with their heads cut off when we were tasked with taking a mock-up we were given and having to code it to being completed HTML files with CSS by the end of class. In addition to completion, we were to try to get it as close in appearance to the original file as possible.

Well, although it was difficult to do, i managed to finish relatively on time. You can see the finished file i completed here.

Well, i think it was a difficult, yet smart way for us students to realize our strengths and weaknesses. It allowed me to understand that i should look at styling forms a bit more as that was something that i found was throwing me off during the exercise.

It’s a Wrap

This Friday marked the end of our Web Fundamentals course. Known as “Composite Week”, we were given the assignment of creating a five page website that had to adhere to certain rules.

• The Initial designed site had to begin with sketches leading to wireframes and finally to finished mockups. mock-ups
• Set up a proper folder structure for the site (root folder, images folder, CSS folder, and JS folder)
• Write the HTML for your first page and make sure to have it validate through the W3C
• Make sure all images used were optimized for the web
• Style the CSS for the website
• test in as many browsers as possible and fix any errors.
• Duplicate the original page to use as the template for the other four pages
• Insert the content into the other web pages and ensure that they all validate as well
• Test the new pages and make sure that they all validate through the W3C validator
• Put our finished website online and make sure that it validates.

I decided to create a website for the Azores Genealogical Conference that occurs annually in Salt Lake City, Utah. I received the content from Cheri Mello and was able to start on some rough sketched ideas.

I thought the imagery should centre around a likeable grandmotherly type, after all, if someone is researching and trying to find out about their history, wouldn’t you want to discover that your great grandparents were kind and cute ancestors? Looking around for the photo could have been a daunting task, going through various websites and trying to find a free photo that could be used for this purpose could take a while and we really only had about 3.5 days to finish this project. I decided to purchase the photo through Bigstock photos. Also, I could probably use a photo of a plane as well to indicate that travel for the conference might be available through specific airlines that fly to Salt Lake City.

The next step in the design process was to create wireframes for the project. Generally when designing wireframes, you should create a wireframe for each different sized web page as well as any pages that differ enough to require something that a client can see in order to get an idea about what you are trying to convey.

So, in this particular project we were asked to create a graceful degrading website that would scale from desktop to mobile. After the sketches, i began to create my wireframes using a 960 pixel grid for the 5 different desktop pages in my website. They were different enough that i felt it really should be done and presenting to the client, i’m sure that it was appreciated.

The next step was to create the same wireframes for mobile devices. In the actual coding of my site, i would have to tailor them a bit more using responsive design with media queries and adding a viewport meta tag into the head section of my html files.

The next step in the process of designing the website was to move to mockups of the wireframes. This process involves adding images, colour and other content onto the design and making it look as close to a finished project as possible. The wireframe process is used to give a general idea life, to show the client and receive feedback on the general positioning of element on specific pages and to see if the design aligning with their thoughts. The mockup is further down the road when you have received the ok to proceed and you are now ready to present to the client before beginning the actual coding of the project. At this point, you want to present the pages to the client in as close a resemblance to how we imagine the website to look as possible. The text for the site should be in place as well as the assets created for the project before presenting to the client and getting their feedback or ok in order to proceed.

I had to create some assets for the website in order to distinguish the seminars as well as to make the agenda page which was a bit dry and needed a bit of colour as well as something that made the event times a bit more interesting. I created some icons for both pages in Adobe Illustrator and was able to incorporate those into the Agenda and Seminar pages.

The last portion of the project was probably the most critical; coding was going to take a while. After using the 960 grid, it was a bit easier to figure out margins and padding for specific elements on the page and that certainly helped. However, moving into responsive design mode provided its own set of issues. Elements began to creep in that I had not thought would not pose a problem. the grandmotherly image in the header didn’t work well when scaling down and things elements shift and have to be reconfigured for smaller devices. Something that designers learn with time.

Overall the project was a challenge that I hope I was able to live up to. The webpage is online here, and although not entirely complete, I think for 3 days, the presenters of the Genealogical Conference of Salt Lake City will be very pleased.

—Mark, you can download the files for marking here.

School Calendar – Japanese Style

As we finish off our Web Fundamentals course, students are scrambling to finish off the last homework assignment for the course. We were asked to design a calendar with a theme and incorporate any holidays specific to that month. I chose to do a Japanese theme for the month of September in 2016. Besides having to locate a related font to match the theme, I had to research Japanese characters and how they’re displayed. The characters in the month were done in SVG format which i had never done before. The CSS flip has two versions of the day and one is hidden while the other displays. On a rollover, the two images switch out and rotate 180°, hiding one while displaying the other. I was able to simply switch out the typical image extension of .jpg or .png with the vectors and they all worked correctly.

I had thought from the beginning to do a roll-over effect with hovers on the background image inside a div, but i thought a CSS flip would look nicer. The coding for the two was completely different. I ended up having to create divs within all the td tags in a table and inserting the divs into those td’s and later use CSS styling to effect the flip and containers to rotate. a special thank you to David Walsh for providing an easier understanding of the CSS flip.

You can see the online calendar here.

You just got Schooled!

Recently at Humber’s Web Design, Development and Maintenance course, we studied html tables. Part of that lesson involved combining rows or columns through the use of “colspans”” or “rowspans.” By using these attributes we are able to combine rows or columns to create more aesthetic tables. Our homework assignment involved taking a painting by Piet Mondrian titled “Composition with Large Red Plane, Yellow, Black, Gray, and Blue” and building that painting using CSS styling, as well as HTML5 with colspans and rowspans.

“Art is not made for anybody and is, at the same time, for everybody.”

—Piet Mondrian

It’s hard to believe that something so iconic to this day was painted in the 1920’s. Mondrian’s paintings were unlike the other cubist or modern art styles of that time. The asymmetrical painting we recreated has a large red block and uses smaller blocks to help balance the rest of his canvas. Mondrian’s paintings, as well as his design concepts are studied by art students to this day.

It’s all Relative, or is it?

This week we studied about CSS positioning and learned about the different positioning methods to moving items on a page using CSS styling. We also looked at floating of content containers and touched upon drop down navigation menus. It seemed like the class was over just after we had begun. With homework looming this weekend it quickly became apparent that learning to code and get your html page to appear as you wanted it to requires good memory, keeping of good notes and a serious review of the tags we used in our in-class work.

I try to keep my CSS with good hidden notes in my code. I find it a good thing to constantly say to myself “Yes, but what does it do?” It’s difficult to try to understand sometimes what the different rules are targeting or doing. Keeping thorough notes allowed me to go back and see exactly how to target specific items within the different levels of a navigation menu and apply different attributes to the various levels of the menu.

Albert Einstein said that “We cannot solve our problems with the same thinking we used when we created them.” When your head is swimming because you have something that just isn’t working correctly, take a short break and come back to it with a fresh perspective. Something that is throwing your code off becomes difficult to discover when you’ve been looking at it for the last hour or so. You may discover the reason quickly when you come back and realize that you missed putting in a pound-key to make a rule have an ID selector rather than a Class selector, or that you missed placing a semicolon at the end of your rule and that was causing you to have code that just didn’t validate.