Feb. 14, 2017 | Leave Request

Today I was gone because I had to cover a coaches press conference called Quarterback Club. For our local newspaper, we usually video record all news events like this so that the public can watch on our YouTube channel.

After finishing with recording, I take the video and edit the footage in Adobe Premiere Pro. Once I’ve finished, I then export it to YouTube. I don’t do much editing since it’s news, but I mainly just add a title intro as well as text informing the viewer who is speaking.

Advertisements

Feb. 13, 2017 | Lesson 2 (Learn Sketch: The Basics)

After finishing with setting up the layout for the large screen website, the smaller screens become easier to set up. It’s not simply rescaling to make each section smaller, however. I will have to do some layout adjustments for each section.

screen-shot-2017-02-24-at-2-13-37-pm

Now keeping my Layers panel organized into section will come in handy for the next part. To start, I selected the “header” folder then option+clicked and dragged the folder to my 768 artboard.

Then I started to make my first adjustments to the header section. Earlier, I talked about how this is more than just simply rescaling everything to be smaller and fit the artboard. For instance, I don’t want to rescaled my featured image, or the background graphic. So first, I just changed the width of the Mask (that holds the featured image) to 768.

I then selected the featured image in the Layers panel and scaled it down slightly so that only three of the ornaments showed, instead of five. I then changed the height of the Mask from 430 pixels to 300.

I then adjusted the position of the featured image slightly before moving onto adjusting the layout of the nav box.

First, I adjusted the logo’s width and height to 65 after checking the proportion lock was on. I then scaled the nav box to a width of 768 and a height of 130 pixels. The nav box is actually taller than it was in the large screen layout, and this is because I’m going to place the navigation symbol underneath the logo.

Before moving onto the next section, I’ll need to make adjustments to the hero element. First, I double-clicked on the text block and pressed command+a to select all the text. In the Inspector panel I changed the font size from 48 to 34 pixels. I’ll also change the line spacing to 32 pixels, then place this text to where it fits in the negative space.

Now that I’ve finished with the header section, I’ll move onto the main.

screen-shot-2017-02-24-at-2-26-39-pm

Now the other elements in each section, is going to depend a little more on the Layout grid, so before I bring the main section to the 768 artboard, I’m going to select the whole artboard and go to the View menu and click Show Layout.

Next, I went back to the View menu, and chose Layout Settings.

screen-shot-2017-02-24-at-2-28-16-pm

Now, the settings probably has everything set to fit the larger artboard I created in Lesson 1, so I have to make some adjustments to fit this smaller artboard. To start, I set the width to 728 and set the Offset to 20 pixels. I left the number of columns at 12, but changed the Gutter Width to 12. With adjustments in place, I clicked on OK.

I moved back to the 1200 artboard and option+clicked and dragged the “main” section to the 768 artboard in the Layers panel.

Obviously, I’m going to have to make some adjustments to this section, and I’m going to start with the icons I created in the previous lesson.

Selecting the Star icon, I’m going to click and drag this item till it fits center of the first four columns of my Layout. However, I dod want to have the icons be a little smaller on the 768 artboard. Making sure the proportion lock is on, I changed the width from 80 to 60 pixels.

I’ll use the same process for the Marker icon:

and Gear icon:

In the last image with the Gear icon next to the Marker, you can see that it is optically smaller than the marker and I don’t want that. The bounding box around the Gear is 60 x 60 pixels, but the Gear itself is smaller. I’m going to have to scale the Gear myself to make sure that it is roughly the same size as the Marker.

The oval inside the Gear is slightly off center as well, so to fix that I need to select both the Oval and the Polygon in the Layers panel then go to the Inspector panel and click on “Align Horizontally” and “Align Vertically.”

 

After placing all three icons, I also want to make sure that all are aligned horizontally to each other. I could use the Smart Guides for this, or I could select all then click “Align Horizontally.”

screen-shot-2017-02-24-at-2-41-29-pm

Next, I adjusted the positions of each text blocks to their corresponding icon starting with the “What’s Trending” text. By selecting the “What’s Trending” text then shift+clicking on the text block below and dragged both underneath the Star. Sometimes these will snap to the columns, but if it doesn’t just use the arrow keys because I want the left side of the box to align with the first column. I then clicked and dragged the right side of the bounding box to fit the four columns under the Star. I did this to all three of the texts.

Again, to make sure that all of these are aligned horizontally, I can use the Smart Guides, or select all and click “Align Horizontally in the Inspector panel.

Screen Shot 2017-02-24 at 2.47.14 PM.png

Before moving to the “atmosphere” section, I wanted to turn all three of these icons into symbols. The reason why I didn’t do this earlier is because any rescaling or transformation of the icon affects the icon in every artboard.  By using this version of the icon, any adjustments I make to the icons in later artboards will affect this one too.

Next, I brought the “atmosphere” section to the 768 artboard in the same way I did the previous two sections.

I first focused on the lounge photo, selecting the “lounge” folder in the Layers panel then scaling the image down till it was six column widths and placing it in the upper left-hand corner. I also tried to make sure the photo was equip distance from the top and left side of the orange box.

I then selected all the text blocks and dragged them into place before adjusting the width to also be six column widths.

I had to make some adjustments, starting with the heading. I didn’t want to change the font size since I had created a style sheet for this in the previous artboard, so chaining the font size would also affect that version.  Instead, I changed the line spacing to 35 which won’t affect the previous artboard since the heading is all on one line.

In my Layers panel, I selected the content text, the text for the button and the button rectangle, Then I used my arrow keys to move this down a little. After deselecting the content text, I used my arrow keys again to move the button box and button text down.

Finally, I changed the height of the “orange box” to 254 pixels before moving onto the next section.

Next I’m going to work with the “how to” section.

Screen Shot 2017-02-24 at 3.04.48 PM.png

I first selected the “seating” folder and moved it the upper left-hand corner then scaled it to two column widths. I then selected the heading, content and “Learn more” link and moved under the seating photo. I resized all of these text blocks at once to two column lengths (same as photo). I deselected the heading and text, and used my arrow keys to move the Learn more link down a little.

Rinse and repeat for the “lighting” image and content.

