DDSN 360: Glossary 4

Glossary 4

Thankfully, dreams can change. If we’d all stuck with our first dream, the world would be overrun with cowboys and princesses.

— Stephen Colbert

User Interface Design – Fall 2019

Glossary 4

  • SEO: Search Engine Optimization – This is the act of making sure your website follows all rules, regulations and recommendations established by internet browsers in order to increase visibility for your website and ultimately bring more traffic to your website. This helps to make sure your website shows up high on a list of results of what a user searches.
  • B2B: Business To Business – Business between one business and another, as opposed to business between a business and an individual consumer. An example would be my company, Capital Stage, a non profit professional theatre company, making use of the services from Capital Graphics, a printing company, for our collateral. Neither Capital Stage, nor Capital Graphics are an individual consumer.
  • ROI: Return On Investment – This is the value that you get back from a direct investment such as sales directly resulting from an advertisement. The ROI on digital ads are far more efficient and measurable, than print ads.
  • CPC (Cost Per Click, or PPC Pay-Per-Click): The amount you pay for when your ad is clicked on by a user. This number goes down the more people click on your ad, if you have a set budget for a particular ad. Because digital ads on the internet can identify and count clicks, payments can be broken down by the actions, or clicks, taken on your ads. Google Ads, for example, are set up this way.
  • Inbound Marketing: Inbound Marketing is a Marketing method that focuses on drawing clients in through creating valuable, relevant and entertaining content, social media, and providing solutions to clients problems. The opposite of this method is more traditional Marketing efforts like telemarketing, TV commercials, pop up ads, etc., that interrupt a potential client’s day, rather than seek to help them. Some of the best examples I can think of off the top of my head are the very very funny Twitter accounts run by companies like Arby’s, Wendy’s, and Netflix.
  • Google Trends: Google Trends is an awesome website that tracks what the current search items and trends of the world are in various languages and from various locations. The top of the list of recent search trends is Bernie Sanders.
  • Web Analytics: The insights and data of website traffic. It is the measurement and analysis of that data for the purpose of understanding and optimizing web usage. There are several companies that can give you the analytics of your site. Many operate as apps that plug in and monitor your website traffic. Google also offers their own analytics programs and educational tracks to learn about their analytics too.
  • Bounce Rate: The Bounce Rate of a website visitor is how quickly someone leaves your site after viewing only one page. If you have a high bounce rate, you may want to reconfigure your website design or the content of your site in order to keep your visitors on your site.
  • Visitor Conversion: Visitor Conversion is when a visitor transitions from being a passive visitor on your site, to an active visitor. This means they begin to interact with your site, such as placing an order, or signing up for a mailing list, as opposed to simply visiting the site and reading a few things, then leaving.
  • AdWords: This is a form of advertising offered through Google. (This is actually an outdated name of their advertising program. Now it is simply Google Ads.) Google AdWords, however, are ads you can pay for that are only made of words, and show up in someone’s search results based on what they search for. This way a company can anticipate what a user may search for, when looking for something like their company. Google still offers this type of advertising, as well as visual ads, and various other kinds of ads, and since they are the primary internet search engine, used far more often than any other, by a large margin, you will most likely reach your potential clients if you advertise with them.

DDSN 360: Assignment 1 – Site Design Review

Assignment 1

I just hope that more people will ignore the fatalism of the argument that we are beyond repair. We are not beyond repair. We are never beyond repair.

Alexandria Ocasio-Cortez

ASSIGNMENT 1: The Good, The Bad, the Ugly, and The Usable

User Interface Design – Fall 2019

Example of a Good Design: Does the site/app talk to the audience it’s intended for, and does it solve a problem for them?

Golden 1 Center

https://www.golden1center.com/ – I think Golden1 Center has a good website. It’s an event center arena that is home to the Sacramento Kings. Its audience are Kings fans, concert and event goers. When you see the website, it is tastefully branded with the Golden1 colors, has clear menu and search options, as well as a simple scroll method to browse all upcoming events, whether you are a basketball fan or not. They have created their own hierarchy on the home page and feature larger banners for the bigger acts, and clear, easy to read listings of the lesser known acts. But whatever event you might be interested in, you can find very easily. When you go to the search page, each event has a listing and image that are all the same size. When you select the menu button from the home page, a nice overlay image of a crowd cheering near a stage, and on that image is a much more thorough menu to find more in depth information about the center. I think it’s very clear, designed well, and serves a simple function – make it easy for folks to purchase tickets to an event.

