Design Note #1: There are many ways to syle a webpage, but one common method is to place a meaningful image at the top that spans the page end-to-end horizontally. The current image is not recommended as it lacks sufficient resolution, but what is proposed is this manner of sizing top-of-the-page images; it is superior to what is currently published on the live site page. In general, we should seek quality images that are approximately 1280 x 640 pixels for this purpose. Larger is ok, but it should be possible to either scale down or crop to something in the vicinity of 1280 x 640. 1280 up to 1600’ish is good for widths and 450 to 650 is generally good for the height of page-top images such as this. Though there is leeway in width and height, in general, from page to page for any given site, it’s best to keep the width/height of all these page-top images identical or at least very similar, if possible.
Design Note #2: A title has been added to the top of the page under the top image. A title is not critical, but it’s usually a good convention. All page titles should follow a font standard that remains common throughout the website. In this case, Header 1 size is selected, the text is in all CAPS and is bold.
Design Note #3: Each section has a section-title. This was already in place. The point to stress is again, similar to “title”, it’s generally best to follow a standard convention. Here Header 3 size is selected, the text is in all CAPS and is bold.
Design Note #4: The sections have been made more discreet from each other versus “live” version of this page. Good use of spacing between content sections makes the content more “readable” and appealing to the eye. Though not required, a “separator” was added between sections to further separate the content. Sometimes the “separator” looks needed, other times it looks superfluous, “clunky” or “tacky”. In this case, it seems to look better “with”… likely due to the white background and some of the empty spaces in the text fields.
Design Note #5: The “Apply” link for each section has been changed to a “button”. Links are good for general content, but in this case, the application process is more of an “action”. Buttons are a better form-factor for more active events on the part of the user. Text has been changed from the simple “Apply” to a more substantial “APPLY FOR MEMBERSHIP” in all CAPS.
Design Note #6: The picture in the “Affiliate Members” section was free-floating with the text all in a single row/column. The text and picture are now separated with text in a 2/3 sized column and the picture in a 1/3 sized column.
Design Note #7: This item was probably the most egregious offense to the eye… under the 4 horizontal row sections; these 4 sections were duplicated into a 4-column layout thereafter with some listed requirements for membership. These column heights were very uneven. In general, column content (on the same “row”) should be of a same or very similar height. This column content has been moved and amalgamated into the 4 horizontal row sections of the same name.
Design Note #8: Notes 1 to 7 constitute the primary changes and reasons for change made to this sample page versus the current live Membership Level page. Design Note #8 is a general note on the topic of site pictures. Listing the notes, these are:
- Note #1 already spoke to general good pixel dimensions for pictures placed atop pages. Ideally, there would be a representative picture for every page (or at least most pages) placed atop for similarity of look/theme for each and every page selected by users
- When creating “sections”, it’s generally good to also have a representative photo for each section. These tend to be more portrait or square in dimension with widths typically in the range of 350 to 650 pixels. Larger images are OK, as they can be scaled down in size, but smaller typically isn’t as they lack the resolution for scaling or interpolating up.
- These matters are brought to attention to stress the symbiotic nature of picture content and quality web design. The current OCA media library has insufficient content to meet ideal objectives for use of picture content atop each page and in each section. Guidance is requested for how to best handle the matter. Options seem to be: 1.) Do the best with what’s currently available in the WP media library 2.) Receive the content from OCA, either by new effort or providing more picture content from another existing external picture library… or 3.) The Developer (me) takes charge to find representative picture content that OCA approves on the back-end.