screen-shot-2017-02-24-at-3-10-36-pm

Before I moved on to the pull quote, I made sure each of these elements were horizontally aligned with each other.

I then selected all the pull quote elements and resized them to fit five column widths.

screen-shot-2017-02-24-at-3-11-31-pm

I selected the Author, Title, Company and used my arrow key to move it down before adjust each of the other elements till I had the “how to” section they way I wanted.

With all these sections complete, all I needed to do was move the footer section to the 768 artboard then adjust as needed to complete the medium screen layout.

Screen Shot 2017-02-24 at 3.19.54 PM.png

Feb. 10, 2017 | Lesson 1, pt. III (Learn Sketch: The Basics)

Today I will complete Lesson with this final part three of designing the “Everyday Things” website. To start this final part, I began with the atmosphere section.

Before I began, I wanted to turn on the Layout columns to help position the content. So I went to the View menu and clicked Show Layout. To make the columns lighter, I went back to the View menu and clicked Layout Settings. At the bottom of the Layout Settings menu you have the visual settings for the Layout guidelines. In the Color settings I clicked on Lighter and lightened the columns so that they were less visible, but still enough for me to be able to align my content to the columns or gutters.

Next, I went to the Insert panel, scrolled to Shape and selected Rectangle to click and drag out a rectangle under the main section that I created in the Part II. I dragged the section out to the full page width and 280 pixels tall. I deleted the Borders property before going to the Fill property and choosing my color swatch, using the Orange color I created in the Document Colors.

Now, with that item selected, I wanted to add another rectangle by going back to the Insert Panel. Going to about 20 to 30 pixels from the top of the original rectangle, I clicked and dragged another rectangle to be about six columns wide and about 20 to 30 pixels from the bottom.

I went back to the Insert panel, chose Image, and selected the lounge.jpg from the Exercise files. After opening the image, it will take up the entire artboard so I zoomed out so that I could scale the image down a little.

Once I had scaled the image down, I went to the Layers panel and right-clicked, or option-clicked, on the Rectangle and selected Mask. I then adjusted the image by scaling and repositioning it to how I wanted before moving on.

I moved my artboard further to the right of the image, and then went back to the Insert panel to select the Text tool. I clicked and dragged another six columns wide text block and typed “Creating a modern atmosphere. I set the font to Open Sans with bold weight and 32 pixels in size with a line spacing of 43.

After setting the alignment to left and clicking away from the text, I noticed that the text disappears. To fix this I simply went to the Layers panel and right-clicked (option-clicked) on the text and selected “Ignore Underlying Mask.” This allowed my text to be visible.

Once ensuring that my text aligns optically with the top of my image to the left, I went to Create New Shared Styles and titled this stile of the text “h2.”

To finish up my atmosphere section, I created another text block (six columns across) below the h2 heading. I then went to the placeholder.rtf file in the Exercise files and copied the text under the Main Section and pasted it into the text block.

Selecting all the text in that text field, I set the typeface to Open Sans with a Regular weight and 16 pixel font size. After setting the text properties, I created a new styles for the text and called it “body – reversed.”

Before organizing my Layers panel and moving onto the next section, I needed to create a button label underneath this heading and text. To do that, I simply went back to my “hero” section and selected the “Get advice…” text and the rectangle with a border, copied and pasted in the atmosphere section. After placing the button where I needed, I selected the text and typed “Learn more,” before making the bordered rectangle to fit the text.

Now, back to organizing my Layers panel. I first renamed the Rectangle with the orange fill and called it “orang box.” I then selected the lounge image and its rectangle and pressed command+g to put it in a group naming it “lounge.” Selecting everything in this section, including the orange box and lounge group, I put them in a group selection and named it “atmosphere.”

Next, I worked on my “How To” section starting with going to the Insert panel and selecting the Rectangle tool that is 320 pixels tall underneath the Atmosphere section. After placing the rectangle, I went to the fill property and set the Red to 238, Green to 233, and Blue to 218. I then deleted the Borders property before turn gin the Layout columns back on under the View menu.

Going back to the Insert panel, I used the Rectangle tool again to place a rectangle in the left-hand corner that is about 228 pixels wide (or 2 1/2 columns wide) and 130 pixels tall. I then went back to the Insert menu to select Image and place the seating.jpg in the Exercise  files on the artboard. After scaling the image down to about the same size as the Rectangle, I clicked selected the rectangle in the Layers panel and right-clicked (or option+clicked) and selected Mask. In the right-hand panel, I flipped the image horizontally before finishing with the image.

Next, I selected the Text tool and placed a text block underneath the image and typed “How To: Seating” Clicking away from the text field, the text disappears because the mask is applied to this as well. To fix that, I went to the Layers panel and right-clicked on the text and selected “Ignore Underlying Mask.” In the Typeface properties I chose Open Sans with a bold weight, and 16 font size with line spacing of 20. After selecting black as the font color, I chose the left-align for the text.

I placed another text block underneath the heading, and used the placeholder.rtf file to copy and paste the text under the How To section in the text field. I used Open Sans for the typeface with a Regular weight and 16 pixel font size. I also created a New Shared Styles and named it body.

To add another “How To…” I went to the Layers panel and selected all the items in the “How To: Seating” and copied these items with command+c and then pasted with command+v. Using Shift+click dragged this copy to the right about 100 pixels. Underneath the copy, I double-clicked on the heading and changed the “Seating” to “Lighting.”

Back in the Layers panel, I selected the second seating image and right-clicked on the image and chose “Replace Image…” in the Exercise files and chose lighting.jpg to replace the seating.jpg. Since the lighting image had the same horizontal flip applied, I clicked that again to set the image back to its original state.

I also wanted to add two “Learn more” buttons underneath both How To images. I set a text block underneath the “How To: Seating” and typed “Learn more.” I used the orange color swatch I created in the Document Colors to apply to the text before applying an underline to the text in the Options settings. I used Open Sans with a bold weight and 16 pixels for the font size with a line spacing of 20. Finally, I option+shift clicked and dragged the text to the right directly underneath the “How To: Lighting” image.