Example of a Bad Design: Bad means a lot of things but failing to communicate, being hard to navigate or hard to learn are three big tip offs that its a bad site or app.

Bay Area Fastrak

https://www.bayareafastrak.org – I will admit, I have a personal vendetta against Fastrak. However, that vendetta was sprung out of how awful their website has been historically. This current iteration SEEMS like it’s better, but I still feel angry about how unclear and unhelpful their website was just 7 years ago. (Don’t let the image below of the site back then fool you. It may seem like a clear, albeit dated website, but there was a never-ending loop trap in very fundamental pages like, put money on your account.) I always felt ashamed of their website because it represents the commuting area of Silicon Valley, but its website always felt straight out of 1994 to me. I remember being thrown into loops when I just wanted to find out my account balance, or put more money on my card. If I didn’t have it set up to automatically refill, it was a HUGE pain to refill as I went. I took a look at The Wayback Machine archives of their site and attached it here for reference.

Green Valley Theatre Company

https://greenvalleytheatre.com/tickets?category=Main+Stage – I had to ask around for a website that truly was bad, as most that are out there, though some may not be pretty, serve their purposes clearly. This one definitely is doing it’s company a disservice. Just take a look. The menu seems broken and moves around in strange, and I’m sure unintended ways. There is basically nothing on the site. And it’s not clear where to buy tickets. Their donate ask is clear on the home page, but I should still think that inviting people to be patrons of your theatre is the first step to winning them as donors.

Example of an Ugly Design: There aren’t many truly hard-to-look at sites and mobile apps out there these days, so most of what would fall in this category could be also described as “naive,” “out-of-date,” or “broken.”

The Elly Awards

https://ellyawards.com – This website design is about 15 years old, it is not responsive to different devices, and it’s just ugly. Even 15 years ago, I would think this website is ugly. There are inconsistent choices all over the place as far as the use of type, grammar and punctuation. Don’t even get me started on color choices.

Example of a Usable Design: The goals of the site/app are obvious, the interface helps the user complete a task, and is easy to learn.

Brainy Quote

https://www.brainyquote.com/ – I recently discovered this website and I LOVE IT. It is so simple and so fun. Its purpose is to either help you find a quote, identify a quote’s author, or collect your favorite quotes from your favorite people. It is a database of quotes! It’s clear and simple and fun.

DDSN 360: Week 4 Lab Exercise

Week 4 Lab Exercise

User Interface Design – Fall 2019

Week 4 Lab Exercise

Exercise 1: Size and Proximity

Using Move and Scale only, rearrange the provided white squares to create a hierarchy that follows the pink arrow pattern shown here.

You can also change the squares into rectangles of different proportions (use the side and corner handles to change size and proportions, hold the Shift key to maintain proportions).

Objects may overlap also, but they must stay as white squares and rectangles within the artboard space.

Exercise 2: Size and Color

Using Move and Scale only, rearrange the provided squares to create a hierarchy that follows the pink arrow pattern shown here, while factoring in the “weight” that each block’s color introduces to the mix. 

Same as before, you can change the squares into rectangles of different proportions, objects may overlap, but do not change the color of the shapes.

Exercise 3: Geons

Using Move and Scale only, create new and recognizable illustrated shapes with the provided geons. 

You can duplicate existing shapes (hold the Option key as you select and drag an object to create a duplicate) and you can resize the shapes. To resize, hold the Shift key as you click on a side or corner handle and drag to maintain proportions. If you do not hold the Shift key as you resize, the multi-part objects will separate.

Do not add color or shades and do not add new shapes. However, you do not have to use all of the shapes.

DDSN 360: Critical Analysis 3

Critical Analysis 3

