Colors for web apps!

Screen Shot 2018-09-17 at 12.01.39 PM.png

This article is full of amazing resources for choosing a palette for your web app. In addition to the subtle palette shown above, they show 19 more examples from “Sites of the Day” chosen by aWWWards.

And that’s not all! Below the 20 inspiring examples, the article links to a bunch of free online tools for choosing and combining colors. For example, 0 to 255 lets you enter one color and see a huge sample of lighter and darker shades of that color.

Screen Shot 2018-09-17 at 12.09.02 PM

If you’re having trouble wrapping your mind around hexadecimal codes for color, watch this 4-minute video:

Last but not least: When choosing text colors, always make sure they have enough contrast against your background color to make reading the text easy. If you have any doubt about it, you can check the level of contrast here to make sure it’s good enough.

Advertisements

CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

.

Plain talk about file names

There are a lot of conventions in web design and development, meaning “the typical ways things are done.” When you don’t follow the conventions, sometimes it would make a hiring person scratch her head and wonder why you don’t do things in the typical way.

The way we name files and folders in websites and apps follows some conventions. Some of these make a huge difference, and some are just for convenience.

  1. The primary HTML file on a site, or in a subject folder, is named index.html. This is more than just a convention — the browser will open that file automatically if it is left off the end of the URL. Examples:
    https://weimergeeks.com/ (index.html at top level of site opens)
    https://weimergeeks.com/examples/ (index.html in the /examples/ folder opens)
  2. The primary CSS file for a site or a project usually has a name that indicates its status as the main CSS for the site. Thus many web developers would name it main.css, or possibly styles.css. Some people like to name it default.css or site.css. When you have different projects, you will likely name the style files to match the project name. Look in the /css/ folder here to see examples.
  3. Note that a JavaScript library — such as Highcharts — often includes its own CSS file. Typically, that file is named after the library — highcharts.css, for example. Thus you should NOT name your personal CSS file the same name as a library you are using. It might create problems, later if not immediately.
  4. Your folder names in a web project should clearly indicate the contents of the folder. All images are typically inside a folder named /images/. The CSS files are often inside a folder named /css/. but (alternatively) may be inside a folder named /styles/. The JavaScript files are often inside a folder named /js/. but (alternatively) may be inside a folder named /scripts/.

As you continue learning and exploring other people’s projects, you will probably see folders named assets, modules, components, model, view — these will contain components that make the site or app work, rather than pure HTML files.

Remember:

  • Filenames and folder names NEVER have spaces in them.
  • They contain no punctuation other than possibly an underscore or a hyphen.
  • Do not use uppercase letters in filenames or folder names.
  • All files have a file extension — .html, .css, .jpg, .png, etc.
  • The only dot in a filename is the one at the start of the file extension.

Follow the conventions, and your work will be easier!

Page layout

Here is a wonderful example of page design that:

  • Enhances the story.
  • Does not use flashy gimmicks.
  • Is built with a framework (Foundation, which is similar to Bootstrap in many ways).
  • Adapts perfectly to all device sizes (try it in Chrome Developer Tools and see).

Screen Shot 2015-11-19 at 10.57.41 AM

Even if you are not especially interested in the people behind the Paris attacks, take some time to examine how the design serves the storytelling. There’s nothing unnecessary in this design.

The design itself helps to tell the story more clearly.