For the final touch of the “How to” section, I wanted to add a pull quote. I first used the Rectangle tool to place one to the right of “How To: Lighting” that was five columns wide. After changing the fill color to white, I added a text block to copy and paste the text from the placeholder.rtf file under the Main Section. I made the text color a dark grey before choosing Open Sans for the typeface with an Italic weight. I used 16 pixels for the font size with a left-alignment and the line spacing at 28.

I then added another text block to the right of the text and put a single quotation mark there. This time, I changed the typeface to Times and kept the Italic weight. I changed the font size to 90 pixels with a line spacing of 60. I then changed the color to have a Red of 210, Green of 187, and Blue of 105. I then used the arrow keys to optically align the quotation mark with the text.

Finally, I added the attribute with the Author name in bold, the Title in italic with the company name underneath before making some minor adjustments.

screen-shot-2017-02-23-at-1-52-11-pm

To keep the Layers panel organized, I selected every element in the how to section and grouping them together with command+g and naming the folder “how to.”

The final touch to the large screen webpage was the footer section. I started placing a text block in the white space underneath the how to section. I created a copyright text with option+g and typed “Everyday Things.” I then option+Shift clicked and dragged that to the right about 40 pixels and typed “Privacy Policy.” I did the same with “Terms of Service.” The only difference between these two and “Everyday Things” is that I put an underline for those two texts to signify a link.

To finish, I wanted to create a symbol for all three of these text blocks. To that I selected them individually and clicked on the “Create Symbol” icon in the toolbar. I then renamed each symbol to correspond to their function before grouping them into a folder called “footer.”

Now, the large web screen layout is complete!

screen-shot-2017-02-23-at-2-02-16-pm

Feb. 8, 2017 | Lesson 1, pt. II (Learn Sketch: The Basics)

In part two of this first lesson I started with creating the logo using the type tools from Sketch. Again, for the sake of consistency with the video, I used Open Sans from Google fonts. To start, I clicked on Insert and chose Text before going to the white space underneath the background graphic to click and drag out a large text block.

I typed out “Everyday Things” in all caps and changed the font color to black so that I could see the text on the white space. I used the condensed version of the Open Sans typeface and changed the font size to 55 with the line spacing to 37 so that the text would have a little bit of an overlap.

I then made sure that the text was selected in the Layers panel and went to the Layers menu to convert the text to outlines by choosing “Convert to Outlines.” In the Layers panel, you could now see each individual layer with its own path. However, the logo now had some issues that I would need to fix with some white space showing on the overlapped text.

To do this I would need to unite both the overlapping paths by selecting the “Union” operation in the toolbar. However, simply selecting both paths then clicking the Union icon would not fix this issue. To do this, I first focused on the first “E” in “Everyday” and the “T” in “Things.” I renamed the both to their respective letter, then moved the “T” layer all the way next to the “E.”

After both layers are next to each other, I selected both layers then clicked the Union icon so that the two layers would merge.

I repeated this process for every letter, making sure that the two letters I was merging were next to each other in the layers panel.

screen-shot-2017-02-22-at-4-13-34-am

With that finished, I dragged the logo to the background graphic next to the nav bar. I then changed the fill of the text back to white. After, I made some adjustments to the nav bar.

Finally, to continue keeping my Layers panel organized, I selected everything and grouped it into a “header” folder.

After, I started working on the section of web design by creating individual icons by using the drawing tools. The first two icons I created were the start and the marker.

I went to the Insert panel, scrolled down to Shape and selected Star. I then shift-clicked and dragged a star in the white space until the shape was 80 x 80 pixels. After creating the star, I unchecked the Fill box then went to the Borders property to make some color adjustments. In the RGB numbers I changed the “R” to 203, the “G” to 101, and the “B” to 55 to get an orange color for the border of the star.

To make sure that I could use that same shade of orange, I went to the Document Colors and added a new preset.

I then upped the border thickness to three before clicking on the settings of the Borders property and setting the “Joins” to rounded corners for the points. Before finishing with the star, I created a “New Shared Style” and called it “icon – border” so that I could use the same styles for my other icons.

After finishing with the star, I then moved onto creating the marker icon starting with the Insert panel, scrolling to Shape and choosing Oval. I shift-clicked and dragged the oval out to 80 x 80 pixels as I did with the star. With the Oval selected I went to my Shared Styles and selected the “icon – border” that I created with the star.

I then option-clicked on the oval to create a copy of the oval before changing the width and height to 25 x 25 pixels and centering the smaller oval in the original.

I then double clicked on the outside oval to enter the Bezier Curve editing mode and now I have a pen tool that can be used to manipulate certain segments of the oval. Before using the pen tool, however, with the bottom most point selected I changed that “Y” position by adding 20 more pixels from 614 to 634 pixels. With the bottom part of the oval elongated, I manipulated it into a point with a slight in curve by command-clicking on the handles. With the marker icon how I wanted, I scaled the icon to the same size of the star.

After finishing the marker icon, I then went to the Layers panel to place both the marker and the star into their own folder to keep them organized.

screen-shot-2017-02-22-at-4-49-23-am

Then to the final icon. The gear. This time in the Insert panel, I chose the Polygon shape to begin the Gear. After choosing the shape, I shift-clicked and dragged out the polygon till it was 80 x 80 pixels before applying the “icon – border” styles to the object. After I upped the sides of the polygon from 5 to 24.

To help create the gear icon, I created an oval shape by going to the Insert panel. After applying the “icon – border” styles again to the object, I made the oval 58 x 58 pixels and centered it in the polygon.

To create the gear, I clicked on the top most point and dragged it into the center oval. I then went three points to the right and dragged that third point to the oval as well. I continued this process until I was finished.

To finish, I selected the inner oval and changed the dimension to 25 x 25 pixels before centering the oval. I then selected both and rotated the object 22 degrees so that one of the tooth of the gear was at the top. After finishing, I made a group selection of the oval and polygon in the Layers panel and labeled it “icon_gear” to keep my Layers panel organized.

I then began to create some content to the main section of the site by first showing some layout guidelines. In the toolbar, I chose “Show Layout” so that gray transparent columns showed on the page.

I then went back to the same toolbar icon to go to “Layout Settings…” and change the layout guideline settings so that they were evenly spaced across the page. I changed the Total Width to 1140 pixels and the Offset to 30 pixels.