You must be the change you wish to see in the world.

Mahatma Gandhi

User Interface Design – Fall 2019

Critical Analysis 3

Write ONE short summary (300-400 words) of the Web Design Process discussed in the lectures and in the three articles from this week.

Demystifying the Creative Process

UI Development Flow – 8-Step Process

A Model of The Creative Process

At the minimum address these THREE POINTS in your Critical Analysis:

  1. Describe the professional design process (Be sure to mention all major stages, as well as the roles involved).
  2. Why is having a process essential?
  3. Where do you feel you might best fit into the process, ie., which roles you’re best suited for now, or would like to know more about and grow into? (Here’s the list from Web Style Guide.)

The professional design process may vary between designers, and industries, but there are several fundamental similarities. My understanding of the professional design process at this point in my life and career include the following phases. The initial phase is inspiration/incubation wherein a designer has an idea forming in their minds, or a problem has presented itself that needs solving. Then brainstorming wherein, the designer now can put ideas, all the ideas, down on paper, or chalk or white board, and begin to organize those ideas. Then research should be done based on the ideas that have been formulated so far – this may include researching the need for this idea in real life, or if other versions of this idea already out there, etc. Then concept development or prototyping, can begin based on the brainstorming and research done so far. Then more testing and user research can happen with the prototype. Then redesigning the prototype as needed informed by your testing and user research. Then retesting and redesigning until satisfaction is achieved. Then finalizing and implementing the design.

Having a process when designing is essential in order to monitor where one is in the process, to have methods and techniques to rely on, and to successfully plan and accomplish the creation of a design. A design process enables you to be as efficient as possible, successful in achieving your goals and transparent in your process.

The aspect of Web Development that is ringing loud and clear to me – and might be giving me some anxiety because of how detail oriented and involved it sounds – is the research and user testing component of Web Design. The amount of research and prototyping and testing that is obviously so important to User Interface Design is a little daunting to me. Perhaps this is because I’ve never done it before, and my normal working environment rarely provides enough time for such focused tasks, so the idea of it is stressing me out. And because I also can understand why clients would want to avoid the time and critical thinking it takes to do user research and testing. But I firmly agree with the statement that “Design without user research only helps you design the wrong website faster.” I look forward to shedding light on this aspect of User Interface Design, and hopefully reduce the amount of stress I’m having over it.

The roles I feel most comfortable with at this point in my young designer history, is the Art Direction, and Site editor roles. These are aspects of my current job responsibilities and I feel very comfortable with those responsibilities. I think I would be interested in Web Project Management as well. I am very good at scheduling projects and motivating folks to accomplish tasks. I would have more confidence as a Web Project Manager I think if I had more coding and development skills, in order to better understand what the steps are to accomplish that aspect of the overall project.

DDSN 360: Glossary 3

Glossary 3

User Interface Design – Fall 2019

