Why Design MattersHOW TO MAKE YOUR WEBSITE WORTH A MILLION VISITS

Your Presenters from Wylie ISDMARCIA COKER

COORDINATOR FOR COMMUNITY RELATIONS

DOUG BELLAMYWEB/MULTIMEDIA COORDINATOR

A Quick SurveyHow many of you are happy with your current online presence? What would make it better?

Designing with

THE STORY OF WYLIE ISD’S PROCESS AND WHY DESIGN MATTERS

We are here to discuss how design can make your website better.

What do you consider to be important pieces of design?

Everything on my homepage

Flashy graphic elements

Utilizes the latest trends

Navigation without labels

Trendy without compatibility

considerations

Our JourneyPrior to 2010, our website was a self-built, utilitarian set of static pages that presented our community with basic information.

In January 2011, we moved to a more visually pleasant design shown here. At launch, the information was the same as the old site, just presented in an aesthetically pleasing manner.

Wylie ISD hired a new superintendent in the summer of 2011 who is very blog happy, video intensive and social media savvy. Soon he, along with many of our teachers, became frustrated with the limited features and lack of interaction of our website.

The final straw was the announcement in 2013 that our website provider was no longer going to develop the web application.

The Search BeginsIn October 2013, we decided to take our design-centered approach to the next level.

To do so, we wanted to also address additional requests for feature upgrades, including a simple, flexible CMS that could grow with our changing needs; use a single sign-on solution; ability to integrate with our SIS and is mobile friendly.

In addition, we learned that approximately 90% of our parents used the website as the “go to” place for information. Therefore, it had to be easy on the front end.

Time to get a little rest before we dive in .We shopped many vendors and sat through a lot of demonstrations that were essentially the same and met some of our objectives.

However, most vendors lacked true customization options. Their idea of customization was to choose from a handful of templates and then apply our colors and logos. And while this would work to relay our message, it lacked style (aka design)

We needed custom… and that’s where we found Schoolwires.

Schoolwires allowed us to customize just about every aspect of our website design. We chose where elements were located, how they presented themselves, font styles, etc.

Think of it as building a home. Would you rather purchase the builder spec home with random cabinets, carpet and colors or choose your own tile, wood and finishes?

So What Is Design?WHAT MAKES IT GOOD AND WHY DOES IT MATTER?

Design is defined as…the art and practice of planning and projecting ideas and experiences with visual and textual content. The form of the communication can be physical or virtual, and may include images, words, or graphic forms.

More straightforward…

Design solves problems and provides solutions

Source - American Institute of Graphic Arts

Good Design Meets Most, if not, All of the Following Criteria

1. It has a purpose

2. It communicates effectively

3. It uses an appropriate typefaceone that is easy to read and fits the design

4. It uses appropriate, coordinated colorscontrast is key as is balance and color harmony

5. It features clear, relevant imageshigh quality photos and graphics. NO CLIP ART!!

6. It has effective, logical navigation

7. Is small in terms of load timeno one likes waiting for web pages to load

For even better user experience:

Uses a grid based layoutStructured form using columns and other aligned elements to create a balanced, coherent feel

Utilizes an “F” pattern for content layoutAppeals to the tendency for people to focus on the upper left-hand corner of a page, proceed to the right, then down and to the right again

Is mobile friendlyCan be achieved through responsive design or a dedicated mobile site

How does layout/design affect usersYour content is important. Equally important are first impressions. When your information is well organized and formatted in a visually pleasing manner, people are more likely to continue using your site.

In other words, the time and effort put into the design and layout of your site should parallel the passion you have in creating and correcting (spell checking and grammar are a must!) the content itself.

“Web design and content are like the yin and the yang, perfectly balancing one another. Or, if you prefer to think of it in terms of form vs. function, great website design is the Form that creates the vital first impression. Content is the Function, the device that attracts search engines, intrigues your audience, and drives measurable results.” – Jeff Kline, President of Accrinet.com

Let’s take a look a few examples.

How does layout/design affect usersCOMPLEX/DIFFICULT TO READ CLEAN/READABLE

F Pattern Layout ExampleThese are charts of the human eye reading several webpages. You can see the areas of focus form the likeness of the letter “F”.