Next, I went to the Insert panel to select Text and dragged out a text block that was four column lengths wide and typed “What’s Trending. I made sure the typeface was Open Sans with a bold weight and a font size of 22 pixels with a center alignment. Before moving on, I created a New Shared Styles call “h3”.

I dragged and dropped the Star icon until it was at the center of the four columns then did the same to the text I just created. I then created a new text block than spanned those same four columns then went to the Exercise files to select the placeholder text to copy and paste that text inside. I chose the Open Sans typeface with a Regular weight and 16 pixel size with a center alignment.

I then placed the marker icon and the gear icon at the center of their respective four columns. To make the next process faster, I selected both text blocks underneath the star icon and option-shift-clicked and dragged until there was one underneath the marker and the gear. The only thing I changed was the heading. For the marker I typed “Where to find it” and for the gear “Tools of the trade.”

Finally, to keep this organized, I went to the Layers panel and selected all three icon folder along the text blocks I just created and grouped them together in a folder called “main.”

Feb. 7, 2017 | Lesson 1 pt. I (Learn Sketch: The Basics)

Today I finally got to get started with the Sketch app, which is a design and layout tool and can can be used to design everything from logos and brand identity, to mobile application interfaces, to full fledged responsive website design. Understandably, this has become popular in the design community.

Now, Lesson 1 is long, so I have separated this into three parts so my blogs aren’t just as wordy.

After getting all the exercise files downloaded and ready to use, I started with the first video to open up the Sketch app to begin designing web interfaces.

screen-shot-2017-02-21-at-9-24-34-pm

Before jumping right into designing a website, I briefly went through some features of the application. Since I’ve mainly worked with Adobe software in my previous blogs, I’ve gone through setting up custom tool bars, and Sketch  does the same by right-clicking along the top toolbar and choosing “Customize Toolbar.” You, of course, can add or remove tools and customize this experience.

On the left side of the application you see where the pages are located and currently there is only one showing.

If I click on the icon to the right, it opens up all of the individual pages. Clicking on the plus sign will add more than one page. So now we have page one and page two, and I can click between the two of these. The section below the pages shows the dartboards and layers associated to the selected page.

So I went back to Page one, and the first thing I’m going to do is create a series of artboards. I clicked on the “Insert” menu that is right above the page sidebar and choose “Artboard.” With Artboard selected, I moved the cursor into the canvas area here and click and drag to create an artboard.

On the right-hand side is our Inspector panel. If the inspector panel isn’t visible, this can be turned on under the “View” menu. Go down here and check or uncheck the “Show Inspector.”

We see that this artboard in the image above is associated with page 1. If I click on page 2 there’s no artboard showing. To add an artboard to page 2, I did the same steps I did for page 1 with one exception. after choosing Artboard under the Insert menu, I went to the Inspector panel which shows a whole series of pre-determined artboards.

I can open Responsive Design, for example, and see  bunch of different sizes. Here, I’m going to click on “iOS Icons” and choose “120 – iPhone.”

These are some very brief review of the features offered in Sketch, but now I’m going to move on with the exercise to show how this application works as a design tool.

Now for this particular project, I’m going to use a single page and four different artboards. I first created four different sizes of a web layout to mock up what the responsive design stage should look like when our front-end developer codes the page.

To get started, I’m first going to delete Page 2 that I’ve created by right-clicking and choosing “Delete Page” then selecting Page 1. For the artboard already created on the page, I’m going to the Properties panel and chasing the width to 1200 pixels and click tab to change the height to 1350 pixels then click Return.

After zooming out so I can see the entire artboard, I’m going to change the name of the artboard to “1200” under Page 1. So, now I’ve created an artboard for a large screen, I’m going to create three additional sizes. One with the width of 768, another with the width of 600, and a final small size of 320 pixels.

To make this fast and efficient, I option-clicked on the “1200” artobard and drag about 80 pixels to the right of the first artboard. In the properties panel I fixed the width to 768 pixels with a height of 1200. I then did the same with my other two artboards and filling out the respective widths and heights.

Before I move on to the design portion, I’m going to save this document by clicking on “File” menu then choosing “Save.” I saved this to the Desktop and name the document “myWebDesign” with the file extension “.sketch” before clicking “Save.”

I started working on the large screen. The first thing I want to do is to bring the featured background graphic from the exercise files. To start this I have to draw a rectangle so I can clip the shape into the size that I want the heading area to be. To do this, I first need to go to the “Insert” menu and and scroll to “Shape” then choose “Rectangle.”

I clicked and drag from the top left corner then drag to the right, making the rectangle 430 pixels tall. Once it is in place, I should see them showing in the layers panel now.

Now to bring in the graphic. I went back to Insert, and choose image. I chose the photo from the exercise files and choose “featured.jpg” then click Open. When I bring an image in, the image is going to take up all of the available space if it’s large enough to encompass the entire artboard. Because the image is so large, I zoomed out then make sure the size is locked so that when I drag the corners the image will scale proportional. With this image I dragged the corners till the image is about 1800 pixels on the width.

Zooming back in, I’m to created a mask out of rectangle layer. I first selected rectangle layer I created earlier, then right-click and choose “Mask.” Now if I come up here and select the image, click and drag it around, it will not conform to the shape of that rectangle.

Then I went to the layers panel, select both the rectangle and featured image by shift-clicking. I right-clicked and choose “Group Selection to group these two layers together and name the group “featured_image.”

With the background graphic in place, next I worked on the navigation bar. To start, I added a semi-transparent black bar by clicking on Insert, scrolling down to Shape, and selecting Rectangle. Again, I clicked and dragged from the upper-left hand corner to the right, making the rectangle 110 pixels tall.

With that in place, I went the Inspector panel and first unchecked the borders. I then went to the Fill property and clicked on the color swatch and dragged the cursor all the way down and left for black. I then changed the Opacity to 65%.

Next I added some text for the navigation by first going to the Insert panel and choosing Text. I drew a text field in the white space. I typed in About Us, (and since there is no tab rule in Sketch, I’ll have to add six spaces with the space bar) Design Corner, Products and Contact Us.