Glossary 3

  • Information Architecture: The structure in which content is organized in a digital space. A website’s IA, when designed well, should not be felt, or seen. When it is designed poorly, the user is forced to be aware of how the content is created, and how unhelpful the architecture is. You could say that Craigslist.org, though it’s not the prettiest website, has very clear user experience because of the way it’s content is grouped, categorized and navigable.
  • Wireframe: A wireframe is a simple layout format of a website or app meant to clearly illustrate the structure, feature placement, and navigation. Wireframes are used to best configure a website or app architecture, in order to achieve efficiency in a design. I’ve never seen a wireframe, that I am aware of, but this makes me think of the class I took on Digital Layout – there was a section where before we ever had content, we created thumbnails and a layout on a grid of how our magazine spread would look. This is what I imagine wireframing to be like.
  • Site Map: Or Sitemap – is a list of pages of a website. There are three kinds used in the world. 1.) For the designing phase of a website; 2.) for the use, as a publicly posted list of the hierarchy of a webpage; and, 3.) for the use of search engines to find relevant information on a site. Though often found at the bottom footer of a website, it is not a requirement. Here is PG&E’s sitemap as an example: https://www.pge.com/en_US/sitemap.page
  • Web Page Header: A Web Page Header sits at the top of every page of a website, unless I doesn’t. It may be featured on every page of a website, or just on the homepage. It often contains a company logo and possibly a tagline or statement. In the illustration here you can see clearly a Web Page Header is something that is familiar to you, as it is often found on every page of a site above a navigation bar.
  • Web Page Footer: Just the opposite of a Web Page Header, the Footer is found at the bottom of each page. In a way the header and footer frame each webpage, while the content in between the two will change. The footer, we have been accustomed to, is often where a user can find more details about a particular website. Most likely many more details than in the navigation bar or menu. A user may also find the company’s address, contact info., and copyright of the website in the footer. It was in the PG&E website footer that I found their link to the sitemap.
  • Webfonts: Web fonts are not the same as Web Safe Fonts. Web Safe Fonts are fonts that a website designer would choose because they would be a safe bet that most users have that font already pre-installed on their computer or device. Web Fonts are actual fonts that are downloaded to a users device as they are rendering your website. The downside to this it could slow load times for your website, but you would ensure every user could see your website just as you intended. In searching for a web font enabled website example, I came across a website that gives awards for web font design use! Check it out there are so many awesome examples of specific design choices using typography, which a designer would want to be true and universal for every user that finds his or her or their website: https://www.awwwards.com/websites/web-fonts/
  • Creative Commons: A Creative Commons license is one of many types of copyright licenses that enable the free distribution of copyrighted work. This is the kind of license an author would use to enable others to use, share or build upon their work. Creative Commons, the non profit organization issues the licenses to ensure that certain work is accessible by the public. For example, Flickr helps you find photographers who have identified which of their work is free to use under a Creative Commons license: https://www.flickr.com/creativecommons/
  • Skeuomorphism: A design concept often used for user interface design wherein the visual aspects, symbols and design elements are made to mimic their real-world inspirations. Like a blog site whose background looks like paper, or a website for an aquarium that looks like it’s underwater. This is meant to create an emotional reaction and sense of familiarity for the user.This blog entry by Jessica Moon has some wonderful examples of this design concept in action:https://www.dtelepathy.com/blog/inspiration/50-skeuomorphic-designs
  • Web-Safe Color: These were colors used when computers were limited to just 256 colors. Many attempts were made to create a “standard” color palette. A color table was created which contained 216 variations. This was to avoid dithering, or color altering in graphics which had colors that another users computer did not have. As of 2011 web safe colors have practically fallen into disuse due to the fact that computers now typically have 24-bit (TrueColor).
  • UI Design Patterns: These are recurring solutions to common User Interface Design problems. These patters are a way of working through a problem with a set series of steps, in order to improve your user interface design. I imagine this is like a map or flow chart of common answers to common problems in user design. They have been time tested and kid/mom/dog approved.

DDSN 360: Critical Analysis 1

Critical Analysis 1

For me, becoming a man had a lot to do with learning communication, and I learned about that by acting.

— Adam Driver

User Interface Design – Fall 2019

Critical Analysis 1

“Technical knowledge aside, what makes for a good Web designer?”

Based on these three articles we were assigned to read with this assignment:

Design Isn’t Just About Pixels by Creative Bloq Staff

Why You Need to Ask More Creative Questions by Aaron Morton

Jump from Graphic to Web Design in Seven Easy Steps by Ceative Bloq Staff

…I would say a good web designer needs to continue to find new perspectives, to find new ways of using questions as tools to finding solutions, to remember that a designer does not work in, or for, a vacuum – in other words, to be a good listener in a team, and to always consider the user in one’s work, and to stop being scared of coding and just learn it, dammit.

Before having read this article, my instinct would be to say “A good web designer has a strong understanding of design principles…” or “A good web designer has an active awareness of current styles of design…” or “A good web designer does a lot of user research to make the user experience of their design pleasing…” Although these things are important, these articles argue not to get so caught up in things like “what’s the hottest style trend”, or in designing with a sense of one’s ego (talent/persona as a designer) as the central feature.

