Report Blog Entry
KEY:
= programming
= accessibility & legal
= free / open source front end resources
= colors & layout
= databases
LINKS & RESOURCES
W3SCHOOLS:
programming advice, tutorials, examples
https://www.w3schools.com/
FFFUEL:
html & css resources, svg tools
https://www.fffuel.co/
JUICY STUDIO:
luminocity contrast analyser
https://juicystudio.com/services/luminositycontrastratio.php
ADOBE COLOR:
color contrast viewer, colorblind comparison
https://color.adobe.com/create/color-wheel
COOLORS:
color palette + gradient generator
https://coolors.co/gradient-maker/ef745c-34073d
PEXELS:
free stock images
https://www.pexels.com/
DAFONT:
free fonts
https://www.dafont.com/
UIVERSE:
open source ui elements
https://uiverse.io/
CLIPPY:
clip path maker
https://bennettfeely.com/clippy/
WWEB.DEV:
css separator generator, gradient maker, etc.
https://wweb.dev/resources/css-separator-generator
SHAPEDIVIDER:
svg separator generator
https://www.shapedivider.app/
PRINCIPLES.DESIGN:
design principles
https://principles.design/
FEATHER:
free icons
https://feathericons.com/
HERO PATTERNS:
repeating svg patterns
https://heropatterns.com/
PATTERN MONSTER:
repeating pattern generator
https://pattern.monster/
CSS GRADIENT:
css gradient generator
https://cssgradient.io/
GRADIENTY:
animated css gradient generator
https://gradienty.codes/animations
OPEN CHARGE MAP:
map of electric vehicle charger locations
https://openchargemap.org/site/develop#api
CARBONFOOTPRINT:
html embedded carbon footprint calculator
https://www.carbonfootprint.com/integrate.html
SOCIABLEKIT:
html widget makers
https://www.sociablekit.com/app/users/widgets/create-widget/22/
WCAG:
web content accessibility guidelines
https://www.w3.org/TR/WCAG22/
GOV UK:
data protection + other legislation
https://www.gov.uk/data-protection
HSL PICKER:
hsla color picker
https://hslpicker.com/#00000000
CSS PORTAL:
css generators (text shadow generator link below)
https://www.cssportal.com/css3-text-shadow-generator/
VIDEO DATA PROTECTION POPUP:
code for gdpr compliant video popup
https://github.com/RikdeBoer/GDPR-video
LUCID CHART:
info on relational database diagrams
https://www.lucidchart.com/pages/er-diagrams
VISUAL PARADIGM:
more in depth info on database diagrams:
https://www.visual-paradigm.com/guide/data-modeling/what-is-entity-relationship-diagram/
CODE WITHIN:
html css and js examples (via pinterest):
https://uk.pinterest.com/Code_Within1/_created/
METHOD EDITOR:
svg editor:
https://editor.method.ac/
GOOGLE FONTS:
free editable icons:
https://fonts.google.com/icons
DOCUMENT LAYOUT
ACTIVITY A:
introduction
PURPOSE & AUDIENCE
user personas:
name goal challenges preferred features
show name & website disability, digital accessibility features,
age + any more function divide, etc. responsiveness, etc.
relevant info
user stories & KPIs:
as a... i want to... so that... acceptance criteria
type of website goal / aim what the system needs
user function of feature to do to carry out function
CONTEXTUAL RESEARCH
introduction
common software / technology / competitors + evaluation
industry standards & legislation
accessibility - text formatting, image formatting, colors used, alerts & notifications, user functions such as buttons & links
requirements - must have (functional), should have (non-functional), could have (potential)
privacy & security
sitemap
EVALUATION
ACTIVITY B:
BACK-END DESIGN
technology stack
database diagram & data table - this link has more info: https://www.integrate.io/blog/complete-guide-to-database-schema-design-guide/
key algorithms
FONT-END DESIGN
logo design
color schemes - psychological color theory + 60-30-10 rule, other examples and colours they use (e.g. ikea using blue for trust & reliability, yellow for welcoming & family)
fonts & typefaces
user flow
layout / wireframes
prototypes
assets used
TESTING
testing plan & feedback
expected outcomes of each test
evaluation
references
remember to explain WHY these choices help the company reach their goals!!!!
DOCUMENT 2 LAYOUT
DEVELOPMENT LOG
date of development
[screenshot of code]
the code above is used to create the header element using... (show what it does, how its made, if it was easy / hard to make, how it improves user experience)
TEST LOG
program tested test type input data expected outcome outcome notes
ASSETS LOG
asset format description of content & use source
CODE SNIPPETS
header:
<img src="https://i.postimg.cc/L6ZXSvC1/image.png"></img>
<img src="https://i.postimg.cc/mDDL5S1h/image.png"></img>
navigation:
<img src="https://i.postimg.cc/xqr9qDxb/image.png"></img>
<img src="https://i.postimg.cc/ryDWd1Z8/image.png"></img>
<img src="https://i.postimg.cc/L4GPjJGj/image.png"></img>
grid layout:
<img src="https://i.postimg.cc/4xQhCBy1/image.png"></img>
dark mode toggle:
<img src="https://i.postimg.cc/g0cLG86b/image.png"></img>
<img src="https://i.postimg.cc/pd0hrrDh/image.png"></img>
<img src="https://i.postimg.cc/0QFzG4X9/image.png"></img>
root colors:
<img src="https://i.postimg.cc/h4Qz4Shv/image.png"></img>
border radius info:
https://pin.it/652YBNAzs
strony tekst (zwdr25) - Online Notepad
styl do strony (zwdr25) - Online Notepad
skrypt (zwdr25) - Online Notepad
https://anotepad.com/notes/wkjmrkcp
https://jumpshare.com/b/C01udko4PoV6qVvtGtju
https://anotepad.com/notes/hpedc7xh
https://www.commoninja.com/
^^^ link needs to be google.com/maps copy from browser not share button
Comments
Comments disabled.