In the Inspector panel, I was able to change the typeface. To stick with the video, I went to Google Fonts to download the typeset they used called Open Sans. After changing the typeface to that, I changed the size to 16 pixels and the line spacing to 20 (which in CSS would be line height). To contrast with the semi-transparent rectangle I created earlier for the navigation bar, I also changed the color of the font to white.

After finishing with those touches to the text, I dragged the text field up to the navigation board in the heading.

Before moving on from the navigation bar, I wanted to indicate which one of these items would have a menu item. To do that, I added a small triangle starting with the Insert menu, scrolled to Shape, and chose Triangle.

By shift-clicking and dragging I drew out the Triangle until it is 28 x 28 pixels. Before changing the width and height, I’m going to unlock the proportion lock and change the width to 13 pixels and the height to 7 pixels. I then dragged the triangle into place before setting the rotation to 180 degrees. I unchecked the Border property and change the Fill to 100% white.

With that triangle underneath the “Design Corner,” I held down shift and option key then clicked and dragged until the copied triangle was underneath the “P” in Products.

screen-shot-2017-02-21-at-11-28-45-pm

Once I finished with that, I went over to the layers panel to do some reorganizing. I renamed the Rectangle I created over the graphic image to “nav box.” I then selected the “About Us” and the triangles so that I could use this same layout for these items, the text and the triangles, for the “768” sized artboard.

In order to reuse this content, I used the “Create Symbol” located in the tool bar. After clicking on this, the selected is now grouped into a purple group as opposed to blue. I renamed that to “nav.”

screen-shot-2017-02-21-at-11-29-31-pm

Finally, for this part, I added a textbook and a button to the hero area over top of the background graphic. I chose the Text in the Insert menu, again, and dragged a text block in the negative space of the red.

Once that was in place, I typed in “Add interest with natural textures.” I used the Open Sans typeface in bold before setting the text size to 48, and line spacing to 44.

After I was finished placing that text block, I created another one for the button this time with the text reading “Get advice from designers.” I change the weight of the Open Sans to Regular and the size back down to 20 with the line spacing to 27. After, I positioned the text underneath the previous text block and then set the alignment to centered.

screen-shot-2017-02-21-at-11-43-47-pm

I then wanted to create a border around my last text, so I went to the Insert panel to choose Rectangle tool and clicked and dragged over the text making it 38 pixels tall. In the Fill property, I unchecked the box before making changes to the Borders property. I clicked the Color Swatch to make it white. I then clicked and dragged the border to fit around the text before dragging both to the position I wanted.

So now, with the button late and button border set up, I saved these as Styles, so I would be able to reuse them later.

Clicking on “Get advice from designers”, in the Properties panel, where it says “No Text Style,” I clicked on that. Choosing “Create New Text Style,” I gave it the name “button – label.”. I then sleeted the border and and did the same steps this time naming it “button – border.”

Sketch does not have the ability to create local overrides or use character styles. So the only time I want to actually create Text Styles or Object Styles is when I’m going to be using those particular settings for artwork that will be shared across layouts.

Before I finish with this, I went to the Layers panel, selected the rectangle, button label and the headline to group them together under the name of “hero.”

 

 

Feb. 6, 2017 | Lesson 4 (CSS Fundamentals)

When beginning to develop websites, you’ll find that you often do the same things over and over again when writing CSS. Browser inconsistencies, what type of layout styles to use, and what kind of typographic treatment will be used for the site are the minimum that needs to be dealt with. It would be advantageous to have a templating system in place to speed up  the process  of generating those styles.

This is where CSS frameworks comes into play.

screen-shot-2017-02-17-at-2-51-30-pm

There are a lot of different CSS frameworks available with a wide variety of features. The general rule of how CSS frameworks is most come with a style sheet that contains a base level set of styles. These will typically contain a CSS reset to account for browser styling, baseline rules for common elements, basic rules for structural elements,  and rules that help with browser inconsistencies.

From there, the framework might include styles for four and table-styling, styles to control the site’s typography, and a CSS grid for layout.

screen-shot-2017-02-17-at-2-53-10-pm

The below images show some important points that CSS grids can be used for:

screen-shot-2017-02-17-at-2-53-41-pmscreen-shot-2017-02-17-at-3-10-42-pm

Now, the choice to use a CSS framework is entirely up to you and your team. There are, of course, both pros and cons to using them. Below are some of the pros:

screen-shot-2017-02-17-at-2-58-27-pm

Basically, if you use them correctly, a quality framework can lower the amount of time that it takes to create sites and insure that you’re using styles that you know are gonna work.

But using CSS frameworks also has it’s drawbacks:

screen-shot-2017-02-17-at-3-00-00-pm

Now the last bullet point mentions that CSS framework relies on class styles, and those often look like this:

screen-shot-2017-02-17-at-3-00-11-pm

While this means something to the framework, it has no semantic bearing on your site. If you use a framework, be prepared to have class heavy, non-semantic markup throughout your site.

Here are some additional considerations that you should have before using CSS frameworks:

screen-shot-2017-02-17-at-3-01-29-pm

While you shouldn’t use CSS framework as a beginner, it can be a great way of learning how to write efficient cross-browser CSS. One of the best ways to see whether a CSS framework is right for you is to try it out.

Once you’ve developed a site or two with a framework, you’ll have a good feel for when they are appropriate and when they’re not. One of the more popular CSS frameworks is Bootstrap, which is probably the most popular framework available.

Screen Shot 2017-02-17 at 3.25.14 PM.png

It was developed by Twitter and then open-sourced as a front-end development tool. It’s responsive and contains a mixture of HTML, CSS and JavaScript files and resources.

Foundation is another powerful front-end development framework. It is full of features, responsive, mobile focused, has a powerful grid system and feature support for SaaS.

Screen Shot 2017-02-21 at 12.35.19 PM.png

Looking for something a little bit more minimal? check out Pure CSS from Yahoo. Pure is CSS only. It’s incredibly small and is modular.

Screen Shot 2017-02-21 at 12.40.20 PM.png

So you can take only the bits that you need. It features sample layouts, forms, buttons, tables and other popular components.