I particularly liked the quote “Your brain is a goal seeking mechanism…” from You Need to Ask More Creative Questions by Aaron Morton. I thought this was a refreshing and clever reminder that each of us comes equipped with a built-in puzzle solver – our brains! This reminded me that often the creative process can happen effortlessly… or at least it happens in our subconscious. That sometimes ideas and inspiration come to us without putting forth a concentrated effort to make it happen. Sometimes in fact, when we let go a little, and sit quietly in ourselves, does creativity come rushing in on its own.

I appreciate each of these articles because they all ask the reader to be open to something new. It asks the reader to let go of foundations and structures that may be stifling our creativity, to trust in our own sense of direction and inspiration, and to believe we can learn code.

DDSN 360: Critical Analysis 2

Critical Analysis 2

The point is that when I see a sunset or a waterfall or something, for a split second it’s so great, because for a little bit I’m out of my brain, and it’s got nothing to do with me. I’m not trying to figure it out, you know what I mean? And I wonder if I can somehow find a way to maintain that mind stillness.

— Chris Evans

User Interface Design – Fall 2019

Critical Analysis 2

What are some of the Pros and Cons of using a Content Management System (CMS)? 

Which CMS Should I Use?

Critique of WYSWYG editors

WordPress.com vs. WordPress.org

WordPress Vs Joomla Vs Drupal: We Compare ‘The Big 3 Content Management Systems’

Should I use Tumblr or WordPress?

Blogger vs. WordPress

The clear benefit, or Pro, of using a CMS is that the primary design, security, and Web hosting is provided for you. You are given templates which you can edit, all standard security measures are taken care of for you, as well as the basic hosting and domain name ownership are included. For the beginner blogger or small business website manager, this is ideal. One can simply focus on creating their content, the original purpose of their website or blog, and not get bogged down by the details of Web development. The main thing that a beginner blogger or small business owner needs to worry about is the content creation, and updating that content as desired through very user friendly, non-coding, portals.

The major CMSs that are out there, such as WordPress, Joomla, and Drupal are all open-source platforms. According to Katie Horne in WordPress Vs Joomla Vs Drupal: We Compare ‘The Big 3 Content Management Systems’ – “Together [these three CMSs]…account for over 60% of the Content Management System deployments on the internet.” To some Web designers being open-source platforms may be a plus, because they may have the view that multiple contributors to a single project can only improve its design and functionality. Or another Web designer may see this as a shortcoming, as these platforms may be updated without consideration for the learning curve of its users, or the updates may be viewed by one such designer as flawed.

The clear disadvantage, or Con, of using a CMS is that a Web designer cannot manipulate the code of a template used on their site as a more skilled designer may desire. The alternative to this is to learn code and build one’s own site. The challenge for this choice is either finding a web developer that can build your site from scratch for you, as well as implement it for you, or learning those skills on your own. For most this is a daunting task, but not one that is insurmountable.

Much like the open-source nature of the major CMS platforms out there, the methods, tools and educational resources available to the average non-coding website manager are growing. And I personally am excited to learn all that I can about coding, and this thing called Web development. I have been working with my company’s website for years now as a non-coding content manager, and I’ve simply reached the point that I would like to learn the skills and techniques needed to have full control of the design of the sight.

DDSN 360: Glossary 2

Glossary 2

We must let go of the life we have planned, so as to accept the one that is waiting for us.

— Joseph Campbell

User Interface Design – Fall 2019