This is what happens when you don’t use good designThis page is so poorly built it made a list of the worst websites of 2014. Notice the seemingly random placement of elements,lack of continuity, difficult to read fonts and you can thank me later for not showing the blurry, pixelated images and the use of random colors for emphasis.

Remember purpose? Can anyone tell me what the concealed carry report ad on the right has to do with magic in Baltimore?

http://themagicofbaltimore.blogspot.co.uk/

Don’t Do thisBold text is meant to highlight something important. When everything is bold, nothing is important. Also, match colors. The Wylie ISD maroon has a specific value. Close is not good enough when you are talking good design. This author used #800000 asan approximation of our branded maroon, but should have looked up the correct number.

Instead, do thisChange text color and bold text only when necessary for emphasis. Also notice the maroon in the text now matches the template color as well. Much cleaner and legible look that maintains the overall design.

How Does the Design Process Work?Where to start and the steps involved in creating and implementing a design.

Made-To-Order or Design-Ready?True design is unique and personal. It makes a statement about your district and speaks to your constituents in a manner in which they are familiar and comfortable.

While using a Design-Ready template can yield great results, Made-To-Order design allows you to do so much more.

How Do I Start?Every project is different. Get organized, determine what is truly important to you and your district, and let the Schoolwires designers work with you to create a Made-To-Order design concept that fits your vision.

In other words, you need to know what you want AND be open to suggestions from professionals that know how to make it all work together.

Our Process

•We discussed the wants and needs with our assigned designer. We submitted logos, colors, design ideas and examples of sites we liked. Our designer walked us through additional information needed to come up with an overall design.

Discover

•The initial design was created and shared with us. Many revisions were made to get the design “just right” for us.

Design

•It is at this point where our site was built. Graphics were created and code was written to make the site look and function as we envisioned the design phase.

Develop

•The Schoolwires team posted our site to our account. And since we were working on our content in the incubation site, all of our content was ready. At this point the site was complete and ready to launch!

Deploy

The overall process spanned from November 2013 through May 2014.

We began with general ideas of how the site should look and how it should function. Then we presented the designer with our ideas, colors, logos and concept art and the designer came up with an initial concept.

Our HomepageHere is the first draft of our website.

Good start, but…

There were elements that just did not fit or function quite right.

We continued working with the designer to tweak major and minor elements to suit our needs and taste.

Our ResultA website that provides useful information in a well thought-out presentation. Teachers have responded by using the site much more than our previous solution and our community has praised the design and layout as being much easier to use and navigate. Lastly, our campus webmasters have been more successful in putting quality content on their sites…thanks to the overall design.

Statistical Results

In the five months the site has been in use, we have had more than 650,000 visits

We average more than 25,000 page views per day

Approximately 50% of our parents have signed into the system

More than 93% of teachers have signed into the system within the last 30 days

The last two are substantially more than we had on our last site

In Conclusion…The Golden RuleJust because you can do something, does not mean you should! Attracting attention and visitors is a good thing, but you don’t need to put on clown pants to do it!

“Genuine good taste consists in saying much in few words, in choosing among our thoughts, in having order and arrangement in what we say,

and in speaking with composure.”

--Francois Fenelon

Schoolwires has the tools to help you get on track:• Website Grader

• Community Engagement Assessment

• ROC Presentation

How do you know if your K-12 district is operating at optimal engagement?

Website design is part of the equation,but there’s more!

Put Your K-12 Website To The TestA quality district or school website can be critical for connecting with your K-12 community.

The question is:How well does your website function?

http://offers.schoolwires.com/website-grader

Take The Free Community Engagement Assessment!Most K-12 districts are on a journey to fully optimize community engagement and operate at peak levels.

How do you know where your district is on that journey?

http://offers.schoolwires.com/cea

Schedule Your Free ROC Presentation!Take the next step in determining your district’s place on the Roadmap for Optimizing Communities.

http://offers.schoolwires.com/roc-presentation

What questions do you have for our presenters?

Want to learn more about website design? Check out these resources:

• [Blog] Smart K-12 Website Design: http://blog.schoolwires.com/topic/website-design

• [Webinar] Why Design Matters: http://www.schoolwires.com/domain/84

• [Blog] Getting it right: Custom design should mean “unique” and “from scratch” http://blog.schoolwires.com/getting-it-right-custom-design-should-mean-unique-and-from-scratch