Base is another small HTML/CSS framework with and emphasis on responsive design and modular styles. Base requires you to use some command line tools to install and confiture. Being unfamiliar with those, it might take a little longer to get up and running.

screen-shot-2017-02-21-at-7-48-58-pm

Normalize.css isn’t exactly a framework per se, but it is an indispensable tool for most web designers. Normalize is a very robust CSS reset with an emphasis on cross-browser compliance.

screen-shot-2017-02-21-at-7-06-56-pm

It targets specific HTML elements that need cross-browser normalization and contains styles that ensure a consistent baseline experience for those elements.

Many frameworks use normalize.css as the starting point for their frameworks. So it’s something you should be aware of for your own projects regardless of whether you’re gonna use a framework or not. There are many other frameworks to research and experiment with as you explore whether CSS frameworks are right for projects or not.

 

 

 

 

Feb. 3, 2017 | Lesson 3 pt. four (CSS Fundamentals)

One of the benefits of using HTML and CSS to separate presentation and structure is the ability to present the same content in different ways to different devices. CSS allows this through the use of Media Types and Media Queries.

screen-shot-2017-02-10-at-1-41-09-pm

As the image shows below, this means that one set of styles can be sent to Screen devices and another set can be set to a printer just by specifying the correct media type.

screen-shot-2017-02-10-at-1-41-25-pm

This allows the change of the design of the site based on the contest of where it’s viewed, or restrict the use of certain media specific styles (like page breaks) to the device that understands them.

The most common syntax for declaring mediate types is actually part of HTML.

screen-shot-2017-02-10-at-1-41-58-pm

When using a link tag to link to an external style sheet, the Media Attribute can be used to specify which media type or types the styles apply to. Media types to @import blocks as well as @media blocks can also be applied.

screen-shot-2017-02-10-at-1-42-33-pm

At one time, CSS 2.1 specification listed 10 different media types. Now, I could go through them all, but I’m just going to show the list then go over the ones that are still implemented.

In the right image, all, print, screen and speech are highlighted. Very briefly, “all” tells all user agents to apply the styles. Print is for printers. Screen is for screen-based devices. and speech is for speech synthesizers, such as screen readers.

To further control how styles are applied based on devices we turn to Media Queries and Media Features.

screen-shot-2017-02-10-at-1-44-12-pm

To dig into media queries a little deeper, we’ll take a look the syntax.

screen-shot-2017-02-10-at-1-46-18-pm

The second line is where we’ll focus beginning with the optional “only” or “not” keywords to filter media queries.

“Only” is simply used to filter out media queries from being applied by non-supporting devices. Conforming agents are just told to ignore it, so you’re only going to use it if you’re trying to hide the media query styles from older browsers.

The “not” keyword negates the entire media query. So, the styles would apply to devices that do not meet query expression.

screen-shot-2017-02-10-at-1-46-27-pm

From there, you move on to declaring a Media Type such as “screen” or “print.” You can then use the “and” keyword to add as many expressions as you’d like. These expressions allow you to check for certain media features and even allow you to check for a range of values.

screen-shot-2017-02-10-at-1-47-30-pmscreen-shot-2017-02-10-at-1-47-45-pm

Using media features to filter when styles are applied gives us more flexibility in targeting devices. Rather than targeting a specific type of device, we simply target whether a feature is supported or not. There are a wide range of media features currently available and more are being added.

These are grouped in categories based on screen dimensions, display quality, color, user interaction, environmental and scripting.

Screen Shot 2017-02-10 at 1.48.39 PM.png

On certain media features, like width or height, you can add a minimum and maximum pre-fix to set upper or lower limits on those values. Below is an image  of an example of syntax to see how media queries might be used in action.

screen-shot-2017-02-10-at-1-49-37-pm

What the syntax above is communicating is this media query is to be applied if the media device type is “screen” and the max width of the screen is “480 pixels”. This is ideal when targeting mobile devices for smaller screens as it would limit these styles from being applied unless those conditions were met.

 

Media types give limited control when styles are applied based on the type of device being used by the client. Media queries allow us to further refine that process by creating more narrow focus for when styles are used by using various media features. Basically, what this means is that we have control over how our sites are viewed by multiple devices and how the User sees and interacts with the content.

In the next video of the course, I briefly went over vendor prefixes, which could be useful since at some point I’ll probably come across it’s syntax. However, the syntax for vendor prefixes are different than what I’ve come across thus far in CSS.

screen-shot-2017-02-10-at-1-50-33-pm

Honestly, I didn’t quite understand vendor prefixes because it seemed a little confusing, but I will try to explain it as best as possible.

Vendor prefixes allow browser manufacturers to add support for proprietary features or features that are still in development.

The prefixes all correspond with a browser or browser developer as shown in the image below.

Screen Shot 2017-02-10 at 1.51.09 PM.png

Typically, each vendor prefix includes an abbreviation representing the browser manufacturer, which is surrounded on each side by a dash and followed by the property that they’re going to support.

In the next lesson, I learned more about CSS reset, which is almost like a factory reset for CSS styles. This term is used to describe a collection of styles that designers use to deal with the browsers default style sheets. As mentioned in a previous post, all browsers have a default style sheet that will be applied to the page, if they’re not overwritten by the author’s styles.  The below image explains essentially what a CSS reset is designed to do.

screen-shot-2017-02-10-at-2-06-53-pm

There are a couple of basic properties that most CSS resets establish a baseline for.

screen-shot-2017-02-10-at-2-09-21-pm

Now, for the most part, this is the case because there are many different variations of CSS resets out there, and some of them are considerably more complex than others.

To use a reset, you simply add your baseline styles to the top of you making style sheet. It’s important that these styles are the first styles your browsers encounter, as you want to reset the values site-wide, and then go back over them, and overwrite them with the site’s specific styles as shown in the image below.

Screen Shot 2017-02-10 at 2.09.58 PM.png

If these reset styles are added below the site’s custom styles, all the hard work is undone, and the reset values become the site’s styling.

Below are some pros and cons of using a CSS reset:

Screen Shot 2017-02-10 at 2.13.00 PM.png

Now the obvious pro of using CSS reset is that it can make your work consistent from site to site, especially if your used to working with it. This allows you to build your sites without having to remember which items they you need to overwrite and which you don’t. However, it often causes you to do double the work when applying your own styles.