Glossary 2

  • Browser: An internet browser is an application that allows a user to search and view websites. Examples of browsers are Google Chrome, Safari, Firefox, Silk, Opera, and Internet Explorer, to name a few. Google Chrome is by far the most popular browser as of 2019. Well over half of users access the internet via Chrome.
  • Hyperlink: Text, image or icon that is a link to another location or file that is activated when clicked on. Here is an example: google.com.  
  • Mobile First Design: This is a design process which focusses on the smallest possible screen first, then grows to larger desktop screen designs. Essentially designing for mobile phones first and figuring out the rest after. Since about half of websites are viewed via mobile device (and that number is growing), it is wise to consider the mobile user experience first.
  • User-Centered Design: UCD is the design process which constantly considers the user experience and interaction first. Alongside all steps of the design process, designers will make use of user feedback to improve their design, and essentially achieve the goal of creating a user experience that is the most pleasing.
  • Responsive Design: When creating a responsive website or app design, you are creating a user interface that adapts to the current screen the user is interacting with. A mobile phone screen is much smaller than a desktop screen, and the design of a site or app needs to adapt to make sure the user experience remains clear and pleasing.
  • UI/UX: UI stands for “user interface” and UX stands for “user experience”. These acronyms are now ubiquitous with the concept of software, web design, game design, application design, and more. A user interface is the way a user interacts with a website or application. User experience refers to the journey a user has when interacting with that website or app.
  • Breadcrumb Navigation: Making use of the concept of leaving a trail of breadcrumbs to remember one’s location, in website design, this is making sure that your user can still understand where they are when moving between pages within your website or app. It is a handy way to find your way around an app or website.
  • WYSIWYG (pronounced “wizzywig”): WYSIWYG is an acronym for “What You See Is What Your Get” in regards to a website editor. A WYSIWYG editor lets you see the finished product as you are editing it. Ideally this is meant to reduce the amount of time a designer has to switch between editing mode and preview mode.
  • Blog: Blog is short for “web log”, which is an online written entry of some kind. Originally blogs were more like personal journals, which many still are, but there are now multiple kinds of blogs out there, covering all subjects, and innumerable followers – some have larger readerships than some major periodicals. I had a LiveJournal back in the day, which is one type of blog program that has existed. WordPress really began as a bloggers website developing program, but has evolved into all kinds of websites.
  • Open Source: Open Source Software, or OSS, is a kind of computer software wherein the source code of the software is released to its users freely to alter, edit, and distribute as they wish. Mozilla’s Firefox Web Browser is open source, as well as the programming language called Python. Chromium, the precursor to Google Chrome, was open source as well.

DDSN 360: Glossary 1

Glossary 1

The journey of a thousand miles begins with one step.

— Lao Tzu

User Interface Design – Fall 2019

Glossary 1

  • ISP: Internet Service Provider – These are companies that provide software to users to access the internet. Examples would be Comcast, Verizon, or AT&T.
  • HTTP: Hypertext Transfer Protocol – This is essentially the language that the internet uses to communicate information. Information is transferred across platforms by following commands defined by Hypertext Transfer Protocol.
  • DNS: Domain Name System – These are “names” or addresses of websites such as google.com. This essentially is the phonebook of the internet. No two websites can have the same address.
  • URL: Uniform Resource Locator – This is the larger “address” or location of a website, which includes the protocol used to access a resource on the internet, plus the location of the server (which could be the IP address or domain name.)
  • GUI: Graphical User Interface – This is the mode in which a user can interact with a device through the use of images, icons and visual indicators. This could be a screen on a phone which displays an icon of a phone as the active button to press to open the phone app on your device. Or the use of the Microsoft Windows icon as the “start” button on your desktop.
  • FTP: File Transfer Protocol – Much like the Hypertext Transfer Protocol, the File Transfer Protocol is the manner in which files are transferred on a network between servers and computers. It is built on a client-server architecture model.
  • CMS: Content Management System – This is computer software or an application that has access to and uses a database. WordPress is an example, and the most widely used version of a CMS.
  • W3C: World Wide Web Consortium – This is the international community that manages the standards and overall organization for the World Wide Web. Led by Web inventor and Director Tim Berners-Lee and CEO Jeffrey Jaffe, W3C’s mission is to lead the Web to its full potential.
  • HTML: Hypertext Markup Language – This is the language, or code, used to create web pages and websites. It was the first language, or code, that gave life to the internet, and is now assisted by other languages like CSS and JavaScript to make websites more dynamic and interactive. In 2019 HTML5 is the most evolved version of the basic website language.
  • CSS: Cascading Style Sheets – CSS is one of the main languages used in the creation and development of the World Wide Web. Others are HTML and Java Script. While HTML provides the content for websites, CSS can provide larger structures and design. It is also responsive to the various screen sized and orientations that people use daily.
%d bloggers like this: