Take a look at the tutorial material for Muse and Animate.

Adobe Muse

Adobe Animate – look in the app under “Lessons”

Continue working on WordPress implementations. Review the Smashing Wordpress chapters from last class. Identify parts of the WordPress template files that need to be modified. Make notes about things that need clarification to accomplish your design. We will continue to work on the WordPress sites over the next week.

Review your static sites on studentsites.expression.edu. Use the new tools from Adobe, starting with Reflow, to redevelop your site as a responsive, mobile first design. By end of Session 17 (Friday), have a draft version of your site to look at.

Reading

Design Last – Smashing Magazine

After review of wireframes and style guides, take a look at WordPress resources for building your site. There are two ways to handle theming – the first is to create a child theme to use from an existing theme.

Child themes are set up using their own directory, which has a style.css and functions.php file in them. The parent theme can be updated without losing the changes made to the child. Many child themes can be developed off of one parent.

Frameworks are also popular. Many frameworks make changes to the dashboard to assist in the development process. Some frameworks also use parent/child structure in their expected workflows.

Assignment

Add missing notes to your wireframes – note the size of different areas and type. Annotate the style guide, and create at least 2 color palettes to use to help develop your site.

Choose a theme as a starting point and create a child theme from it. Or, if a framework will do the job better, select a framework. Using your style guide, match the type and color in the child theme to your selected colors. Use the wireframe as a guide to work through placement of elements for page and post views.

Reading

Anatomy of Wordpress

Smashing: WordPress Themes Chapter 6

Smashing: WordPress Themes Chapter 7

Theme frameworks take most of the work out of the underlying structure of a WordPress site. These three are commonly used and have open source/free versions.

Whiteboard

Thematic

Hybrid

http://www.smashingmagazine.com/2015/02/13/china-web-design-trends-2015/

This is a well written guide to Edge Reflow – the Responsive Web visual editor under development at Adobe. We will look at this tool next week, after getting WordPress child themes established.

While this tool may not be perfect, it is an interesting approach to web design work that allows visual designers to handle web development tasks that can otherwise be difficult.

This tool is related to the Edge Code – now known as Brackets

You can download Brackets and run it from your documents folder on lab machines, or install it in the Application folder on your own laptops. Brackets is a web editor that gives you a live update in the browser, a pop-up editor for editing CSS by selecting HTML elements.

The other Adobe tool we will revisit is Muse – an HTML5 environment that runs side by side with these programs, as well as Edge Animate – the new HTML5 animation tool that looks like a cross between Flash and AfterEffects.

Go ahead and try these tools out. I’m putting together some tutorial info beyond the article for Edge Reflow. Both Edge Reflow and Muse have lessons built in – check them out!

Wireframes

WordPress has many different views to show different types of content. The homepage by default shows posts, which are sorted by the date that they were added. A post view often drops sidebars and additional widgets to open up more space for the content, as do pages. Some themes have a “dashboard” view that populates the content area with widgets (calendars, lists, RSS feeds etc.) .

Create wireframes for your site design that show clearly the placement of the major elements of a wordpress site for each type of view. Account for the:

Header
Site Title
Navigation (menu)
Content Area
Footer
Sidebar(s)
Widget area(s)

Label these areas clearly. As we continue to build you will add more detail to the wireframes about the additional elements that are contained within each of the major ones.

If you create the wireframes in Illustrator or Photoshop, keep a printout handy that you can add notes to on the fly. It is easier to reference a printout while looking at the screen for where or what an element is than to switch between apps on the desktop.

For a desktop, start with 960 pixels across as the target size for the desktop. Make your wireframes to scale proportionally. Don’t assume, however, that your design is only going to be viewed on a desktop. Start thinking about how your site is going to work on a small screen.

Style Guide

Create a style guide for your site that documents your color and type choices. Keep it simple – a palette of well matched colors designed work with the design and content of your site, paired with fonts intended for use as headers and for body text. Note where you plan to use the colors.  You can use Adobe Color CC to experiment with your pallette. Areas to document :

title and header
navigation
post and page title/header, subheaders, date, author,
comment
content area background
background
default links

Have preliminary versions of these ready for class tomorrow. During session 14 we will prepare a couple of child themes and install them on the sites for further work.

Everyone now has a user account set up on Dreamhost to be able to access the back end of the web hosting space allocated for you. Make sure to note your username and the generated password. The password can be […]

From Smashing Magazine, a guide to issues that can affect WordPress performance and theme usefulness.

Finish any remaining formatting issues with your personal sites.
Start reading through section 1 of the text “Smashing:Wordpress Themes”. On Tuesday we will go over the reading. Bring your questions to class for review.
Familiarize yourself with WordPress.org and the resources available on the home site. Explore the themes available. Add themes of interest to your research journal – collect screenshots, save the URL and names. Make notes about what interests you about a particular theme.
We will also get WordPress sites set up to start working on style.css and the template files used to dynamically create page and post views.

We will start class a 2pm today.

Complete reading assignments from last class.

Add a JavaScript Alert box to one of the pages on your test site. The W3schools TryIt for JavaScript shows a simple example that you can use.

On Codeacademy.com, set up an account for yourself. Try out the  introductory tutorial on JavaScript.

Use the W3Schools JavaScript reference page as a resource to help along the tutorial if needed.

The class has access now to studentsites.expression.edu. Upload your demo site to the server using SFTP. You can use Cyberduck, or you can upload and download files with TextWrangler.  To see your site live on the webserver, use the following address pattern:

http://studentsites.expression.edu/~username

In the public_html folder, place your index file at the top level, and it will automatically be used by the server as the starting place for the pages of your site.

Tomorrow is the midterm checkpoint.  The goal is a neatly styled site that shows you understand and can format HTML and CSS together. We will discuss design choices and look at fixing problems that you might be having.

Next week we will start on WordPress theming. A new textbook has been added to Creative Edge for the class called Smashing: WordPress Themes. Over the weekend, review the resources in it.