screen-shot-2017-02-10-at-2-14-09-pm

Below is an image that shows a resource for the most popular CSS Reset scripts. This explains a little bit about what a CSS Reset is and how to determine if you need one.

Screen Shot 2017-02-10 at 2.15.06 PM.png

Feb. 9, 2017 | Work (Leave Request)

Today, I left for Ponca City to cover both the junior varsity and the varsity basketball teams of our high school. I don’t normally cover JV, especially on the road, but because the regular season is coming to a close, I left earlier to make to the JV game.

These longer trips make it later nights, and it’s not fun trying to find a WiFi spot so I can send my assignments into the office to be proofread for tomorrow’s paper. That’s why I don’t really enjoy Thursday night high school games on the road. Or any night that we go to press. It’s kind of a rush and a bit hectic.

We usually have them on Friday’s, but for whatever reason, Ponca City made a schedule change for Thursday.

Anyways, I took several pictures form the first half of both the girls’ and boys’ game while taking stats of the game on Game Changer. Once the games ended, I was able to upload the photos to Lightroom where I do most of my editing before captioning the photos and changing them to CMYK in Photoshop.

Once I finished that, I uploaded my photos to Dropbox, before writing my articles to turn in to Dropbox as well.

Now for the long trip home.

Feb. 2, 2017 | Lesson 3 pt. 3 (CSS Fundamentals)

In part three of my Lesson 3 of CSS Fundamentals I went over CSS layout, which is important when trying to set up the layout for a webpage. To start this I began with learning more about element positioning. Positioning allows you to take an element on the page and control where and how it’s positioned relative to things such as its origins starting position, other elements, or even the viewport itself.

CSS defines three positioning schemes:

screen-shot-2017-02-08-at-1-06-06-pm

Normal document flow is exactly what happens when you do nothing to control page layout and is considered like the default method. Essentially, normal flow takes the content in the order that it’s found in the HTML and stacks it, one element on top of another.

screen-shot-2017-02-08-at-1-08-53-pm

This can and should handle the majority of your layout needs and it makes it a lot easier to make minor tweaks here and there. If you want to drastically change the positioning of your elements, you can use the position property.

screen-shot-2017-02-08-at-1-19-31-pm

In the above image, you see that the position property accepts one of five values: static, relative, absolute, fixed and inherit. Inherit simply means that the position value from the element’s parent should be used. Now, static tells the element to position itself using normal document flow, and you can think of that as like the default value. However, relative positioning is still considered part of normal document flow, but it allows you to tweak an element’s position based on offset values that you could give it. Offset values can be given for top, left, bottom or the right of an element.

Now, giving offset values of top and left, for example. would offset the element from its top-left corner. To visualize that, in the image below, you see we have an element called box 1. Position is set to relative, and then we’re giving it offset of left of 100 pixels, top of 50 pixels. So what it will do is move over 100 pixels and down 50 pixels.

Now, an issue with relative positioning is that it creates a hole where the element would normally be located. Instead of elements below moving up to take its place, and empty space where the element would be is left behind. This empty space would even change sizes if the element would change size as well.

Absolute positioning is not considered part of normal document flow. In fact, it removes the element from normal flow and repositions it based on those offset values given. To show how this works, we have the same box 1 with a position of absolute, and its left set to 100 and top to 50.

screen-shot-2017-02-08-at-1-21-55-pm

Now, any element below the absolute positioned element now moves up to take the element’s place.

The last position value I mentioned was “fixed.” Fixed elements are considered to be absolutely positioned but they’re always positioned relative to the active viewport. What does that mean? Well, the the important part of that statements, is what is meant by the “active viewport.”

If you position a fixe element at the top-right offset of 50 pixels and 100 pixels, the top-right corner of the element will be positioned 50 pixels over to the left and 100 pixels down. That’s just like absolute positioning. However, since it’s relative to the active viewport, scrolling page content would not affect this element at all. It would remain in that position, no matter how the screen was resized or scrolled. It truly is fixed.

After going over positioning elements, it is perhaps just as essential to mention floating. Floating is a very popular CSS layout technique, however it’s also one that many new web designers struggle with. THat’s because how the technique works changes based upon the relationship of the elements that are being floated.

screen-shot-2017-02-08-at-2-13-08-pm

Here’s how floating works. Remember that in normal document flow, block level elements simply stack one on top of another. They’re commonly referred to as boxes. When you float an element, it moves as far over as it can, either to the right or the left, depending on the property that’s been assigned to it. The elements below it then move up to occupy the space that the floated element used to occupy.

There is, however, a lot more to floating that just this. For example, let’s take a look at what happens when you float an element to the left. And the default alignment is to the left edge of their containing elements. So if you float of those boxes to the left, it doesn’t appear to move at all, since it’s already aligned to the left of the image. However, it’s still removed from normal document flow, and that means that the element below it would move up to occupy what they see as empty space.

screen-shot-2017-02-08-at-2-14-48-pm

Those elements would actually go underneath the floated element, at least partially. Individual parts of an element will react differently to floated elements. To demonstrate this, let’s say we have an image contained within a paragraph. If you were to float the image to the left, it looks as if the paragraph is wrapping around the image instead of going underneath it.

Actually, we’re seeing how the inline boxes, or those lines of text, react to floated elements. Inline boxes, such as the lines of text within a paragraph, will wrap around floated elements if they have enough room.

There are several techniques in floating that you can use to do all kinds of cool things. For example, if you float a series of elements to the same side, like this series of boxes that have all been floated to the left, you end up with a horizontal display of elements.

screen-shot-2017-02-08-at-2-16-52-pm

This technique is used frequently to transform a list of links into a horizontal menu. Other things you can use floating techniques for are multiple columns of elements, drop caps in paragraphs, pull quotes that have text wrapped around them, product description details, and lots more.

Another technique that can be useful, is clearing floats. If you remember earlier, I discussed how floated elements affect all the elements below it in normal flow. At times, that’s not really ideal. You might, for example, create a two-column layout by floating one containing element to the left and one to the right, as you see below.

