Dec. 6, 2016 | Project Day

Unfortunately, I didn’t really progress very far with my project because I forgot my flash drive with the latest save file. So I had to open an old save file that I had on the desktop. I’m usually good about saving at both locations in case something like this happens.

I had to quickly go through all the changes that I made to my last interactive PDF. Fortunately, I’ve been very familiar with this part since I have had to make minor adjustments so often with the one on my flash drive.

As before, I created tables for the coaches to fill out for “Returning Starters” and “Starters Lost”. There can only be a maximum of five players that fill these roles so I left a place for five names. I think in the future I will probably leave a couple of other multiline sections other than just the “Returning Starters (Describe Strengths)” and “Coach’s Comments” to make this form a little more in-depth.

Other than that, I’m pretty much finished with this other than some user test gin to make sure the buttons work how their designed, and taking the highlights off the form.

Here are some screenshots of the progression of today:

Advertisements

Dec. 5, 2016 | Business Letter Assignment

Today, I worked on creating a letterhead for a letter, in business format, detailing what I’d learned this semester, what I wanted to learn next semester, and my favorite and least favorite assignments/projects.

I decided to do my entire project in InDesign, though I did mess with some design ideas in Illustrator for the letterhead before scrapping them.

I wanted to create a monogram with my initials to “LNN” with a popular design that emphasizes your first initial between your middle and last initial to look something like “NLN” with the L’s font size noticeably bigger than the other two initials.

I chose to put it in a diamond shape with a three-point stroke width then copied that, scaling it down along with a one-point stroke

After I inserted my initials, individually so that I would be able to edit and position the initials how I wanted. The font I used is called “Cheboygan” that I found on dafont.com.

screen-shot-2016-12-05-at-1-58-45-pm

Then I created a side bar, with a fill of a dark turquoise color and inserted my monogram in there.

After, I formatted my letterhead as a business letter with my address, number and email… but I’m not going to show that.

Finally I typed up my letter in a text frame before finishing it up, printing it out and signing.

screen-shot-2016-12-05-at-3-12-27-pm

Dec. 13, 2016 | Lesson 9 (Mapping Web Design)

In lesson 9, the final lesson of the course, I went over the “Launch and Reset” phase. To start this phase, the development team of the website will go through a series of checklists that need to be reviewed before going through testing. These checklists are the Content Checklist, Design Checklist and Development Checklist.

Once these checklists have been reviewed, then the site goes through a soft and hard launch. The soft launch is a limited access launch for a select group of end users who will give feedback on the site. It is important to have only a limited number of users with access to the site so that you can collect and analyze data they produce.

I’m a gamer, so this process sounds a lot like beta testing, which is what game developers call allowing a select group of users early access to a limited portion of their game, so that they can collect data, as well as feedback. This gives the developers enough information to make any mechanic, graphic or design changes to the game before its physical, or digital, release. That release is probably similar to the hard release of website development, which allows all users access to the site.

Next is allowing a feedback loop for users, so that if they have questions or a report about the site, the question/report is triaged then given an answer.

screen-shot-2016-12-13-at-1-21-08-pm

The site will go through a final round of testing post-launch, so that you can ensure that the site is still working properly. This should focus on three key groups of users. New users, experienced users and legacy users.

screen-shot-2016-12-13-at-1-23-41-pm

Each of these users will have different types of feedback. The new users will tell if the site is intuitive. Existing users will inform you of any latent issues the site has that wasn’t apparent during their first experience with the site. The legacy users will tell you if the transition from the old site was easy to the new one, and will put up flags if there is content or functionality that used to be available but is now either not present, or hard for them to find.

Despite completing the all the phases to the web designing process, the web is ever-evolving and therefore the site must undergo evolving changes as well.

Screen Shot 2016-12-13 at 1.40.55 PM.png

Dec. 12, 2016 | Lesson 6 (Mapping Web Design)

In lesson 6, the building phase of web design, the video kind of goes through the development stage and with coding and the importance of creating guidelines for this process. This is called creating style guides.

This process is present in other communication outlets like media and print, but for the web design, style guides are considered “living” meaning they are constantly evolving with the project. These style guides allow members of the team to build new components or change the existing ones based on the rules outlined in the document.

This process describes through words, numbers and examples how all items are to be styled and designed to produce consistent visual communication.

This allows the focus to be on the main component of the website. For example, a blog’s main component are the posts. For that you would isolate the code and set it up in the browser. The font, sizes, colors and other styling elements using CSS comes later as a linked asset for the code.

I think why this process stood out to me is because I’ve noticed that sometimes when a website has trouble loading it will go to it’s basic HTML coding like the picture are the far left above. Though visually, it is lacking it still has the core elements it needs to make a website and is still navigable for site visitors. That is why the main component of the site comes first when coding, then the visual elements.

Dec. 8-9, 2016 | NW Prep Classic

These days I was gone for the Pioneer Cellular Northwest Prep Classic to cover the high school basketball tournament. My process is what I usually go through editing after taking action shots. edit mass amounts photos through Adobe Lightroom  before exporting them. After I’m through editing (adjusting white balance, exposure as well as cropping the photo) I upload the photos to zenfolio so that they will be on our newspaper website for purchase.

Dec. 6, 2016 | Interactive PDF Project

I revisited a previous project I had worked on earlier in the year after learning how to created interactive PDFs. This was the Basketball Info sheet that I was working on, in hopes that this would be easier for coaches.

I had noticed in previous years that they would just try to type on the info sheet then send it back and it would look something like this: “School: _____South Barber______; Mascot: _____Chieftains____.” Obviously the sheet I sent them was meant to be printed out then written on before sent back either by scanning the completed sheet then emailing it, or by fax. So I wanted to created a PDF that could be interacted with by computer then submitted, or printed off and filled out by pen before being sent back for those who prefer more conventional methods.

