AW 18: Screen design — getting the basics right

In my own words

The Internet

Screen designThe internet is a hub of computers and networks linked together by miscellaneous networking technologies (electronic, wireless, optical). Services made available include email, instant messaging, file sharing, telephony, and of course the World Wide Web — anything for which you would use a browser: websites, online stores, social media platforms, and more. The internet can be accessed via cable, wi-fi, dial-up, and cellular phone technology. Each computer on the internet has a unique IP (Internet Protocol) address, and websites on a server have that computer’s IP — plus if on a shared server, a unique identifier — as its original address. Domain names are then used to “mask” this address, as they are easier to remember.

HTML

The HyperText Markup Language is the markup for rendering a website in a browser. It is made up of so-called tags, which define the elements of the webpage (header, paragraph, image, hyperlink, and so on). The global standard of HTML is decided by W3C, the World Wide Web Consortium, and serves as a guideline for developers of browser technologies. HTML is the semantic skeleton of a webpage, while CSS (Cascading StyleSheets) and JavaScript are added to define its design and features. HTML is currently in its fifth instalment.

Browser

Screen designA browser is a piece of software used to render and display websites. There are a number of browsers, but Google Chrome dominates the market share by far. Microsoft ships/ bundles their browser (Internet Explorer, Edge) with the Windows OS, as does Apple with Safari on the MacOS and iOS — but most Windows users and many Apple users choose to install Chrome. This is most probably because of its reputation as being faster than other browsers.

Privacy-aware users seem to prefer Firefox by Mozilla, which had its heyday before Chrome took the market by storm.

In the early days of the WWW, developers had to put lots of effort into making sure that their websites would render well in all browsers — with IE6 as the real nemesis — but now, all commonly used browsers “behave” the same and few to none individual adaptions have to be made. Conditional stylesheets with browser specific declarations are (hopefully) a thing of the past!

Search engine

A search engine is a tool to look up all of the internet’s content in order to present the user with relevant information based on their query. This is done in milliseconds and can be made possible with the help of indexing the source of each website. This means that a developer has to take care when programming a website, making sure that the markup is semantically correct and that the content is separated from the design. In addition, the webmaster must take care when writing the content, highlighting important phrases by using markup and optimising the text.

Screen designLately, the most used search engine, Google, has included mobile performance in its weighting of search results, in addition to punishing for false and superfluous information (hidden words, duplicate content, etc.). Search engine optimisation has become a science in its own right, and for businesses, it definitely pays off to hire an expert for guidance.

For the individual user, it’s essential to note that a search engine typically learns your ways and presents the content it “knows” you will like. This can be useful, but depending on the subject it may also be blindsiding the user. Don’t always be happy with the first page of your search’s result!

Brief for new clients

The list below is made by combining the ten bullet points from our lesson with ten of my own, then extracting the ten most essential ones.

  1. Who are your competitors and how do you differ from them?
    Research on competitors is helpful and clever for both parties. It helps the client become aware of their own strengths and purpose, and it helps you create a design that will stand out.
  2. What is your unique selling point? What actions do you want visitors to take on the site?
    I took the liberty of merging two bullet points into one, as they somewhat are covering the same issue: the backbone of the wireframe. The one thing the website visitors come to do or find out about should also be the USP. Sometimes, the client needs to be made aware and helped to express this with words, even though they of course know it deep down.
  3. What is your deadline for completing the site? How big is the budget?
    It’s good and secure for both parties to agree on a budget and deadline beforehand. It’s also a good idea to split both the design process and the payment plan into at least two instalments. Plus, make sure to inform the client about limitations that might occur with a smaller budget. Pros and cons, honest and square.
  4. Do you have any colour preferences? What should the look and feel of the website be?
    This would probably merge with the obsolete “show me your three favourite websites”. Some clients will even already have a design profile, make sure to grab a copy of this from start and explain to your client why sticking to this is important in order to strengthen the brand. (Speaking from experience..!)
  5. Features and technology, maintenance
    Will there be a need for adapting the website to specific events, seasonal/ other? Do you foresee any future expansions to the website — a forum, store, other services? What features should be used on your website? This includes things like contact forms, pictures, videos, etc. Who will be maintaining the content? All of this tells the developer something about which tool to use, for instance, a content management system like WordPress, Umbraco, etc.
  6. Is this a business, organisation, governmental department?
    It’s always important to fulfil accessibility requirements, but it is of critical essence if required for your client by law. Some clients will probably present this for the client brief meeting themselves.
  7. Will you need to collect and save information about your visitors?
    Again, this weighs into the decision on whether to use a CMS or not, if this should be connected to a database and of course also implies extra, GDPR-related, work.
  8. Who will be hosting the website?
    Find out whether the client expects technical maintenance as part of the design deal — are you qualified, and if so: do you have a preferred ISP rather than using one found by your client?
  9. Is the website to be built from scratch or is there an existing website that will serve as the starting point?
    What must be kept from the old site, if there is one? This will both tell you what has worked for the client and what hasn’t, and it will make a base for future design. If you decide to do something completely different, make sure to be able to justify the cause of doing so.
  10. How large is the business, would involving a number of employees be beneficial?
    Will the process benefit from doing a design sprint? Remember to include the client in order to make them feel like they really own the new design.
The full list (1–10 by the tutor, 11–20 by me)
  1. What kind of visitors are you expecting on your website? (Consider their income, interests, gender and age.)
  2. Who are your competitors and how do you differ from them?
  3. What actions do you want visitors to take on the site?
  4. What is your deadline for completing the site? How big is the budget?
  5. What features should be used on your website? (This includes things like contact forms, pictures, videos, etc.)
  6. Please list the names of three sites that you like and explain what you like about them.
  7. Do you have any colour preferences? What should the look and feel of the website be?
  8. Who will be the contact person for this project?
  9. What do you NOT want on your site in terms of text, content, colour and graphic elements?
  10. Who will be responsible for maintaining the website? Will the person have the time and skills to do so?
  11. What is your single selling point? The most important thing to communicate?
  12. Do you know which platform your visitors are most likely to use (desktop, mobile)?
  13. Will there be a need for adapting the website to specific events, seasonal/ other?
  14. Is this a business, organisation, governmental department? (Make sure to fulfil accessibility requirements).
  15. Do you foresee any future expansions to the website — a forum, store, other services?
  16. Will you need to collect and save information about your visitors? (Database, GDPR).
  17. Who will be hosting the website? Will technical maintenance be a part of the design deal?
  18. Is the website to be built from scratch or is there an existing website that will serve as the starting point? What must be kept from the old site, if there is one?
  19. How large is the business, would involving a number of employees be beneficial? Design process, sprint?
  20. Does your 15 years old nephew design logos?

Sources:

Wikipedia, W3.org, usefyi.com, my own knowledge after having worked with web development since 2000.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.