28
part 3 research Emily Maguire
part 3 researchEmily Maguire
What is Responsive design and why do we use it?
‘Essentially, responsive design is a way to put together a website so that it automatically scales its content and elements to match the screen size on which it is viewed. It keeps images from being larger than the screen width, and prevents visitors on mobile devices from needing to do extra work to read your content. The ultimate goal of responsive design is to avoid the unnecessary resizing, scrolling, zooming, or panning that occurs with sites that have not been optimized for different devices. It is often very difficult to navigate these sites, and it may even cost you potential customers who become frustrated with trying to figure out how to do something. Responsive website design also replaces the previous need to design a dedicated mobile website for smart phone users. Now, instead of designing multiple websites for different screen sizes, you can design just one website that scales up or down automatically to match the device it’s being viewed on.
Responsive design can help you solve a lot of problems for your website. It will make your site mobile-friendly, improve the way it looks on devices with both large and small screens, and increase the amount of time that visitors spend on your site. It can also help you improve your rankings in search engines.’
Benefits of using Responsive Design:-Cost effectiveness-Flexibility-Improved user experience-Search engine optimization gains-Ease of management
1. COST EFFECTIVENESSMaintaining separate sites for your mobile and non-mobile audiences can get expensive. By using responsive design, you can save money by eliminating the cost of paying for a mobile site. You will only need to invest in a single site design to appeal to all visitors and all devices.
2. FLEXIBILITYWhen you have a website with responsive design, you can make changes quickly and easily. You do not need to worry about making changes on two websites. This flexibility is a huge advantage when you just want to make a quick design tweak or fix a typo on your site—you only have to do it once.
3. IMPROVED USER EXPERIENCEUser experience is crucial to website owners. You want people to like your site, and you want it to be easy to use to convince them to come back. If someone visits your website on a mobile device, and it takes forever to load or your pictures do not have the proper resolution, it can make your company appear unprofessional.
https://www.webfx.com/web-design/why-responsive-design-important.html
frontend and backend:
what is frontend development:‘The frontend of a website is what you see and interact with on your browser. Also referred to as “client-side”, it includes everything the user experiences directly: from text and colors to buttons, images, and navigation menus.’
What is Backend Development:‘For static sites, all the necessary information that determines what’s on the web page is in the frontend code itself. Static websites are good for showcasing things like businesses, restaurants, portfolios, or professional profiles. But if you want to turn your site into something that users can interact with, you’ll need to get more in-depth with regard to what’s going on behind the scenes of the website.
The backend (or “server-side”) is the portion of the website you don’t see. It’s responsible for storing and organizing data, and ensuring everything on the client-side actually works. The backend communicates with the front-end, sending and receiving information to be displayed as a web page. Whenever you fill out a contact form, type in a web address, or make a purchase (any user interaction on the client-side), your browser sends a request to the server-side, which returns information in the form of frontend code that the browser can interpret and display.
Your new site will need to have additional backend components to make it a dynamic web application — a website whose content can change based on what is in its database , and that can be modified by user input. This is distinct from a static website, which doesn’t require a database because its content generally stays the
same.'
https://careerfoundry.com/en/blog/web-development/whats-the-difference-between-frontend-and-backend/
Non Database cms:HOW DOES A CMS WORK WITHOUT A DATABASE:‘Content management systems deal with software with which you can create, edit and manage content for websites and other forms of media. Thanks to a graphical interface, users who have access to the system can generally operate a CMS without any prior HTML and programming knowledge. Plugins can help complement the majority of CMS programmes with features such as contact forms, polls and calendars.
With most CMSs the content of articles or pages is separated from the layout and stored in databases, such as MySQL or MariaDB. A small CMS system for-goes a database’https://www.ionos.co.uk/digitalguide/hosting/cms/cms-without-database-a-useful-alternative/
aDVANTAGES of a CMS:-CMSs without databases are usually quite plain and are limited to the most essential features and therefore users don’t need much of a familiarisation period.
-Web project backups are easily taken care of since no complex database backup is required, so data just needs to be downloaded from thewebspace.
-The direct transfer of information without having to detour over a database means there is a shorter loading time and faster access to the web project.
-A small CMS system generally doesn’t require much webspace and doesn’t demand any special requirements from the hardware.
disadvantages OF A CMS:- The possibilities of non-database CMS systems are limited, which is why the systems are best suited to smaller projects with minimal static sites. Dynamic websites cannot be created without databases.
- Since simple CMS systems usually only offer small communities, the user is often left alone with questions and problems and has to sort through documents to work it out themselves.
- The often unavailable codes and minimal distribution of CMS software can mean that the simple CMS becomes boring for the user since there is less chance of development.
- Not working in a structured and neat manner on a simple content management system could make it difficult to find specific content again.
https://www.ionos.co.uk/digitalguide/hosting/cms/cms-without-database-a-useful-alternative/
DATA BASE CMS:what is a database driven website?‘A database-driven website is one that uses a database for collecting and storing information. A database stores information in a structured way using tables on a web server.
Web pages are created on the fly through the use of programming languages (such as PHP), which store and retrieve data in the database.
Site owners don’t have to worry about learning a programming language. They interact with the site through an easy-to-use content management system or CMS. Database-driven websites are more complex to design, but can be much easier for you to maintain your site’s content than a static HTML web site.’
Advantages of a database driven website:-Managing the website can be done with minimal training.-Changing the website content can be done without specialized knowledge or expertise.-The website administrator does not need to know HTML in order to make any changes.-Most database-driven websites allow visitors to search the database to find a product or answer a question. All they have to do is enter the product name or question in the search form.-Your database-driven website can be as large as you choose to make it. New pages will be created automatically as you add more records to your database.
https://www.crimsondesigns.com/wordpress/database-driven-website.php
disadvantages of a database driven website:-Cost associated with development when compared to static sites-Initial development time can take longer
https://www.bbc.com/bitesize/guides/z96psbk/revision/4
WIREFRAME app:
WIREFRAME app:
WIREFRAME WEBSITE:
WIREFRAME WEBSITE:
WIREFRAME WEBSITE:
logo designs:
These are some drawings of logo ideas I have created. I wanted my logo to include culture and art within the design. I thought about using certain words to connect them together. One word I came up with was (word). The reason I thought of this word was because I thought it worked well for symbolising then two words and to represent the company. I also thought about including certain symbols to represent these words. Art easels, symbols of coming together, just text etc. From drawing out all of my logo designs, I decided to go with just the word as it is simple, clean but effective. It will also work well in multiple formats. The typography of the word is also very sketchy symbolising the idea of art. I would like to develop this logo idea on illustrator to see how it would work.
logo designs:
logo designs:
LIVE ART CULTURELIVE ART CULTURELIVE ART CULTURE
From choosing which drawing I would like to develop for my logo, I decided to develop this idea within illustrator. Firstly, I placed my logo in illustrator. I then carried onto image trace the drawing to remove the white background, this being the paper, this makes it become transparent so I can place it on certain objects. Once I did that, I decided to experiment. I started experimenting with circle formats, sub headings for the logo, colour and drop shadows. After experimenting, I decided I wanted to go ahead with the last logo I produced as I felt as though it looked clean, simple but was effective for the audience. Adding the drop Shadow to the text makes it have some depth and become more interesting instead of being a flat layer of text. I kept the colour theme montone as I felt as though it kept the idea of progressionalism. I used a a sans serif font for the subheading which was very lite and a lot smaller meaning it would not detract the audience from the title of the company And also keeps the clean approach to the design
logo designs:
LIVE ART CULTURE
EXPERIMENTING:
WELCOMEto
whats near
you
genreof
SEARCHabout
usPROFILE contact
ONLINE LIVE ART AND CULTURE EXHIBITION SEARCH
Paint Image Used:https://creativemarket.com/rudchenko/241641-Abstract-acrylic-painted-background
For my first experiments , I decided to use colour against the monotone logo. I wanted to experiment with the idea of paint and the texture it creates , I thought this would work well with the plain title as the texture would add more depth. I also include colour within the subheadings on the home page of the app to add more interest. However, after adding this I still kept the idea of it being clean and simple and not overpowering it too much. I think this idea worked well however I want to carry on and experiment more with different layouts
EXPERIMENTING:
WELCOMEto
whats near
you
genreof
SEARCH
about us
PROFILE contact
ONLINE LIVE ART AND CULTURE EXHIBITION SEARCH
EXPERIMENTING:
ONLINE LIVE ART AND CULTURE EXHIBITION SEARCH
LIVE ART CULTURE
WELCOMEto
whats near
you
genreof
SEARCH
about us PROFILE contact
ONLINE LIVE ART AND CULTURE EXHIBITION SEARCH
I then carried on to experiment with minimal colour to see how it would work together. I decided to carry on the orange tone used in the first experiment but add a plain white background and use the orange as an accent colour. By adding the drop Shadow to my logo, it helped make the logo become alive against the white background. I think this design looked very clean and very professional and was not overpowering for the spectator.
EXPERIMENTING:
LIVE ART CULTURE
WELCOMEto
whats near
you
genreof
SEARCH
about us
PROFILE contact
ONLINE LIVE ART AND CULTURE EXHIBITION SEARCH
Development:
logo Developed:
After designing my logo, I decided I did not like the way it looked, I wanted to make the logo become more professional. I wanted to include ideas of culture, art and the the letter T to symbolise what the brand is about. I wanted to make my logo simple and clean so it was not too overpowering or overcrowded and was straight to the point. I used greys and whites to make the logo have a clean, professioanl feel and used the blue to symbolise the paint. At the bottom of the logo, I have included the brand name and also what is it, this is placed in a subheading. I used a sans serif font for my title and subheading to keep the idea of cleaness and keeping it simple so it is not too overpowering. After developing my logo, I feel as though it links better to my idea than the other logo it produced. I also think this logo makes the brand look more professional overall.
LIVE ART CULTURETALENT
App Screens:
After developing my app idea, I decided to use InVision as my app prototype. After doing my part 4 research into different prototype systems, I decided InVision was the best app developer to use. It has a professional appearance to it and it easy to navigate. I used Adobe Illustrator to produce the app designs, I used a 12x12 grid system to make sure everything was neat and laid out properly. I also made sure my document set up was correct, in InVision, you can choose which device to produce your prototype in, I chosen iPhone10. This meant I had to find the correct document settings to place within illustrator. I wanted to keep my app quite simple, I did not want to overcrowd the design. I also wanted my app to be easy to use so by keeping the design simple and making the sections large, it makes it easy to read and is easy to use. Here is the first four screens I produced. On the home page, I have included two buttons, one button being search which will take you directly into the search engine, and the other button being your profile. The second screen shows your location search. Before finding any exhibitions, we want to know your location, this means it will narrow down your search and will be easier for us to find the best exhibitions near you. There is two choices for your location search, you can simply type in your area or you can turn on your location services so we can track your area. This then carries onto the third app screen. On the fourth app screen, you get a choice of what exhibition you would be interested in seeing, since this app is for both live art and culture exhibitions.
App Screens:
Carrying on, the next screen will take you to a category option after you’ve chosen which exhibition subject you would like to visit. You get the choice of typing in a category you would like to see, there is also key words in-case you are not sure. On the next page, you also get the choice of adding key words to refine your search. However, you do not have to do this id you don’t want too. Once you have done this, the next screen gives you a choice of date and times. You can chose a date and time for when you would like to go to see exhibitions, also making your search easier. Once you’ve filled in all of your information to help refine your search, you will then reach a page full of exhibitions which we think we would benefit you and would be interested in. You would then choose an exhibition which you would be interested in.
App Screens:
Once you’ve chosen an exhibition, you will then receive more information about the exhibition in more detail. You then get the choice to visit the exhibition venue page. The next screen shows other exhibitions which are also on at the certain venue or gallery, giving you more choice. You can then proceed to find out more information about the venue or gallery if you do not want to go onto the venue/galleries page.
App Screens:
Within my app, there is also another section. I have also include a profile section within my app to create some communication. On the home screen, there is the option to go to your profile. Once this button has been clicked, you will then be transferred into your profile page. Here you will include a profile picture, name, age and location. This will be just some basic information. You will then need to fill out a section which will include categories you are interested in, such as screen print-ing, painting, graphic design, photography etc. Once you have filled out your interested, there will be multiple profiles which appear which show different people who are interested in the same subjects as you, you also have a choice to message these people. At the bottom of the page, there is a messages button which will take you to your messages. On the messages page, it will include private messages with different people and also group messages you are included in. By including a profile section within my app, I think it adds more dimension to the app and creates the idea of communication, being able to communicate with people who have the same interests as you.
Website:
This is my final website design, I created this website through WordPress. The reason I chose WordPress was because it was a professional way to produce my website. My webste has been developed as I decided to make my website become more simpler, and focus more on my app. However, even though I would like to focus most of my information within the app, I still included information on the website. On the website I included a home page, an about us section, download our app and a contact us section. I still wanted to include information on my website to still add depth and detail for the audience. On the home page, I included information about what Talent is and how to use it, a quote about Talent, that you can create a profile and a contact section. I wanted to keep the home page simple and clean so it is easy to use and navigate around. I have also included a navigation bar at the top of the homepage which includes each section and also a log in and log out section.
Website:
On the about us section, I have included what Talent is about and how we make it easier to search for exhibitions near you. Also, I have also included images within the sidebar to add more detail and depth to the pages as they are just information pages. I have also included the talent logo at the bottom of the page. I have kept the information simple and in a lagre font to make it easy to read, I have also included subtitles and titles to keep it organised. On the download our app page, I have talked about how downloading our app can give you the best experience, this has been presented in a small paragraph. I have also included a photo carousel which has screen-shots of the app, I have stated above the app if the person is unsure about downloading, this is what it is like. Also, at the bottom, I have included how you can download the app, through the app or play store. To represent this, I have included the logos.
Website:This is the contact us section. In this section, I wanted to include multiple ways the audience could get in contact if they had any questions or queries. When you first go onto the contact page, there is a small paragraph stating that the company are happy to answer questions etc. After this section, there is contact information presented. For example an address is presented with a google map, an email address and a phone number. By including this page, it makes the audience feel as though they can get in touch with the company and has a sense of professionalism.
Overall, I do think my website works well to support what my company portray. My website is a little bit different to my original wire-frames but that is because I decided to make it more app based and use the website to promote the app and I think the website is successful for doing that.
Image References: All photos from Unsplash
-ANONIn-text: (Anon, n.d.)Your Bibliography: Anon, (n.d.). [image] Available at: https://unsplash.com/photos/gfVofr15ICc [Accessed 4 May 2019].
-ANONIn-text: (Anon, n.d.)Your Bibliography: Anon, (n.d.). [image] Available at: https://unsplash.com/photos/oknt6ZaaueU [Accessed 3 May 2019].
-ANONIn-text: (Anon, n.d.)Your Bibliography: Anon, (n.d.). [image] Available at: https://unsplash.com/photos/MmmPJU8vkSs [Accessed 3 May 2019].
-ANONIn-text: (Anon, n.d.)Your Bibliography: Anon, (n.d.). [image] Available at: https://unsplash.com/photos/JIdR97bCqYk [Accessed 3 May 2019].-ANONIn-text: (Anon, n.d.)Your Bibliography: Anon, (n.d.). [image] Available at: https://unsplash.com/photos/zkKHbT6ICj8 [Accessed 3 May 2019].
-ASPECT RATIOIn-text: (Aspect Ratio, n.d.)Your Bibliography: Aspect Ratio. (n.d.). [image] Available at: https://unsplash.com/photos/GfmIT_pseDQ [Accessed 6 May 2019].
-DELBREGHE, J. P.GraffitiIn-text: (Delbreghe, n.d.)Your Bibliography: Delbreghe, J. (n.d.). Graffiti. [image] Available at: https://unsplash.com/photos/vlQnJZ5rOwY [Accessed 5 May 2019].
-EMARTS, E.Screen PrintingIn-text: (emarts, n.d.)Your Bibliography: emarts, e. (n.d.). Screen Printing. [image] Availa-ble at: https://unsplash.com/photos/ZCTh4f4mv18 [Accessed 8 May 2019].
-JOHNSON, S.Abstract PaintingIn-text: (Johnson, n.d.)Your Bibliography: Johnson, S. (n.d.). Abstract Painting. [image] Avail-able at: https://unsplash.com/photos/VCLNNMRl07k [Accessed 4 May 2019].
-KUTEPOV, V.Woman’s PortraitIn-text: (Kutepov, n.d.)Your Bibliography: Kutepov, V. (n.d.). Woman’s Portrait. [image] Avail-able at: https://unsplash.com/photos/XU0YcfPXKI4 [Accessed 3 May 2019].
