D4DME – Webpage Wireframe and Mockup Design

To begin the design of the webpage I had to wireframe the design using Photoshop. In order to understand how to do it I looked up video tutorials on Lynda that taught me it.

http://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.html

The video proved to be highly useful as it allowed me to understand the importance of wireframing and how it could be done.

From there I went on to designing my webpage using wireframes on Photoshop. Below are screenshots of how I did it:

Screen Shot 2015-02-23 at 18.37.19

Screen Shot 2015-02-23 at 18.37.54

The wireframe experience let met understand the importance of laying out the webpage so that they are positioned consistently. It would also be handy when measuring the pixels and scale of the later boxes in CSS.

I then went on to creating a mockup design by adding colours and drop shadows to let me get a better idea on how it would look when designing with CSS.

Screen Shot 2015-02-23 at 18.39.53

Screen Shot 2015-02-23 at 18.45.08

Screen Shot 2015-02-23 at 18.52.59

Screen Shot 2015-02-23 at 19.47.28

Screen Shot 2015-02-23 at 21.35.38

Screen Shot 2015-02-24 at 14.00.42

After debating a lot about the colour and theme of the design we decided to change it to a more blackboard design.

Screen Shot 2015-03-09 at 16.42.50

Overall this experiment has taught me a lot about the importance of preparation when looking design a webpage. The techniques were very useful to pickup and will prove to be handy in the future.

Advertisements

D4DME – WebApp Design Research

This post is about how I researched into the web app designs. To begin with I wanted to get an idea of the styles that were out there and which one would suit our idea. I wanted to make sure the design was quite modern and in trend.

I initially looked into Material Design which is the upcoming design platform for Google. It is a design that rationalises space, is bold and has continuity.

materialdesign_introduction

I thought that this theme would be ideal for our idea as it is very bold and clean. This allows the audiences to be visually attracted to the contents and avoid complexity.

My next step for the research was to look at live websites as well as sample websites using Pinterest.

11005586_10153207235459954_830437064_n

11006145_10153207235434954_1544682373_n

Once we had an idea about the layout we’d like our website to be then we’d began looking at the theme of it. We chose the blackboard style theme.

Below are some glyph icons I found from Pinterest for inspiration.

11016655_10153207235449954_74622755_n (1)

In conclusion to the research I was able to share my findings with my team members whom were happy to accept and agree with my suggestions. It was important that the WebApp design research was taken into consideration as they would be used to build around our php later on.

D4DME – Sorting with PHP

At today’s workshop we were given an insight on how to make a webpage sort out particular contents. These are commonly used within social networking website, that will allow us to view the most recent contents. For example; News Feed on Facebook. We then added a an if statement that would show an error message if the wrong information was inputted.

Below are screenshots on how I achieved this:

Screen Shot 2015-01-13 at 11.28.58

Screen Shot 2015-01-13 at 11.29.11

Screen Shot 2015-01-13 at 11.29.20

Screen Shot 2015-01-13 at 11.32.06

Adding the error message

Screen Shot 2015-01-13 at 11.39.19

The sorting page was largely based around if statements. This was due to it determining the information that has been inputted and that “if” the information was not accepted or recognise then it would send out an error.

This workshop has allowed me to really understand the functionalities of sorting and how it used to create interactive web pages. I’ll be keeping this in mind when I work on my new project as we will be wanting upload the latest recipes in order.

D4DME – Login and Logout using PHP

At today’s workshop we were taught how to create and function a login page using PHP. A login page is an essential part of majority webpages as it allows users to connect with the webpage and gain access to the features available for members only.

Below are screenshots of how I created it:

Login Code Screenshot

Login Code Screenshot 2

Login Example Screenshot

Screen Shot 2015-01-22 at 17.48.22

Screen Shot 2015-01-22 at 17.48.36

Screen Shot Welcome Login

Logged In

Screen Shot When Logged In

Logged Out

Screen Shot When Logged Out

As you can see the process in creating a functioning login page wasn’t too complicated. However it did take a few trial and errors to get the hang of writing in php.

Conclusion:

The experience allowed me to really have an insight on how other websites create their own login page. It showed me the process to create it remains very much the same but the contents can differ depending on what it is designed for.I hope that from here I’ll be confident enough to create my own login page when needed.

Group Overview

My first thoughts about a collaborative project really excited me as I am always keen on learning and understanding how other people approach designs. When I first spoke with my group mates I knew that it wouldn’t be a problem in regards to work efforts as we all seemed very keen to make it happen.

After our first group meeting (which I blogged about earlier: https://chaceteera.wordpress.com/2015/02/18/group-meeting/) I was left with a positive impression about our group. This was due to our approach towards the idea and how we were all able to come to an agreement about the project as well as the individual roles each of us had. This was also a positive as we were able to identify the strengths and weaknesses between each of us and therefore allowed us to decide which role was most suitable.

Communication was fairly easy as we set up a group chat on Facebook in which we used to arrange our first meeting. The chat would go on to be a tool that we used to share our ongoing works and ideas so that we were all up to date.

Overall I’m very pleased and confident that our group will be able to work well and create a successful web app.

Blog System

We’ve been asked to create a blog system to ensure that all our posts in the future is easy to understand and consistent.

We were then given several suggestions on how this can be achieved such as the use of bullet points, bold, italics, consistent text margins, tags, categories etc.

Text

  • All text needs to be wrapped with a consistent margin.
  • All text should be align from left.
  • Important text and subheadings should be in bold.
  • References and names should be in italics.
  • Use bullet points to break down the steps.
  • Start each post with a summary.
  • End each post with a conclusion.

Image

  • Image should be wrapped in the same margin as text.
  • All printed sketches and documents should be scanned and converted into an image for the blog.
  • URL of the images should be captioned underneath the image.

Tags

  • All relevant subjects should be tagged.

Category

  • Categorise each post to the specific unit.

As of this post I will ensure that all future posts follow the guidelines that I have made. This will allow my blog to be consistent and look as professional as possible. 

Entity-Relationship Diagram

“An entity-relationship diagram is a visual representation of an information system. That shows a relationship between people, objects, places, concepts or events within that system.” – Margaret Rouse

This data modelling technique is commonly used within businesses that helps structure a process.

There are three main components of an ERD are the entities which are objects or concepts that can have data stored about them, the relationship between those entities, and the cardinality, which defines that relationship in terms of numbers. (2014, Rouse)

The three main cardinal relationships are:

  • One-to-one (1:1). For example, if each customer in a database is associated with one mailing address. (2014, Rouse)
  • One-to-many (1:M). For example, a single customer might place an order for multiple products. The customer is associated with multiple entities, but all those entities have a single connection back to the same customer. (2014, Rouse)
  • Many-to-many (M:N). For example, at a company where all call centre agents work with multiple customers, each agent is associated with multiple customers, and multiple customers might also be associated with multiple agents. (2014, Rouse)

Reference: 

Rouse, Margaret. ‘What Is Entity Relationship Diagram? – Definition From Whatis.Com’.SearchCRM. N.p., 2014. Web. 19 Feb. 2015.