screen-shot-2017-02-08-at-2-49-13-pm

However, based on the way floats work, any remaining content on the page, like the footer, would move up and underneath the floated elements.

screen-shot-2017-02-08-at-2-49-23-pm

By using the clear property, you can tell the browser to stop floating elements and go back to normal document float. The clear property can be set to prevent elements from floating to the left or right of an element, or set to both.

screen-shot-2017-02-08-at-2-18-55-pm

Now that we’ve learned about positioning elements and how to float those elements, we can use both of these to help with designing CSS layouts on a webpage.

Let’s start with the concept of page regions. Most designers will create quick mockups of pages with content regions just sort of blocked out. This will allow them to design towards the functionality of the site and consider content first before getting caught up in the visual design.

screen-shot-2017-02-08-at-2-53-47-pm

It also allows designers to start thinking about the structure of their HTML. Each one of these content regions will most likely be represented in the page structure by a containing element. In the past, designers were limited to using divs for these purposes. But HTML5 now gives several new semantic tags to use when marking up sections of content.

No matter which tags are used, the concept here is that sections of content are contained within parent elements. This serves the dual purpose of grouping the content together and giving us a containing block to use for positioning and styling. Now, I’m going to take a look at how I can create a simple, two-column layout using these containing blocks.

First thing is to give the body element a defined width to set the size of the page, then center it by giving it a right and left margin of auto.

screen-shot-2017-02-08-at-2-55-53-pm

In this case, the layout uses pixels, but if it was targeting a specific screen size, it could use pixels.

With the header element, nothing really needs to be done. For the sake of simplicity, a bit of bottom margin is added to separate its content from the navigation.

In the case of the navigation above, you might want the menu to be a specific height as well. Depending on how you structure your navigation, you’ll have several opportunities to do that. Here, another margin was added to separate the navigation from the content.

Next is the first real challenge. We need to have our sidebar and main content arranged as two columns. The easiest way to do that would be to use floats. In this case, The sidebar is floated to the left while the content is to the right. Width is also assigned to them with sidebar at 30% and content at 60%.

screen-shot-2017-02-08-at-2-57-53-pm

These widths are based off the calculated width of their parent element, which is the body tag. Notice that the two widths don’t quite equal 100%. This is so that there is some space between the two columns equal to 10%.

Floating these two elements gives the site its columns, but it also creates issues for the footer. As you can see, the footer has moved up and is underneath the sidebar and content regions. To fix this, the footer will need to be cleared to move it back down and underneath the content. That’s it.

From there, you’ll begin to control the layout of the content within the regions themselves. For the navigation, you’ll probably take the list items within an unordered list and float them so they appear was horizontal menu items.

screen-shot-2017-02-08-at-2-59-53-pm

You might also want to control the positioning of the items in the header by setting the header’s position to relative and then absolutely positioning an item inside of it like the logo.

screen-shot-2017-02-08-at-3-00-10-pm

You can also float items within content regions to control how items like text and images interact with each other. This is just one example of how layout techniques can be combined to control page layout.

 

Jan. 31, 2017 | Lesson 3 pt. 2 (CSS Fundamentals)

In previous lessons in this course, I was going over some elements of the box model in more depth such as Margins and padding. Today I started with the border, which is defined as the outside edge of elements and are usually used to apply a decorative effect to specific elements.

Element borders are usually defined by three properties: style, width and color.

screen-shot-2017-02-07-at-1-06-31-pm

Like margins and padding, borders can be defined for the top, right, bottom and left sides individually, or defined for the entire element at the same time. Below is some syntax used when designing borders.

screen-shot-2017-02-07-at-1-09-39-pm

Now, because there is so much syntax for borders, authors typically use border shorthand notation that allows you to set all three border properties at the same time. The important thing to remember about borders, is that they do affect the overall width of an element. Border widths begin at the edge of padding widths, and then extend outward.

screen-shot-2017-02-07-at-1-11-03-pm

Border styles can be set in one of 10 values: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, and outset. None and hidden are very similar, except for when tables come into play, where there are some subtle differences, regarding when borders are drawn around table cells. A solid, dotted, and dashed create a single flat line, that’s either solid, broken into dots, or broken into dashes. Although support for border styles is almost complete in browsers, some older browsers don’t support the dotted value, resulting in dashed lines when found.

The remaining values, double, groove, ridge, inset and outset create dimensional line effects that often require width values greater than one.

screen-shot-2017-02-07-at-1-11-41-pm

Most designers use borders for decorative effects, or as a way of providing visual separation between elements. Borders can also be used as a way of creating text rules between blocks of text, and as a way of replacing the default underlines, under linked text. A relatively new addition to borders, is the border image property. This allows you to specify an image, that will be sliced and then aligned with the elements corners, and created or stretched in the middle sections.

It is hard to overstate just how important the background property is to web design. This one simple property allows us to add visual sophistication and style to even the most content. Take the sample webpage below:

screen-shot-2017-02-07-at-1-16-45-pm

Here it is with just the browser’s default styles displayed. If CSS is turned on, you can see the dramatic difference below:

screen-shot-2017-02-07-at-1-16-57-pm

It’s the same content, but noticeably different in look and feel. Now of course, there’s more going on here than just the background property, but all the images, accents and defined regions are mad possible by using backgrounds.

You’ll often hear the background property referred to in discussions of the box model, even though it’s not actually a part of the box model itself. That’s because the area for the background extends all the way to an element’s edge. If you were to define a solid color for an element’s background it would extend not only to the edges of the element’s content width and height but to the edges of the padding for that element as well. as the name suggests, backgrounds display behind an element’s content, allowing you to create sophisticated visual effects from  a single element. The default style for most elements is to have a transparent background, meaning you can see through them.

By explicitly setting the background property, you can choose to display solid colors, gradients, or even images behind an element’s content. The most basic usage of the background is to simply display a solid color. This can allow you to transform an invisible div, section, aside or article into a visually defined space or give individual paragraphs or headings added definition.

Screen Shot 2017-02-07 at 2.15.54 PM.png

I also have the ability to use multiple background images for a single element. This feature gives designers even more options when creating complex visual designs.

screen-shot-2017-02-07-at-2-20-19-pm