When I last worked on this project I was having some trouble with creating tables because it’s not really something I went over in InDesign before. Eventually I figured it out myself, but I wasn’t completely happy with it so I did some minor adjustments yesterday.

screen-shot-2016-12-06-at-2-44-57-pm

I wanted these each to be text fields, so I placed a field in each box with Name, Class, Height, PPG, etc. and converted them to Text Fields by right-clicking, scrolling to “Interactive” and clicking on “Convert to Text Field.”

I created a table for both “Returning Starters” and “Starters Lost” by placing a text field then going to the Table menu and clicking “Create Table…” before setting up how many rows and columns I needed (7×6).

I then created fills for “Every Other Row” before setting the color of those fills to a light yellow color and a tint of 50%.

I then created two more section (the final two) for the PDF for comments on Returning Starters and any other Coach’s comments. For coaches to be able to print it out and write on it, I created tabbed lines below (Shift+Tab) so they could fill it out. For those typing, I created a text field, but checked the box for “Multiline.”

All I need to do is create a “Print” and “Submit” button then go through testing it in Adobe Acrobat.

screen-shot-2016-12-06-at-3-19-34-pm

Also, the highlighted sections will not be there when I’ve finished, they are simply there to make sure that my text fields are lined with the tabbed lines.

Dec. 2, 2016 | Lesson 5 (Mapping Design Process)

After finishing with the content strategy phase from the previous lesson, the next step is pre testing and it’s the first of several testing phases.

User testing is an essential part of the web design process. Me my client, and anyone else working on the web design project are not valid representatives of the end user. Even anyone associated with the client could be tainted by some bias and are therefore unfit to represent the end user during this testing phase.

The reason for this because we all have an understanding of the web design and/or its content that the user may not have. We cannot expect their understanding to be the same as ours.
For example, the triple bar, or hamburger, has become the default icon for a hidden menu, but most web users do not understand the purpose of this icon unless it’s explained.

screen-shot-2016-12-02-at-2-30-32-pm

The end user is all that matters, so everything we do must be understood by them without us having to interact with them to make that understanding happen. For this reason, extensive user testing is important.

There are two different tests that the videos from this lesson point out: card sorting and paper versions of the wireframes.

The purpose of the card sorting is to get the end user to organize the website content into hierarchies and information architecture they feel is intuitive. This is done by using flash cards and each card represents one page on the site. Place them in random order and instruct the end user to sort them how they think is logical.

Screen Shot 2016-12-02 at 2.39.31 PM.png

In the wireframe presentation, we will give the user paper versions of the wireframes and have them access the content and pretend to navigate through the different sections. If they navigate to a new page, swap pages. This is to see how the user will interact with this website.

It’s important not answer questions and allow them to find their own way. If there is something in particular you want to test give the basic instructions like “make a search,” “subscribe to a newsletter,” or “ask the site owner a question” without telling them how to do this.

screen-shot-2016-12-02-at-2-39-50-pm

After all the data from these testings is gathered, they should be analyzed to adjust the content of the site.

Dec. 1, 2016 | Lesson 4 (Mapping Web Design)

Obviously this is really a day late, but this blog post is meant for yesterday… I’ve been slacking and have started to let these days catch up to me. Now, I’m playing catch-up.

Anyways, in lesson 4 of Mapping the Modern Web Design Process I’ve moved on to the “Content Strategy Phase” of designing a website, and what I immediately found interesting is the process of building user personas, and having in mind the different people that will find my website interesting.

“… it’s important to create user personas, a set of imaginary people that describe the end user or users of the site. Personas allow us to create user-centric designs and ensure that we focus on and emphasize with the people  we are endeavoring to reach. In practical terms, a user persona is quite similar to a character sheet in a role-playing game.”

Here’s an example below:

screen-shot-2016-12-02-at-12-53-14-pm

Essentially, this process of creating personas will help me investigate who I want to reach with the website.

After identifying the target of my website and creating the content model of my website, I then need to organize all of this information based on priority hierarchies. According to the lynda.com videos, there are two levels of hierarchies: site-wide hierarchies and individual-view hierarchies.

screen-shot-2016-12-02-at-1-17-32-pm

Here is the site-wide hierarchy tiers in order of importance. The first tier is what is usually seen when visiting a site and there for those users that are showing an interest, while the second tier is for those who want to further investigate the site. The third tier, while not less important that the first two, is prioritized least than the others because they are usually for those that are interested enough to learn more about the company.

In an individual-view hierarchy we isolate each page, the homepage, index pages, blog pages, static pages, etc. and identify what priority order the contents on that page should have. To do this, it may be a good idea to use a piece of paper, or other display device, and then stack them in the priority order from top to bottom.

After discover who my target audience (or user) is, creating the content that will go in the website, and prioritizing the most important information, it’s time to start with the layout of the page. This process is called wireframing, but shouldn’t be confused with designing. That was the emphasis when creating the wireframe of the website, it should not have any design elements. Not yet, at least because that will come later.

The wireframe of the site is the bare bones and blueprint that will help with the design elements later, devoid of any color or different font types. Essentially boxes with content devoid of visual elements. But like a blueprint, the wireframe can have annotations: arrows, lines, circles and comments that explain and provide further information about what’s going on.

 

When approaching how the content should show on devices, it may be more beneficial to use mobile first by using the smaller screen first then scaling up to see how the content should be prioritized and designed.

This process is used to present the client with a clear conceptual idea of the overall picture of the site before applying design elements. The wireframing process is the end of the content strategy phase.