Web-Authoring-Research @elaines-web-diary - Tumblr Blog

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

Great overview on Responsive Design

A comprehensive guide to help you understand and learn CSS Grid Layout, by Jonathan Suh.

A link from the web forum that I think is a great resource! Covers the basics of grids in a quick and visual format

Skills!

As I continue my studies and Finish up with the CSS Chapters in Fundamentals of Web Development, there seems to be so much more to learn in this field! However, what I’ve learned so far is that practice and implementation are key! As our next project is built on HTML and CSS, hopefully I can apply what I have learned so far. And after this project, I can begin to learn some Javascript.

This article has a quick run down of what skills every web developer should have! They have listed both tech skills and soft skills so definitely alot to keep busy with!

https://skillcrush.com/blog/be-a-successful-web-designer/

Github?

https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/GitHub

So today I have sat down at my computer with my coffee and notepad and decided to read up about Github. Mozilla has been a great resource so far and while I think I’m still very new to web development (and hence contributing to Github is a long way off yet!) I have never fully understood how to use the platform.

The link above runs through the basics and hopefully I can learn alot more about the platform in the coming weeks, and maybe even contribute to forums and projects over the summer!

Importance of Consistency

https://gofishdigital.com/guide-design-consistency/

2020 DESIGN TRENDS

https://blog.tubikstudio.com/major-ui-design-trends/

All in One Guide to Web Design

https://www.pagecloud.com/blog/web-design-guide

From inspiration to Implementation this is a great article which runs through each process, offering resources and tips along the way

CMS - Taking over the Web

Content Management Systems, Quick and Easy Web Development.

So having used wordpress for our past assignment, one has to question whether the ease of using a system that offers reusable code, adaptable plugins and instant visibility to website creation, will overtake custom web developers who create their websites from scratch using HTML, CSS and Javascript.

https://www.wearemarketing.com/blog/advantages-custom-website-development.html

This is an interesting article which outlines the pros and cons of both.

As with everything, it’s nuanced and so what will work for some sites, won’t work for others. Some sites would undoubtably function with a CMS website whereas others would thrive with a custom build.

A very interesting and informative read which I will refer back to in the future!

WIREFRAMING

https://www.invisionapp.com/inside-design/how-to-wireframe/

The Design Process!

Web Design is vital for the creation of beautiful Websites.

So, as with all design projects, the most important stage…is the planing stage.

Design is intricate and time management is key!

Our next assignment requires us to design a site using the content management system, Wordpress. Before starting this project my main initiate is to have my design process decided upon.

This process involves:

Planning Content

Creating a quick Site Map

Creating a wireframe

Deciding on the Aesthetic/Mood and Tone of Site

Mockups

Implementation!

Hopefully by following this plan, I can create a website which is easy to navigate and enjoyable for the viewer.

This post will appear on my future Wordpress site so if you are reading this, you have reached the end of my blog posts to date!

Let me know what you think of my design and content and if my design planning and process was effective.

Search Engine Optimisation

This article and diagram is a great outline on the I importance and hierarchy of SEO

Behind Every Great Website:

WEB DESIGN

For the past few posts I’ve been studying the history of the internet and the world wide web.

I’ve been exploring HTML & CSS and the importance of semantic code to create accessible websites.

Now I am researching how all of these different elements of web development culminate to create a great user experience - Web Design.

From what I have experienced though my use of the web and learned during class, a well designed site is very important. To create such a site, one should consider these five fundamentals:

Content

Usability

Aesthetics

Visibility

Interaction

The above relies on graphic design, content production, user research and layout design. The goal is to create a site which the user finds easy and enjoyable to navigate, creates a great first impression and heeds to the customers needs.

There are many factors that need to be considered (which I hope to explore in my future posts) but for the moment some of the obvious considerations include:

High Quality Images

Responsive Design

Colour Schemes

Load Time

Navigation

Considering that stats deem 75% of users judge a companies credibility based on their websites design, of which users spend an average of 5.59 seconds consuming written content… the above factors play a vital role in attracting users to a site.

First Assignment!

First (simple) site of this Interactive Digital Media course complete!

A site about myself, the content was very easy to source.

The above studies of the web, user interaction, HTML & CSS were fundamental to the process and overall the experience was stress free.

The process involved planning the content, documenting the files with detailed comments and testing the page in different browsers, to finalise a two page website which has a brief self-description and photo on the home page, with a few lists on the linked secondary page.

Hopefully what I have learned through this assignment will contribute to my next!

The Difference of Good Design

An interesting comparison of re-designed websites and the positive impacts on the businesses.

CSS

As a designer, learning CSS has been fun..sometimes frustrating..but mostly an interesting learning curve.

I am a devoted adobe user. I have spent hours upon hours in photoshop and illustrator sketching, designing and implementing changes with the click of a button and the drag of a mouse. So to write my designs in CSS is a new concept!

Where I would normally drag a guide to line up the text on my page, I now have to foresee the layout while writing HTML, group the content within an ID/Class, and then create a padding attribute within the css styles sheet.

It’s a different process. That said, it just emphasises the need for planning when creating a website. Just as with illustrative or graphic design, foreseeing problems in creative endeavours can save so much time!

CSS goes hand in hand with HTML and to know one without the other is a recipe for lots..and lots…of ctrl +z

Just as I experimented with the inspect tool for HTML, I have explored some sites these past few days, changing the colours of fonts, their spacings and sizes, and it’s safe to say I will never look at a site the same again!

List Of Semantic HTML

How to use semantic html when creating a website

Trending Blogs

Recently Viewed Blogs

Web-Authoring-Research